diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css index 13548cc..602d122 100644 --- a/core/modules/toolbar/css/toolbar.base-rtl.css +++ b/core/modules/toolbar/css/toolbar.base-rtl.css @@ -16,9 +16,15 @@ html.js .toolbar { left: auto; right: 0; } +@media only screen { + .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: right; } } diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css index 9b6ae73..adf9779 100644 --- a/core/modules/toolbar/css/toolbar.base.css +++ b/core/modules/toolbar/css/toolbar.base.css @@ -5,7 +5,7 @@ * Aggressive resets so we can achieve a consistent look in hostile CSS * environments. */ -html.js #toolbar, +html.js #toolbar-administration, html .toolbar * { -moz-box-sizing: border-box; -o-box-sizing: border-box; @@ -15,8 +15,8 @@ html .toolbar * { padding: 0; vertical-align: baseline; } -html.js #toolbar { - font-size: 100%; +html.js #toolbar-administration { + font-size: small; line-height: 1; } html.js .toolbar { @@ -64,7 +64,7 @@ html.js .toolbar { @media only screen { .js .toolbar .bar li, .js .toolbar .tray li { - float: none; + float: none; /* LTR */ } } @media only screen and (min-width: 16.5em) { diff --git a/core/modules/toolbar/css/toolbar.icons-rtl.css b/core/modules/toolbar/css/toolbar.icons-rtl.css index 5e099b7..aadd333 100644 --- a/core/modules/toolbar/css/toolbar.icons-rtl.css +++ b/core/modules/toolbar/css/toolbar.icons-rtl.css @@ -30,7 +30,7 @@ } } -@media only screen and (min-width: 28.125em) { +@media only screen and (min-width: 36em) { .toolbar .bar .icon { background-position: right center; padding-left: 1.3333em; diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css index 716bd14..3b8b49e 100644 --- a/core/modules/toolbar/css/toolbar.icons.css +++ b/core/modules/toolbar/css/toolbar.icons.css @@ -19,6 +19,11 @@ top: 0; width: 20px; } +.toolbar button.icon { + background-color: transparent; + border: 0; + font-size: 1em; +} .toolbar .menu ul .icon { padding-left: 1.3333em; /* LTR */ } @@ -126,7 +131,7 @@ } } -@media only screen and (min-width: 28.125em) { +@media only screen and (min-width: 36em) { .toolbar .bar .icon { background-position: left center; /* LTR */ padding-left: 2.75em; /* LTR */ diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css index d02844e..3dd0a1b 100644 --- a/core/modules/toolbar/css/toolbar.menu.css +++ b/core/modules/toolbar/css/toolbar.menu.css @@ -91,11 +91,6 @@ .toolbar .handle:hover { cursor: pointer; } -.toolbar button.icon.handle { - background-color: transparent; - border: 0; - font-size: 1em; -} .toolbar .icon.handle { bottom: 0; display: block; diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css index 37416b4..fa5a1df 100644 --- a/core/modules/toolbar/css/toolbar.theme-rtl.css +++ b/core/modules/toolbar/css/toolbar.theme-rtl.css @@ -47,14 +47,10 @@ .toolbar .toggle-orientation > .lining { float: left; } -.toolbar .toggle-orientation button { - float: right; +.toolbar .toggle-orientation button:before { + left: auto; + right: 0; } -.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; +.toolbar .toggle-orientation [value="vertical"]:before { + background-image: url('../images/icon-toggle-vertical-rtl.png'); /* LTR */ } diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index 94f76fd..a298793 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -116,34 +116,29 @@ */ .toolbar .toggle-orientation { background-color: #f5f5f5; - padding: 1em; + padding: 0.6667em; } .toolbar .horizontal .toggle-orientation { border-left: 1px solid #c9c9c9; /* LTR */ } .toolbar .toggle-orientation > .lining { - background-color: #ffffff; - border: 1px solid #c9c9c9; float: right; /* LTR */ padding: 0.1667em; } .toolbar .toggle-orientation button { - background-color: transparent; - border: 1px solid #b0b0b0; cursor: pointer; display: inline-block; - float: left; /* LTR */ - height: 0.9em; + height: 14px; + padding: 0; text-indent: -999em; - width: 1.4562em; + width: 18px; } -.toolbar .toggle-orientation [value="vertical"] { - border-left-width: 7px; /* LTR */ +.toolbar .toggle-orientation button:before { + left: 0; /* LTR */ } -.toolbar .toggle-orientation [value="horizontal"] { - border-top-width: 4px; - margin-left: 0.5em; /* LTR */ +.toolbar .toggle-orientation [value="vertical"]:before { + background-image: url('../images/icon-toggle-vertical.png'); /* LTR */ } -.toolbar .toggle-orientation .active { - border-color: #3F9AD3; +.toolbar .toggle-orientation [value="horizontal"]:before { + background-image: url('../images/icon-toggle-horizontal.png'); } diff --git a/core/modules/toolbar/images/icon-toggle-horizontal.png b/core/modules/toolbar/images/icon-toggle-horizontal.png new file mode 100644 index 0000000..759701c --- /dev/null +++ b/core/modules/toolbar/images/icon-toggle-horizontal.png @@ -0,0 +1,3 @@ +PNG + + IHDRtEXtSoftwareAdobe ImageReadyqe<cIDATxb,//g 01諍;::HSQQAmG|7o>{,Km@ G ~ڮ^6 (H,}j0p#mVIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-toggle-vertical-rtl.png b/core/modules/toolbar/images/icon-toggle-vertical-rtl.png new file mode 100644 index 0000000..95e3fba --- /dev/null +++ b/core/modules/toolbar/images/icon-toggle-vertical-rtl.png @@ -0,0 +1,3 @@ +PNG + + IHDRtEXtSoftwareAdobe ImageReadyqe<hIDATxb,//g qGGAu\&mW^%GŋϞ=K6 X $kxt$,$}}}IjllLm$$A= Zz#`u8: BIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-toggle-vertical.png b/core/modules/toolbar/images/icon-toggle-vertical.png new file mode 100644 index 0000000..dd3240e --- /dev/null +++ b/core/modules/toolbar/images/icon-toggle-vertical.png @@ -0,0 +1,3 @@ +PNG + + IHDRtEXtSoftwareAdobe ImageReadyqe<kIDATxb,//g ;::ꩨ`b vU={vń 6o|QV^ |-44ؘB4ABrM aLoh0Z}8IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index 501c861..ae2954e 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -46,7 +46,7 @@ var mql = { Drupal.behaviors.toolbar = { attach: function(context) { var options = $.extend(this.options, drupalSettings.toolbar); - $toolbar = $(context).find('#toolbar').once('toolbar'); + $toolbar = $(context).find('#toolbar-administration').once('toolbar'); if ($toolbar.length) { // Append a messages element for appending interaction updates for screen // readers. @@ -119,14 +119,10 @@ Drupal.toolbar.toggleTray = function (event) { var value = $tab.attr('aria-pressed'); $tab.attr('aria-pressed', (value === 'false') ? 'true' : 'false'); // Append a message that a tray has been opened. - $messages.html( - Drupal.theme('toolbarTrayMessage', - Drupal.t('@tray tray @state.', { - '@tray': name, - '@state': (value === 'true') ? strings.closed : strings.opened - }) - ) - ); + setMessage(Drupal.t('@tray tray @state.', { + '@tray': name, + '@state': (value === 'true') ? strings.closed : strings.opened + })); // Store the active tab name or remove the setting. if ($tab.hasClass('active')) { localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name)); @@ -259,8 +255,35 @@ function setBodyState () { * Change the orientation toggle active state. */ function toggleOrientationToggle (orientation) { - $trays.find('.toggle-orientation button').removeClass('active'); - $trays.find('.toggle-orientation button[value="' + orientation + '"]').addClass('active'); + var strings = { + horizontal: Drupal.t('Horizontal orientation'), + vertical: Drupal.t('Vertical orientation') + }; + var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical'; + var iconClass = 'icon-toggle-' + orientation; + var iconAntiClass = 'icon-toggle-' + antiOrientation; + // Append a message that the tray orientation has been changed. + setMessage(Drupal.t('Tray orientation changed to @orientation.', { + '@orientation': antiOrientation + })); + // Change the tray orientation. + $trays.find('.toggle-orientation button') + .val(orientation) + .text(strings[orientation]) + .removeClass(iconAntiClass) + .addClass(iconClass); +} + +/** + * Places the message in the toolbar's ARIA live message area. + * + * The message will be read by speaking User Agents. + * + * @param {String} message + * A string to be inserted into the message area. + */ +function setMessage (message) { + $messages.html(Drupal.theme('toolbarTrayMessage', message)); } /** @@ -270,10 +293,9 @@ function toggleOrientationToggle (orientation) { * A string representing a DOM fragment. */ Drupal.theme.toolbarOrientationToggle = function () { - return '
' + - '' + - '' + - '
'; + return '
' + + '' + + '
'; }; /** diff --git a/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarHookToolbarTest.php b/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarHookToolbarTest.php new file mode 100644 index 0000000..442eb4a --- /dev/null +++ b/core/modules/toolbar/lib/Drupal/toolbar/Tests/ToolbarHookToolbarTest.php @@ -0,0 +1,57 @@ + 'Toolbar hook_toolbar', + 'description' => 'Tests the implementation of hook_toolbar by a module.', + 'group' => 'Toolbar', + ); + } + + function setUp() { + parent::setUp(); + + // Create an administrative user and log it in. + $this->admin_user = $this->drupalCreateUser(array('access toolbar')); + $this->drupalLogin($this->admin_user); + } + + /** + * Tests for inclusion of a tab and tray in the toolbar by a module + * implementing hook_toolbar. + */ + function testHookToolbar() { + $this->drupalGet('/node'); + $this->assertResponse(200); + + // Assert that the toolbar is present in the HTML. + $this->assertRaw('id="toolbar-administration"'); + + // Assert that the tab registered by toolbar_test is present. + $this->assertRaw('id="toolbar-tab-testing"'); + + // Assert that the tray registered by toolbar_test is present. + $this->assertRaw('id="toolbar-tray-testing"'); + } +} diff --git a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.info b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.info new file mode 100644 index 0000000..b8e0c59 --- /dev/null +++ b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.info @@ -0,0 +1,6 @@ +name = "Toolbar module API tests" +description = "Support module for toolbar testing." +package = Testing +version = VERSION +core = 8.x +hidden = TRUE diff --git a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module new file mode 100644 index 0000000..cadddc9 --- /dev/null +++ b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module @@ -0,0 +1,40 @@ +'), + l('link 2', ''), + l('link 3', ''), + ); + $items['testing'] = array( + 'tab' => array( + 'title' => t('Test tab'), + 'href' => '', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Test tab'), + ), + ), + 'tray' => array( + '#heading' => t('Test tray'), + 'content' => array( + '#theme' => 'item_list', + '#items' => $tray_items, + '#attributes' => array( + 'class' => array('menu'), + ), + ), + ), + 'weight' => 50, + ); + + return $items; +} diff --git a/core/modules/toolbar/toolbar.api.php b/core/modules/toolbar/toolbar.api.php index 783089b..42ca3fe 100644 --- a/core/modules/toolbar/toolbar.api.php +++ b/core/modules/toolbar/toolbar.api.php @@ -1,8 +1,5 @@ -10, ); - // Define the tray in a separate function. - $items['shortcuts'] = array( + /** + * A tab may be associated with a tray. + * + * The tray should contain a renderable array. An option #heading property + * can be passed. The text is written to a heading tag in the tray as a + * landmark for accessibility. A default heading will be created if one is not + * passed. + */ + $items['commerce'] = array( 'tab' => array( - 'title' => t('Shortcuts'), + 'title' => t('Shopping cart'), 'href' => '', 'html' => FALSE, 'attributes' => array( - 'title' => t('Shortcuts'), + 'title' => t('Shopping cart'), ), ), 'tray' => array( - '#pre_render' => array('shortcut_toolbar_pre_render'), + '#heading' => t('Shopping cart actions'), + 'content' => array( + '#theme' => 'item_list', + '#items' => array( /* An item list renderable array */ ), + ), ), + 'weight' => 50, ); return $items; @@ -89,7 +98,7 @@ function hook_toolbar() { */ function hook_toolbar_alter(&$items) { // Move the User tab to the right. - $items['user']['weight'] = 5; + $items['commerce']['weight'] = 5; } /** diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index 60fac4f..4f8f501 100644 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -12,7 +12,7 @@ */ function toolbar_help($path, $arg) { switch ($path) { - case 'admin/help#toolbar': + case 'admin/help#toolbar-administration': $output = '

' . t('About') . '

'; $output .= '

' . t('The Toolbar module displays links to top-level administration menu items and links from other modules at the top of the screen. For more information, see the online handbook entry for Toolbar module.', array('@toolbar' => 'http://drupal.org/documentation/modules/toolbar')) . '

'; $output .= '

' . t('Uses') . '

'; @@ -77,7 +77,9 @@ function toolbar_pre_render($toolbar) { function template_preprocess_toolbar(&$variables) { // Metadata for the toolbar wrapping element. $variables['attributes'] = new Attribute(array( - 'id' => 'toolbar', + // The id cannot be simply "toolbar" or it will clash with the simpletest + // tests listing which produces a checkbox with attribute id="toolbar" + 'id' => 'toolbar-administration', // The 'overlay-displace-top' class pushes the overlay down, so it appears // below the toolbar. 'class' => array('toolbar', 'overlay-displace-top'), @@ -311,15 +313,6 @@ function toolbar_menu_navigation_links(&$tree) { } /** - * Returns HTML for wrapping content in a toolbar tray. - * - * @param array $variables - * An associative array containing: - * - attributes: Associative array of attributes to be placed in the nav tag. - * - content: The rendered content of the toolbar tray. - */ - -/** * Checks whether an item is in the active trail. * * Useful when using a menu generated by menu_tree_all_data() which does