diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js index 64593c9..baed22b 100644 --- a/core/modules/toolbar/js/views/BodyVisualView.js +++ b/core/modules/toolbar/js/views/BodyVisualView.js @@ -17,7 +17,16 @@ * @augments Backbone.View */ initialize: function () { - this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render); + this.listenTo(this.model, 'change:orientation change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render); + this.listenTo(this.model, 'change:offsets', this.setToolbalHeight); + }, + + setToolbalHeight: function () { + // Apply padding to the top of the body to offset the placement of the + // toolbar bar element. + + + }, /** @@ -39,14 +48,14 @@ .toggleClass('toolbar-vertical', (orientation === 'vertical')) .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal')) // When the toolbar is fixed, it will not scroll with page scrolling. - .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed'))) // Toggle the toolbar-tray-open class on the body element. The class is // applied when a toolbar tray is active. Padding might be applied to // the body element to prevent the tray from overlapping content. .toggleClass('toolbar-tray-open', !!this.model.get('activeTray')) // Apply padding to the top of the body to offset the placement of the // toolbar bar element. - .css('padding-top', this.model.get('offsets').top); + //.css('padding-top', this.model.get('offsets').top); + } }); diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js index c3b0c85..8010fdc 100644 --- a/core/modules/toolbar/js/views/ToolbarVisualView.js +++ b/core/modules/toolbar/js/views/ToolbarVisualView.js @@ -201,6 +201,10 @@ } // Toggle between a basic vertical view and a more sophisticated // horizontal and vertical display of the toolbar bar and trays. + + $('body').css({ + 'padding-top': $('#toolbar-bar').outerHeight() + $('#toolbar-item-administration-tray').outerHeight() + }); this.$el.toggleClass('toolbar-oriented', isOriented); }, @@ -252,7 +256,16 @@ else { // The toolbar container is invisible. Its placement is used to // determine the container for the trays. + $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight()); + + if($('.toolbar-tray.is-active').length) { + if(this.model.get('offsets').top !== $('#toolbar-item-administration-tray').outerHeight()) { + console.log(this.model.get('offsets').top) + + } + } + } }, diff --git a/core/modules/toolbar/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php index b772193..b2c671f 100644 --- a/core/modules/toolbar/src/Element/ToolbarItem.php +++ b/core/modules/toolbar/src/Element/ToolbarItem.php @@ -81,7 +81,10 @@ public static function preRenderToolbarItem($element) { $element['tray']['#wrapper_attributes'] = array(); } $element['tray']['#wrapper_attributes'] += $attributes; - $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray'; + $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray toolbar-tray-horizontal'; + if('toolbar-item-administration' == $id) { + $element['tray']['#wrapper_attributes']['class'][] = 'is-active'; + } } $element['tab']['#attributes']['class'][] = 'toolbar-item'; diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index 281f3ab..31ee3ee 100644 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -356,3 +356,17 @@ function _toolbar_get_subtrees_hash() { $hash = Crypt::hashBase64(serialize($subtrees)); return [$hash, $cacheability]; } + + + + +function toolbar_preprocess_html(&$variables) { + if (!\Drupal::currentUser()->hasPermission('access toolbar')) { + return; + } + $attributes = array(); + $attributes['class'] = 'toolbar-tray-open toolbar-horizontal'; + $variables['attributes'] = new Attribute($attributes); +} + + diff --git a/core/themes/stable/css/toolbar/toolbar.module.css b/core/themes/stable/css/toolbar/toolbar.module.css index 69eb7c2..3dad112 100644 --- a/core/themes/stable/css/toolbar/toolbar.module.css +++ b/core/themes/stable/css/toolbar/toolbar.module.css @@ -60,7 +60,6 @@ * 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 { left: 0;