From 434b4b1e12cb884c160f0a615638f2064a918bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Sat, 17 Nov 2012 19:04:44 -0500 Subject: [PATCH] Issue #1137920 by jessebeach, benjifisher, nod_, sjbassett, kathryn531: Fix toolbar on small screen sizes and redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: J. Renée Beach --- core/misc/debounce.js | 36 ++ core/modules/overlay/overlay-parent.js | 4 +- core/modules/shortcut/images/shortcut-active.png | 3 + core/modules/shortcut/images/shortcut-active.svg | 11 + core/modules/shortcut/images/shortcut.png | 3 + core/modules/shortcut/images/shortcut.svg | 11 + core/modules/shortcut/shortcut.base-rtl.css | 15 - core/modules/shortcut/shortcut.base.css | 14 - core/modules/shortcut/shortcut.module | 37 +- core/modules/shortcut/shortcut.theme-rtl.css | 29 +- core/modules/shortcut/shortcut.theme.css | 57 +-- core/modules/system/system.module | 14 +- .../modules/toolbar/config/toolbar.breakpoints.yml | 3 + core/modules/toolbar/config/toolbar.config.yml | 3 + core/modules/toolbar/css/toolbar.base-rtl.css | 66 ++++ core/modules/toolbar/css/toolbar.base.css | 174 +++++++++ core/modules/toolbar/css/toolbar.icons-rtl.css | 43 +++ core/modules/toolbar/css/toolbar.icons.css | 142 +++++++ core/modules/toolbar/css/toolbar.menu-rtl.css | 19 + core/modules/toolbar/css/toolbar.menu.css | 123 ++++++ core/modules/toolbar/css/toolbar.theme-rtl.css | 55 +++ core/modules/toolbar/css/toolbar.theme.css | 146 +++++++ .../toolbar/images/icon-appearance-active.png | 4 + core/modules/toolbar/images/icon-appearance.png | 4 + .../modules/toolbar/images/icon-child-collapse.png | 3 + core/modules/toolbar/images/icon-child-open.png | 3 + core/modules/toolbar/images/icon-collapse.png | 4 + .../toolbar/images/icon-configuration-active.png | 4 + core/modules/toolbar/images/icon-configuration.png | 3 + .../modules/toolbar/images/icon-content-active.png | 4 + core/modules/toolbar/images/icon-content.png | 3 + core/modules/toolbar/images/icon-extend-active.png | 3 + core/modules/toolbar/images/icon-extend.png | 3 + core/modules/toolbar/images/icon-help-active.png | 4 + core/modules/toolbar/images/icon-help.png | 4 + core/modules/toolbar/images/icon-home-active.png | 6 + core/modules/toolbar/images/icon-home.png | 6 + core/modules/toolbar/images/icon-menu-active.png | 3 + core/modules/toolbar/images/icon-menu.png | 3 + core/modules/toolbar/images/icon-open.png | 5 + core/modules/toolbar/images/icon-people-active.png | 3 + core/modules/toolbar/images/icon-people.png | 4 + .../modules/toolbar/images/icon-reports-active.png | 4 + core/modules/toolbar/images/icon-reports.png | 5 + .../toolbar/images/icon-structure-active.png | 3 + core/modules/toolbar/images/icon-structure.png | 3 + core/modules/toolbar/js/toolbar.js | 248 ++++++++++++ core/modules/toolbar/js/toolbar.menu.js | 166 ++++++++ core/modules/toolbar/templates/toolbar.tpl.php | 33 -- core/modules/toolbar/templates/toolbar.twig | 40 ++ core/modules/toolbar/toolbar-rtl.css | 37 -- core/modules/toolbar/toolbar.api.php | 97 +++++ core/modules/toolbar/toolbar.css | 129 ------- core/modules/toolbar/toolbar.info | 4 + core/modules/toolbar/toolbar.install | 28 ++ core/modules/toolbar/toolbar.js | 115 ------ core/modules/toolbar/toolbar.module | 399 ++++++++++---------- core/modules/toolbar/toolbar.png | 4 - core/modules/user/images/icon-user-active.png | 4 + core/modules/user/images/icon-user-active.svg | 13 + core/modules/user/images/icon-user.png | 6 + core/modules/user/images/icon-user.svg | 13 + core/modules/user/user.css | 12 +- core/modules/user/user.module | 58 +++ core/profiles/standard/standard.info | 1 + 65 files changed, 1879 insertions(+), 627 deletions(-) create mode 100644 core/misc/debounce.js create mode 100644 core/modules/shortcut/images/shortcut-active.png create mode 100644 core/modules/shortcut/images/shortcut-active.svg create mode 100644 core/modules/shortcut/images/shortcut.png create mode 100644 core/modules/shortcut/images/shortcut.svg create mode 100644 core/modules/toolbar/config/toolbar.breakpoints.yml create mode 100644 core/modules/toolbar/config/toolbar.config.yml create mode 100644 core/modules/toolbar/css/toolbar.base-rtl.css create mode 100644 core/modules/toolbar/css/toolbar.base.css create mode 100644 core/modules/toolbar/css/toolbar.icons-rtl.css create mode 100644 core/modules/toolbar/css/toolbar.icons.css create mode 100644 core/modules/toolbar/css/toolbar.menu-rtl.css create mode 100644 core/modules/toolbar/css/toolbar.menu.css create mode 100644 core/modules/toolbar/css/toolbar.theme-rtl.css create mode 100644 core/modules/toolbar/css/toolbar.theme.css create mode 100644 core/modules/toolbar/images/icon-appearance-active.png create mode 100644 core/modules/toolbar/images/icon-appearance.png create mode 100644 core/modules/toolbar/images/icon-child-collapse.png create mode 100644 core/modules/toolbar/images/icon-child-open.png create mode 100644 core/modules/toolbar/images/icon-collapse.png create mode 100644 core/modules/toolbar/images/icon-configuration-active.png create mode 100644 core/modules/toolbar/images/icon-configuration.png create mode 100644 core/modules/toolbar/images/icon-content-active.png create mode 100644 core/modules/toolbar/images/icon-content.png create mode 100644 core/modules/toolbar/images/icon-extend-active.png create mode 100644 core/modules/toolbar/images/icon-extend.png create mode 100644 core/modules/toolbar/images/icon-help-active.png create mode 100644 core/modules/toolbar/images/icon-help.png create mode 100644 core/modules/toolbar/images/icon-home-active.png create mode 100644 core/modules/toolbar/images/icon-home.png create mode 100644 core/modules/toolbar/images/icon-menu-active.png create mode 100644 core/modules/toolbar/images/icon-menu.png create mode 100644 core/modules/toolbar/images/icon-open.png create mode 100644 core/modules/toolbar/images/icon-people-active.png create mode 100644 core/modules/toolbar/images/icon-people.png create mode 100644 core/modules/toolbar/images/icon-reports-active.png create mode 100644 core/modules/toolbar/images/icon-reports.png create mode 100644 core/modules/toolbar/images/icon-structure-active.png create mode 100644 core/modules/toolbar/images/icon-structure.png create mode 100644 core/modules/toolbar/js/toolbar.js create mode 100644 core/modules/toolbar/js/toolbar.menu.js delete mode 100644 core/modules/toolbar/templates/toolbar.tpl.php create mode 100644 core/modules/toolbar/templates/toolbar.twig delete mode 100644 core/modules/toolbar/toolbar-rtl.css create mode 100644 core/modules/toolbar/toolbar.api.php delete mode 100644 core/modules/toolbar/toolbar.css create mode 100644 core/modules/toolbar/toolbar.install delete mode 100644 core/modules/toolbar/toolbar.js delete mode 100644 core/modules/toolbar/toolbar.png create mode 100644 core/modules/user/images/icon-user-active.png create mode 100644 core/modules/user/images/icon-user-active.svg create mode 100644 core/modules/user/images/icon-user.png create mode 100644 core/modules/user/images/icon-user.svg diff --git a/core/misc/debounce.js b/core/misc/debounce.js new file mode 100644 index 0000000..338a50d --- /dev/null +++ b/core/misc/debounce.js @@ -0,0 +1,36 @@ +/** + * Limits the invocations of a function in a given time frame. + * + * The debounce function wrapper should be used sparingly. One clear use case + * is limiting the invocation of a callback attached to the window resize event. + * + * Before using the debounce function wrapper, consider first whether the + * callback could be attache to an event that fires less frequently or if the + * function can be written in such a way that it is only invoked under specific + * conditions. + * + * @param {Function} callback + * The function to be invoked. + * + * @param {Number} wait + * The time period within which the callback function should only be + * invoked once. For example if the wait period is 250ms, then the callback + * will only be called at most 4 times per second. + */ +Drupal.debounce = function (callback, wait) { + + "use strict"; + + var timeout, result; + return function () { + var context = this; + var args = arguments; + var later = function () { + timeout = null; + result = callback.apply(context, args); + }; + window.clearTimeout(timeout); + timeout = window.setTimeout(later, wait); + return result; + }; +}; diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js index 1f38f2f..caf9336 100644 --- a/core/modules/overlay/overlay-parent.js +++ b/core/modules/overlay/overlay-parent.js @@ -881,9 +881,9 @@ Drupal.overlay.getPath = function (link) { */ Drupal.overlay.getDisplacement = function (region) { var displacement = 0; - var lastDisplaced = $('.overlay-displace-' + region + ':last'); + var lastDisplaced = $('[data-offset-' + region + ']'); if (lastDisplaced.length) { - displacement = lastDisplaced.offset().top + lastDisplaced.outerHeight(); + displacement = parseInt(lastDisplaced.attr('data-offset-' + region)); } return displacement; }; diff --git a/core/modules/shortcut/images/shortcut-active.png b/core/modules/shortcut/images/shortcut-active.png new file mode 100644 index 0000000..214bd30 --- /dev/null +++ b/core/modules/shortcut/images/shortcut-active.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxbd@wR @ 4 L.f5  *6q136 Ҏ@\jI1QTTd(p }(f'`bbb }C-@P\\ G ^0M}\YIENDB` \ No newline at end of file diff --git a/core/modules/shortcut/images/shortcut-active.svg b/core/modules/shortcut/images/shortcut-active.svg new file mode 100644 index 0000000..5b5a9cf --- /dev/null +++ b/core/modules/shortcut/images/shortcut-active.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/core/modules/shortcut/images/shortcut.png b/core/modules/shortcut/images/shortcut.png new file mode 100644 index 0000000..739a8d0 --- /dev/null +++ b/core/modules/shortcut/images/shortcut.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxbd@gΜqR &&&@ 4 L@-@;\<ƣA1#-(6q13@ ? .@1C8@(6{($>|1!!app B+ "IENDB` \ No newline at end of file diff --git a/core/modules/shortcut/images/shortcut.svg b/core/modules/shortcut/images/shortcut.svg new file mode 100644 index 0000000..c6c5a73 --- /dev/null +++ b/core/modules/shortcut/images/shortcut.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/core/modules/shortcut/shortcut.base-rtl.css b/core/modules/shortcut/shortcut.base-rtl.css index c236f47..ed903a7 100644 --- a/core/modules/shortcut/shortcut.base-rtl.css +++ b/core/modules/shortcut/shortcut.base-rtl.css @@ -5,21 +5,6 @@ */ /** - * Toolbar. - */ -#edit-shortcuts { - left: 0; - position: absolute; - top: 0; -} -#shortcut-toolbar ul { - float: none; -} -#shortcut-toolbar .icon { - float: right; -} - -/** * Add/remove links. */ .add-or-remove-shortcuts .icon, diff --git a/core/modules/shortcut/shortcut.base.css b/core/modules/shortcut/shortcut.base.css index 90a1046..aca7807 100644 --- a/core/modules/shortcut/shortcut.base.css +++ b/core/modules/shortcut/shortcut.base.css @@ -1,23 +1,9 @@ - /** * @file * Generic base styles for shortcut module. */ /** - * Toolbar. - */ -#edit-shortcuts { - float: right; /* LTR */ -} -#shortcut-toolbar ul { - float: left; /* LTR */ -} -#shortcut-toolbar .icon { - float: left; /* LTR */ -} - -/** * Add/remove links. */ .add-or-remove-shortcuts .icon { diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module index 9bbb12a..0d3f8cc 100644 --- a/core/modules/shortcut/shortcut.module +++ b/core/modules/shortcut/shortcut.module @@ -713,20 +713,9 @@ function shortcut_preprocess_page(&$variables) { } /** - * Implements hook_page_alter(). + * Implements hook_toolbar(). */ -function shortcut_page_alter(&$page) { - if (isset($page['page_top']['toolbar'])) { - // If the toolbar is available, add a pre-render function to display the - // current shortcuts in the toolbar drawer. - $page['page_top']['toolbar']['#pre_render'][] = 'shortcut_toolbar_pre_render'; - } -} - -/** - * Pre-render function for adding shortcuts to the toolbar drawer. - */ -function shortcut_toolbar_pre_render($toolbar) { +function shortcut_toolbar() { $links = shortcut_renderable_links(); $links['#attached'] = array( 'css' => array( @@ -734,8 +723,6 @@ function shortcut_toolbar_pre_render($toolbar) { drupal_get_path('module', 'shortcut') . '/shortcut.theme.css', ), ); - $links['#prefix'] = '
'; - $links['#suffix'] = '
'; $shortcut_set = shortcut_current_displayed_set(); $configure_link = NULL; if (shortcut_set_edit_access($shortcut_set)) { @@ -743,17 +730,29 @@ function shortcut_toolbar_pre_render($toolbar) { '#type' => 'link', '#title' => t('Edit shortcuts'), '#href' => 'admin/config/user-interface/shortcut/' . $shortcut_set->set_name, - '#options' => array('attributes' => array('id' => 'edit-shortcuts')), + '#options' => array('attributes' => array('class' => array('edit-shortcuts'))), ); } - $drawer = array( + $links_tray = array( 'shortcuts' => $links, 'configure' => $configure_link, ); - $toolbar['toolbar_drawer'][] = $drawer; - return $toolbar; + $items['shortcuts'] = array( + 'tab' => array( + 'title' => t('Shortcuts'), + 'href' => 'admin/config/user-interface/shortcut', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Shortcuts'), + 'class' => array('icon', 'icon-shortcut'), + ), + ), + 'tray' => $links_tray, + 'weight' => -10, + ); + return $items; } /** diff --git a/core/modules/shortcut/shortcut.theme-rtl.css b/core/modules/shortcut/shortcut.theme-rtl.css index 424f38f..8a687d9 100644 --- a/core/modules/shortcut/shortcut.theme-rtl.css +++ b/core/modules/shortcut/shortcut.theme-rtl.css @@ -5,22 +5,6 @@ */ /** - * Toolbar. - */ -#shortcut-toolbar ul { - margin-left: 0; - margin-right: 5px; -} -#shortcut-toolbar a { - margin-left: 5px; - margin-right: 0; -} -#shortcut-toolbar .icon { - margin-left: 5px; - margin-right: 0; -} - -/** * Add/remove links. */ .add-or-remove-shortcuts .icon { @@ -42,3 +26,16 @@ .add-or-remove-shortcuts a:hover .text { border-radius: 5px 0 0 5px; } + +/** + * Toolbar. + */ +.toolbar-js .horizontal #edit-shortcuts { + border-left: 0 none; + border-right: 1px solid #d9d9d9; + float: right; + margin-left: 0; + margin-right: 0.3333em; + padding-left: 0.3333em; + padding-right: 0.6667em; +} diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css index 9e2dc69..3d899a0 100644 --- a/core/modules/shortcut/shortcut.theme.css +++ b/core/modules/shortcut/shortcut.theme.css @@ -1,4 +1,3 @@ - /** * @file * Styling for the shortcut module. @@ -7,40 +6,26 @@ /** * Toolbar. */ -.toolbar #edit-shortcuts { - line-height: 24px; - padding: 5px 10px; -} -#edit-shortcuts:focus, -#edit-shortcuts:hover, -#edit-shortcuts.active { - text-decoration: underline; +.icon-shortcut:before { + background-image: url("images/shortcut.png"); } -#shortcut-toolbar ul { - line-height: 24px; - margin-left: 5px; /* LTR */ - padding: 5px 0; +.icon-shortcut:active:before, +.active .icon-shortcut:before { + background-image: url("images/shortcut-active.png"); } -#shortcut-toolbar a { - border-radius: 5px; - margin-right: 5px; /* LTR */ - padding: 0 5px; +.toolbar .tray.horizontal.shortcuts .menu { + float: left; } -#shortcut-toolbar a:focus, -#shortcut-toolbar a:hover, -#shortcut-toolbar a.active:focus { - background: #555; + +.edit-shortcuts { + display: block; } -#shortcut-toolbar a.active:hover, -#shortcut-toolbar a.active { - background-color: #000; +.tray.vertical .edit-shortcuts { + text-align: right; + padding: 1em; } -#shortcut-toolbar .icon { - background-color: #444; - border-radius: 5px; - height: 30px; - margin-right: 5px; /* LTR */ - width: 30px; +.tray.horizontal .edit-shortcuts { + float: left; /* LTR */ } /** @@ -65,15 +50,3 @@ .remove-shortcut a:hover .icon { background-position: -12px -12px; /* LTR */ } -.add-or-remove-shortcuts .text { - padding: 0 6px 0 10px; /* LTR */ -} -.add-or-remove-shortcuts a:focus .text, -.add-or-remove-shortcuts a:hover .text { - background-color: #5f605b; - border-radius: 0 5px 5px 0; /* LTR */ - color: #fff; - cursor: pointer; - font-size: 10px; - line-height: 12px; -} diff --git a/core/modules/system/system.module b/core/modules/system/system.module index 6401361..32fcdf0 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -1288,6 +1288,19 @@ function system_library_info() { ), ); + // A utility function to limit calls to a function with a given time. + $libraries['drupal.debounce'] = array( + 'title' => 'Drupal debounce', + 'version' => VERSION, + 'js' => array( + 'core/misc/debounce.js' => array('group' => JS_LIBRARY), + ), + 'dependencies' => array( + // @todo remove drupal dependency. + array('system', 'drupal'), + ), + ); + // jQuery. $libraries['jquery'] = array( 'title' => 'jQuery', @@ -1903,7 +1916,6 @@ function system_library_info() { array('system', 'jquery'), ), ); - $libraries['drupal.tableselect'] = array( 'title' => 'Tableselect', 'version' => VERSION, diff --git a/core/modules/toolbar/config/toolbar.breakpoints.yml b/core/modules/toolbar/config/toolbar.breakpoints.yml new file mode 100644 index 0000000..c623c0e --- /dev/null +++ b/core/modules/toolbar/config/toolbar.breakpoints.yml @@ -0,0 +1,3 @@ +narrow: 'only screen and (min-width: 16.5em)' +standard: 'only screen and (min-width: 38.125em)' +wide: 'only screen and (min-width: 50em)' diff --git a/core/modules/toolbar/config/toolbar.config.yml b/core/modules/toolbar/config/toolbar.config.yml new file mode 100644 index 0000000..8a98715 --- /dev/null +++ b/core/modules/toolbar/config/toolbar.config.yml @@ -0,0 +1,3 @@ +breakpoints: + - 'module.toolbar.narrow' + - 'module.toolbar.wide' diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css new file mode 100644 index 0000000..e888abf --- /dev/null +++ b/core/modules/toolbar/css/toolbar.base-rtl.css @@ -0,0 +1,66 @@ +/** + * @file toolbar.base-rtl.css + */ +html.js .toolbar { + left: auto; + right: 0; +} +.js .toolbar .bar li { + float: right; +} + +/** + * Administration menu. + */ +.js .toolbar .bar { + left: auto; + right: 0; +} +@media only screen and (min-width: 16.5em) { + .js .toolbar .bar li, + .toolbar .horizontal li { + float: right; + } +} + +/** + * Toolbar tray. + */ +.toolbar .vertical { + left: auto; + right: -100%; +} +.toolbar .horizontal { + left: auto; + right: 0; +} +.toolbar .vertical > .lining { + left: auto; + right: -100%; +} +.toolbar .vertical.active, +.toolbar .vertical.active > .lining { + left: auto; + right: 0; +} + +/** + * At larger screen sizes, the tray pushes the page content. + */ +@media only screen and (min-width: 38.125em) { + body.toolbar-tray-open.toolbar-vertical { + margin-left: 0; + margin-right: 240px; + margin-right: 15rem; + } +} +/** + * ToolBar tray orientation toggle. + */ +.toolbar .horizontal .toggle-orientation { + left: 0; + right: auto; +} +.toolbar .vertical .toggle-orientation { + float: left; +} diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css new file mode 100644 index 0000000..53412ac --- /dev/null +++ b/core/modules/toolbar/css/toolbar.base.css @@ -0,0 +1,174 @@ +/** + * @file toolbar.base.css + * + * + * Aggressive resets so we can achieve a consistent look in hostile CSS + * environments. + */ +html.js #toolbar, +html .toolbar * { + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + outline: 0; + padding: 0; + vertical-align: baseline; +} +html.js #toolbar { + font-size: 100%; + line-height: 1; +} +html.js .toolbar { + left: 0; /* LTR */ + position: absolute; + top: 0; + width: 100%; +} +/** + * Very specific overrides for Drupal system CSS. + */ +.toolbar li, +.toolbar .menu li, +.toolbar .item-list, +.toolbar .item-list li, +.toolbar .menu li.expanded { + list-style-type: none; + list-style-image: none; +} +.toolbar .menu li { + padding-top: 0; +} +.js .toolbar .bar li, +.js .toolbar .menu li { + display: block; +} +.js .toolbar .bar li { + float: left; /* LTR */ +} +.js .toolbar a { + display: block; + line-height: 1; +} +/** + * Administration menu. + */ +.js .toolbar .bar { + left: 0; /* LTR */ + position: absolute; + top: 0; + z-index: 750; + width: 100%; +} +@media only screen { + .js .toolbar .bar li { + float: none; + } +} +@media only screen and (min-width: 16.5em) { + .js .toolbar .bar li, + .toolbar .horizontal li { + float: left; /* LTR */ + } +} +@media only screen and (min-width: 28.125em) { + .js .toolbar .bar { + position: fixed; + } +} + +/** + * Toolbar tray. + */ +.toolbar .horizontal, +.toolbar .vertical { + display: none; + position: absolute; + width: 100%; + z-index: 250; +} +.toolbar .vertical { + left: -100%; /* LTR */ + position: absolute; +} +.toolbar .horizontal { + left: 0; /* LTR */ + height: 0; + z-index: 750; +} +.toolar .tray .lining { + position: relative; +} +.toolbar .vertical > .lining { + left: -100%; /* LTR */ + min-height: 100%; + position: absolute; + width: 100%; +} +.toolbar .vertical > .lining > .edge { + display: none; +} +.toolbar .tray.active { + display: block; +} +.toolbar .horizontal.active { + height: auto; +} +.toolbar .vertical.active, +.toolbar .vertical.active > .lining { + left: 0; /* LTR */ +} +.toolbar .horizontal .menu li ul { + display: none; +} +@media only screen and (min-width: 16.5em) { + .toolbar .vertical { + bottom: 0; + } + .toolbar .vertical, + .toolbar .vertical > .lining > .edge { + 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; + display: block; + height: 100%; + /* Support for devices that do not support position fixed. */ + position: absolute; + position: fixed; + top: 0; + z-index: -1; + } +} +@media only screen and (min-width: 28.125em) { + .toolbar .horizontal { + position: fixed; + } +} +/** + * At larger screen sizes, the tray pushes the page content. + */ +@media only screen and (min-width: 38.125em) { + body.toolbar-tray-open.toolbar-vertical { + margin-left: 240px; /* LTR */ + margin-left: 15rem; /* LTR */ + } +} +/** + * ToolBar tray orientation toggle. + */ +.toolbar .horizontal .toggle-orientation { + bottom: 0; + position: absolute; + right: 0; /* LTR */ + top: 0; +} +.toolbar .vertical .toggle-orientation { + float: right; /* LTR */ + width: 100%; +} diff --git a/core/modules/toolbar/css/toolbar.icons-rtl.css b/core/modules/toolbar/css/toolbar.icons-rtl.css new file mode 100644 index 0000000..5e099b7 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.icons-rtl.css @@ -0,0 +1,43 @@ +/** + * @file toolbar.icons-rtl.css + */ +.toolbar .icon { + padding-left: 1.3333em; + padding-right: 2.75em; +} +.toolbar .icon:before { + left: auto; + right: 0.6667em; +} +.toolbar .menu ul .icon { + padding-left: 0; + padding-right: 1.3333em; +} +.toolbar .vertical .menu ul { + margin-left: 0; + margin-right: 1.5em; +} +.toolbar .vertical .menu ul ul { + margin-left: 0; + margin-right: 0.75em; +} + +@media only screen and (min-width: 16.5em) { + .toolbar .bar .icon:before { + background-size: auto auto; + left: auto; + right: 0; + } +} + +@media only screen and (min-width: 28.125em) { + .toolbar .bar .icon { + background-position: right center; + padding-left: 1.3333em; + padding-right: 2.75em; + } + .toolbar .bar .icon:before { + left: 0; + right: 0.6667em; + } +} diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css new file mode 100644 index 0000000..716bd14 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.icons.css @@ -0,0 +1,142 @@ +/** + * @file toolbar.icons.css + */ +.toolbar .icon { + padding-left: 2.75em; /* LTR */ + position: relative; +} +.toolbar .icon:before { + background-attachment: scroll; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 100% auto; + content: ''; + display: block; + height: 100%; + left: 0.6667em; /* LTR */ + position: absolute; + top: 0; + width: 20px; +} +.toolbar .menu ul .icon { + padding-left: 1.3333em; /* LTR */ +} +.toolbar .menu ul a.icon:before { + display: none; +} +.toolbar .vertical .menu ul { + margin-left: 1.5em; /* LTR */ +} +.toolbar .vertical .menu ul ul { + margin-left: 0.75em; /* LTR */ +} + +/** + * Top level icons + */ +.icon-home:before { + background-image: url("../images/icon-home.png"); +} +.icon-home:active:before, +.active .icon-home:before { + background-image: url("../images/icon-home-active.png"); +} +.icon-menu:before { + background-image: url("../images/icon-menu.png"); +} +.icon-menu:active:before, +.active .icon-menu:before { + background-image: url("../images/icon-menu-active.png"); +} + +/** + * Main menu icons. + */ +.icon-content:before { + background-image: url("../images/icon-content.png"); +} +.icon-content:active:before, +.icon-content.active:before { + background-image: url("../images/icon-content-active.png"); +} +.icon-structure:before { + background-image: url("../images/icon-structure.png"); +} +.icon-structure:active:before, +.icon-structure.active:before { + background-image: url("../images/icon-structure-active.png"); +} +.icon-appearance:before { + background-image: url("../images/icon-appearance.png"); +} +.icon-appearance:active:before, +.icon-appearance.active:before { + background-image: url("../images/icon-appearance-active.png"); +} +.icon-people:before { + background-image: url("../images/icon-people.png"); +} +.icon-people:active:before, +.icon-people.active:before { + background-image: url("../images/icon-people-active.png"); +} +.icon-extend:before { + background-image: url("../images/icon-extend.png"); +} +.icon-extend:active:before, +.icon-extend.active:before { + background-image: url("../images/icon-extend-active.png"); +} +.icon-configuration:before { + background-image: url("../images/icon-configuration.png"); +} +.icon-configuration:active:before, +.icon-configuration.active:before { + background-image: url("../images/icon-configuration-active.png"); +} +.icon-reports:before { + background-image: url("../images/icon-reports.png"); +} +.icon-reports:active:before, +.icon-reports.active:before { + background-image: url("../images/icon-reports-active.png"); +} +.icon-help:before { + background-image: url("../images/icon-help.png"); +} +.icon-help:active:before, +.icon-help.active:before { + background-image: url("../images/icon-help-active.png"); +} + +@media only screen and (min-width: 16.5em) { + .toolbar .bar .icon { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + text-indent: -9999px; + width: 4em; + } + .toolbar .bar .icon:before { + background-size: auto auto; + left: 0; /* LTR */ + width: 100%; + } +} + +@media only screen and (min-width: 28.125em) { + .toolbar .bar .icon { + background-position: left center; /* LTR */ + padding-left: 2.75em; /* LTR */ + padding-right: 1.3333em; /* LTR */ + text-indent: 0; + width: auto; + } + .toolbar .bar .icon:before { + background-size: 100% auto; + left: 0.6667em; /* LTR */ + width: 20px; + } +} diff --git a/core/modules/toolbar/css/toolbar.menu-rtl.css b/core/modules/toolbar/css/toolbar.menu-rtl.css new file mode 100644 index 0000000..1435225 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.menu-rtl.css @@ -0,0 +1,19 @@ +/** + * @file toolbar.menu-rtl.css + */ +.toolbar .vertical .handle + a { + margin-left: 3em; + margin-right: 0; +} + +/** + * Handle. + */ +.toolbar .icon.handle { + left: 0; + right: auto; +} +.toolbar .icon.handle:before { + left: auto; + right: 0; +} diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css new file mode 100644 index 0000000..d02844e --- /dev/null +++ b/core/modules/toolbar/css/toolbar.menu.css @@ -0,0 +1,123 @@ +/** + * @file toolbar.menu.css + */ +.toolbar .menu { + list-style: none; + margin: 0; + padding: 0; +} +.toolbar .box { + display: block; + line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ + position: relative; + width: auto; +} +.toolbar .horizontal .menu .handle, +.toolbar .horizontal .menu ul, +.toolbar .vertical .menu ul { + display: none; +} +.toolbar .vertical li.open > ul { + display: block; /* Show the sub-menus */ +} +.toolbar .vertical .handle + a { + margin-right: 3em; /* LTR */ +} + +/** + * Items. + */ +.toolbar .vertical .menu .menu a { + padding-bottom: 0.6667em; + padding-top: 0.6667em; +} +.toolbar .tray .level-3 a { + color: #303030; +} +.toolbar .tray .level-4 a { + color: #2d2d2d; +} +.toolbar .tray .level-5 a { + color: #2a2a2a; +} +.toolbar .tray .level-6 a { + color: #272727; +} +.toolbar .tray .level-7 a { + color: #2a2a2a; +} +.toolbar .tray .level-8 a { + color: #2d2d2d; +} +.toolbar .tray .level-9 a { + color: #303030; +} +.toolbar .level-2 > ul { + background-color: #f5f5f5; + border-color: #cccccc; +} +.toolbar .level-3 > ul { + background-color: #e5e5e5; + border-color: #bbbbbb; +} +.toolbar .level-4 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; +} +.toolbar .level-5 > ul { + background-color: #c5c5c5; + border-color: #999999; +} +.toolbar .level-6 > ul { + background-color: #b5b5b5; + border-color: #888888; +} +.toolbar .level-7 > ul { + background-color: #c5c5c5; + border-color: #999999; +} +.toolbar .level-8 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; +} +.toolbar .level-9 > ul { + background-color: #e5e5e5; + border-color: #bbbbbb; +} + +/** + * Handle. + */ +.toolbar .handle:hover { + cursor: pointer; +} +.toolbar button.icon.handle { + background-color: transparent; + border: 0; + font-size: 1em; +} +.toolbar .icon.handle { + bottom: 0; + display: block; + height: 100%; + padding: 0; + position: absolute; + right: 0; /* LTR */ + text-indent: -9999px; + top: 0; + width: 3em; + z-index: 1; +} +.toolbar .icon.handle:before { + background-image: url("../images/icon-open.png"); + left: 0; /* LTR */ +} +.toolbar .icon.handle.open:before { + background-image: url("../images/icon-collapse.png"); +} +.toolbar .menu .menu .icon.handle:before { + background-image: url("../images/icon-child-open.png"); +} +.toolbar .menu .menu .icon.handle.open:before { + background-image: url("../images/icon-child-collapse.png"); +} diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css new file mode 100644 index 0000000..b3798c7 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.theme-rtl.css @@ -0,0 +1,55 @@ +/** + * @file toolbar.theme-rtl.css + */ + +/** + * Toolbar tray. + */ +.toolbar .horizontal > .lining { + padding-right: 0; + padding-left: 5em; +} +.toolbar .vertical > .lining > .edge { + border-left: 1px solid #aaaaaa; + border-right: 0 none; + box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333); +} +.toolbar .horizontal .menu li + li { + border-left: 0 none ; + border-right: 1px solid #dddddd; +} +.toolbar .horizontal .menu li:last-child { + border-left: 1px solid #dddddd; +} +.toolbar .vertical .menu .menu .menu { + margin-left: 0; + margin-right: 1.3333em; +} +.toolbar .vertical .menu .menu .menu .menu { + margin-left: 0; + margin-right: 0.25em; +} +.toolbar .vertical .menu .menu .menu a { + padding-left: 0; + padding-right: 0.5em; +} + +/** + * Orientation toggle. + */ +.toolbar .horizontal .toggle-orientation { + border-left: 0 none; + border-right: 1px solid #c9c9c9; +} +.toolbar .toggle-orientation > .lining { + float: left; +} +.toolbar .toggle-orientation button { + float: right; +} +.toolbar .toggle-orientation [value="vertical"] { + border-left-width: 1px; + border-right-width: 7px; + 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 new file mode 100644 index 0000000..6885208 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -0,0 +1,146 @@ +/** + * @file toolbar.theme.css + */ +.toolbar { + font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif; + /* Set base font size to 13px based on root ems. */ + font-size: 0.8125rem; + -moz-tap-highlight-color: rgba(0,0,0,0); + -o-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0,0,0,0); + tap-highlight-color: rgba(0,0,0,0); + -moz-touch-callout: none; + -o-touch-callout: none; + -webkit-touch-callout: none; + touch-callout: none; +} +.toolbar a { + cursor: pointer; + padding: 1em 1.3333em; + text-decoration: none; +} +.toolbar a:hover { + text-decoration: underline; +} + +/** + * Toolbar bar. + */ +.toolbar .bar { + background-color: #0f0f0f; + box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3333); + color: #dddddd; +} +.toolbar .bar a:hover { + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%); + background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%); +} +.toolbar .bar a.active { + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); + background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); +} +.toolbar .bar a { + color: #ffffff; +} + +/** + * Toolbar tray. + */ +.toolbar .tray > .lining { + background-color: #ffffff; +} +.toolbar .horizontal > .lining { + padding-right: 5em; /* LTR */ +} +.toolbar .vertical > .lining > .edge { + background-color: #ffffff; + border-right: 1px solid #aaaaaa; /* LTR */ + box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */ +} +.toolbar .horizontal { + border-bottom: 1px solid #aaaaaa; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); +} +.toolbar .horizontal .tray { + background-color: #f5f5f5; +} +.toolbar .tray a { + color: #333333; +} +.toolbar .horizontal .menu { + background-color: #ffffff; +} +.toolbar .horizontal .menu li + li { + border-left: 1px solid #dddddd; /* LTR */ +} +.toolbar .horizontal .menu li:last-child { + border-right: 1px solid #dddddd; /* LTR */ +} +.toolbar .vertical .menu li + li { + border-top: 1px solid #dddddd; +} +.toolbar .vertical .menu li:last-child { + border-bottom: 1px solid #dddddd; +} +.toolbar .vertical .menu .menu li { + border: 0 none; +} +.toolbar .vertical .menu ul ul { + border-bottom: 1px solid #dddddd; + border-top: 1px solid #dddddd; +} +.toolbar .vertical .menu li:last-child > ul { + border-bottom: 0; +} +.toolbar .vertical .menu .menu .menu { + margin-left: 1.3333em; /* LTR */ +} +.toolbar .vertical .menu .menu .menu .menu { + margin-left: 0.25em; /* LTR */ +} +.toolbar .vertical .menu a { + font-weight: bold; +} +.toolbar .vertical .menu .menu a { + font-weight: normal; +} +.toolbar .vertical .menu .menu .menu a { + padding-left: 0.5em; /* LTR */ +} + +/** + * Orientation toggle. + */ +.toolbar .toggle-orientation { + background-color: #f5f5f5; + padding: 1em; +} +.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; + text-indent: -999em; + width: 1.4562em; +} +.toolbar .toggle-orientation [value="vertical"] { + border-left-width: 7px; /* LTR */ + margin-left: 0.5em; /* LTR */ +} +.toolbar .toggle-orientation [value="horizontal"] { + border-top-width: 4px; +} +.toolbar .toggle-orientation .active { + border-color: #3F9AD3; +} diff --git a/core/modules/toolbar/images/icon-appearance-active.png b/core/modules/toolbar/images/icon-appearance-active.png new file mode 100644 index 0000000..2b11761 --- /dev/null +++ b/core/modules/toolbar/images/icon-appearance-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڬ DI$LB%LN0 H@&a$B\/ZP#NIZ-ƎuIŠI؃K"=eT:+*s6ǽy+ {XA`fgdi#GXzP~'Y; +ઊ/A4Տxzs576IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-appearance.png b/core/modules/toolbar/images/icon-appearance.png new file mode 100644 index 0000000..fd581f6 --- /dev/null +++ b/core/modules/toolbar/images/icon-appearance.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<AIDATxڜ0EZ;Bsv/q|.2BJ/,%gvd+5eY6ư3<ۦi~b֓]Ao=00QF{n?#GDKT-lJV\6#xxf$t?(~KkQ@&\,2oRgBmqj{mA gE%JVh+*՛Ч3>m9 U?$tlPЧK/c_@߹5H\ . +ձcsC 0@^ǀIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-child-collapse.png b/core/modules/toolbar/images/icon-child-collapse.png new file mode 100644 index 0000000..b7a744f --- /dev/null +++ b/core/modules/toolbar/images/icon-child-collapse.png @@ -0,0 +1,3 @@ +PNG + + IHDRVΎWtEXtSoftwareAdobe ImageReadyqe<OIDATxb`#0RP^^.YA @|qH!00F k 1HGBn(7PBH4t=!hC3>+ ?C#^x>ah ( dMx@BCha4GxCq8 e 64k~IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-configuration.png b/core/modules/toolbar/images/icon-configuration.png new file mode 100644 index 0000000..a5d46b2 --- /dev/null +++ b/core/modules/toolbar/images/icon-configuration.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڜ-@w[Y#p8[`qp DǛdH6e6o_g^_iʐFS۶O%([PmŀK\Uu:giq'=Pg^ƞ9 #,y0#س1(ʜb eKJ%s\P݂ٞ9%nsW=Gވ‡rfyL38Rhc_P͍ Z7⃵(TKa;qzqB@)4KX O%]PMƠCЯyAIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-content-active.png b/core/modules/toolbar/images/icon-content-active.png new file mode 100644 index 0000000..24b6982 --- /dev/null +++ b/core/modules/toolbar/images/icon-content-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxbd@(&\ 5p6CʂC1# + B.0C i  C|ORՅ \ </G<Hur/ zIu!(| @P( O 2U# ?R݅'szPIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-content.png b/core/modules/toolbar/images/icon-content.png new file mode 100644 index 0000000..32081b6 --- /dev/null +++ b/core/modules/toolbar/images/icon-content.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxbdr @ٹ dX=4t8`>|.͌x\PdRB.0C i  C|=|”.dB@ʀ@.$@ ? Ʌr^O oZHA#GI.F0@bH)$'R蓰ѳӀ 4!IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-extend-active.png b/core/modules/toolbar/images/icon-extend-active.png new file mode 100644 index 0000000..faa13c5 --- /dev/null +++ b/core/modules/toolbar/images/icon-extend-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڼ  `#F0JG0 n4#΃K.r$'ZcҸzZOB}O uhsw`6ahQԎ`( a,412*_5I0c5!|P:vMhsf͆`3 ƥ<IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-extend.png b/core/modules/toolbar/images/icon-extend.png new file mode 100644 index 0000000..52219ff --- /dev/null +++ b/core/modules/toolbar/images/icon-extend.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<,IDATxڜ10 Evb8B: la8Lt G:d۱DYeYn`6R# N`UUn&o`S)ָV\+ A 5weQi~ķ ?w5cVP*U9r'eisJ#H!L&迖[cR!5m AЏ;b'+d,F"\.uJv*BԘ+B&&'u @H@U\Ax=P ;Oa0|q(~Oa la`` 8" +4:DC l .o34iX08 ##.dA߰@&!ɷd^f ṖЁyXk "aJPCd=KT) 2$JIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-help.png b/core/modules/toolbar/images/icon-help.png new file mode 100644 index 0000000..0a8fe2e --- /dev/null +++ b/core/modules/toolbar/images/icon-help.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<>IDATxڴ0!Cv%PT V t;qD,A;0H %?m. ɷ͟M1 gzB{RTah+!|fLN27 '@]y s:TSkWBf~.B ֦$LKV.w%IML&=+'P܏P}*N m\;`8J3h뼙[`%ȣLQґIwR +Դ[Dy:9\.c@w -M#6suF}}#?D9ot:[+WmBQ*/*G.)qz$ UZpNj`۶{.Hk*>LO0{ +0\ lJIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-home.png b/core/modules/toolbar/images/icon-home.png new file mode 100644 index 0000000..5d8d501 --- /dev/null +++ b/core/modules/toolbar/images/icon-home.png @@ -0,0 +1,6 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxԔA +0E xGH;UqJ#. ( GԊ ?1h02*B 8MS +a! J,bN G3/H$s8qUUkIpE +!ɄAuJb}:yh3PEQu]hymEUU8Y' m8ذޘG3M5MC#&/7a],uDS)~o=ʱIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-menu-active.png b/core/modules/toolbar/images/icon-menu-active.png new file mode 100644 index 0000000..ab6462e --- /dev/null +++ b/core/modules/toolbar/images/icon-menu-active.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IIDATxb``v,Pia0M`_~b߿xW^Ǵ 4Iq2{LIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-menu.png b/core/modules/toolbar/images/icon-menu.png new file mode 100644 index 0000000..a02939f --- /dev/null +++ b/core/modules/toolbar/images/icon-menu.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<\IDATxbb` $o kDΖD" gJ.| 2ynd$`UI &11; 9dsIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-reports-active.png b/core/modules/toolbar/images/icon-reports-active.png new file mode 100644 index 0000000..96f4673 --- /dev/null +++ b/core/modules/toolbar/images/icon-reports-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڬ ]Fp6N  :BGTr<.,3w] +#IhT*TD :L0(]'!+%N!g;&}XMQoRy8c67`'R)zX (Sx/Q#%eF?-Nڦ-@4rdL7U O)ouеQtủ+as|47 zIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-reports.png b/core/modules/toolbar/images/icon-reports.png new file mode 100644 index 0000000..49ede88 --- /dev/null +++ b/core/modules/toolbar/images/icon-reports.png @@ -0,0 +1,5 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe< IDATxڬT 0 LQdF00B_}Ͼ `f26 +2IKX&.ڶR1{Ld"f:@ ih1sAUJd0`S=|`g(!j͒\΅" ۳*5Jr8!DF5:4G] +xt#oQ ϶ K4q:cE&2HO0G^yc,tDHY3 w'^ :3PdVIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-structure-active.png b/core/modules/toolbar/images/icon-structure-active.png new file mode 100644 index 0000000..3ab2375 --- /dev/null +++ b/core/modules/toolbar/images/icon-structure-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxb`q$#r"uHc 0QT7PxAH0쨛H5Dp([#6 #wf t)cb V PB 6ʡB~(|9Wr\Q@^ `c'6CIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-structure.png b/core/modules/toolbar/images/icon-structure.png new file mode 100644 index 0000000..7a8302f --- /dev/null +++ b/core/modules/toolbar/images/icon-structure.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxb`qdEEr"u6=,,VCL2 $H^s@b?f`/3%JJ,Xҗ#./q'x b +bz,/ 1jZ`@ArC' "`+@C0nj+Sލu\IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js new file mode 100644 index 0000000..c86defe --- /dev/null +++ b/core/modules/toolbar/js/toolbar.js @@ -0,0 +1,248 @@ +/** + * @file toolbar.js + * + * Defines the behavior of the Drupal administration toolbar. + */ +(function ($, Drupal, drupalSettings) { + +"use strict"; + +Drupal.toolbar = Drupal.toolbar || {}; + +/** + * Store the state of the active tab so it will remain active across page loads. + */ +var activeTab = JSON.parse(localStorage.getItem('Drupal.toolbar.activeTab')); + +/** + * Store the state of the trays to maintain them across page loads. + */ +var orientation = JSON.parse(localStorage.getItem('Drupal.toolbar.trayOrientation')) || 'vertical'; +var locked = JSON.parse(localStorage.getItem('Drupal.toolbar.trayLocked')) || false; + +/** + * Holds the jQuery objects of the toolbar DOM element and the trays. + */ +var $toolbar; +var $trays; + +/** + * Holds the mediaQueryList object. + */ +var mql = { + standard: null, + wide: null +}; + +/** + * Register tabs with the toolbar. + * + * The Drupal toolbar allows modules to register top-level tabs. These may point + * directly to a resource or toggle the visibility of a tray. + * + * Modules register tabs with hook_toolbar(). + */ +Drupal.behaviors.toolbar = { + attach: function(context) { + var options = $.extend(this.options, drupalSettings.toolbar); + $toolbar = $(context).find('#toolbar').once('toolbar'); + if ($toolbar.length) { + // Store the trays in a scoped variable. + $trays = $toolbar.find('.tray'); + $trays + // Add the tray orientation toggles. + .find('.lining') + .append(Drupal.theme('toolbarOrientationToggle')); + // Set the active state of the orientation toggles. + changeOrientation(orientation, locked); + // Store media queries. + mql.standard = window.matchMedia(options.breakpoints['module.toolbar.standard']); + // Set up switching between the vertical and horizontal presentation + // of the toolbar trays based on a breakpoint. + mql.wide = window.matchMedia(options.breakpoints['module.toolbar.wide']); + mql.wide.addListener(Drupal.toolbar.mediaQueryChangeHandler); + if (mql.wide.matches) { + Drupal.toolbar.mediaQueryChangeHandler(mql.wide); + } + // Call setHeight on screen resize. Wrap it in debounce to prevent + // setHeight from being called too frequently. + var setHeight = Drupal.debounce(Drupal.toolbar.setHeight, 250); + // Attach behavior to the window. + $(window) + .on('resize.toolbar', setHeight); + // Attach behaviors to the toolbar. + $toolbar + .on('click.toolbar', '.bar a', Drupal.toolbar.toggleTray) + .on('click.toolbar', '.toggle-orientation button', Drupal.toolbar.orientationChangeHandler); + // Decorate the main menu with an interactive menu. + $toolbar.find('.administration.tray .toolbar-menu > .menu').toolbarMenu(); + // Restore the open tab. Only open the tab on wide screens. + if (activeTab && window.matchMedia(options.breakpoints['module.toolbar.standard']).matches) { + $toolbar.find('[data-toolbar-tray="' + activeTab + '"]').trigger('click.toolbar'); + } + // Recalculate the offset top of the toolbar once on initialization. + else { + Drupal.toolbar.setHeight(); + } + } + }, + // Default options. + options: { + breakpoints: { + 'module.toolbar.standard': '', + 'module.toolbar.wide': '' + } + } +}; +/** + * Toggle a toolbar tab and the associated tray. + */ +Drupal.toolbar.toggleTray = function (event) { + var $tab = $(event.target); + var name = $tab.attr('data-toolbar-tray'); + // Activate the selected tab and associated tray. + var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].tray').toggleClass('active'); + if ($activateTray.length) { + event.preventDefault(); + event.stopPropagation(); + $tab.toggleClass('active'); + // Store the active tab name or remove the setting. + if ($tab.hasClass('active')) { + localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name)); + } + else { + localStorage.removeItem('Drupal.toolbar.activeTab'); + } + // Disable non-selected tabs and trays. + $toolbar.find('.bar a').not($tab).removeClass('active'); + $toolbar.find('.tray').not($activateTray).removeClass('active'); + // Adjust the body to accommodate trays. + setBodyState(); + // Adjust the height of the toolbar. + Drupal.toolbar.setHeight(); + } +}; + +/** + * The height of the toolbar offsets the top of the page content. + * + * Page components can register with the offsettopchange event to know when + * the height of the toolbar changes. + */ +Drupal.toolbar.setHeight = function () { + // Set the top of the all the trays to the height of the bar. + var barHeight = $toolbar.find('.bar').outerHeight(); + var height = barHeight; + var bhpx = barHeight + 'px'; + var tray; + for (var i = 0, il = $trays.length; i < il; i++) { + tray = $trays[i]; + if (!tray.style.top.length || (tray.style.top !== bhpx)) { + tray.style.top = bhpx; + } + } + /** + * Get the height of the active tray and include it in the total + * height of the toolbar. + */ + height += $trays.filter('.active.horizontal').outerHeight() || 0; + // Indicate the height of the toolbar in the attribute data-offset-top. + var offset = parseInt($toolbar.attr('data-offset-top'), 10); + if (offset !== height) { + $toolbar.attr('data-offset-top', height); + // Alter the padding on the top of the body element. + $('body').css('padding-top', height); + $(document).trigger('offsettopchange', height); + $(window).trigger('resize'); + } +}; +/** + * Respond to configured media query applicability changes. + */ +Drupal.toolbar.mediaQueryChangeHandler = function (mql) { + var orientation = (mql.matches) ? 'horizontal' : 'vertical'; + changeOrientation(orientation); + // Adjust the body to accommodate trays. + setBodyState(); + // Adjust the height of the toolbar. + Drupal.toolbar.setHeight(); +}; +/** + * Respond to the toggling of the tray orientation. + */ +Drupal.toolbar.orientationChangeHandler = function (event) { + event.preventDefault(); + event.stopPropagation(); + var $button = $(event.target); + var orientation = event.target.value; + var $tray = $button.closest('.tray'); + changeOrientation(orientation, true); + // Adjust the body to accommodate trays. + setBodyState(); + // Adjust the height of the toolbar. + Drupal.toolbar.setHeight(); +}; + +/** + * Change the orientation of the tray between vertical and horizontal. + * + * @param {String} newOrientation + * Either 'vertical' or 'horizontal'. The orientation to change the tray to. + * + * @param {Boolean} isLock + * Whether the orientation of the tray should be locked if it is being toggled + * to vertical. + */ +function changeOrientation (newOrientation, isLock) { + var oldOrientation = orientation; + if (isLock) { + locked = (newOrientation === 'vertical'); + if (locked) { + localStorage.setItem('Drupal.toolbar.trayLocked', JSON.stringify(locked)); + } + else { + localStorage.removeItem('Drupal.toolbar.trayLocked'); + } + } + if ((!locked && newOrientation === 'horizontal') || newOrientation === 'vertical') { + $trays + .removeClass('horizontal vertical') + .addClass(newOrientation); + orientation = newOrientation; + toggleOrientationToggle((newOrientation === 'vertical') ? 'horizontal' : 'vertical'); + } + // 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. + */ +function setBodyState () { + var $activeTray = $trays.filter('.active'); + $('body') + .toggleClass('toolbar-tray-open', !!$activeTray.length) + .toggleClass('toolbar-vertical', (!!$activeTray.length && orientation === 'vertical')) + .toggleClass('toolbar-horizontal', (!!$activeTray.length && orientation === 'horizontal')); +} +/** + * 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'); +} + +/** + * A toggle is an interactive element often bound to a click handler. + * + * @return {String} + * A string representing a DOM fragment. + */ +Drupal.theme.toolbarOrientationToggle = function () { + return '
' + + '' + + '' + + '
'; +}; + +}(jQuery, Drupal, drupalSettings)); diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js new file mode 100644 index 0000000..0dc9dd6 --- /dev/null +++ b/core/modules/toolbar/js/toolbar.menu.js @@ -0,0 +1,166 @@ +/** + * Builds a nested accordion widget. + * + * Invoke on an HTML list element with the jQuery plugin pattern. + * - For example, $('.menu').toolbarMenu(); + */ + +(function ($, Drupal) { + +"use strict"; + +/** + * Store the open menu tray. + */ +var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); + + $.fn.toolbarMenu = function () { + + var ui = { + 'handleOpen': Drupal.t('Open'), + 'handleClose': Drupal.t('Close') + }; + /** + * Handle clicks from the disclosure button on an item with sub-items. + * + * @param {Object} event + * A jQuery Event object. + */ + function toggleClickHandler (event) { + var $toggle = $(event.target); + var $item = $toggle.closest('li'); + // Toggle the list item. + toggleList($item); + // Close open siblings and their open children. + var $openItems = $item.siblings().filter('.open'); + toggleList($openItems, false); + // Save link of the closest open item through a unique selector. + var href = $toggle.siblings('a[href]').attr('href'); + if (href) { + localStorage.setItem('Drupal.toolbar.menu.openItem', JSON.stringify(href)); + } + else { + localStorage.removeItem('Drupal.toolbar.menu.openItem'); + } + } + /** + * Toggle the open/close state of a list is a menu. + * + * @param {jQuery} $item + * The li item to be toggled. + * + * @param {Boolean} switcher + * A flag that forces toggleClass to add or a remove a class, rather than + * simply toggling its presence. + */ + function toggleList ($item, switcher) { + var $toggle = $item.find('> .box > .handle'); + switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open'); + // Toggle the item open state. + $item.toggleClass('open', switcher); + // Twist the toggle. + $toggle.toggleClass('open', switcher); + // Adjust the toggle text. + $toggle + .text((switcher) ? ui.handleClose : ui.handleOpen) + .attr('aria-pressed', switcher); + } + /** + * Add markup to the menu elements. + * + * Items with sub-elements have a list toggle attached to them. Menu item + * links and the corresponding list toggle are wrapped with in a div + * classed with .box. The .box div provides a positioning context for the + * item list toggle. + * + * @param {jQuery} $menu + * The root of the menu to be initialized. + */ + function initItems ($menu) { + var options = { + 'class': 'icon handle', + 'text': ui.handleOpen + }; + // Initialize items and their links. + $menu.find('li > a').wrap('
'); + // Add a handle to each list item if it has a menu. + $menu.find('li').each(function (index, element) { + var $item = $(element); + if ($item.find('> ul.menu').length) { + $item.find('> .box') + .prepend(Drupal.theme('toolbarMenuItemToggle', options)); + } + }); + } + /** + * Adds a level class to each list based on its depth in the menu. + * + * This function is called recursively on each sub level of lists elements + * until the depth of the menu is exhausted. + * + * @param {jQuery} $lists + * A jQuery object of ul elements. + * + * @param {Integer} level + * The current level number to be assigned to the list elements. + */ + function markListLevels ($lists, level) { + level = (!level) ? 1 : level; + var $lis = $lists.find('> li').addClass('level-' + level); + $lists = $lis.find('> ul'); + if ($lists.length) { + markListLevels($lists, level + 1); + } + } + /** + * Marks the trail of the active link in the menu back to the root of the + * menu. + * + * @param {jQuery} $menu + * The root of the menu. + */ + function traceActiveTrail ($menu) { + $menu.find('a.active').parentsUntil('.root', 'li').addClass('active-trail'); + } + /** + * On page load, open the active menu item. + * + * @param {jQuery} $menu + * The root of the menu. + */ + function openActiveItem ($menu) { + var $activeItem = $menu.find('a.active'); + if ($activeItem.attr('href') === location.pathname) { + toggleList($menu.find('a[href="' + location.pathname + '"]').parentsUntil('.root', 'li'),true); + localStorage.setItem('Drupal.toolbar.menu.openItem', JSON.stringify(location.pathname)); + } + else if (openItem) { + toggleList($menu.find('a[href="' + openItem + '"]').parentsUntil('.root', 'li'), true); + } + } + // Bind event handlers. + $(document).on('click.toolbar', '.handle', toggleClickHandler); + return this.each(function (selector) { + var $menu = $(this).once('toolbar-menu'); + if ($menu.length) { + $menu.addClass('root'); + initItems($menu); + markListLevels($menu); + // Restore previous and active states. + traceActiveTrail($menu); + openActiveItem($menu); + } + }); + }; + + /** + * A toggle is an interactive element often bound to a click handler. + * + * @return {String} + * A string representing a DOM fragment. + */ + Drupal.theme.toolbarMenuItemToggle = function (options) { + return ''; + }; + +}(jQuery, Drupal)); diff --git a/core/modules/toolbar/templates/toolbar.tpl.php b/core/modules/toolbar/templates/toolbar.tpl.php deleted file mode 100644 index b3d561c..0000000 --- a/core/modules/toolbar/templates/toolbar.tpl.php +++ /dev/null @@ -1,33 +0,0 @@ - - diff --git a/core/modules/toolbar/templates/toolbar.twig b/core/modules/toolbar/templates/toolbar.twig new file mode 100644 index 0000000..84fb641 --- /dev/null +++ b/core/modules/toolbar/templates/toolbar.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Default template for admin toolbar. + * + * Available variables: + * + * - tabs: Themed links for the top level tabs. + * - trays: An array of trays. It contains: + * - content: The themed tray content. + * - attributes: HTML attributes for the surrounding element. It includes: + * - id: The unique id of the tray. This corresponds to the module name + * registered the tray. + * - class: A list of classes to target the trays for styling. + * - attributes: HTML attributes for the surrounding element. It includes: + * - id: The unique id of the toolbar. + * - class: A list of classes to target the toolbar for styling. + * + * @see template_preprocess() + * @see template_preprocess_toolbar() + * + * @ingroup themeable + */ +#} + +
+ + {{ tabs }} + + + {% for tray in trays %} + + {% endfor %} +
diff --git a/core/modules/toolbar/toolbar-rtl.css b/core/modules/toolbar/toolbar-rtl.css deleted file mode 100644 index e121547..0000000 --- a/core/modules/toolbar/toolbar-rtl.css +++ /dev/null @@ -1,37 +0,0 @@ - -#toolbar, -#toolbar * { - text-align: right; -} -#toolbar ul li { - float: right; -} -#toolbar ul li a { - display: inline-block; - float: none; - zoom: 1; -} -#toolbar div.toolbar-menu { - padding: 5px 50px 5px 50px; -} -#toolbar-user { - float: left; -} -#toolbar ul#toolbar-user li { - float: none; - display: inline; -} -#toolbar-menu { - float: none; -} -#toolbar-home { - float: right; -} -#toolbar ul li.home a { - position: absolute; - right: 10px; -} -#toolbar div.toolbar-menu a.toggle { - left: 10px; - right: auto; -} diff --git a/core/modules/toolbar/toolbar.api.php b/core/modules/toolbar/toolbar.api.php new file mode 100644 index 0000000..783089b --- /dev/null +++ b/core/modules/toolbar/toolbar.api.php @@ -0,0 +1,97 @@ + array( + 'title' => t('Home'), + 'href' => '', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Home page'), + ), + ), + 'weight' => -10, + ); + + // Define the tray in a separate function. + $items['shortcuts'] = array( + 'tab' => array( + 'title' => t('Shortcuts'), + 'href' => '', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Shortcuts'), + ), + ), + 'tray' => array( + '#pre_render' => array('shortcut_toolbar_pre_render'), + ), + ); + + return $items; +} + +/** + * Alter the Toolbar menu after hook_toolbar() is invoked. + * + * This hook is invoked by toolbar_view() immediately after hook_toolbar(). The + * toolbar definitions are passed in by reference. Each element of the $items + * array is one item returned by a module from hook_toolbar(). Additional items + * may be added, or existing items altered. + * + * @param $items + * Associative array of Toolbar menu definitions returned from hook_toolbar(). + */ +function hook_toolbar_alter(&$items) { + // Move the User tab to the right. + $items['user']['weight'] = 5; +} + +/** + * @} End of "addtogroup hooks". + */ diff --git a/core/modules/toolbar/toolbar.css b/core/modules/toolbar/toolbar.css deleted file mode 100644 index bd18110..0000000 --- a/core/modules/toolbar/toolbar.css +++ /dev/null @@ -1,129 +0,0 @@ - -body.toolbar { - padding-top: 2.2em; -} -body.toolbar-drawer { - padding-top: 5.3em; -} - -/** - * Aggressive resets so we can achieve a consistent look in hostile CSS - * environments. - */ -#toolbar, -#toolbar * { - border: 0; - font-size: 100%; - line-height: inherit; - list-style: none; - margin: 0; - outline: 0; - padding: 0; - text-align: left; /* LTR */ - vertical-align: baseline; -} - -/** - * Base styles. - * - * We use a keyword for the toolbar font size to make it display consistently - * across different themes, while still allowing browsers to resize the text. - */ -#toolbar { - background: #666; - color: #ccc; - font: normal small "Lucida Grande", Verdana, sans-serif; - left: 0; - margin: 0 -20px; - padding: 0 20px; - position: fixed; - right: 0; - top: 0; - box-shadow: 0 3px 20px #000; - z-index: 600; -} -#toolbar div.collapsed { - display: none; - visibility: hidden; -} -#toolbar a { - color: #fff; - font-size: .846em; - text-decoration: none; -} -#toolbar ul li, -#toolbar ul li a { - float: left; /* LTR */ -} - -/** - * Administration menu. - */ -#toolbar div.toolbar-menu { - background: #000; - line-height: 20px; - padding: 5px 50px 5px 10px; /* LTR */ - position: relative; -} -#toolbar-home a span { - background: url(toolbar.png) no-repeat 0 -45px; - display: block; - height: 14px; - margin: 3px 0px; - text-indent: -9999px; - vertical-align: text-bottom; - width: 11px; -} -#toolbar-user { - float: right; /* LTR */ -} -#toolbar-menu { - float: left; /* LTR */ -} -#toolbar div.toolbar-menu a.toggle { - background: url(toolbar.png) 0 -20px no-repeat; - bottom: 0; - cursor: pointer; - height: 25px; - overflow: hidden; - position: absolute; - right: 10px; /* LTR */ - text-indent: -9999px; - width: 25px; -} -#toolbar div.toolbar-menu a.toggle:focus, -#toolbar div.toolbar-menu a.toggle:hover { - background-position: -50px -20px; -} -#toolbar div.toolbar-menu a.toggle-active { - background-position: -25px -20px; -} -#toolbar div.toolbar-menu a.toggle-active.toggle:focus, -#toolbar div.toolbar-menu a.toggle-active.toggle:hover { - background-position: -75px -20px; -} -#toolbar div.toolbar-menu ul li a { - padding: 0 10px; - border-radius: 10px; -} -#toolbar div.toolbar-menu ul li a:focus, -#toolbar div.toolbar-menu ul li a:hover, -#toolbar div.toolbar-menu ul li a:active, -#toolbar div.toolbar-menu ul li a.active:focus { - background: #444; -} -#toolbar div.toolbar-menu ul li a.active:hover, -#toolbar div.toolbar-menu ul li a.active:active, -#toolbar div.toolbar-menu ul li a.active, -#toolbar div.toolbar-menu ul li.active-trail a { - background: url(toolbar.png) 0 0 repeat-x; - text-shadow: #333 0 1px 0; -} - -/** - * Collapsed drawer of additional toolbar content. - */ -#toolbar div.toolbar-drawer { - position: relative; - padding: 0 10px; -} diff --git a/core/modules/toolbar/toolbar.info b/core/modules/toolbar/toolbar.info index 758dc9c..a6fd841 100644 --- a/core/modules/toolbar/toolbar.info +++ b/core/modules/toolbar/toolbar.info @@ -3,3 +3,7 @@ description = Provides a toolbar that shows the top-level administration menu it core = 8.x package = Core version = VERSION + +dependencies[] = breakpoint + +configure = admin/structure/toolbar diff --git a/core/modules/toolbar/toolbar.install b/core/modules/toolbar/toolbar.install new file mode 100644 index 0000000..aa8c3d6 --- /dev/null +++ b/core/modules/toolbar/toolbar.install @@ -0,0 +1,28 @@ +' . t('Uses') . ''; $output .= '
'; $output .= '
' . t('Displaying administrative links') . '
'; - $output .= '
' . t('The Toolbar module displays a bar containing top-level administrative links across the top of the screen. Below that, the Toolbar module has a drawer section where it displays links provided by other modules, such as the core Shortcut module. The drawer can be hidden/shown by using the show/hide shortcuts link at the end of the toolbar.', array('@shortcuts-help' => url('admin/help/shortcut'))) . '
'; + $output .= '
' . t('The Toolbar module displays a bar containing top-level administrative links across the top of the screen. Below that, the Toolbar module has a drawer section where it displays links provided by other modules, such as the core Shortcut module. The drawer can be hidden/shown by clicking on its corresponding tab.', array('@shortcuts-help' => url('admin/help/shortcut'))) . '
'; $output .= '
'; return $output; } @@ -41,87 +43,18 @@ function toolbar_theme($existing, $type, $theme, $path) { 'render element' => 'toolbar', 'template' => 'toolbar', ); - $items['toolbar_toggle'] = array( - 'variables' => array( - 'collapsed' => NULL, - 'attributes' => array(), - ), - ); - return $items; -} - -/** - * Implements hook_menu(). - */ -function toolbar_menu() { - $items['toolbar/toggle'] = array( - 'title' => 'Toggle drawer visibility', - 'type' => MENU_CALLBACK, - 'page callback' => 'toolbar_toggle_page', - 'access arguments' => array('access toolbar'), - ); return $items; } /** - * Page callback: Toggles the visibility of the toolbar drawer. - * - * @see toolbar_menu(). - */ -function toolbar_toggle_page() { - global $base_path; - // Toggle the value in the cookie. - setcookie('Drupal.toolbar.collapsed', !_toolbar_is_collapsed(), NULL, $base_path); - // Redirect the user from where he used the toggle element. - drupal_goto(); -} - -/** - * Formats an element used to toggle the toolbar drawer's visibility. - * - * @param $variables - * An associative array containing: - * - collapsed: A boolean value representing the toolbar drawer's visibility. - * - attributes: An associative array of HTML attributes. - * - * @return - * An HTML string representing the element for toggling. - * - * @ingroup themable - */ -function theme_toolbar_toggle($variables) { - if ($variables['collapsed']) { - $toggle_text = t('Show shortcuts'); - } - else { - $toggle_text = t('Hide shortcuts'); - $variables['attributes']['class'][] = 'toggle-active'; - } - return l($toggle_text, 'toolbar/toggle', array('query' => drupal_get_destination(), 'attributes' => array('title' => $toggle_text) + $variables['attributes'])); -} - -/** - * Determines the current state of the toolbar drawer's visibility. - * - * @return - * TRUE when drawer is collapsed, FALSE when it is expanded. - */ -function _toolbar_is_collapsed() { - // PHP converts dots into underscores in cookie names to avoid problems with - // its parser, so we use a converted cookie name. - return isset($_COOKIE['Drupal_toolbar_collapsed']) ? $_COOKIE['Drupal_toolbar_collapsed'] : 0; -} - -/** * Implements hook_page_build(). * - * Add admin toolbar to the page_top region automatically. + * Add admin toolbar to the page_bottom region automatically. */ function toolbar_page_build(&$page) { - $page['page_top']['toolbar'] = array( + $page['page_bottom']['toolbar'] = array( '#pre_render' => array('toolbar_pre_render'), '#access' => user_access('access toolbar'), - 'toolbar_drawer' => array(), ); } @@ -139,33 +72,41 @@ function toolbar_pre_render($toolbar) { } /** - * Implements hook_preprocess_HOOK() for html.tpl.php. - * - * Add some page classes, so global page theming can adjust to the toolbar. + * Implements template_preprocess_HOOK(). */ -function toolbar_preprocess_html(&$vars) { - if (isset($vars['page']['page_top']['toolbar']) && user_access('access toolbar')) { - $vars['attributes']['class'][] = 'toolbar'; - if (!_toolbar_is_collapsed()) { - $vars['attributes']['class'][] = 'toolbar-drawer'; - } - } -} +function template_preprocess_toolbar(&$variables) { + // Metadata for the toolbar wrapping element. + $variables['attributes'] = new Attribute(array( + 'id' => 'toolbar', + // The 'overlay-displace-top' class pushes the overlay down, so it appears + // below the toolbar. + 'class' => array('toolbar', 'overlay-displace-top'), + 'role' => 'navigation' + )); -/** - * Implements hook_preprocess_HOOK() for toolbar.tpl.php. - * - * Adding the 'overlay-displace-top' class to the toolbar pushes the overlay - * down, so it appears below the toolbar. - */ -function toolbar_preprocess_toolbar(&$variables) { - $variables['attributes']['class'][] = "overlay-displace-top"; + // Provide a convenience variable for the themed tabs. + $variables['toolbar']['tabs']['#attributes']['class'][] = 'overlay-displace-top'; + $variables['tabs'] = $variables['toolbar']['tabs']; + + // 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) { + $variables['trays'][$key] = array( + 'content' => $variables['toolbar']['trays'][$key], + 'attributes' => new Attribute(array( + 'id' => 'toolbar-tray-' . $key, + 'class' => array('tray', 'overlay-displace-top', $key), + 'data-toolbar-tray' => $key, + ) + ), + ); + } } /** * Implements hook_system_info_alter(). * - * Indicate that the 'page_top' region (in which the toolbar will be displayed) + * Indicate that the 'page_bottom' region (in which the toolbar will be displayed) * is an overlay supplemental region that should be refreshed whenever its * content is updated. * @@ -174,98 +115,142 @@ function toolbar_preprocess_toolbar(&$variables) { */ function toolbar_system_info_alter(&$info, $file, $type) { if ($type == 'theme') { - $info['overlay_supplemental_regions'][] = 'page_top'; + $info['overlay_supplemental_regions'][] = 'page_bottom'; } } /** - * Builds the admin menu as a structured array ready for drupal_render(). - * - * @return - * Array of links and settings relating to the admin menu. + * Implements hook_toolbar(). */ -function toolbar_view() { - global $user; +function toolbar_toolbar() { + $items = array(); - $build = array( - '#theme' => 'toolbar', - '#attached'=> array( - 'library' => array( - array('toolbar', 'drupal.toolbar'), + // The 'Home' tab is a simple link, with no corresponding tray. + $items['home'] = array( + 'tab' => array( + 'title' => t('Home'), + 'href' => '', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Home page'), + 'class' => array('icon', 'icon-home'), ), ), + 'weight' => -20, ); - // Retrieve the admin menu from the database. - $links = toolbar_menu_navigation_links(toolbar_get_menu_tree()); - $build['toolbar_menu'] = array( - '#theme' => 'links__toolbar_menu', - '#links' => $links, - '#attributes' => array('id' => 'toolbar-menu'), - '#heading' => array('text' => t('Administrative toolbar'), 'level' => 'h2', 'class' => 'element-invisible'), + // Retrieve the administration menu from the database. + $tree = toolbar_get_menu_tree(); + + // 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',), + ), + 'administration_menu' => menu_tree_output($tree), ); - // Add logout & user account links or login link. - if ($user->uid) { - $links = array( - 'account' => array( - 'title' => t('Hello @username', array('@username' => user_format_name($user))), - 'href' => 'user', - 'html' => TRUE, - 'attributes' => array('title' => t('User account')), - ), - 'logout' => array( - 'title' => t('Log out'), - 'href' => 'user/logout', - ), - ); - } - else { - $links = array( - 'login' => array( - 'title' => t('Log in'), - 'href' => 'user', + $items['administration'] = array( + 'tab' => array( + 'title' => t('Menu'), + 'href' => 'admin', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('Admin menu'), + 'class' => array('icon', 'icon-menu'), ), + ), + 'tray' => $menu, + 'weight' => -15, + ); + + return $items; +} + +/** + * Builds the Toolbar as a structured array ready for drupal_render(). + * + * @return + * A renderable arrray, with two children: + * - 'tabs': an array of links, rendered by theme('links'). + * - 'trays': an array of render elements displayed when the corresponding tab + * is activated. + */ +function toolbar_view() { + + $build = array('#theme' => 'toolbar'); + $build['#attached']['library'][] = array('toolbar', 'toolbar'); + + // Get the configured breakpoint to switch from vertical to horizontal + // toolbar presentation. + $breakpoints = entity_load('breakpoint_group', 'module.toolbar.toolbar'); + if (!empty($breakpoints)) { + $media_queries = array(); + $media_queries['toolbar']['breakpoints'] = array_map( + function($object) {return $object->mediaQuery;}, + $breakpoints->breakpoints); + + $build['#attached']['js'][] = array( + 'data' => $media_queries, + 'type' => 'setting', ); + // // Load the breakpoints for toolbar. + foreach ($breakpoints->breakpoints as $key => $breakpoint) { + $build['#attached']['js'][0]['data']['toolbar']['breakpoints'][$key] = $breakpoint->mediaQuery; + } } - $build['toolbar_user'] = array( - '#theme' => 'links__toolbar_user', - '#links' => $links, - '#attributes' => array('id' => 'toolbar-user'), - ); - // Add a "home" link. - $link = array( - 'home' => array( - 'title' => 'Home', - 'href' => '', - 'html' => TRUE, - 'attributes' => array('title' => t('Home')), + // Get toolbar items from all modules that implement hook_toolbar() or + // hook_toolbar_alter(). + $toolbar_groups = module_invoke_all('toolbar'); + drupal_alter('toolbar', $toolbar_groups); + uasort($toolbar_groups, 'drupal_sort_weight'); + + // Build the tabs and trays from the toolbar groups. + $build['trays'] = array(); + $build['tabs'] = array( + '#theme' => 'links', + '#links' => array(), + '#attributes' => array( + 'class' => array('bar', 'clearfix'), ), + '#heading' => array('text' => t('Toolbar'), 'level' => 'h2', 'class' => 'element-invisible'), ); - $build['toolbar_home'] = array( - '#theme' => 'links', - '#links' => $link, - '#attributes' => array('id' => 'toolbar-home'), + $tab_defaults = array( + 'title' => '', + 'href' => '', + 'html' => FALSE, + 'attributes' => new Attribute(), ); - // Add an anchor to be able to toggle the visibility of the drawer. - $build['toolbar_toggle'] = array( - '#theme' => 'toolbar_toggle', - '#collapsed' => _toolbar_is_collapsed(), - '#attributes' => array('class' => array('toggle')), - ); + foreach ($toolbar_groups as $group => $items) { + if ($tab = $items['tab']) { - // Prepare the drawer links CSS classes. - $toolbar_drawer_classes = array( - 'toolbar-drawer', - 'clearfix', - ); - if (_toolbar_is_collapsed()) { - $toolbar_drawer_classes[] = 'collapsed'; + // 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. + $tab['attributes']['data-toolbar-tray'] = $group; + $tab['attributes']['role'] = 'button'; + + // 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']); + } + else { + // Assign the tray to the build. + $build['trays'][$group] = $items['tray']; + } + } } - $build['toolbar_drawer']['#type'] = 'container'; - $build['toolbar_drawer']['#attributes']['class'] = $toolbar_drawer_classes; return $build; } @@ -280,14 +265,13 @@ function toolbar_get_menu_tree() { $tree = array(); $admin_link = db_query('SELECT * FROM {menu_links} WHERE menu_name = :menu_name AND module = :module AND link_path = :path', array(':menu_name' => 'admin', ':module' => 'system', ':path' => 'admin'))->fetchAssoc(); if ($admin_link) { - $tree = menu_build_tree('admin', array( - 'expanded' => array($admin_link['mlid']), - 'min_depth' => $admin_link['depth'] + 1, - 'max_depth' => $admin_link['depth'] + 1, - )); + $tree = menu_tree_all_data('admin'); } - - return $tree; + // Return the sub-menus of the admin menu root. + foreach ($tree as $key => $menu) { + return (!empty($tree[$key]['below'])) ? $tree[$key]['below'] : array(); + } + return array(); } /** @@ -299,37 +283,34 @@ function toolbar_get_menu_tree() { * @return * An array of links as defined above. */ -function toolbar_menu_navigation_links($tree) { - $links = array(); - foreach ($tree as $item) { - if (!$item['link']['hidden'] && $item['link']['access']) { - // Make sure we have a path specific ID in place, so we can attach icons - // and behaviors to the items. - $id = str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['href']); - - $link = $item['link']['localized_options']; - $link['href'] = $item['link']['href']; - // Add icon placeholder. - $link['title'] = '' . check_plain($item['link']['title']); - // Add admin link ID. - $link['attributes'] = array('id' => 'toolbar-link-' . $id); - if (!empty($item['link']['description'])) { - $link['title'] .= ' (' . $item['link']['description'] . ')'; - $link['attributes']['title'] = $item['link']['description']; - } - $link['html'] = TRUE; - - $class = ' path-' . $id; - if (toolbar_in_active_trail($item['link']['href'])) { - $class .= ' active-trail'; - } - $links['menu-' . $item['link']['mlid'] . $class] = $link; +function toolbar_menu_navigation_links(&$tree) { + foreach ($tree as $key => $item) { + // Configure sub-items. + if (!empty($item['below'])) { + toolbar_menu_navigation_links($tree[$key]['below']); } + // Make sure we have a path specific ID in place, so we can attach icons + // and behaviors to the items. + $tree[$key]['link']['localized_options']['attributes'] = array( + 'id' => 'toolbar-link-' . str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['link_path']), + 'class' => array( + 'icon', + 'icon-' . strtolower(str_replace(' ', '-', $item['link']['title'])), + ), + ); } - return $links; } /** + * 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 @@ -361,21 +342,41 @@ function toolbar_in_active_trail($path) { * Implements hook_library_info(). */ function toolbar_library_info() { - $libraries['drupal.toolbar'] = array( + $libraries['toolbar'] = array( 'title' => 'Toolbar', 'version' => VERSION, 'js' => array( - drupal_get_path('module', 'toolbar') . '/toolbar.js' => array(), + drupal_get_path('module', 'toolbar') . '/js/toolbar.js' => array(), ), 'css' => array( - drupal_get_path('module', 'toolbar') . '/toolbar.css', + drupal_get_path('module', 'toolbar') . '/css/toolbar.base.css', + drupal_get_path('module', 'toolbar') . '/css/toolbar.theme.css', + drupal_get_path('module', 'toolbar') . '/css/toolbar.icons.css', ), 'dependencies' => array( array('system', 'jquery'), array('system', 'drupal'), array('system', 'drupalSettings'), + array('system', 'matchmedia'), + array('system', 'jquery.once'), + array('system', 'drupal.debounce'), + array('toolbar', 'toolbar.menu'), + ), + ); + + $libraries['toolbar.menu'] = array( + 'title' => 'Toolbar nested accordion menus.', + 'version' => VERSION, + 'js' => array( + drupal_get_path('module', 'toolbar') . '/js/toolbar.menu.js' => array(), + ), + 'css' => array( + drupal_get_path('module', 'toolbar') . '/css/toolbar.menu.css', + ), + 'dependencies' => array( + array('system', 'jquery'), + array('system', 'drupal'), array('system', 'jquery.once'), - array('system', 'jquery.cookie'), ), ); diff --git a/core/modules/toolbar/toolbar.png b/core/modules/toolbar/toolbar.png deleted file mode 100644 index f2c7f35..0000000 --- a/core/modules/toolbar/toolbar.png +++ /dev/null @@ -1,4 +0,0 @@ -PNG - - IHDRd9,~OPLTEfffffffffffffff===>>>GGGHHHPPPQQQXXXfffstRNSO^zIDATx[O@o -VK71i}.f.Ifbd`pg01\. \ԌP`MRhUl DB(gŰ8!+2VL,Z$MNY16:V,fKzANJZ?6 se]OԍI_"[Wߺ, }8D !yP,G9BUĩ%W'X"_U!N<*"IENDB` \ No newline at end of file diff --git a/core/modules/user/images/icon-user-active.png b/core/modules/user/images/icon-user-active.png new file mode 100644 index 0000000..3c9d73b --- /dev/null +++ b/core/modules/user/images/icon-user-active.png @@ -0,0 +1,4 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxb`v߿@?߇6߿ +@|c q ?DžA2:OlllYp?aU H(f< )A˗/q#~ H"̑O@'?F ^9޽.XсH>@AHHo߾mR%dho޼RT FW^|a fH, \<4ddIENDB` \ No newline at end of file diff --git a/core/modules/user/images/icon-user-active.svg b/core/modules/user/images/icon-user-active.svg new file mode 100644 index 0000000..453bc42 --- /dev/null +++ b/core/modules/user/images/icon-user-active.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/core/modules/user/images/icon-user.png b/core/modules/user/images/icon-user.png new file mode 100644 index 0000000..3c847c6 --- /dev/null +++ b/core/modules/user/images/icon-user.png @@ -0,0 +1,6 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<&IDATxb`j'O +022@lx' Ǐ+ d*`~46, |2@A$СC o'"8 . +O$0(J EdȈ5pipuu} @̀#`8 `/ 7oEN$oR |}}? l^z5u@C3fƒ@zChhW\40W$|Z>le @#%K@^O0fZD 0= +`PC0q WIENDB` \ No newline at end of file diff --git a/core/modules/user/images/icon-user.svg b/core/modules/user/images/icon-user.svg new file mode 100644 index 0000000..14d9ab9 --- /dev/null +++ b/core/modules/user/images/icon-user.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/core/modules/user/user.css b/core/modules/user/user.css index 866ee40..ccd2b56 100644 --- a/core/modules/user/user.css +++ b/core/modules/user/user.css @@ -1,4 +1,3 @@ - #permissions td.module { font-weight: bold; } @@ -88,3 +87,14 @@ div.password-suggestions ul { .profile dd { margin: 0 0 1em 0; } + +/** + * Toolbar icon. + */ +.icon-user:before { + background-image: url("images/icon-user.png"); +} +.icon-user:active:before, +.active .icon-user:before { + background-image: url("images/icon-user-active.png"); +} diff --git a/core/modules/user/user.module b/core/modules/user/user.module index 68b45ea..3d4e748 100644 --- a/core/modules/user/user.module +++ b/core/modules/user/user.module @@ -3100,6 +3100,64 @@ function user_file_download_access($field, EntityInterface $entity, File $file) } /** + * Implements hook_toolbar(). + */ +function user_toolbar() { + global $user; + + // Add logout & user account links or login link. + if ($user->uid) { + $links = array( + 'account' => array( + 'title' => t('View profile'), + 'href' => 'user', + 'html' => TRUE, + 'attributes' => array( + 'title' => t('User account'), + ), + ), + 'logout' => array( + 'title' => t('Log out'), + 'href' => 'user/logout', + ), + ); + } + else { + $links = array( + 'login' => array( + 'title' => t('Log in'), + 'href' => 'user', + ), + ); + } + + $user_tray = 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( + 'tab' => array( + 'title' => user_format_name($user), + 'href' => 'user', + 'html' => FALSE, + 'attributes' => array( + 'title' => t('My account'), + 'class' => array('icon', 'icon-user'), + ), + ), + 'tray' => $user_tray, + 'weight' => 100, + ); + + return $items; +} + +/** * Implements hook_library_info(). */ function user_library_info() { diff --git a/core/profiles/standard/standard.info b/core/profiles/standard/standard.info index 4c812d0..4fb4d6c 100644 --- a/core/profiles/standard/standard.info +++ b/core/profiles/standard/standard.info @@ -4,6 +4,7 @@ version = VERSION core = 8.x dependencies[] = node dependencies[] = block +dependencies[] = breakpoint dependencies[] = color dependencies[] = config dependencies[] = comment -- 1.7.10.4