Add TileOverview for AbstractPage

TileOutlineOverview now works also with given child nodes and not just
with the child nodes of an outline, so it can be used for any
PageWithNodes.

236367

Signed-off-by: Fritz Schinkel <fritz.schinkel@bsi-software.com>
Change-Id: Ifce415c05e0b5abe48ac808935e56e48c28498e8
Reviewed-on: https://git.eclipse.org/r/155833
Tested-by: CI Bot
Reviewed-by: Beat Schwarzentrub <bsh@bsiag.com>

11 files changed, 178 insertions, 49 deletions

diff --git a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.js b/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.js
index 0a0977f264..1cddc8aba9 100644
--- a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.js
+++ b/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {HtmlComponent, OutlineOverview, scout, TileOutlineOverviewLayout} from '../../../index';
+import {HtmlComponent, OutlineOverview, scout, TileOverviewLayout} from '../../../index';
 
 export default class TileOutlineOverview extends OutlineOverview {
 
@@ -27,12 +27,12 @@ export default class TileOutlineOverview extends OutlineOverview {
   }
 
   _render() {
-    this.$container = this.$parent.appendDiv('tile-outline-overview');
+    this.$container = this.$parent.appendDiv('tile-overview');
     this.htmlComp = HtmlComponent.install(this.$container, this.session);
-    this.htmlComp.setLayout(new TileOutlineOverviewLayout(this));
-    this.$content = this.$container.appendDiv('tile-outline-overview-content');
+    this.htmlComp.setLayout(new TileOverviewLayout(this));
+    this.$content = this.$container.appendDiv('tile-overview-content');
     this.contentHtmlComp = HtmlComponent.install(this.$content, this.session);
-    this.$title = this.$content.appendDiv('tile-outline-overview-title').text(this.outline.title);
+    this.$title = this.$content.appendDiv('tile-overview-title').text(this.outline.title);
   }
 
   _renderProperties() {
diff --git a/eclipse-scout-core/src/desktop/outline/pages/Page.js b/eclipse-scout-core/src/desktop/outline/pages/Page.js
index 1393b2b524..5bdc9e8570 100644
--- a/eclipse-scout-core/src/desktop/outline/pages/Page.js
+++ b/eclipse-scout-core/src/desktop/outline/pages/Page.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -183,6 +183,9 @@ export default class Page extends TreeNode {
     if (this.detailForm) {
       this.detailForm.setModal(false);
     }
+    if (this.detailForm instanceof scout.TileOverviewForm) {
+      this.detailForm.setPage(this);
+    }
   }
 
   setDetailTable(table) {
diff --git a/eclipse-scout-core/src/desktop/outline/pages/PageTileGrid.js b/eclipse-scout-core/src/desktop/outline/pages/PageTileGrid.js
index b2e361582b..a7575779c7 100644
--- a/eclipse-scout-core/src/desktop/outline/pages/PageTileGrid.js
+++ b/eclipse-scout-core/src/desktop/outline/pages/PageTileGrid.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -8,13 +8,15 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {KeyStrokeContext, PageTileGridSelectKeyStroke, scout, TileGrid} from '../../../index';
+import {arrays, KeyStrokeContext, PageTileGridSelectKeyStroke, scout, TileGrid} from '../../../index';
 
 export default class PageTileGrid extends TileGrid {
 
   constructor() {
     super();
     this.outline = null;
+    this.page = null;
+    this.nodes = null;
     this.withPlaceholders = true;
     this.scrollable = false;
     this.renderAnimationEnabled = true;
@@ -25,11 +27,16 @@ export default class PageTileGrid extends TileGrid {
 
   _init(model) {
     super._init(model);
-    this._setOutline(this.outline);
+    this.nodes = this.nodes || (this.page && this.page.childNodes) || (this.outline && this.outline.nodes);
+    this.setOutline(this.outline);
+    this.setPage(this.page);
+    this.setNodes(this.nodes);
   }
 
   _destroy() {
-    this._setOutline(null);
+    this.setOutline(null);
+    this.setPage(null);
+    this.setNodes(null);
     super._destroy();
   }
 
@@ -51,8 +58,7 @@ export default class PageTileGrid extends TileGrid {
     ]);
   }
 
-  _setOutline(outline) {
-    var tiles = [];
+  setOutline(outline) {
     if (this.outline) {
       this.outline.off('nodeChanged pageChanged', this._outlineNodeChangedHandler);
       this.outline.off('nodesDeleted', this._outlineStructureChangedHandler);
@@ -67,18 +73,22 @@ export default class PageTileGrid extends TileGrid {
       this.outline.on('nodesInserted', this._outlineStructureChangedHandler);
       this.outline.on('allChildNodesDeleted', this._outlineStructureChangedHandler);
       this.outline.on('childNodeOrderChanged', this._outlineStructureChangedHandler);
-      tiles = this._createPageTiles(this.outline.nodes);
     }
-    this.setTiles(tiles);
+  }
+
+  setPage(page) {
+    this._setProperty('page', page);
+  }
+
+  setNodes(nodes) {
+    this._setProperty('nodes', nodes);
+    this._rebuild();
   }
 
   _createPageTiles(pages) {
-    var tiles = [];
-    pages.forEach(function(page) {
-      var tile = this._createPageTile(page);
-      tiles.push(tile);
+    return (pages || []).map(function(page) {
+      return this._createPageTile(page);
     }, this);
-    return tiles;
   }
 
   _createPageTile(page) {
@@ -97,7 +107,7 @@ export default class PageTileGrid extends TileGrid {
   }
 
   _rebuild() {
-    this.setTiles(this._createPageTiles(this.outline.nodes));
+    this.setTiles(this._createPageTiles(this.nodes));
   }
 
   _onOutlineNodeChanged(event) {
@@ -110,12 +120,19 @@ export default class PageTileGrid extends TileGrid {
   }
 
   _onOutlineStructureChanged(event) {
-    var eventContainsTopLevelNode = event.nodes && event.nodes.some(function(node) {
-      return !node.parentNode;
-    }) || event.type === 'allChildNodesDeleted';
-    // only rebuild if top level nodes change
-    if (eventContainsTopLevelNode) {
-      this._rebuild();
+    if (this.page) {
+      if (this.page === event.parentNode) {
+        this.setNodes(this.page.childNodes);
+      }
+    }
+    else {
+      var eventContainsTopLevelNode = event.nodes && event.nodes.some(function(node) {
+        return !node.parentNode;
+      }) || event.type === 'allChildNodesDeleted';
+      // only rebuild if top level nodes change
+      if (eventContainsTopLevelNode) {
+        this.setNodes(this.outline.nodes);
+      }
     }
   }
 }
diff --git a/eclipse-scout-core/src/form/TileOverviewForm.js b/eclipse-scout-core/src/form/TileOverviewForm.js
new file mode 100644
index 0000000000..59f999b695
--- /dev/null
+++ b/eclipse-scout-core/src/form/TileOverviewForm.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2019-2020 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 {Form, TileOverviewLayout, HtmlComponent} from '../index';
+
+export default class TileOverviewForm extends Form {
+  constructor() {
+    super();
+
+    this.outline = null;
+    this.nodes = null;
+    this.tileOverviewTitle = null;
+    this.scrollable = true;
+    this._addWidgetProperties(['pageTileGrid']);
+
+    this.$content = null;
+    this.$title = null;
+  }
+
+  _init(model) {
+    super._init(model);
+    if (!this.pageTileGrid) {
+      this.pageTileGrid = this._createPageTileGrid();
+    }
+  }
+
+  _renderForm() {
+    super._renderForm();
+    this.htmlComp.setLayout(new TileOverviewLayout(this));
+    this.$content = this.$container.appendDiv('tile-overview-content');
+    this.contentHtmlComp = HtmlComponent.install(this.$content, this.session);
+    this.$title = this.$content.appendDiv('tile-overview-title').text(this.tileOverviewTitle);
+  }
+
+  _renderProperties() {
+    super._renderProperties();
+    if (this.pageTileGrid.rendered) {
+      this.pageTileGrid = this._createPageTileGrid();
+    }
+    this._renderPageTileGrid();
+    this._renderScrollable();
+  }
+
+  _renderPageTileGrid() {
+    this.pageTileGrid.render(this.$content);
+  }
+
+  _createPageTileGrid() {
+    return scout.create('PageTileGrid', {
+      parent: this,
+      outline: this.outline,
+      nodes: this.nodes
+    });
+  }
+
+  _renderScrollable() {
+    if (this.scrollable) {
+      this._installScrollbars({
+        axis: 'y'
+      });
+    } else {
+      this._uninstallScrollbars();
+    }
+  }
+
+  setPage(page) {
+    this.outline = page.getOutline();
+    this.nodes = page.childNodes;
+    this.tileOverviewTitle = page.text;
+
+    this.pageTileGrid.setOutline(this.outline);
+    this.pageTileGrid.setPage(page);
+    this.pageTileGrid.setNodes(this.nodes);
+  }
+
+  _remove() {
+    this.$content = null;
+    this.$title = null;
+
+    super._remove();
+  }
+}
diff --git a/eclipse-scout-core/src/form/TileOverviewFormAdapter.js b/eclipse-scout-core/src/form/TileOverviewFormAdapter.js
new file mode 100644
index 0000000000..71b719b7b0
--- /dev/null
+++ b/eclipse-scout-core/src/form/TileOverviewFormAdapter.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2019-2020 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 {FormAdapter} from '../index';
+
+export default class TileOverviewFormAdapter extends FormAdapter {
+
+  constructor() {
+    super();
+  }
+}
diff --git a/eclipse-scout-core/src/index.js b/eclipse-scout-core/src/index.js
index f45d21d953..c244004280 100644
--- a/eclipse-scout-core/src/index.js
+++ b/eclipse-scout-core/src/index.js
@@ -275,6 +275,8 @@ export {default as ResponsiveManager} from './form/ResponsiveManager';
 export {default as ResponsiveHandler} from './form/ResponsiveHandler';
 export {default as GroupBoxResponsiveHandler} from './form/GroupBoxResponsiveHandler';
 export {default as DesktopResponsiveHandler} from './form/DesktopResponsiveHandler';
+export {default as TileOverviewForm} from './form/TileOverviewForm';
+export {default as TileOverviewFormAdapter} from './form/TileOverviewFormAdapter';
 export {default as Table} from './table/Table';
 export {default as TableAdapter} from './table/TableAdapter';
 export {default as TableRow} from './table/TableRow';
@@ -555,6 +557,7 @@ export {default as TileGridGridConfig} from './tile/TileGridGridConfig';
 export {default as TileGridLayout} from './tile/TileGridLayout';
 export {default as TileGridLayoutConfig} from './tile/TileGridLayoutConfig';
 export {default as TileGridSelectionHandler} from './tile/TileGridSelectionHandler';
+export {default as TileOverviewLayout} from './tile/TileOverviewLayout';
 export {default as HtmlTile} from './tile/HtmlTile';
 export {default as HtmlTileAdapter} from './tile/HtmlTileAdapter';
 export {default as BeanTile} from './tile/BeanTile';
@@ -646,7 +649,6 @@ export {default as OutlineKeyStrokeContext} from './desktop/outline/keystrokes/O
 export {default as OutlineNavigateToTopKeyStroke} from './desktop/outline/keystrokes/OutlineNavigateToTopKeyStroke';
 export {default as OutlineOverview} from './desktop/outline/overview/OutlineOverview';
 export {default as TileOutlineOverview} from './desktop/outline/overview/TileOutlineOverview';
-export {default as TileOutlineOverviewLayout} from './desktop/outline/overview/TileOutlineOverviewLayout';
 export {default as DesktopFormController} from './desktop/DesktopFormController';
 export {default as FilterFieldsGroupBox} from './table/FilterFieldsGroupBox';
 export {default as Resizable} from './resizable/Resizable';
diff --git a/eclipse-scout-core/src/index.less b/eclipse-scout-core/src/index.less
index c8db3049ad..ae4ee100aa 100644
--- a/eclipse-scout-core/src/index.less
+++ b/eclipse-scout-core/src/index.less
@@ -32,7 +32,6 @@
 @import "desktop/outline/SearchOutline";
 @import "desktop/outline/navigation/NavigateButton";
 @import "desktop/outline/overview/OutlineOverview";
-@import "desktop/outline/overview/TileOutlineOverview";
 @import "desktop/popupblocker/PopupBlockerDesktopNotification";
 @import "desktop/toolbox/DesktopToolBox";
 @import "desktop/viewbutton/ViewButton";
@@ -128,6 +127,7 @@
 @import "tree/CompactTree";
 @import "tile/Tile";
 @import "tile/TileGrid";
+@import "tile/TileOverview.less";
 @import "tile/accordion/TileAccordion";
 @import "tile/PlaceholderTile";
 @import "tile/fields/FormFieldTile";
diff --git a/eclipse-scout-core/src/style/colors-dark.less b/eclipse-scout-core/src/style/colors-dark.less
index 55a924dc98..ee1500d9e9 100644
--- a/eclipse-scout-core/src/style/colors-dark.less
+++ b/eclipse-scout-core/src/style/colors-dark.less
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -233,7 +233,7 @@
 @tile-default-link-active-color: @link-active-color;
 @tile-default-link-color: @link-color;
 @tile-default-link-hover-color: @link-hover-color;
-@tile-outline-overview-color: @palette-blue-1-1;
+@tile-overview-color: @palette-blue-1-1;
 @tile-placeholder-background-color: @palette-gray-5;
 @tooltip-background-color: @background-color;
 @tooltip-border-color: @palette-blue-1-1;
diff --git a/eclipse-scout-core/src/style/colors.less b/eclipse-scout-core/src/style/colors.less
index 5af447adc5..6199746559 100644
--- a/eclipse-scout-core/src/style/colors.less
+++ b/eclipse-scout-core/src/style/colors.less
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -424,7 +424,7 @@
 @tile-default-inverted-label-color: @tile-default-inverted-color;
 @tile-default-inverted-link-hover-color: @tile-default-inverted-color;
 @tile-default-inverted-link-active-color: @tile-default-inverted-color;
-@tile-outline-overview-color: @tile-default-inverted-background-color;
+@tile-overview-color: @tile-default-inverted-background-color;
 @tile-placeholder-background-color: @palette-gray-3;
 @tile-table-default-inverted-selection-background-color: @palette-blue-5;
 @tile-table-default-inverted-selection-border-color: @palette-white;
diff --git a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.less b/eclipse-scout-core/src/tile/TileOverview.less
index 510d58a063..2ce793af62 100644
--- a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverview.less
+++ b/eclipse-scout-core/src/tile/TileOverview.less
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -8,22 +8,21 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-.tile-outline-overview {
+.tile-overview {
   position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
-  margin-left: 10px;
 }
 
-.tile-outline-overview-content {
+.tile-overview-content {
   position: absolute;
-  color: @tile-outline-overview-color;
+  color: @tile-overview-color;
 
-  margin: 42px 55px; /* for larger screens */
+  margin: 42px 65px; /* for larger screens */
   @media screen and (max-width: 800px) {
     /* for small screens */
-    margin: 20px 20px 20px 13px;
+    margin: 20px 20px 20px 23px;
   }
 
   & > .tile-grid {
@@ -31,7 +30,7 @@
   }
 }
 
-.tile-outline-overview-title {
+.tile-overview-title {
   font-size: @font-size-extra-large;
   padding-bottom: 30px;
 }
diff --git a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverviewLayout.js b/eclipse-scout-core/src/tile/TileOverviewLayout.js
index 805ac6a637..d394f72725 100644
--- a/eclipse-scout-core/src/desktop/outline/overview/TileOutlineOverviewLayout.js
+++ b/eclipse-scout-core/src/tile/TileOverviewLayout.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2014-2020 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
@@ -8,19 +8,19 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {AbstractLayout, graphics} from '../../../index';
+import {AbstractLayout, graphics} from '../index';
 
-export default class TileOutlineOverviewLayout extends AbstractLayout {
+export default class TileOverviewLayout extends AbstractLayout {
 
-  constructor(tileOutlineOverview) {
+  constructor(tileOverview) {
     super();
-    this.tileOutlineOverview = tileOutlineOverview;
+    this.tileOverview = tileOverview;
   }
 
   layout($container) {
-    var htmlContainer = this.tileOutlineOverview.htmlComp;
-    var pageTileGrid = this.tileOutlineOverview.pageTileGrid;
-    var $content = this.tileOutlineOverview.$content;
+    var htmlContainer = this.tileOverview.htmlComp;
+    var pageTileGrid = this.tileOverview.pageTileGrid;
+    var $content = this.tileOverview.$content;
     var contentSize = htmlContainer.availableSize()
       .subtract(htmlContainer.insets())
       .subtract(graphics.insets($content, {