@eclipse-scout/core 22.0.0-beta.5 → 22.0.2

package/src/style/sizes.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -26,9 +26,10 @@
 @drop-shadow-blur: 13px;
 @drop-shadow-large-y: 8px;
 @drop-shadow-large-blur: 32px;
-@filter-field-bottom: 6px;
-@filter-field-right: 6px;
+@filter-field-bottom: 8px;
+@filter-field-right: 8px;
 @filter-field-height: @logical-grid-row-height;
+@filter-field-height-dense: @logical-grid-row-height-dense;
 @filter-field-width: 190px;
 @filter-field-min-width: 75px;
 @filter-field-max-width: 60%;
@@ -54,7 +55,7 @@
 @focus-box-shadow-size: 3px;
 @text-field-padding-x: 10px;
 @text-field-padding-y: 7px;
-@text-field-padding-top-compensation: 1px;
+@text-field-padding-top-compensation: 1px + @text-margin-top;
 @text-field-alternative-padding-left: 0;
 @text-field-alternative-padding-right: 0;
 @text-field-icon-size: 24px;
@@ -161,6 +162,7 @@
 @desktop-navigation-width: 290px;
 @desktop-notification-no-icon-padding-y: 16px;
 @desktop-tab-border-radius: @view-tab-border-radius;
+@desktop-tab-border-width: 0;
 @desktop-tab-key-box-bottom: @view-tab-key-box-bottom;
 @desktop-tab-margin-top: @view-tab-margin-top;
 @desktop-tab-margin-right: 3px;
@@ -222,17 +224,15 @@
 @mobile-popup-title-margin-top: 10px;
 @mode-padding-x: 12px;
 @mode-padding-y: 6px;
-@mode-padding-dense: @mode-padding-dense-y @mode-padding-dense-x;
 @mode-padding-dense-x: 5px;
 @mode-padding-dense-y: 3px;
 @mode-border-width: 1px;
-@mode-alternative-border-width: 3px;
+@mode-selector-alternative-border-width: 3px;
 @notification-no-icon-padding-y: 13px;
 @outline-breadcrumb-node-padding-x: @outline-title-padding-left;
 @outline-breadcrumb-node-padding-y: 12px;
 @outline-data-padding-top: 16px;
 @outline-font-size: @font-size-normal;
-@outline-node-control-size: 18px;
 @outline-node-control-padding-left: @outline-title-padding-left;
 @outline-node-control-padding-y: @outline-node-padding-y;
 @outline-node-control-line-height: @tree-node-control-line-height;

package/src/table/Table.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -23,6 +23,7 @@ export default class Table extends Widget {
     this.contextColumn = null;
     this.checkable = false;
     this.checkableStyle = Table.CheckableStyle.CHECKBOX;
+    this.cellEditorPopup = null;
     this.compact = false;
     this.compactHandler = scout.create('TableCompactHandler', {table: this});
     this.compactColumn = null;
@@ -100,6 +101,7 @@ export default class Table extends Widget {
     this._popupOpenHandler = this._onDesktopPopupOpen.bind(this);
     this._rerenderViewPortAfterAttach = false;
     this._renderViewPortAfterAttach = false;
+    this._postAttachActions = [];
     this._desktopPropertyChangeHandler = this._onDesktopPropertyChange.bind(this);
     this._addWidgetProperties(['tableControls', 'menus', 'keyStrokes', 'staticMenus', 'tileTableHeader', 'tableTileGridMediator']);
 
@@ -475,7 +477,6 @@ export default class Table extends Widget {
   }
 
   _removeData() {
-    this._destroyCellEditorPopup();
     this._removeAggregateRows();
     this._uninstallImageListeners();
     this._uninstallCellTooltipSupport();
@@ -633,11 +634,11 @@ export default class Table extends Widget {
       // Don't start cell editor or trigger click if row control was clicked (expansion itself is handled by the mouse down handler)
       return;
     }
+    let row = $row.data('row'); // read row before the $row potentially could be replaced by the column specific logic on mouse up
     if (mouseButton === 1) {
       column.onMouseUp(event, $row);
       $appLink = this._find$AppLink(event);
     }
-    let row = $row.data('row');
     if ($appLink) {
       this._triggerAppLinkAction(column, row, $appLink.data('ref'), $appLink);
     } else {
@@ -848,7 +849,7 @@ export default class Table extends Widget {
   _isAggregatedTooltip($cell) {
     let $row = $cell.parent();
     return $row.data('aggregateRow') /* row in the table */
-      || $row.hasClass('table-aggregate') /* aggregate table control */;
+      || $row.hasClass('table-aggregate'); /* aggregate table control */
   }
 
   reload(reloadReason) {
@@ -2068,8 +2069,24 @@ export default class Table extends Widget {
   }
 
   /**
-   * This functions starts the cell editor for the given row and column. Prepare must wait until
-   * a pending completeCellEdit operation is resolved.
+   * Starts cell editing for the cell at the given column and row, but only if editing is allowed.
+   * @see prepareCellEdit
+   */
+  focusCell(column, row) {
+    let cell = this.cell(column, row);
+    if (this.enabledComputed && row.enabled && cell.editable) {
+      this.prepareCellEdit(column, row);
+    }
+  }
+
+  /**
+   * Creates a cell editor for the cell at the given column and row, ensures the row is selected and passes the editor
+   * to {@link #startCellEdit} which starts the editing by rendering the editor in a {@link CellEditorPopup}.<br>
+   * If the completion of a previous cell edit is still in progress, the preparation is delayed until the completion is finished.
+   *
+   * @param {boolean} [openFieldPopupOnCellEdit] true to instruct the editor to open its control popup when the editor is rendered.
+   *    This only has an effect if the editor has a popup (e.g. SmartField or DateField).
+   * @returns Promise the promise will be resolved when the preparation has been finished.
    */
   prepareCellEdit(column, row, openFieldPopupOnCellEdit) {
     let promise = $.resolvedPromise();
@@ -2080,10 +2097,10 @@ export default class Table extends Widget {
   }
 
   /**
-   * @param openFieldPopupOnCellEdit when this parameter is set to true, the CellEditorPopup sets an
+   * @param {boolean} [openFieldPopupOnCellEdit] when this parameter is set to true, the CellEditorPopup sets an
    *    additional property 'cellEditor' on the editor-field. The field instance may use this property
    *    to decide whether or not it should open a popup immediately after it is rendered. This is used
-   *    for Smart- and DateFields.
+   *    for Smart- and DateFields. Default is false.
    */
   prepareCellEditInternal(column, row, openFieldPopupOnCellEdit) {
     let event = new Event({
@@ -2199,7 +2216,7 @@ export default class Table extends Widget {
     let cell, column, predicate;
 
     predicate = function(column) {
-      if (column.guiOnly) {
+      if (!column.isVisible() || column.guiOnly) {
         // does not support tabbing
         return false;
       }
@@ -3043,10 +3060,18 @@ export default class Table extends Widget {
   }
 
   startCellEdit(column, row, field) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
+    if (field.destroyed) {
+      // May happen if the action was postponed and the field destroyed in the meantime using endCellEdit.
+      return;
+    }
+    if (!this._isDataRendered()) {
       this._postRenderActions.push(this.startCellEdit.bind(this, column, row, field));
       return;
     }
+    if (!this.$container.isAttached()) {
+      this._postAttachActions.push(this.startCellEdit.bind(this, column, row, field));
+      return;
+    }
 
     this.trigger('startCellEdit', {
       column: column,
@@ -3056,6 +3081,7 @@ export default class Table extends Widget {
     this.ensureRowRendered(row);
     let popup = column.startCellEdit(row, field);
     this.cellEditorPopup = popup;
+    this.$container.toggleClass('has-cell-editor-popup', !!popup);
     return popup;
   }
 
@@ -3065,11 +3091,6 @@ export default class Table extends Widget {
    *    value is updated by an updateRow event instead.
    */
   endCellEdit(field, saveEditorValue) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.endCellEdit.bind(this, field, saveEditorValue));
-      return;
-    }
-
     if (!this.cellEditorPopup) {
       // the cellEditorPopup could already be removed by scrolling (out of view range) or be removed by update rows
       field.destroy();
@@ -3754,7 +3775,7 @@ export default class Table extends Widget {
   addFilter(filter, applyFilter = true) {
     if (filter instanceof TableUserFilter) {
       let previousFilter = this.getFilter(filter.createKey());
-      this.filterSupport.removeFilter(previousFilter);
+      this.filterSupport.removeFilter(previousFilter, false);
     }
 
     let added = this.filterSupport.addFilter(filter, applyFilter);
@@ -4655,7 +4676,9 @@ export default class Table extends Widget {
     this.$container.toggleClass('checkable', scout.isOneOf(this.checkableStyle, Table.CheckableStyle.TABLE_ROW, Table.CheckableStyle.CHECKBOX_TABLE_ROW));
     this.$container.toggleClass('table-row-check', this.checkableStyle === Table.CheckableStyle.TABLE_ROW);
     if (this._isDataRendered()) {
+      this._updateRowWidth();
       this._redraw();
+      this.invalidateLayoutTree();
     }
   }
 
@@ -5301,18 +5324,6 @@ export default class Table extends Widget {
     }
   }
 
-  focusCell(column, row) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.focusCell.bind(this, column, row));
-      return;
-    }
-
-    let cell = this.cell(column, row);
-    if (this.enabledComputed && row.enabled && cell.editable) {
-      this.prepareCellEdit(column, row, false);
-    }
-  }
-
   _attach() {
     this.$parent.append(this.$container);
     super._attach();
@@ -5336,6 +5347,9 @@ export default class Table extends Widget {
     super._renderOnAttach();
     this._rerenderViewportAfterAttach();
     this._renderViewportAfterAttach();
+    let actions = this._postAttachActions;
+    this._postAttachActions = [];
+    actions.forEach(action => action());
   }
 
   _rerenderViewportAfterAttach() {
@@ -5364,11 +5378,6 @@ export default class Table extends Widget {
     super._detach();
   }
 
-  _onDetach() {
-    super._onDetach();
-    this._destroyCellEditorPopup();
-  }
-
   /**
    * @param {function} [callback] function to be called right after the popup is destroyed
    */
@@ -5384,6 +5393,9 @@ export default class Table extends Widget {
     let destroyEditor = () => {
       this.cellEditorPopup.destroy();
       this.cellEditorPopup = null;
+      if (this.$container) {
+        this.$container.removeClass('has-cell-editor-popup');
+      }
       if (callback) {
         callback();
       }

package/src/table/Table.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -49,25 +49,48 @@
   /* Used for scout.Table.CheckableStyle.TABLE_ROW */
 
   &.table-row-check {
+    & > .table-data {
+      & > .table-row {
+        &.selected {
+          /* Don't draw selection */
+          background-color: transparent;
 
-    & > .table-data > .table-row {
+          &::after {
+            display: none;
+          }
+        }
 
-      &.selected {
-        /* Don't draw selection */
+        &:hover {
+          background-color: @hover-background-color;
+        }
+      }
+
+      & > .table-row.disabled,
+      &.disabled > .table-row {
         background-color: transparent;
+      }
 
-        &::after {
-          display: none;
+      & > .table-row {
+        &.checked,
+        &.checked.selected {
+          /* Mark checked rows with a background color */
+          background-color: @table-row-checked-background-color;
+
+          & > .table-cell {
+            color: @table-row-checked-color;
+          }
+
+          &:hover {
+            background-color: @selected-hover-background-color;
+          }
         }
       }
 
-      &.checked,
-      &.checked.selected {
-        /* Mark checked rows with a background color */
-        background-color: @table-row-checked-background-color;
-
-        & > .table-cell {
-          color: @table-row-checked-color;
+      & > .table-row.disabled,
+      &.disabled > .table-row {
+        &.checked,
+        &.checked.selected {
+          background-color: @selected-disabled-background-color;
         }
       }
     }
@@ -121,20 +144,30 @@
   }
 
   & > .filter-field {
-    --filter-field-max-bottom: calc(~'50% - ' (@filter-field-height + var(--controls-height)) / 2);
+    --filter-field-max-bottom: calc(~'50% - ' (var(--filter-field-height) + var(--controls-height)) / 2);
 
     &:not(.focused).empty {
       --filter-field-max-bottom: calc(~'50% - ' (@filter-field-icon-size + var(--controls-height)) / 2);
     }
 
     .has-menubar.menubar-bottom& {
-      --filter-field-max-bottom: calc(~'50% - ' (@filter-field-height + var(--controls-height)) / 2);
+      --filter-field-max-bottom: calc(~'50% - ' (var(--filter-field-height) + var(--controls-height)) / 2);
       bottom: calc(min(var(--filter-field-bottom), var(--filter-field-max-bottom)) + var(--menubar-height));
 
       &:not(.focused).empty {
         --filter-field-max-bottom: calc(~'50% - ' (@filter-field-icon-size + var(--controls-height)) / 2);
       }
     }
+
+    .has-cell-editor-popup& {
+      opacity: 0;
+      visibility: hidden;
+
+      // start the "fade out" transition right away
+      --filter-field-opacity-transition-delay: 0s;
+      // set visibility to hidden right after the "fade out" transition ends
+      --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
+    }
   }
 }
 
@@ -612,4 +645,4 @@
 
 .organize-columns-behind-scrollbar-column.table-cell.last {
   padding: 0;
-}
+}

package/src/table/TableHeader.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
+import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, objects, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
 import $ from 'jquery';
 
 export default class TableHeader extends Widget {
@@ -459,21 +459,23 @@ export default class TableHeader extends Widget {
     let filtered = this.table.getFilter(column.id);
     if (column.sortActive || column.grouped || filtered) {
       if (column.minWidth < Column.DEFAULT_MIN_WIDTH) {
-        column.prefMinWidth = column.minWidth;
+        column.__minWidthWithoutState = column.minWidth;
+        column.__widthWithoutState = column.width;
         column.minWidth = Column.DEFAULT_MIN_WIDTH;
       }
       if (column.width < column.minWidth) {
         this.table.resizeColumn(column, column.minWidth);
       }
     } else {
-      // Reset to preferred min width if no state is visible
-      if (column.prefMinWidth !== null) {
-        column.minWidth = column.prefMinWidth;
-        column.prefMinWidth = null;
-        // Resize to old min width, assuming user has not manually changed the size because column is still as width as default_min_width
+      // Reset to previous min width if no state is visible
+      if (!objects.isNullOrUndefined(column.__minWidthWithoutState)) {
+        column.minWidth = column.__minWidthWithoutState;
+        // Resize to previous min width, assuming user has not manually changed the size because column is still as width as default_min_width
         if (column.width === Column.DEFAULT_MIN_WIDTH) {
-          this.table.resizeColumn(column, column.minWidth);
+          this.table.resizeColumn(column, column.__widthWithoutState);
         }
+        column.__minWidthWithoutState = null;
+        column.__widthWithoutState = null;
       }
     }
   }

package/src/table/TableHeader.less

@@ -180,6 +180,7 @@
 
 .table-header-item-text {
   #scout.overflow-ellipsis-nowrap();
+  margin-top: @text-margin-top;
 }
 
 .table-header-item-state {

package/src/table/TableHeaderMenu.js

@@ -241,7 +241,9 @@ export default class TableHeaderMenu extends Popup {
     if (this.filterTable) {
       this.filterTable.off('rowsChecked', this._filterTableRowsCheckedHandler);
     }
-    this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    if (this.tableHeader.rendered) {
+      this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    }
     this.$headerItem.select(false);
     this.table.off('columnMoved', this._onColumnMovedHandler);
     this.table.off('filterAdded', this._tableFilterHandler);

package/src/table/TableHeaderMenu.less

@@ -33,6 +33,11 @@
   display: inline-block;
   vertical-align: top;
   padding: @table-header-menu-padding;
+
+  & > .table-header-menu-group > .table-header-menu-group-text {
+    // Increase size a little to ensure every text is fully visible, at least for german and english (currently necessary for additional sorting group)
+    width: calc(100% + 12px);
+  }
 }
 
 .table-header-menu-filters {
@@ -252,11 +257,11 @@
 
   & > .table-data {
     margin-top: 0;
-    padding: 3px 4px;
+    padding: 3px;
 
     & > .table-row {
       border-radius: @border-radius;
-      margin-bottom: 1px;
+      margin-bottom: 2px;
 
       &.last {
         margin-bottom: 0;

package/src/table/columns/BooleanColumn.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -21,7 +21,7 @@ export default class BooleanColumn extends Column {
     this.comparator = comparators.NUMERIC;
     this.filterType = 'ColumnUserFilter';
     this.horizontalAlignment = 0;
-    this.minWidth = Column.NARROW_MIN_WIDTH;
+    this.minWidth = Column.SMALL_MIN_WIDTH;
     this.triStateEnabled = false;
     this.textBased = false;
   }

package/src/table/columns/Column.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -43,7 +43,6 @@ export default class Column {
     this.type = 'text';
     this.width = 60;
     this.initialWidth = undefined; // the width the column initially has
-    this.prefMinWidth = null;
     this.minWidth = Column.DEFAULT_MIN_WIDTH; // the minimal width the column can have
     this.showSeparator = true;
     this.table = null;
@@ -71,7 +70,8 @@ export default class Column {
   }
 
   static DEFAULT_MIN_WIDTH = 60;
-  static NARROW_MIN_WIDTH = 32; // for columns without text (icon, check box)
+  static SMALL_MIN_WIDTH = 38;
+  static NARROW_MIN_WIDTH = 32;
 
   init(model) {
     this.session = model.session;

package/src/table/columns/ColumnOptimalWidthMeasurer.js

@@ -178,7 +178,7 @@ export default class ColumnOptimalWidthMeasurer {
       return 0;
     }
     let $neighbour = cellRange[cellRange.length - 1];
-    if ($neighbour.hasClass('empty') || $cell.hasClass('halign-right') == $neighbour.hasClass('halign-right')) {
+    if ($neighbour.hasClass('empty') || $cell.hasClass('halign-right') === $neighbour.hasClass('halign-right')) {
       return 0;
     }
     let $neighbourText = $neighbour.children('.text');

package/src/table/editor/CellEditorPopup.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -63,6 +63,13 @@ export default class CellEditorPopup extends Popup {
     this.pack();
   }
 
+  /**
+   * @override
+   */
+  _getDefaultOpen$Parent() {
+    return this.table.$data;
+  }
+
   _render() {
     super._render();
 

package/src/tagbar/TagBarOverflowPopupLayout.js

@@ -20,4 +20,4 @@ export default class TagBarOverflowPopupLayout extends PopupLayout {
     prefSize.width += this.popup.htmlComp.insets().horizontal();
     return prefSize;
   }
-}
+}

package/src/tile/TileGrid.js

@@ -396,7 +396,7 @@ export default class TileGrid extends Widget {
   }
 
   _onAnimatedTileRemove(tile) {
-    if (!tile.rendered || !tile.animateRemoval) {
+    if (!tile.removalPending) {
       return;
     }
     this.tileRemovalPendingCount++;

package/src/tile/TileGridLayout.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -151,7 +151,7 @@ export default class TileGridLayout extends LogicalGridLayout {
    */
   _layoutCellBounds(containerSize, containerInsets) {
     // Since the tiles are positioned absolutely it is necessary to add the height of the filler to the top insets
-    if (this.widget.virtual) {
+    if (this.widget.virtual && this.widget.$fillBefore) {
       containerInsets.top += this.widget.$fillBefore.outerHeight(true);
     }
     return super._layoutCellBounds(containerSize, containerInsets);

package/src/tile/accordion/TileAccordion.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 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
@@ -352,6 +352,21 @@ export default class TileAccordion extends Accordion {
   _filter() {
     this.groups.forEach(group => {
       group.body.filter();
+
+      // If the layout has not been invalidated as part of the filtering above, it even though must be validated here.
+      // This is because groups above might have fewer visible Tiles now which makes room for this group.
+      // The revalidateLayout() with scrolling=true here ensures TileGrid._renderViewPort() is called to ensure these Tiles become visible as there is space available now.
+      // It is executed as postValidateFunction because the groups above must have completed their layouting so that
+      // TileGrid._renderViewPort() knows that there is more space available now.
+      if (group.body.htmlComp && group.body.htmlComp.valid && !group.body._accordionLayoutHandler /* skip if already registered */) {
+        group.body._accordionLayoutHandler = () => {
+          group.body.scrolling = true;
+          group.body.revalidateLayout();
+          group.body.scrolling = false;
+          group.body._accordionLayoutHandler = null;
+        };
+        this.session.layoutValidator.schedulePostValidateFunction(group.body._accordionLayoutHandler);
+      }
     });
   }
 

package/src/tile/fields/FormFieldTile.less

@@ -222,8 +222,16 @@
         }
       }
 
-      &.has-error > .status::before {
-        color: @palette-red-3;
+      &.has-error > .status {
+        &::before {
+          color: @tile-default-inverted-error-status-color;
+        }
+
+        &:hover::before,
+        &:active::before,
+        &.selected::before {
+          color: @tile-default-inverted-error-status-hover-color;
+        }
       }
 
       .scrollbar-thumb-handle {
@@ -315,11 +323,11 @@
   }
 
   &.selected {
-    #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-selected-border-color, @y2: 0px, @blur2: 0px);
+    #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @y2: 0px, @blur2: 0px);
 
     &.inverted {
-      --tile-background-color: mix(@tile-default-inverted-background-color, @tile-default-inverted-selection-background-color, 65%);
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @y2: 0px, @blur2: 0px);
+      --tile-background-color: @dashboard-tile-default-inverted-background-color;
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
     }
 
     &.color-alternative {
@@ -327,16 +335,15 @@
     }
 
     &.inverted.color-alternative {
-      --tile-background-color: mix(@tile-alternative-inverted-background-color, @tile-alternative-inverted-selection-background-color, 65%);
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @y2: 0px, @blur2: 0px);
+      --tile-background-color: @dashboard-tile-alternative-inverted-background-color;
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
     }
 
-
     .dimmed-background & {
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
 
       &.inverted {
-        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
+        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
       }
 
       &.color-alternative {
@@ -344,7 +351,7 @@
       }
 
       &.inverted.color-alternative {
-        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
+        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
       }
     }
   }

package/src/tile/fields/button/ButtonTile.js

@@ -15,4 +15,4 @@ export default class ButtonTile extends FormFieldTile {
     super._render();
     this.$container.addClass('button-tile');
   }
-}
+}