Issue #2899724 by drpal, tedbow, DyanneNova, droplet, Cottser, Wim Leers:...

Issue #2899724 by drpal, tedbow, DyanneNova, droplet, Cottser, Wim Leers: Fixes for settings tray CSS and JavaScript minor issues

core/modules/outside_in/css/off-canvas.base.css

-/*
+/**
  * @file
  * Set base styles for the settings tray.
  */
@@ -200,7 +200,7 @@
   content: ']';
 }
 
-/* Override jquery UI */
+/* Override jQuery UI */
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }

core/modules/outside_in/css/off-canvas.button.css

 /**
+ * @file
  * Visual styling for buttons in the off canvas tray.
  *
  * See seven/css/components/buttons.css
@@ -85,7 +86,7 @@
 }
 #drupal-off-canvas .no-touchevents .button--small {
   font-size: 13px;
-  padding: 2px 1em;  /* 1 */
+  padding: 2px 1em;
 }
 #drupal-off-canvas .button:disabled,
 #drupal-off-canvas .button:disabled:active,

core/modules/outside_in/css/off-canvas.motion.css

@@ -11,7 +11,5 @@
  */
 
 .dialog-off-canvas__main-canvas {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
   transition: all .7s ease;
 }

core/modules/outside_in/css/off-canvas.reset.css

@@ -167,8 +167,7 @@
 #drupal-off-canvas table tbody tr:nth-child(odd),
 #drupal-off-canvas table tfoot {
   border: 0;
-  background: none;
-  background-color: transparent;
+  background: transparent none;
 }
 #drupal-off-canvas th,
 #drupal-off-canvas td,
@@ -325,6 +324,9 @@
 #drupal-off-canvas select[disabled] optgroup,
 #drupal-off-canvas textarea[disabled] {
   box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   cursor: default;
 }
@@ -358,8 +360,7 @@
 }
 #drupal-off-canvas * button {
   background: none;
-  border: 1px solid;
-  border-color: grey;
+  border: 1px solid grey;
   color: black;
   padding: 0;
   text-decoration: none;
@@ -372,14 +373,14 @@
 #drupal-off-canvas *:not(div) textarea,
 #drupal-off-canvas *:not(div) select {
   background: white;
-  border: 1px solid;
-  border-color: grey;
+  border: 1px solid grey;
   color: black;
   padding: 0;
   vertical-align: top;
 }
 
-/* Bootstrap and other frameworks add color to selection. */
+/* To standardize off-canvas selection color. */
+#drupal-off-canvas ::-moz-selection,
 #drupal-off-canvas ::selection {
   background-color: rgba(175,175,175,0.5);
   color: inherit;

core/modules/outside_in/css/off-canvas.table.css

@@ -72,7 +72,7 @@
   padding: 6px 8px;
   color: #ddd;
 }
-/* Hide overflow with elipsis for links. */
+/* Hide overflow with ellipsis for links. */
 #drupal-off-canvas td a {
   display: block;
   overflow: hidden;

core/modules/outside_in/css/off-canvas.tabledrag.css

@@ -38,6 +38,7 @@
 }
 #drupal-off-canvas a.tabledrag-handle .handle {
   /* Use lighter drag icon against dark background. */
+  background-color: transparent;
   background-image: url(../../../misc/icons/bebebe/move.svg);
   background-repeat: no-repeat;
   background-position: center;
@@ -45,7 +46,6 @@
   margin: 0;
   padding: 0;
   width: auto;
-  background-color: transparent;
 }
 #drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
 #drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {

core/modules/outside_in/css/off-canvas.theme.css

+/**
+ * @file
+ * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
+ */
+
 /* Style the dialog-off-canvas container. */
 .ui-dialog.ui-dialog-off-canvas {
   background: #444;
@@ -20,7 +25,7 @@
   font-weight: normal;
   color: #fff;
 }
-/* Hide the default Jquery UI dialog close button. */
+/* Hide the default jQuery UI dialog close button. */
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
   visibility: hidden;
 }
@@ -32,7 +37,6 @@
   border: 0;
   position: absolute;
   right: 1em;
-  -moz-transition: all .5s ease;
   transition: background .5s ease;
 }
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
@@ -75,7 +79,7 @@
   right: 1em;
 }
 
-/* Override default styling from jquery UI. */
+/* Override default styling from jQuery UI. */
 #drupal-off-canvas .ui-state-default,
 #drupal-off-canvas .ui-widget-content .ui-state-default,
 #drupal-off-canvas .ui-widget-header .ui-state-default {
@@ -85,5 +89,5 @@
   color: #333;
 }
 #drupal-off-canvas .ui-widget-content a {
-  color: #85bef4/*{fcContent}*/;
+  color: #85bef4;
 }

core/modules/outside_in/css/outside_in.motion.css

@@ -8,8 +8,6 @@
 
 /* Transition the edit icon in the toolbar. */
 #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
   transition: all .7s ease;
 }
 
@@ -17,7 +15,5 @@
 .dialog-off-canvas__main-canvas .contextual,
 .dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
 .dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
   transition: all .7s ease;
 }

core/modules/outside_in/css/outside_in.toolbar.css

@@ -21,7 +21,6 @@
 /* Style both the edit and editing states of the contextual links toggle tab. */
 .toolbar-icon-edit.toolbar-item {
   background-color: #50a0e9;
-  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -30,7 +29,6 @@
 }
 .toolbar-icon-edit.toolbar-item.is-active {
   background-color: #50a0e9;
-  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -40,7 +38,6 @@
 .toolbar-tab:hover > .toolbar-icon-edit,
 .toolbar-icon-edit:focus .toolbar-item {
   background-color: #2369a6;
-  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
   border-color: #1e5c90;
   color: #fff;

core/modules/outside_in/js/outside_in.es6.js

@@ -12,81 +12,6 @@
   const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   const quickEditItemSelector = '[data-quickedit-entity-id]';
 
-  /**
-   * Reacts to contextual links being added.
-   *
-   * @param {jQuery.Event} event
-   *   The `drupalContextualLinkAdded` event.
-   * @param {object} data
-   *   An object containing the data relevant to the event.
-   *
-   * @listens event:drupalContextualLinkAdded
-   */
-  $(document).on('drupalContextualLinkAdded', (event, data) => {
-    // When the first contextual link is added to the page set Edit Mode.
-    $('body').once('outside_in.edit_mode_init').each(() => {
-      const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
-      if (editMode) {
-        setEditModeState(true);
-      }
-    });
-
-    // Bind Ajax behaviors to all items showing the class.
-    // @todo Fix contextual links to work with use-ajax links in
-    //    https://www.drupal.org/node/2764931.
-    Drupal.attachBehaviors(data.$el[0]);
-
-    // Bind a listener to all 'Quick edit' links for blocks
-    // Click "Edit" button in toolbar to force Contextual Edit which starts
-    // Settings Tray edit mode also.
-    data.$el.find(blockConfigureSelector)
-      .on('click.outsidein', () => {
-        if (!isInEditMode()) {
-          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
-        }
-        // Always disable QuickEdit regardless of whether "EditMode" was just enabled.
-        disableQuickEdit();
-      });
-  });
-
-  $(document).on('keyup.outsidein', (e) => {
-    if (isInEditMode() && e.keyCode === 27) {
-      Drupal.announce(
-        Drupal.t('Exited edit mode.'),
-      );
-      toggleEditMode();
-    }
-  });
-
-  /**
-   * Gets all items that should be toggled with class during edit mode.
-   *
-   * @return {jQuery}
-   *   Items that should be toggled.
-   */
-  function getItemsToToggle() {
-    return $(itemsToToggleSelector).not(contextualItemsSelector);
-  }
-
-  /**
-   * Helper to check the state of the outside-in mode.
-   *
-   * @todo don't use a class for this.
-   *
-   * @return {boolean}
-   *  State of the outside-in edit mode.
-   */
-  function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
-  }
-
-  /**
-   * Helper to toggle Edit mode.
-   */
-  function toggleEditMode() {
-    setEditModeState(!isInEditMode());
-  }
-
   /**
    * Prevent default click events except contextual links.
    *
@@ -125,10 +50,20 @@
   }
 
   /**
-   *  Helper to switch edit mode state.
+   * Gets all items that should be toggled with class during edit mode.
+   *
+   * @return {jQuery}
+   *   Items that should be toggled.
+   */
+  function getItemsToToggle() {
+    return $(itemsToToggleSelector).not(contextualItemsSelector);
+  }
+
+  /**
+   * Helper to switch edit mode state.
    *
    * @param {boolean} editMode
-   *  True enable edit mode, false disable edit mode.
+   *   True enable edit mode, false disable edit mode.
    */
   function setEditModeState(editMode) {
     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
@@ -162,7 +97,10 @@
         $(quickEditItemSelector)
           .not(contextualItemsSelector)
           .on('click.outsidein', (e) => {
-            // For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog.
+            /**
+             * For all non-contextual links or the contextual QuickEdit link
+             * close the off-canvas dialog.
+             */
             if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
               closeOffCanvas();
             }
@@ -191,6 +129,78 @@
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
+  /**
+   * Helper to check the state of the outside-in mode.
+   *
+   * @todo don't use a class for this.
+   *
+   * @return {boolean}
+   *   State of the outside-in edit mode.
+   */
+  function isInEditMode() {
+    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+  }
+
+  /**
+   * Helper to toggle Edit mode.
+   */
+  function toggleEditMode() {
+    setEditModeState(!isInEditMode());
+  }
+
+  /**
+   * Reacts to contextual links being added.
+   *
+   * @param {jQuery.Event} event
+   *   The `drupalContextualLinkAdded` event.
+   * @param {object} data
+   *   An object containing the data relevant to the event.
+   *
+   * @listens event:drupalContextualLinkAdded
+   */
+  $(document).on('drupalContextualLinkAdded', (event, data) => {
+
+    // When the first contextual link is added to the page set Edit Mode.
+    $('body').once('outside_in.edit_mode_init').each(() => {
+      const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
+      if (editMode) {
+        setEditModeState(true);
+      }
+    });
+
+    /**
+     * Bind Ajax behaviors to all items showing the class.
+     * @todo Fix contextual links to work with use-ajax links in
+     * https://www.drupal.org/node/2764931.
+     */
+    Drupal.attachBehaviors(data.$el[0]);
+    /**
+     * Bind a listener to all 'Quick edit' links for blocks. Click "Edit" button
+     * in toolbar to force Contextual Edit which starts Settings Tray edit
+     * mode also.
+     */
+    data.$el.find(blockConfigureSelector)
+      .on('click.outsidein', () => {
+        if (!isInEditMode()) {
+          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+        }
+        /**
+         * Always disable QuickEdit regardless of whether "EditMode" was just
+         * enabled.
+         */
+        disableQuickEdit();
+      });
+  });
+
+  $(document).on('keyup.outsidein', (e) => {
+    if (isInEditMode() && e.keyCode === 27) {
+      Drupal.announce(
+        Drupal.t('Exited edit mode.'),
+      );
+      toggleEditMode();
+    }
+  });
+
   /**
    * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
    *
@@ -222,7 +232,7 @@
 
   // Manage Active editable class on opening and closing of the dialog.
   $(window).on({
-    'dialog:beforecreate': function (event, dialog, $element, settings) {
+    'dialog:beforecreate': (event, dialog, $element, settings) => {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
         const $activeElement = $(`#${settings.outsideInActiveEditableId}`);
@@ -231,7 +241,7 @@
         }
       }
     },
-    'dialog:beforeclose': function (event, dialog, $element) {
+    'dialog:beforeclose': (event, dialog, $element) => {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
       }

core/modules/outside_in/js/outside_in.js

@@ -12,44 +12,6 @@
   var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   var quickEditItemSelector = '[data-quickedit-entity-id]';
 
-  $(document).on('drupalContextualLinkAdded', function (event, data) {
-    $('body').once('outside_in.edit_mode_init').each(function () {
-      var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
-      if (editMode) {
-        setEditModeState(true);
-      }
-    });
-
-    Drupal.attachBehaviors(data.$el[0]);
-
-    data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
-      if (!isInEditMode()) {
-        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
-      }
-
-      disableQuickEdit();
-    });
-  });
-
-  $(document).on('keyup.outsidein', function (e) {
-    if (isInEditMode() && e.keyCode === 27) {
-      Drupal.announce(Drupal.t('Exited edit mode.'));
-      toggleEditMode();
-    }
-  });
-
-  function getItemsToToggle() {
-    return $(itemsToToggleSelector).not(contextualItemsSelector);
-  }
-
-  function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
-  }
-
-  function toggleEditMode() {
-    setEditModeState(!isInEditMode());
-  }
-
   function preventClick(event) {
     if ($(event.target).closest('.contextual-links').length) {
       return;
@@ -69,6 +31,10 @@
     $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
   }
 
+  function getItemsToToggle() {
+    return $(itemsToToggleSelector).not(contextualItemsSelector);
+  }
+
   function setEditModeState(editMode) {
     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
       throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig');
@@ -119,6 +85,40 @@
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
+  function isInEditMode() {
+    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+  }
+
+  function toggleEditMode() {
+    setEditModeState(!isInEditMode());
+  }
+
+  $(document).on('drupalContextualLinkAdded', function (event, data) {
+    $('body').once('outside_in.edit_mode_init').each(function () {
+      var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
+      if (editMode) {
+        setEditModeState(true);
+      }
+    });
+
+    Drupal.attachBehaviors(data.$el[0]);
+
+    data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
+      if (!isInEditMode()) {
+        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+      }
+
+      disableQuickEdit();
+    });
+  });
+
+  $(document).on('keyup.outsidein', function (e) {
+    if (isInEditMode() && e.keyCode === 27) {
+      Drupal.announce(Drupal.t('Exited edit mode.'));
+      toggleEditMode();
+    }
+  });
+
   Drupal.behaviors.toggleEditMode = {
     attach: function attach() {
       $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);