Commit 7bbf113d authored by Dries's avatar Dries

Issue #1137920 by jessebeach, lewisnyman, tkoleary, Bojhan, webchick,...

Issue #1137920 by jessebeach, lewisnyman, tkoleary, Bojhan, webchick, benjifisher, nod_, sjbassett, kathryn531, effulgentsia, Everett Zufelt: fixed toolbar on small screen sizes and redesign toolbar for desktop.
parent c416e408
/**
* 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;
};
};
......@@ -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;
};
......
......@@ -4,21 +4,6 @@
* Generic RTL base styles for shortcut module.
*/
/**
* Toolbar.
*/
#edit-shortcuts {
left: 0;
position: absolute;
top: 0;
}
#shortcut-toolbar ul {
float: none;
}
#shortcut-toolbar .icon {
float: right;
}
/**
* Add/remove links.
*/
......
/**
* @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.
*/
......
......@@ -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'] = '<div id="shortcut-toolbar">';
$links['#suffix'] = '</div>';
$shortcut_set = shortcut_current_displayed_set();
$configure_link = NULL;
if (shortcut_set_edit_access($shortcut_set)) {
......@@ -743,17 +730,30 @@ 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(
'#heading' => t('User-defined shortcuts'),
'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;
}
/**
......
......@@ -4,22 +4,6 @@
* RTL styling for the shortcut module.
*/
/**
* 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.
*/
......@@ -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;
}
/**
* @file
* Styling for the shortcut module.
......@@ -7,40 +6,25 @@
/**
* 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,
.icon-shortcut.active: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;
.toolbar .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;
.toolbar .horizontal .edit-shortcuts {
float: left; /* LTR */
}
/**
......@@ -65,15 +49,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;
}
......@@ -1246,6 +1246,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',
......@@ -1861,7 +1874,6 @@ function system_library_info() {
array('system', 'jquery'),
),
);
$libraries['drupal.tableselect'] = array(
'title' => 'Tableselect',
'version' => VERSION,
......
narrow: 'only screen and (min-width: 16.5em)'
standard: 'only screen and (min-width: 38.125em)'
wide: 'only screen and (min-width: 50em)'
breakpoints:
- 'module.toolbar.narrow'
- 'module.toolbar.wide'
/**
* @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 {
.js .toolbar .bar li,
.js .toolbar .tray li {
float: none;
}
}
@media only screen and (min-width: 16.5em) {
.js .toolbar .bar li,
.js .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;
}
@media only screen and (min-width: 16.5em) {
.toolbar .vertical.active > .lining:before {
left: auto;
right: -1px;
}
}
/**
* At larger screen sizes, the tray pushes the page content.
*/
@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;
}
/**
* @file toolbar.base.css
*
*
* Aggressive resets so we can achieve a consistent look in hostile CSS
* environments.
*/
html.js #toolbar-administration,
html .toolbar * {
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
vertical-align: baseline;
}
html.js #toolbar-administration {
font-size: small;
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,
.js .toolbar .horizontal 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: 1250;
width: 100%;
}
@media only screen {
.js .toolbar .bar li,
.js .toolbar .tray li {
float: none; /* LTR */
}
}
@media only screen and (min-width: 16.5em) {
.js .toolbar .bar li,
.js .toolbar .horizontal li {
float: left; /* LTR */
}
}
@media only screen and (min-width: 28.125em) {
.js .toolbar .bar {
position: fixed;
}
}
/**
* Toolbar tray.
*/
.js .toolbar .tray {
display: none;
position: absolute;
}
.toolbar .tray {
z-index: 250;
}
.toolbar .horizontal {
width: 100%;
}
.toolbar .vertical,
.toolbar .vertical > .lining:before {
bottom: 0;
width: 240px;
width: 15rem;
}
.toolbar .vertical {
left: -100%; /* LTR */
position: absolute;
}
.toolbar .horizontal {
left: 0; /* LTR */
height: 0;
/* Set one higher than the contextual links gear. */
z-index: 1000;
}
.toolar .tray .lining {
position: relative;
}
.toolbar .vertical > .lining,
.toolbar .vertical > .lining:before {
left: -100%; /* LTR */
min-height: 100%;
position: absolute;
width: 100%;
}
.toolbar .vertical > .lining:before {
bottom: 0;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: '';
display: none;
height: 100%;
/* Support for devices that do not support position fixed. */
position: absolute;
position: fixed;
top: 0;
z-index: -1;
}
.toolbar .tray.active {
display: block;
}
.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 {
.toolbar .vertical,
.toolbar .vertical > .lining:before {
bottom: auto;
width: 100%;
}
}
@media only screen and (min-width: 16.5em) {
.toolbar .vertical {
bottom: 0;
}
.toolbar .vertical,
.toolbar .vertical > .lining:before {
width: 240px;
width: 15rem;
}
.toolbar .vertical.active > .lining:before {
display: block;
left: -1px; /* LTR */
}
}
@media only screen and (min-width: 28.125em) {
.toolbar .tray.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.
*
* Hide the orientation toggle from browsers that do not interpret
* media queries. They get a standard horizontal toolbar.
*/
.toolbar .horizontal .toggle-orientation {
display: none;
}
@media only screen {
.toolbar .tray .toggle-orientation {
display: none;
}
}
@media only screen and (min-width: 16.5em) {
.toolbar .tray .toggle-orientation {
display: block;
}
}
.toolbar .horizontal .toggle-orientation {
bottom: 0;
position: absolute;
right: 0; /* LTR */
top: 0;
}
.toolbar .vertical .toggle-orientation {
float: right; /* LTR */
width: 100%;
}
/**
* @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: 36em) {
.toolbar .bar .icon {
background-position: right center;
padding-left: 1.3333em;
padding-right: 2.75em;
}
.toolbar .bar .icon:before {
left: 0;
right: 0.6667em;
}
}
/**
* @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;
content: '';
display: block;
height: 100%;
left: 0.6667em; /* LTR */
position: absolute;
top: 0;
width: 20px;
}
.toolbar button.icon {
background-color: transparent;
border: 0;
font-size: 1em;
}
.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,
.icon-home.active:before {
background-image: url("../images/icon-home-active.png");
}
.icon-menu:before {
background-image: url("../images/icon-menu.png");
}