Commit 7a012b19 authored by xjm's avatar xjm

Issue #2922603 by tedbow, Wim Leers, andrewmacpherson: Mark Settings Tray module as stable

parent 06fd53d2
......@@ -11,6 +11,9 @@
* @Block(
* id = "page_title_block",
* admin_label = @Translation("Page title"),
* forms = {
* "settings_tray" = FALSE,
* },
* )
*/
class PageTitleBlock extends BlockBase implements TitleBlockPluginInterface {
......
......@@ -15,7 +15,10 @@
*
* @Block(
* id = "help_block",
* admin_label = @Translation("Help")
* admin_label = @Translation("Help"),
* forms = {
* "settings_tray" = FALSE,
* },
* )
*/
class HelpBlock extends BlockBase implements ContainerFactoryPluginInterface {
......
name: 'Settings Tray'
type: module
description: 'Provides a sidebar to configure blocks on the page.'
package: Core (Experimental)
package: Core
version: VERSION
core: 8.x
dependencies:
......
......@@ -9,8 +9,6 @@
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Url;
use Drupal\settings_tray\Block\BlockEntityOffCanvasForm;
use Drupal\settings_tray\Form\SystemBrandingOffCanvasForm;
use Drupal\settings_tray\Form\SystemMenuOffCanvasForm;
use Drupal\block\entity\Block;
use Drupal\block\BlockInterface;
......@@ -168,47 +166,10 @@ function settings_tray_toolbar_alter(&$items) {
*/
function settings_tray_block_alter(&$definitions) {
foreach ($definitions as &$definition) {
// If a block plugin already defines its own 'settings_tray' form, use that
// form instead of specifying one here.
if (isset($definition['forms']['settings_tray'])) {
continue;
}
switch ($definition['id']) {
// Use specialized forms for certain blocks that do not yet provide the
// form with their own annotation.
// @todo Move these into the corresponding block plugin annotations in
// https://www.drupal.org/node/2896356.
case 'system_menu_block':
$definition['forms']['settings_tray'] = SystemMenuOffCanvasForm::class;
break;
case 'system_branding_block':
$definition['forms']['settings_tray'] = SystemBrandingOffCanvasForm::class;
break;
// No off-canvas form for the page title block, despite it having
// contextual links: it's too confusing that you're editing configuration,
// not content, so the title itself cannot actually be changed.
// @todo Move these into the corresponding block plugin annotations in
// https://www.drupal.org/node/2896356.
case 'page_title_block':
$definition['forms']['settings_tray'] = FALSE;
break;
case 'system_main_block':
$definition['forms']['settings_tray'] = FALSE;
break;
case 'help_block':
$definition['forms']['settings_tray'] = FALSE;
break;
// Otherwise, use the block plugin's normal form rather than
// a custom form for Settings Tray.
default:
$definition['forms']['settings_tray'] = $definition['class'];
break;
// If a block plugin does not define its own 'settings_tray' form, use the
// plugin class itself.
if (!isset($definition['forms']['settings_tray'])) {
$definition['forms']['settings_tray'] = $definition['class'];
}
}
}
......
<?php
namespace Drupal\settings_tray\Form;
namespace Drupal\system\Form;
use Drupal\Core\Access\AccessResult;
use Drupal\Core\Config\ConfigFactoryInterface;
......@@ -10,9 +10,7 @@
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* The off-canvas form handler for the SystemBrandingBlock.
*
* @see settings_tray_block_alter()
* The settings_tray form handler for the SystemBrandingBlock.
*
* @internal
*/
......
<?php
namespace Drupal\settings_tray\Form;
namespace Drupal\system\Form;
use Drupal\Component\Plugin\PluginInspectionInterface;
use Drupal\Core\Access\AccessResult;
......@@ -18,9 +18,7 @@
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* The off-canvas form handler for the SystemMenuBlock.
*
* @see settings_tray_block_alter()
* The setting_tray form handler for the SystemMenuBlock.
*
* @internal
*/
......
......@@ -15,7 +15,10 @@
*
* @Block(
* id = "system_branding_block",
* admin_label = @Translation("Site branding")
* admin_label = @Translation("Site branding"),
* forms = {
* "settings_tray" = "Drupal\system\Form\SystemBrandingOffCanvasForm",
* },
* )
*/
class SystemBrandingBlock extends BlockBase implements ContainerFactoryPluginInterface {
......
......@@ -10,7 +10,10 @@
*
* @Block(
* id = "system_main_block",
* admin_label = @Translation("Main page content")
* admin_label = @Translation("Main page content"),
* forms = {
* "settings_tray" = FALSE,
* },
* )
*/
class SystemMainBlock extends BlockBase implements MainContentBlockPluginInterface {
......
......@@ -16,7 +16,10 @@
* id = "system_menu_block",
* admin_label = @Translation("Menu"),
* category = @Translation("Menus"),
* deriver = "Drupal\system\Plugin\Derivative\SystemMenuBlock"
* deriver = "Drupal\system\Plugin\Derivative\SystemMenuBlock",
* forms = {
* "settings_tray" = "\Drupal\system\Form\SystemMenuOffCanvasForm",
* },
* )
*/
class SystemMenuBlock extends BlockBase implements ContainerFactoryPluginInterface {
......
/**
* @file
* Styling for Settings Tray module.
*/
/*
* Position the edit toolbar tab.
* @todo Move changes into contextual module when Settings Tray is not
* experimental: https://www.drupal.org/node/2784591.
*/
.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: left;
}
[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: right;
}
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode a,
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode input {
pointer-events: none;
}
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .contextual-links a {
pointer-events: inherit;
}
/**
* @file
* Motion effects for Settings Tray module.
*
* Motion effects are in a separate file so that they can be easily turned off
* to improve performance if desired.
*/
/* Transition the edit icon in the toolbar. */
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
transition: all 0.7s ease;
}
/* Transition the editables on the page, their contextual links and their hover states. */
.dialog-off-canvas-main-canvas .contextual,
.dialog-off-canvas-main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
.dialog-off-canvas-main-canvas.js-off-canvas-dialog-open .js-settings-tray-edit-mode .settings-tray-editable {
transition: all 0.7s ease;
}
/**
* @file
* Visual styling for Settings Tray module.
*/
/* @todo remove the @imports when we find a better way to load these styles last.
* https://www.drupal.org/node/1945262.
*/
/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-settings-tray-edit-mode {
background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
}
.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
color: #999;
}
.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
color: #333;
}
/* Style both the edit and editing states of the contextual links toggle tab. */
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
background-color: #0066a1;
background-image: linear-gradient(to bottom, #0066a1, #005b98);
color: #eee;
text-shadow: none;
font-weight: bold;
outline: none;
}
/* Make the hover of the inactive state the same as the active state. */
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
color: #fff;
}
/* Make the hover of the active state the same as the inactive state. */
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-color: #0066a1;
background-image: linear-gradient(to bottom, #0066a1, #005b98);
color: #fff;
}
/* Make the inactive icon grey. */
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
background-image: url(../../../misc/icons/bebebe/pencil.svg);
}
/* Make the active icon white. */
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
.toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
/* Style the editables while in edit mode. */
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
outline: 1px dashed rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
background-color: rgba(0, 0, 0, 0.2);
}
/**
* @file
* Visual styling for the toolbar when Settings Tray module is enabled.
*/
/* @todo Move this into toolbar when module is not experimental:
* https://www.drupal.org/node/2784593.
*/
/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-settings-tray-edit-mode {
background-color: #fff;
}
#toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
color: #999;
}
#toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
color: #333;
}
/* Style both the edit and editing states of the contextual links toggle tab. */
.toolbar-icon-edit.toolbar-item {
background-color: #0066a1;
background-image: linear-gradient(to bottom, #0066a1, #005b98);
color: #eee;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
font-weight: 700;
-webkit-font-smoothing: antialiased;
}
.toolbar-icon-edit.toolbar-item.is-active {
background-color: #0a7bc1;
background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
color: #fff;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
font-weight: 700;
-webkit-font-smoothing: antialiased;
}
.toolbar-tab:hover > .toolbar-icon-edit,
.toolbar-icon-edit:focus .toolbar-item {
background-color: #0a7bc1;
background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
border-color: #1e5c90;
color: #fff;
outline: none;
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:before,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
background-image: url(../../../misc/icons/bebebe/pencil.svg);
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
color: #fff;
}
#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-image: linear-gradient(to bottom, #0a6fb4, #0a65aa);
}
......@@ -169,6 +169,15 @@ libraries-override:
css/quickedit.theme.css: css/quickedit/quickedit.theme.css
css/quickedit.icons.theme.css: css/quickedit/quickedit.icons.theme.css
settings_tray/drupal.settings_tray:
css:
component:
css/settings_tray.module.css: css/settings_tray/settings_tray.module.css
css/settings_tray.motion.css: css/settings_tray/settings_tray.motion.css
css/settings_tray.toolbar.css: css/settings_tray/settings_tray.toolbar.css
theme:
css/settings_tray.theme.css: css/settings_tray/settings_tray.theme.css
shortcut/drupal.shortcut:
css:
theme:
......
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