Commit ab07a33a authored by webchick's avatar webchick

Issue #1847198 by benjifisher, jessebeach, effulgentsia: Update the structure...

Issue #1847198 by benjifisher, jessebeach, effulgentsia: Update the structure returned by hook_toolbar().
parent 8eefa571
......@@ -47,26 +47,29 @@ function edit_toolbar() {
}
$tab['edit'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'title' => t('Edit'),
'href' => '',
'html' => FALSE,
'attributes' => array(
'class' => array('icon', 'icon-edit', 'edit-nothing-editable-hidden'),
'#type' => 'link',
'#title' => t('Edit'),
'#href' => '',
'#options' => array(
'html' => FALSE,
'attributes' => array(
'id' => 'toolbar-tab-edit',
'class' => array('icon', 'icon-edit', 'edit-nothing-editable-hidden'),
),
),
),
'tray' => array(
'#attached' => array(
'library' => array(
array('edit', 'edit'),
),
'#attached' => array(
'library' => array(
array('edit', 'edit'),
),
),
);
// Include the attachments and settings for all available editors.
$attachments = drupal_container()->get('edit.editor.selector')->getAllEditorAttachments();
$tab['edit']['tray']['#attached'] = NestedArray::mergeDeep($tab['edit']['tray']['#attached'], $attachments);
$tab['edit']['#attached'] = NestedArray::mergeDeep($tab['edit']['#attached'], $attachments);
return $tab;
}
......
......@@ -608,13 +608,8 @@ function shortcut_preprocess_page(&$variables) {
* Implements hook_toolbar().
*/
function shortcut_toolbar() {
$items = array();
$links = shortcut_renderable_links();
$links['#attached'] = array(
'css' => array(
drupal_get_path('module', 'shortcut') . '/shortcut.base.css',
drupal_get_path('module', 'shortcut') . '/shortcut.theme.css',
),
);
$shortcut_set = shortcut_current_displayed_set();
$configure_link = NULL;
if (shortcut_set_edit_access($shortcut_set)) {
......@@ -625,26 +620,35 @@ function shortcut_toolbar() {
'#options' => array('attributes' => array('class' => array('edit-shortcuts'))),
);
}
$links_tray = array(
'#heading' => t('User-defined shortcuts'),
'shortcuts' => $links,
'configure' => $configure_link,
);
$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'),
if (!empty($links) || !empty($configure_link)) {
$items['shortcuts'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'link',
'#title' => t('Shortcuts'),
'#href' => 'admin/config/user-interface/shortcut',
'#options' => array(
'attributes' => array(
'title' => t('Shortcuts'),
'class' => array('icon', 'icon-shortcut'),
),
),
),
),
'tray' => $links_tray,
'weight' => -10,
);
'tray' => array(
'#heading' => t('User-defined shortcuts'),
'shortcuts' => $links,
'configure' => $configure_link,
),
'#weight' => -10,
'#attached' => array(
'css' => array(
drupal_get_path('module', 'shortcut') . '/shortcut.base.css',
drupal_get_path('module', 'shortcut') . '/shortcut.theme.css',
),
),
);
}
return $items;
}
......
......@@ -39,12 +39,12 @@ html.js .toolbar {
.toolbar .menu li {
padding-top: 0;
}
.js .toolbar .bar li,
.js .toolbar .bar .tab,
.js .toolbar .menu li {
display: block;
}
.js .toolbar .bar li,
.js .toolbar .horizontal li {
.js .toolbar .bar .tab,
.js .toolbar .horizontal .tab {
float: left; /* LTR */
}
.js .toolbar a {
......@@ -62,13 +62,13 @@ html.js .toolbar {
width: 100%;
}
@media only screen {
.js .toolbar .bar li,
.js .toolbar .bar .tab,
.js .toolbar .tray li {
float: none; /* LTR */
}
}
@media only screen and (min-width: 16.5em) {
.js .toolbar .bar li,
.js .toolbar .bar .tab,
.js .toolbar .horizontal li {
float: left; /* LTR */
}
......
......@@ -31,19 +31,21 @@
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3333);
color: #dddddd;
}
.toolbar .bar a:hover {
.toolbar .bar a {
color: #ffffff;
}
.toolbar .bar .tab > a {
font-weight: bold;
}
.toolbar .bar .tab > 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%);
text-decoration: none;
}
.toolbar .bar a.active {
.toolbar .bar .tab > 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;
font-weight: bold;
}
/**
* Toolbar tray.
......
......@@ -80,7 +80,7 @@ Drupal.behaviors.toolbar = {
// query application decide the orientation.
changeOrientation((locked) ? 'vertical' : ((mql.wide.matches) ? 'horizontal' : 'vertical'), locked);
// Render the main menu as a nested, collapsible accordion.
$toolbar.find('.administration.tray .toolbar-menu > .menu').toolbarMenu();
$toolbar.find('.toolbar-menu-administration > .menu').toolbarMenu();
// Call setHeight on screen resize. Wrap it in debounce to prevent
// setHeight from being called too frequently.
var setHeight = Drupal.debounce(Drupal.toolbar.setHeight, 200);
......@@ -152,7 +152,7 @@ Drupal.toolbar.toggleTray = function (event) {
localStorage.removeItem('Drupal.toolbar.activeTab');
}
// Disable non-selected tabs and trays.
$toolbar.find('.bar a')
$toolbar.find('.bar .trigger')
.not($tab)
.removeClass('active')
// Set aria-pressed to false.
......
{#
/**
* @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
*/
#}
<nav id="{{ attributes.id }}" class="{{ attributes.class }}"{{ attributes }}>
<!-- Tabs -->
{{ tabs }}
<!-- Trays -->
{% for tray in trays %}
<div id="{{ tray.attributes.id }}" class="{{ tray.attributes.class }}"{{ tray.attributes }}>
<div class="lining clearfix">
<h3 class="element-invisible">{{ tray.heading }}</h3>
{{ tray.content }}
</div>
</div>
{% endfor %}
</nav>
......@@ -6,34 +6,42 @@
*/
/**
* Um
* Implements hook_toolbar().
*/
function toolbar_test_toolbar() {
$tray_items = array(
l('link 1', '<front>'),
l('link 2', '<front>'),
l('link 3', '<front>'),
);
$items['testing'] = array(
$items['testing'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'title' => t('Test tab'),
'href' => '',
'html' => FALSE,
'attributes' => array(
'title' => t('Test tab'),
'#type' => 'link',
'#title' => t('Test tab'),
'#href' => '',
'#options' => array(
'html' => FALSE,
'attributes' => array(
'id' => 'toolbar-tab-testing',
'title' => t('Test tab'),
),
),
),
'tray' => array(
'#heading' => t('Test tray'),
'#wrapper_attributes' => array(
'id' => 'toolbar-tray-testing',
),
'content' => array(
'#theme' => 'item_list',
'#items' => $tray_items,
'#items' => array(
l(t('link 1'), '<front>'),
l(t('link 2'), '<front>'),
l(t('link 3'), '<front>'),
),
'#prefix' => '<h2 class="element-invisible">' . t('Test tray') . '</h2>',
'#attributes' => array(
'class' => array('menu'),
),
),
),
'weight' => 50,
'#weight' => 50,
);
return $items;
......
......@@ -2,7 +2,7 @@
/**
* @file
* Hooks provided by the Toolbar module.
* Hooks provided by the toolbar module.
*/
/**
......@@ -11,82 +11,146 @@
*/
/**
* Add items to the Toolbar menu.
* Add items to the toolbar menu.
*
* The Toolbar has two parts. The tabs are menu links, rendered by
* theme_links(), that are displayed if the module is enabled and the user has
* the 'access toolbar' permission. The trays are render elements, usually lists
* of links, and each tray corresponds to a tab. When a tab is activated, the
* corresponding tray is displayed; only one tab can be activated at a time. If
* a tab does not have a corresponding tray, or if javascript is disabled, then
* the tab is simply a link.
* The toolbar is a container for adminstrative and site-global interactive
* components.
*
* This hook is invoked in toolbar_view().
* The toolbar provides a common styling for items denoted by the .tab class.
* The theme wrapper toolbar_tab_wrapper is provided to wrap a toolbar item
* with the appropriate markup to apply the styling.
*
* The toolbar provides a construct called a 'tray'. The tray is a container
* for content. The tray may be associated with a toggle in the adminstration
* bar. The toggle shows or hides the tray and is optimized for small and
* large screens. To create this association, hook_toolbar() returns one or
* more render elements of type 'toolbar_item', containing the toggle and tray
* elements in its 'tab' and 'tray' properties.
*
* The following properties are available:
* - 'tab': A renderable array.
* - 'tray': Optional. A renderable array.
* - '#weight': Optional. Integer weight used for sorting toolbar items in
* adminstration bar area.
*
* This hook is invoked in toolbar_pre_render().
*
* @return
* An array of toolbar items, keyed by unique identifiers such as 'home' or
* 'administration', or the short name of the module implementing the hook.
* The corresponding value is an associative array that may contain the
* following key-value pairs:
* - 'tab': Required, unless the item is adding links to an existing tab. An
* array with keys 'title', 'href', 'html', and 'attributes', as used by
* theme_links(). The 'href' value is ignored unless 'tray' (below) is
* omitted, or if javascript is disabled.
* - 'tray': Optional. A render element that is displayed when the tab is
* activated.
* - 'weight': Optional. Integer weight used for sorting tabs.
* The corresponding value is a render element of type 'toolbar_item'.
*
* @see toolbar_view()
* @see toolbar_pre_render()
* @ingroup toolbar_tabs
*/
function hook_toolbar() {
$items = array();
// The 'Home' tab is a simple link, with no corresponding tray.
// Add a search field to the toolbar. The search field employs no toolbar
// module theming functions.
$items['global_search'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'search',
'#attributes' => array(
'placeholder' => t('Search the site'),
'class' => array('search-global'),
),
),
'#weight' => 200,
// Custom CSS, JS or a library can be associated with the toolbar item.
'#attached' => array(
'css' => array(
drupal_get_path('module', 'search') . '/css/search.base.css',
),
),
);
// The 'Home' tab is a simple link, which is wrapped in markup associated
// with a visual tab styling.
$items['home'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'title' => t('Home'),
'href' => '<front>',
'html' => FALSE,
'attributes' => array(
'title' => t('Home page'),
'#type' => 'link',
'#title' => t('Home'),
'#href' => '<front>',
'#options' => array(
'attributes' => array(
'title' => t('Home page'),
'class' => array('icon', 'icon-home'),
),
),
),
'weight' => -10,
'#weight' => -20,
);
/**
* 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.
*/
// A tray may be associated with a tab.
//
// When the tab is activated, the tray will become visible, either in a
// horizontal or vertical orientation on the screen.
//
// The tray should contain a renderable array. An optional #heading property
// can be passed. This text is written to a heading tag in the tray as a
// landmark for accessibility.
$items['commerce'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'title' => t('Shopping cart'),
'href' => '',
'html' => FALSE,
'attributes' => array(
'title' => t('Shopping cart'),
'#type' => 'link',
'#title' => t('Shopping cart'),
'#href' => '/cart',
'#options' => array(
'html' => FALSE,
'attributes' => array(
'title' => t('Shopping cart'),
),
),
),
'tray' => array(
'#heading' => t('Shopping cart actions'),
'content' => array(
'shopping_cart' => array(
'#theme' => 'item_list',
'#items' => array( /* An item list renderable array */ ),
),
),
'weight' => 50,
'#weight' => 150,
);
// The tray can be used to render arbritrary content.
//
// A renderable array passed to the 'tray' property will be rendered outside
// the administration bar but within the containing toolbar element.
//
// If the default behavior and styling of a toolbar tray is not desired, one
// can render content to the toolbar element and apply custom theming and
// behaviors.
$items['user_messages'] = array(
// Include the toolbar_tab_wrapper to style the link like a toolbar tab.
// Exclude the theme wrapper if custom styling is desired.
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'link',
'#theme' => 'user_message_toolbar_tab',
'#theme_wrappers' => array(),
'#title' => t('Messages'),
'#href' => '/user/messages',
'#options' => array(
'attributes' => array(
'title' => t('Messages'),
),
),
),
'tray' => array(
'#heading' => t('User messages'),
'messages' => array(/* renderable content */),
),
'#weight' => 125,
);
return $items;
}
/**
* Alter the Toolbar menu after hook_toolbar() is invoked.
* 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
......@@ -94,11 +158,11 @@ function hook_toolbar() {
* may be added, or existing items altered.
*
* @param $items
* Associative array of Toolbar menu definitions returned from hook_toolbar().
* Associative array of toolbar menu definitions returned from hook_toolbar().
*/
function hook_toolbar_alter(&$items) {
// Move the User tab to the right.
$items['commerce']['weight'] = 5;
$items['commerce']['#weight'] = 5;
}
/**
......
This diff is collapsed.
......@@ -2708,29 +2708,30 @@ function user_toolbar() {
);
}
$user_tray = array(
'#heading' => t('User account actions'),
'content' => array(
'#theme' => 'links__toolbar_user',
'#links' => $links,
'#attributes' => array(
'class' => array('menu',),
),
),
);
$items['user'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'title' => user_format_name($user),
'href' => 'user',
'html' => FALSE,
'attributes' => array(
'title' => t('My account'),
'class' => array('icon', 'icon-user'),
'#type' => 'link',
'#title' => user_format_name($user),
'#href' => 'user',
'#options' => array(
'attributes' => array(
'title' => t('My account'),
'class' => array('icon', 'icon-user'),
),
),
),
'tray' => array(
'#heading' => t('User account actions'),
'user_links' => array(
'#theme' => 'links__toolbar_user',
'#links' => $links,
'#attributes' => array(
'class' => array('menu'),
),
),
),
'tray' => $user_tray,
'weight' => 100,
'#weight' => 100,
);
return $items;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment