Commit b67adf08 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #2542050 by droplet, nod_, dpacassi, Wim Leers, Sam152,... 

Issue #2542050 by droplet, nod_, dpacassi, Wim Leers, Sam152, andrewmacpherson, tameeshb, jonathanshaw, lokapujya, Daniel Schaefer, Chi, geerlingguy, tarekdj: Toolbar implementation creates super annoying re-rendering
parent 1239197d

core/modules/toolbar/css/toolbar.menu.css

+10 −3
Original line number Diff line number Diff line
@@ -13,9 +13,16 @@ 
  position: relative;

  width: auto;

}

.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle,

.toolbar .toolbar-tray-horizontal .toolbar-menu ul,

.toolbar .toolbar-tray-vertical .toolbar-menu ul {

/**

 * Hidden horizontal toolbar handle icon.

 */

.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle {

  display: none;

}

/**

 * Hidden toolbar sub-menus by default.

 */

.toolbar-tray-open .toolbar-menu .menu-item--expanded ul {

  display: none;

}

.toolbar .toolbar-tray-vertical li.open > ul {

core/modules/toolbar/css/toolbar.module.css

+47 −11
Original line number Diff line number Diff line
@@ -21,7 +21,9 @@ 
    display: none;

  }

}



.toolbar-loading #toolbar-administration {

  overflow: hidden;

}

/**

 * Very specific overrides for Drupal system CSS.

 */
@@ -56,18 +58,44 @@ 
  position: relative;

  z-index: 1250;

}

.toolbar-horizontal .toolbar-tray {

  position: fixed;

  width: 100%;

  left: 0;

}

/* Position the admin toolbar absolutely when the configured standard breakpoint

 * is active. The toolbar container, that contains the bar and the trays, is

 * position absolutely so that it scrolls with the page. Otherwise, on smaller

 * screens, the components of the admin toolbar are positioned statically. */

body.toolbar-fixed .toolbar-oriented,

.toolbar-oriented .toolbar-bar,

.toolbar-oriented .toolbar-tray {

.toolbar-oriented .toolbar-bar {

  left: 0;

  position: absolute;

  right: 0;

  top: 0;

}

.toolbar-oriented .toolbar-tray {

  left: 0;

  position: absolute;

  right: 0;

}

/* .toolbar-loading is required by toolbar JavaScript to pre-render markup

 * style to avoid extra reflow & flicker. */

@media (min-width: 61em) {

  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {

    position: relative;

    display: block;

    z-index: -999;

    visibility: hidden;

    width: 1px;

  }

  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {

    width: 999em;

  }

  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {

    display: block;

  }

}



/* Layer the bar just above the trays and above contextual link triggers. */

.toolbar-oriented .toolbar-bar {

  z-index: 502;
@@ -85,13 +113,16 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
  width: 240px;

  width: 15rem;

}



/* Present the admin toolbar tabs horizontally as a default on user agents that

 * do not understand media queries or on user agents where JavaScript is

 * disabled. */

.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

.toolbar .toolbar-bar .toolbar-tab,

.toolbar .toolbar-tray-horizontal li {

  float: left; /* LTR */

}

[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

[dir="rtl"] .toolbar .toolbar-tray-horizontal li {

  float: right;
@@ -179,15 +210,10 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {

  display: none;

}

/* When the configured standard breakpoint is active and the tray is in a

 * horizontal position, the tray is fixed to the top of the viewport and does

 * not scroll with the page contents. */

body.toolbar-fixed .toolbar .toolbar-tray-horizontal {

  position: fixed;

}

/* When the configured standard breakpoint is active and the tray is in a

 * vertical position, the tray does not scroll with the page. The contents of

 * the tray scroll within the confines of the viewport. */

 * the tray scroll within the confines of the viewport.

 */

.toolbar .toolbar-tray-vertical.is-active,

body.toolbar-fixed .toolbar .toolbar-tray-vertical {

  height: 100%;
@@ -258,3 +284,13 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { 
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  float: left;

}



/**

 * Toolbar home button toggle.

 */

.toolbar .toolbar-bar .home-toolbar-tab {

  display: none;

}

.path-admin .toolbar-bar .home-toolbar-tab {

  display: block;

}

core/modules/toolbar/css/toolbar.theme.css

+10 −10
Original line number Diff line number Diff line
@@ -58,10 +58,10 @@ 
.toolbar .toolbar-tray {

  background-color: #ffffff;

}

.toolbar .toolbar-tray-horizontal > .toolbar-lining {

.toolbar-horizontal .toolbar-tray > .toolbar-lining {

  padding-right: 5em; /* LTR */

}

[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {

[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {

  padding-right: 0;

  padding-left: 5em;

}
@@ -75,11 +75,11 @@ 
  border-right: 0 none;

  box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);

}

.toolbar .toolbar-tray-horizontal {

.toolbar-horizontal .toolbar-tray {

  border-bottom: 1px solid #aaaaaa;

  box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */

}

[dir="rtl"] .toolbar .toolbar-tray-horizontal {

[dir="rtl"] .toolbar-horizontal .toolbar-tray {

  box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);

}

.toolbar .toolbar-tray-horizontal .toolbar-tray {
@@ -101,17 +101,17 @@ 
.toolbar .toolbar-menu {

  background-color: #ffffff;

}

.toolbar .toolbar-tray-horizontal .menu-item + .menu-item {

.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {

  border-left: 1px solid #dddddd; /* LTR */

}

[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {

[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {

  border-left: 0 none;

  border-right: 1px solid #dddddd;

}

.toolbar .toolbar-tray-horizontal .menu-item:last-child {

.toolbar-horizontal .toolbar-tray .menu-item:last-child {

  border-right: 1px solid #dddddd; /* LTR */

}

[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {

[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {

  border-left: 1px solid #dddddd;

}

.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
@@ -149,10 +149,10 @@ 
  padding: 0;

  height: 100%;

}

.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {

.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {

  border-left: 1px solid #c9c9c9; /* LTR */

}

[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {

[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {

  border-left: 0 none;

  border-right: 1px solid #c9c9c9;

}

core/modules/toolbar/js/escapeAdmin.es6.js

+0 −1
Original line number Diff line number Diff line
@@ -40,7 +40,6 @@ 
        else {

          $toolbarEscape.text(Drupal.t('Home'));

        }

        $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');

      }

    }

  };

core/modules/toolbar/js/escapeAdmin.js

+0 −1
Original line number Diff line number Diff line
@@ -26,7 +26,6 @@ 
        } else {

          $toolbarEscape.text(Drupal.t('Home'));

        }

        $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');

      }

    }

  };