GroupBox Menubar in header wip
diff --git a/eclipse-scout-core/src/form/fields/groupbox/GroupBox.js b/eclipse-scout-core/src/form/fields/groupbox/GroupBox.js
index 9ccd833..3d6bdb7 100644
--- a/eclipse-scout-core/src/form/fields/groupbox/GroupBox.js
+++ b/eclipse-scout-core/src/form/fields/groupbox/GroupBox.js
@@ -17,7 +17,6 @@
FormField,
GroupBoxGridConfig,
GroupBoxLayout,
- GroupBoxMenuItemsOrder,
HAlign,
HtmlComponent,
LogicalGridData,
@@ -43,10 +42,10 @@
this._addCloneProperties(['menuBarVisible', 'bodyLayoutConfig', 'borderDecoration', 'borderVisible', 'expandable', 'expanded', 'gridColumnCount', 'scrollable', 'subLabel']);
this.fields = [];
- this.menus = [];
- this.menuBarVisible = true;
- this.menuBarPosition = GroupBox.MenuBarPosition.AUTO;
- this.menuBarEllipsisPosition = MenuBar.EllipsisPosition.RIGHT;
+ // this.menus = [];
+ // this.menuBarVisible = true;
+ // this.menuBarPosition = GroupBox.MenuBarPosition.AUTO;
+ // this.menuBarEllipsisPosition = MenuBar.EllipsisPosition.RIGHT;
this.notification = null;
this.bodyLayoutConfig = null;
this.borderDecoration = GroupBox.BorderDecoration.AUTO;
@@ -94,10 +93,13 @@
constType: GroupBox.MenuBarPosition
}]);
this._setBodyLayoutConfig(this.bodyLayoutConfig);
- this.menuBar = scout.create('MenuBar', {
- parent: this,
- menuOrder: new GroupBoxMenuItemsOrder()
+ this.header = scout.create('GroupBoxHeader', {
+ parent: this
});
+ // this.menuBar = scout.create('MenuBar', {
+ // parent: this,
+ // menuOrder: new GroupBoxMenuItemsOrder()
+ // });
this._setFields(this.fields);
this._setMainBox(this.mainBox);
this._updateMenuBar();
@@ -366,7 +368,7 @@
_setMainBox(mainBox) {
this._setProperty('mainBox', mainBox);
if (this.mainBox) {
- this.menuBar.setCssClass('main-menubar');
+ this.header.menuBar.setCssClass('main-menubar');
if (this.scrollable === null) {
this.setScrollable(true);
}
@@ -470,7 +472,7 @@
return scout.create('ButtonAdapterMenu',
ButtonAdapterMenu.adaptButtonProperties(button, {
parent: this,
- menubar: this.menuBar,
+ menubar: this.header.menuBar,
button: button,
// initially defaultMenu should only be set if defaultButton is set to true, false should not be mapped as the default defaultMenu = null setting
// would be overridden if this default null setting is overridden MenuBar.prototype.updateDefaultMenu would not consider these entries anymore
@@ -520,13 +522,14 @@
}
_getCurrentMenus() {
- if (this.menuBarVisible) {
+ if (this.header.menuBarVisible) {
return [];
}
return super._getCurrentMenus();
}
setMenuBarVisible(visible) {
+ this.header.setMenuBarVisible(visible);
this.setProperty('menuBarVisible', visible);
}
diff --git a/eclipse-scout-core/src/form/fields/groupbox/GroupBoxHeader.js b/eclipse-scout-core/src/form/fields/groupbox/GroupBoxHeader.js
new file mode 100644
index 0000000..c561c65
--- /dev/null
+++ b/eclipse-scout-core/src/form/fields/groupbox/GroupBoxHeader.js
@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2010-2019 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ * BSI Business Systems Integration AG - initial API and implementation
+ */
+
+import {GroupBox, GroupBoxMenuItemsOrder, MenuBar, scout, Widget} from '../../../index';
+
+export default class GroupBoxHeader extends Widget {
+
+ constructor() {
+ super();
+ this.menus = [];
+ this.menuBarVisible = true;
+ this.menuBarPosition = GroupBox.MenuBarPosition.AUTO;
+ this.menuBarEllipsisPosition = MenuBar.EllipsisPosition.RIGHT;
+ }
+
+ _init(model) {
+ super._init(model);
+
+ this.title = scout.create('GroupBoxTitle', {
+ parent: this
+ });
+
+ this.menuBar = scout.create('MenuBar', {
+ parent: this,
+ menuOrder: new GroupBoxMenuItemsOrder()
+ });
+ }
+
+ _render() {
+ super._render();
+ this.$container = this.$parent.appendDiv('header');
+ }
+
+ setMenuBarVisible(visible) {
+ this.setProperty('menuBarVisible', visible);
+ }
+
+ _setMenuBarVisible(visible) {
+ this._setProperty('menuBarVisible', visible);
+ this._updateMenuBar();
+ }
+
+ _renderMenuBarVisible() {
+ if (this.menuBarVisible) {
+ this._renderMenuBar();
+ } else {
+ this.menuBar.remove();
+ }
+ this._updateMenus();
+ this.invalidateLayoutTree();
+ }
+
+ _renderMenuBar() {
+ this.menuBar.render();
+ if (this.menuBarPosition === GroupBox.MenuBarPosition.TITLE) {
+ // move right of title
+ this.menuBar.$container.insertAfter(this.$subLabel);
+ } else if (this.menuBar.position === MenuBar.Position.TOP) {
+ // move below title
+ this.menuBar.$container.insertAfter(this.$title);
+ }
+ }
+
+ setMenuBarPosition(menuBarPosition) {
+ this.setProperty('menuBarPosition', menuBarPosition);
+ }
+
+ _renderMenuBarPosition() {
+ var position = this.menuBarPosition;
+ if (position === GroupBox.MenuBarPosition.AUTO) {
+ position = GroupBox.MenuBarPosition.TOP;
+ }
+
+ var hasMenubar = position === GroupBox.MenuBarPosition.TITLE;
+ this.$title.toggleClass('has-menubar', hasMenubar);
+
+ if (position === GroupBox.MenuBarPosition.BOTTOM) {
+ this.menuBar.setPosition(MenuBar.Position.BOTTOM);
+ } else { // top + title
+ this.menuBar.setPosition(MenuBar.Position.TOP);
+ }
+
+ if (this.rendered) {
+ this.menuBar.remove();
+ this._renderMenuBarVisible();
+ }
+ }
+
+ setMenuBarEllipsisPosition(menuBarEllipsisPosition) {
+ this.setProperty('menuBarEllipsisPosition', menuBarEllipsisPosition);
+ this.menuBar.setEllipsisPosition(menuBarEllipsisPosition);
+ }
+
+ _renderMenuBarEllipsisPosition() {
+ this.menuBar.reorderMenus();
+ if (this.rendered) {
+ this.menuBar.remove();
+ this._renderMenuBarVisible();
+ }
+ }
+}
diff --git a/eclipse-scout-core/src/form/fields/groupbox/GroupBoxTitle.js b/eclipse-scout-core/src/form/fields/groupbox/GroupBoxTitle.js
new file mode 100644
index 0000000..855aaea
--- /dev/null
+++ b/eclipse-scout-core/src/form/fields/groupbox/GroupBoxTitle.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2010-2019 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ * BSI Business Systems Integration AG - initial API and implementation
+ */
+import {scout, tooltips, Widget} from '../../../index';
+
+export default class GroupboxTitle extends Widget {
+
+ constructor() {
+ super();
+ this.label = null;
+ this.subtitle = null;
+ this.labelVisible = false;
+ this.expandable = false;
+ }
+
+ _init(model) {
+ return super._init(model);
+ }
+
+ _render() {
+ super._render();
+ this.$container = this.$parent.appendDiv('title-area');
+ this.$label = this.$container.appendDiv('label');
+ tooltips.installForEllipsis(this.$label, {
+ parent: this
+ });
+ this.$subtitle = this.$container.appendDiv('subtitle');
+ }
+
+ setLabel(label) {
+ this.setProperty('label', label);
+ }
+
+ _renderLabel() {
+ this.$label.textOrNbsp(this.label);
+ if (this.rendered) {
+ this._renderLabelVisible();
+ }
+ }
+
+ /**
+ * @override FormField.js
+ */
+ _renderLabelVisible(labelVisible) {
+ this.$title.setVisible(this._computeLabelVisible(labelVisible));
+ this._updateFieldStatus();
+ if (this.menuBarPosition === GroupBox.MenuBarPosition.TITLE) {
+ this.invalidateLayoutTree();
+ }
+ }
+
+ _computeLabelVisible(labelVisible) {
+ labelVisible = scout.nvl(labelVisible, this.labelVisible);
+ return !!(labelVisible && this.label && !this.mainBox);
+ }
+
+ setSubtitle(subtitle) {
+ this.setProperty('subtitle', subtitle);
+ }
+
+ _renderSubtitle(subtitle) {
+
+ }
+}
diff --git a/eclipse-scout-core/src/index.js b/eclipse-scout-core/src/index.js
index bf06926..077b617 100644
--- a/eclipse-scout-core/src/index.js
+++ b/eclipse-scout-core/src/index.js
@@ -429,6 +429,8 @@
export {default as FileChooserFieldBrowseKeyStroke} from './form/fields/filechooserfield/FileChooserFieldBrowseKeyStroke';
export {default as FileChooserFieldDeleteKeyStroke} from './form/fields/filechooserfield/FileChooserFieldDeleteKeyStroke';
export {default as GroupBox} from './form/fields/groupbox/GroupBox';
+export {default as GroupBoxHeader} from './form/fields/groupbox/GroupBoxHeader';
+export {default as GroupBoxTitle} from './form/fields/groupbox/GroupBoxTitle';
export {default as GroupBoxGridConfig} from './form/fields/groupbox/GroupBoxGridConfig';
export {default as GroupBoxAdapter} from './form/fields/groupbox/GroupBoxAdapter';
export {default as GroupBoxLayout} from './form/fields/groupbox/GroupBoxLayout';
@@ -657,14 +659,13 @@
export {default as LogoutBox} from './login/LogoutBox';
import * as self from './index.js';
-
-export default self;
-
// Add all functions from the scout object to the scout object on the window
// Note: the scout object on the window still needs its own scout object (window.scout.scout).
// It is required when the eclipse-core/scout is mapped as external webpack library to window.scout
import * as scout from './scout';
+export default self;
+
var windowScout = {...self, ...scout};
// Add the scout object to the window
