diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module index 0d3f8cc..37b4596 100644 --- a/core/modules/shortcut/shortcut.module +++ b/core/modules/shortcut/shortcut.module @@ -735,6 +735,7 @@ function shortcut_toolbar() { } $links_tray = array( + '#heading' => t('User-defined shortcuts'), 'shortcuts' => $links, 'configure' => $configure_link, ); diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css index 3d899a0..7d43c69 100644 --- a/core/modules/shortcut/shortcut.theme.css +++ b/core/modules/shortcut/shortcut.theme.css @@ -16,15 +16,14 @@ .toolbar .tray.horizontal.shortcuts .menu { float: left; } - .edit-shortcuts { display: block; } -.tray.vertical .edit-shortcuts { +.toolbar .vertical .edit-shortcuts { text-align: right; padding: 1em; } -.tray.horizontal .edit-shortcuts { +.toolbar .horizontal .edit-shortcuts { float: left; /* LTR */ } diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css index e888abf..13548cc 100644 --- a/core/modules/toolbar/css/toolbar.base-rtl.css +++ b/core/modules/toolbar/css/toolbar.base-rtl.css @@ -43,6 +43,12 @@ html.js .toolbar { left: auto; right: 0; } +@media only screen and (min-width: 16.5em) { + .toolbar .vertical.active > .lining:before { + left: auto; + right: -1px; + } +} /** * At larger screen sizes, the tray pushes the page content. diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css index 53412ac..9b6ae73 100644 --- a/core/modules/toolbar/css/toolbar.base.css +++ b/core/modules/toolbar/css/toolbar.base.css @@ -12,7 +12,6 @@ html .toolbar * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; - outline: 0; padding: 0; vertical-align: baseline; } @@ -44,7 +43,8 @@ html.js .toolbar { .js .toolbar .menu li { display: block; } -.js .toolbar .bar li { +.js .toolbar .bar li, +.js .toolbar .tray li { float: left; /* LTR */ } .js .toolbar a { @@ -62,13 +62,14 @@ html.js .toolbar { width: 100%; } @media only screen { - .js .toolbar .bar li { + .js .toolbar .bar li, + .js .toolbar .tray li { float: none; } } @media only screen and (min-width: 16.5em) { .js .toolbar .bar li, - .toolbar .horizontal li { + .js .toolbar .horizontal li { float: left; /* LTR */ } } @@ -100,14 +101,27 @@ html.js .toolbar { .toolar .tray .lining { position: relative; } -.toolbar .vertical > .lining { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { left: -100%; /* LTR */ min-height: 100%; position: absolute; width: 100%; } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining:before { + bottom: 0; + -moz-box-sizing: content-box; + -o-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ''; display: none; + height: 100%; + /* Support for devices that do not support position fixed. */ + position: absolute; + position: fixed; + top: 0; + z-index: -1; } .toolbar .tray.active { display: block; @@ -127,22 +141,13 @@ html.js .toolbar { bottom: 0; } .toolbar .vertical, - .toolbar .vertical > .lining > .edge { + .toolbar .vertical > .lining:before { width: 240px; width: 15rem; } - .toolbar .vertical.active > .lining > .edge { - -moz-box-sizing: content-box; - -o-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; + .toolbar .vertical.active > .lining:before { display: block; - height: 100%; - /* Support for devices that do not support position fixed. */ - position: absolute; - position: fixed; - top: 0; - z-index: -1; + left: -1px; /* LTR */ } } @media only screen and (min-width: 28.125em) { @@ -161,7 +166,18 @@ html.js .toolbar { } /** * ToolBar tray orientation toggle. + * + * Hide the orientation toggle from browsers that do not interpret + * media queries. They get a standard horizontal toolbar. */ +.toolbar .toggle-orientation { + display: none; +} +@media only screen { + .toolbar .toggle-orientation { + display: block; + } +} .toolbar .horizontal .toggle-orientation { bottom: 0; position: absolute; diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css index b3798c7..37416b4 100644 --- a/core/modules/toolbar/css/toolbar.theme-rtl.css +++ b/core/modules/toolbar/css/toolbar.theme-rtl.css @@ -9,9 +9,12 @@ padding-right: 0; padding-left: 5em; } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { border-left: 1px solid #aaaaaa; border-right: 0 none; +} +.toolbar .vertical > .lining:before { box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333); } .toolbar .horizontal .menu li + li { @@ -50,6 +53,8 @@ .toolbar .toggle-orientation [value="vertical"] { border-left-width: 1px; border-right-width: 7px; +} +.toolbar .toggle-orientation [value="horizontal"] { margin-left: 0; margin-right: 0.5em; } diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index 6885208..94f76fd 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -52,9 +52,12 @@ .toolbar .horizontal > .lining { padding-right: 5em; /* LTR */ } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { background-color: #ffffff; border-right: 1px solid #aaaaaa; /* LTR */ +} +.toolbar .vertical > .lining:before { box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */ } .toolbar .horizontal { @@ -136,10 +139,10 @@ } .toolbar .toggle-orientation [value="vertical"] { border-left-width: 7px; /* LTR */ - margin-left: 0.5em; /* LTR */ } .toolbar .toggle-orientation [value="horizontal"] { border-top-width: 4px; + margin-left: 0.5em; /* LTR */ } .toolbar .toggle-orientation .active { border-color: #3F9AD3; diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index c86defe..d26b443 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -94,6 +94,7 @@ Drupal.behaviors.toolbar = { } } }; + /** * Toggle a toolbar tab and the associated tray. */ @@ -106,6 +107,9 @@ Drupal.toolbar.toggleTray = function (event) { event.preventDefault(); event.stopPropagation(); $tab.toggleClass('active'); + // Toggle aria-pressed. + var value = $tab.attr('aria-pressed'); + $tab.attr('aria-pressed', (value === 'false') ? 'true' : 'false'); // Store the active tab name or remove the setting. if ($tab.hasClass('active')) { localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name)); @@ -114,7 +118,11 @@ Drupal.toolbar.toggleTray = function (event) { localStorage.removeItem('Drupal.toolbar.activeTab'); } // Disable non-selected tabs and trays. - $toolbar.find('.bar a').not($tab).removeClass('active'); + $toolbar.find('.bar a') + .not($tab) + .removeClass('active') + // Set aria-pressed to false. + .attr('aria-pressed', 'false'); $toolbar.find('.tray').not($activateTray).removeClass('active'); // Adjust the body to accommodate trays. setBodyState(); @@ -156,6 +164,7 @@ Drupal.toolbar.setHeight = function () { $(window).trigger('resize'); } }; + /** * Respond to configured media query applicability changes. */ @@ -167,6 +176,7 @@ Drupal.toolbar.mediaQueryChangeHandler = function (mql) { // Adjust the height of the toolbar. Drupal.toolbar.setHeight(); }; + /** * Respond to the toggling of the tray orientation. */ @@ -214,6 +224,7 @@ function changeOrientation (newOrientation, isLock) { // Store the orientation to maintain it across page loads. localStorage.setItem('Drupal.toolbar.trayOrientation', JSON.stringify(newOrientation)); } + /** * Mark up the body tag to reflect the current state of the toolbar. */ @@ -224,6 +235,7 @@ function setBodyState () { .toggleClass('toolbar-vertical', (!!$activeTray.length && orientation === 'vertical')) .toggleClass('toolbar-horizontal', (!!$activeTray.length && orientation === 'horizontal')); } + /** * Change the orientation toggle active state. */ @@ -240,8 +252,8 @@ function toggleOrientationToggle (orientation) { */ Drupal.theme.toolbarOrientationToggle = function () { return '
' + - '' + '' + + '' + '
'; }; diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js index 0dc9dd6..75ddbe3 100644 --- a/core/modules/toolbar/js/toolbar.menu.js +++ b/core/modules/toolbar/js/toolbar.menu.js @@ -17,8 +17,8 @@ var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); $.fn.toolbarMenu = function () { var ui = { - 'handleOpen': Drupal.t('Open'), - 'handleClose': Drupal.t('Close') + 'handleOpen': Drupal.t('Extend'), + 'handleClose': Drupal.t('Collapse') }; /** * Handle clicks from the disclosure button on an item with sub-items. @@ -62,8 +62,9 @@ var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); $toggle.toggleClass('open', switcher); // Adjust the toggle text. $toggle - .text((switcher) ? ui.handleClose : ui.handleOpen) - .attr('aria-pressed', switcher); + .find('.action') + // Expand Structure, Collapse Structure + .text((switcher) ? ui.handleClose : ui.handleOpen); } /** * Add markup to the menu elements. @@ -79,7 +80,8 @@ var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); function initItems ($menu) { var options = { 'class': 'icon handle', - 'text': ui.handleOpen + 'action': ui.handleOpen, + 'text': '' }; // Initialize items and their links. $menu.find('li > a').wrap('
'); @@ -87,8 +89,10 @@ var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); $menu.find('li').each(function (index, element) { var $item = $(element); if ($item.find('> ul.menu').length) { + var $box = $item.find('> .box'); + options.text = Drupal.t('@label', {'@label': $box.find('a').text()}); $item.find('> .box') - .prepend(Drupal.theme('toolbarMenuItemToggle', options)); + .append(Drupal.theme('toolbarMenuItemToggle', options)); } }); } @@ -160,7 +164,7 @@ var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); * A string representing a DOM fragment. */ Drupal.theme.toolbarMenuItemToggle = function (options) { - return ''; + return ''; }; }(jQuery, Drupal)); diff --git a/core/modules/toolbar/templates/toolbar.twig b/core/modules/toolbar/templates/toolbar.twig index 84fb641..c2181df 100644 --- a/core/modules/toolbar/templates/toolbar.twig +++ b/core/modules/toolbar/templates/toolbar.twig @@ -23,18 +23,17 @@ */ #} -
+
{% endfor %} -
+ diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index 71338a9..60fac4f 100644 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -49,10 +49,10 @@ function toolbar_theme($existing, $type, $theme, $path) { /** * Implements hook_page_build(). * - * Add admin toolbar to the page_bottom region automatically. + * Add admin toolbar to the page_top region automatically. */ function toolbar_page_build(&$page) { - $page['page_bottom']['toolbar'] = array( + $page['page_top']['toolbar'] = array( '#pre_render' => array('toolbar_pre_render'), '#access' => user_access('access toolbar'), ); @@ -91,12 +91,17 @@ function template_preprocess_toolbar(&$variables) { // Place the tabs in a top-level variable so that attribute information // can be associated with each one. foreach ($variables['toolbar']['trays'] as $key => $tray) { + // Create tray heading text. Prefer the provided heading text if it exists. + $heading = isset($tray['#heading']) ? $tray['#heading'] : t('@group actions', array('@group' => $key)); + $variables['trays'][$key] = array( + 'heading' => $heading, 'content' => $variables['toolbar']['trays'][$key], 'attributes' => new Attribute(array( 'id' => 'toolbar-tray-' . $key, 'class' => array('tray', 'overlay-displace-top', $key), 'data-toolbar-tray' => $key, + 'aria-owned-by' => 'toolbar-tab-' . $key, ) ), ); @@ -106,7 +111,7 @@ function template_preprocess_toolbar(&$variables) { /** * Implements hook_system_info_alter(). * - * Indicate that the 'page_bottom' region (in which the toolbar will be displayed) + * Indicate that the 'page_top' region (in which the toolbar will be displayed) * is an overlay supplemental region that should be refreshed whenever its * content is updated. * @@ -115,7 +120,7 @@ function template_preprocess_toolbar(&$variables) { */ function toolbar_system_info_alter(&$info, $file, $type) { if ($type == 'theme') { - $info['overlay_supplemental_regions'][] = 'page_bottom'; + $info['overlay_supplemental_regions'][] = 'page_top'; } } @@ -145,13 +150,15 @@ function toolbar_toolbar() { // Add attributes to the links before rendering. toolbar_menu_navigation_links($tree); - $menu = array(); - $menu['toolbar_administration'] = array( - '#type' => 'container', - '#attributes' => array( - 'class' => array('toolbar-menu',), + $menu = array( + 'toolbar_administration' => array( + '#type' => 'container', + '#attributes' => array( + 'class' => array('toolbar-menu',), + ), + 'administration_menu' => menu_tree_output($tree), ), - 'administration_menu' => menu_tree_output($tree), + '#heading' => t('Administration menu'), ); $items['administration'] = array( @@ -229,19 +236,19 @@ function($object) {return $object->mediaQuery;}, foreach ($toolbar_groups as $group => $items) { if ($tab = $items['tab']) { - // Merge in the defaults. $tab += $tab_defaults; - - // Provide a data attribute linking each tab to the corresponding tray. - // Unlike the defaults above, these properties may override values. + } + // Register a tray if one is associated with this tab. + if (!empty($items['tray'])) { + // Provide an id, a data attribute linking each tab to the corresponding + // tray and aria information. + $tab['attributes']['id'] = 'toolbar-tab-' . $group; $tab['attributes']['data-toolbar-tray'] = $group; + $tab['attributes']['aria-owns'] = 'toolbar-tray-' . $group; $tab['attributes']['role'] = 'button'; + $tab['attributes']['aria-pressed'] = 'false'; - // Assign the tabs to the build. - $build['tabs']['#links'][$group] = $tab; - } - if (!empty($items['tray'])) { if (array_key_exists($group, $build['trays'])) { array_merge($build['trays'][$group], $items['tray']); } @@ -250,6 +257,8 @@ function($object) {return $object->mediaQuery;}, $build['trays'][$group] = $items['tray']; } } + // Assign the tabs to the build. + $build['tabs']['#links'][$group] = $tab; } return $build; diff --git a/core/modules/user/user.module b/core/modules/user/user.module index 3d4e748..d576afc 100644 --- a/core/modules/user/user.module +++ b/core/modules/user/user.module @@ -3132,12 +3132,14 @@ function user_toolbar() { } $user_tray = array( - '#theme' => 'links__toolbar_user', - '#links' => $links, - '#attributes' => array( - 'class' => array('menu'), + '#heading' => t('User account actions'), + 'content' => array( + '#theme' => 'links__toolbar_user', + '#links' => $links, + '#attributes' => array( + 'class' => array('menu',), + ), ), - '#heading' => array('text' => t('User account actions'), 'level' => 'h2', 'class' => 'element-invisible'), ); $items['user'] = array(