Commit 7f4cbc43 authored by webchick's avatar webchick

Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers: Properly...

Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers: Properly style outside-in off canvas tray
parent b714d00d
/**
* @file
* Visual styling for summary and details in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas details,
.ui-dialog-offcanvas summary,
.ui-dialog-offcanvas .ui-dialog-content {
background: #474747;
color: #ddd;
}
.ui-dialog-offcanvas summary a {
color: #ddd;
padding: 0 inherit;
}
.ui-dialog-offcanvas summary a:hover,
.ui-dialog-offcanvas summary a:focus {
color: #fff;
}
.ui-dialog-offcanvas details,
.ui-dialog-offcanvas summary,
.ui-dialog-offcanvas .details-wrapper {
border-width: 0;
/* Cancel out the padding of the parent. */
margin: 0 -20px;
padding: 0 20px;
}
.ui-dialog-offcanvas summary {
text-shadow: none;
outline: none;
padding: 10px 20px;
font-size: 14px;
transition: all .5s ease;
}
.ui-dialog-offcanvas summary:hover,
.ui-dialog-offcanvas summary:focus {
background-color: #222;
outline: none;
}
.ui-dialog-offcanvas details[open] {
background-color: #333;
padding-bottom: 10px;
}
.ui-dialog-offcanvas details[open] > summary {
background-color: #333;
color: #eee;
}
.ui-dialog-offcanvas details[open] > summary:hover {
background-color: #222;
color: #fff;
}
/**
* @file
* Visual styling for forms in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas label {
line-height: normal;
font-size: 12px;
font-weight: normal;
color: #ddd;
}
.ui-dialog-offcanvas .description,
.ui-dialog-offcanvas .form-item .description,
.ui-dialog-offcanvas .details-description {
color: #ddd;
margin-top: 5px;
font-size: 12px;
font-style: normal;
}
.ui-dialog-offcanvas .details-wrapper .description {
color: #bbb;
}
.ui-dialog-offcanvas .form-item {
margin-bottom: 10px;
margin-top: 10px;
}
/* Set size and position for all inputs. */
.ui-dialog-offcanvas .form-select,
.ui-dialog-offcanvas .form-text,
.ui-dialog-offcanvas .form-tel,
.ui-dialog-offcanvas .form-email,
.ui-dialog-offcanvas .form-url,
.ui-dialog-offcanvas .form-search,
.ui-dialog-offcanvas .form-number,
.ui-dialog-offcanvas .form-color,
.ui-dialog-offcanvas .form-file,
.ui-dialog-offcanvas .form-textarea,
.ui-dialog-offcanvas .form-date,
.ui-dialog-offcanvas .form-time {
box-sizing: border-box;
max-width: 100%;
padding: 6px;
margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: 1px;
border-radius: 2px;
outline: 0;
display: block;
font-size: 14px;
line-height: 16px;
cursor: pointer;
}
/* Reduce contrast for fields against dark backround. */
.ui-dialog-offcanvas .form-text,
.ui-dialog-offcanvas .form-tel,
.ui-dialog-offcanvas .form-email,
.ui-dialog-offcanvas .form-url,
.ui-dialog-offcanvas .form-search,
.ui-dialog-offcanvas .form-number,
.ui-dialog-offcanvas .form-color,
.ui-dialog-offcanvas .form-file,
.ui-dialog-offcanvas .form-textarea,
.ui-dialog-offcanvas .form-date,
.ui-dialog-offcanvas .form-time {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
background-color: #eee;
border-color: #333;
color: #595959;
}
.ui-dialog-offcanvas .form-text:focus,
.ui-dialog-offcanvas .form-tel:focus,
.ui-dialog-offcanvas .form-email:focus,
.ui-dialog-offcanvas .form-url:focus,
.ui-dialog-offcanvas .form-search:focus,
.ui-dialog-offcanvas .form-number:focus,
.ui-dialog-offcanvas .form-color:focus,
.ui-dialog-offcanvas .form-file:focus,
.ui-dialog-offcanvas .form-textarea:focus,
.ui-dialog-offcanvas .form-date:focus,
.ui-dialog-offcanvas .form-time:focus {
border-color: #40b6ff;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
background-color: #fff;
}
.ui-dialog-offcanvas input[type="checkbox"],
.ui-dialog-offcanvas .checkbox,
.ui-dialog-offcanvas input[type="radio"],
.ui-dialog-offcanvas .radio {
position: static;
margin: 0;
}
.ui-dialog-offcanvas td .checkbox {
display: table-cell;
line-height: normal;
vertical-align: middle;
}
.ui-dialog-offcanvas .form-checkbox,
.ui-dialog-offcanvas .form-radio {
/* Add contrast for dark background. */
box-shadow: 0 0 2px 1px #000;
}
.ui-dialog-offcanvas input[type="radio"] {
/* Add full circular radius. */
border-radius: 50%;
}
.ui-dialog-offcanvas .form-actions {
text-align: center;
}
......@@ -4,11 +4,10 @@
*/
/* Position the offcanvas tray container outside the right of the viewport. */
.ui-dialog.ui-dialog-offcanvas {
.ui-dialog-offcanvas {
box-sizing: border-box;
height: 100%;
overflow: hidden;
z-index: 501;
overflow: visible;
}
/* Shift the main canvas to the right for right-to-left languages. */
......@@ -16,30 +15,17 @@
right: 0;
}
/* Create a place to name the tray. */
.ui-dialog.ui-dialog-offcanvas h1 {
padding: 15px 25% 15px 15px; /* LTR */
margin-top: 0;
margin-bottom: 0;
font-size: 120%;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas h1 {
text-align: right;
padding-right: 0;
padding-left: 25%;
}
/* Wrap the form that's inside the offcanvas tray. */
.ui-dialog.ui-dialog-offcanvas > .ui-dialog-content {
padding: 0 15px;
.ui-dialog-offcanvas .ui-dialog-content {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
overflow-x: hidden;
overflow-y: auto;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas .ui-dialog-content {
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
text-align: right;
}
.ui-dialog.ui-dialog-offcanvas > .form-item,
.ui-dialog.ui-dialog-offcanvas > .form-item .form-item {
width: 100%;
}
/*
* Position the edit toolbar tab.
......@@ -49,39 +35,12 @@
.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: left;
}
/*
* Form layout changes, mostly specific to Bartik theme and menu.
* @todo Remove when more general form styling is done:
* https://www.drupal.org/node/2784437.
*/
.ui-dialog.ui-dialog-offcanvas td {
width: auto;
}
.ui-dialog.ui-dialog-offcanvas .menu-enabled {
width: auto;
}
.ui-dialog.ui-dialog-offcanvas table#menu-overview th {
display: none;
}
.ui-dialog.ui-dialog-offcanvas table#menu-overview tr td:first-child {
min-width: 110px;
}
.ui-dialog.ui-dialog-offcanvas details > .details-wrapper {
padding: 5px;
overflow: scroll;
}
.ui-dialog.ui-dialog-offcanvas .tabledrag-toggle-weight {
font-size: 80%;
}
.ui-dialog.ui-dialog-offcanvas input:focus,
.ui-dialog.ui-dialog-offcanvas summary:focus {
outline: none;
box-shadow: 2px 2px #ddd;
[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
float: right;
}
.offcanvas-lining {
background: #fff;
background: #333;
position: absolute;
top: 0;
height: 100%;
......
/**
* @file
* Visual styling for tables in the Outside-In module off canvas tray.
*/
.ui-dialog-offcanvas table {
border: 0;
border-collapse: collapse;
min-width: 300px;
margin-top: 0;
/* Cancel out the padding of the parent to make the table full width and flush to the bottom. */
margin-right: -20px;
margin-left: -20px;
margin-bottom: -10px;
}
.ui-dialog-offcanvas tr th {
padding: 2px 4px;
background-color: transparent;
border: 0;
border-collapse: collapse;
font-size: 12px;
color: #bbb;
text-align: left; /* LTR */
}
[dir="rtl"] .ui-dialog-offcanvas tr th {
text-align: right;
}
.ui-dialog-offcanvas tr,
.ui-dialog-offcanvas tr td {
padding: 2px 4px;
height: 35px;
vertical-align: middle;
font-size: 13px;
text-align: left; /* LTR */
border: 0px;
border-style: solid;
border-color: #777;
border-bottom-width: 1px;
background: none;
background-color: transparent;
font-size: 12px;
}
[dir="rtl"] .ui-dialog-offcanvas tr th,
[dir="rtl"] .ui-dialog-offcanvas tr td {
text-align: right;
}
.ui-dialog-offcanvas td a {
display: block;
max-width: 120px;
overflow: hidden;
}
.ui-dialog.ui-dialog-offcanvas tr td:first-child,
.ui-dialog.ui-dialog-offcanvas tr th:first-child {
min-width: 120px;
padding-left: 20px; /* LTR */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr td:first-child,
[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr th:first-child {
padding-right: 20px;
}
.ui-dialog-offcanvas tr.odd,
.ui-dialog-offcanvas tr.even {
background-image: none;
background-color: transparent;
}
td.checkbox,
th.checkbox {
text-align: center;
width: 20px;
}
/**
* @file
* Table drag behavior for outside-in module.
*
* @see tabledrag.js
*/
/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
.ui-dialog-offcanvas body.drag {
cursor: move;
}
.ui-dialog-offcanvas tr.region-title {
font-weight: normal;
}
.ui-dialog-offcanvas tr.region-message {
color: #fff;
}
.ui-dialog-offcanvas tr.region-populated {
display: none;
}
.ui-dialog-offcanvas tr.add-new .tabledrag-changed {
display: none;
}
.ui-dialog-offcanvas .draggable a.tabledrag-handle {
background-image: none;
margin: 0;
margin-left: 0; /* LTR */
margin-right: 5px; /* LTR */
height: auto;
min-width: 20px;
padding: 0px;
overflow: hidden;
float: left; /* LTR */
text-decoration: none;
cursor: move;
}
[dir="rtl"] .ui-dialog-offcanvas .draggable a.tabledrag-handle {
float: right;
margin-right: 0;
margin-left: 5px;
}
.ui-dialog-offcanvas a.tabledrag-handle .handle {
/* Use lighter drag icon against dark background. */
background-image: url(../../../misc/icons/bebebe/move.svg);
background-repeat: no-repeat;
background-position: center;
height: auto;
margin: 0;
padding: 0;
width: auto;
}
.ui-dialog-offcanvas .draggable a.tabledrag-handle:hover .handle,
.ui-dialog-offcanvas .draggable a.tabledrag-handle:focus .handle {
background-image: url(../../../misc/icons/787878/move.svg);
text-decoration: none;
}
.ui-dialog-offcanvas .touchevents .draggable td {
padding: 0 10px;
}
.ui-dialog-offcanvas .touchevents .draggable .menu-item__link {
display: inline-block;
padding: 10px 0;
}
.ui-dialog-offcanvas .touchevents a.tabledrag-handle {
height: 44px;
width: 40px;
}
.ui-dialog-offcanvas .touchevents a.tabledrag-handle .handle {
background-position: 40% 19px; /* LTR */
height: 21px;
}
[dir="rtl"] .ui-dialog-offcanvas .touch a.tabledrag-handle .handle {
background-position: right 40% top 19px;
}
.ui-dialog-offcanvas .touchevents .draggable.drag a.tabledrag-handle .handle {
background-position: 50% -32px;
}
.ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
text-align: right; /* LTR */
}
[dir="rtl"] .ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
text-align: left;
}
.ui-dialog-offcanvas .indentation {
float: left; /* LTR */
height: auto;
margin: 0 3px 0 -10px; /* LTR */
padding: 0 0 0 10px; /* LTR */
width: auto;
}
[dir="rtl"] .ui-dialog-offcanvas .indentation {
float: right;
margin: 0 -10px 0 3px;
padding: 0 10px 0 0;
}
.ui-dialog-offcanvas tr.drag {
background-color: #555;
}
.ui-dialog-offcanvas tr.drag-previous {
background-color: #000;
}
/**
* @file
* Visual styling for the toolbar when Outside-In 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-outside-in-edit-mode {
background-color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
color: #999;
}
#toolbar-bar.js-outside-in-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: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
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: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
color: #eee;
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: #2369a6;
background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
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-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
background-image: none;
color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
}
......@@ -5,8 +5,16 @@ drupal.outside_in:
css:
component:
css/outside_in.module.css: {}
css/outside_in.theme.css: {}
css/outside_in.motion.css: {}
css/outside_in.form.css: {}
css/outside_in.table.css: {}
css/outside_in.details.css: {}
css/outside_in.tabledrag.css: {}
theme:
# @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
# both jQuery UI and Classy's dialog.css, remove in
# https://www.drupal.org/node/1945262.
css/outside_in.theme.css: { group: 200 }
dependencies:
- core/jquery
- core/drupal
......
......@@ -5,6 +5,7 @@
* Allows configuring blocks and other configuration from the site front-end.
*/
use Drupal\Core\Asset\AttachedAssetsInterface;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\outside_in\Block\BlockEntityOffCanvasForm;
use Drupal\outside_in\Form\SystemBrandingOffCanvasForm;
......@@ -137,3 +138,16 @@ function outside_in_block_alter(&$definitions) {
}
}
}
/**
* Implements hook_css_alter().
*/
function outside_in_css_alter(&$css, AttachedAssetsInterface $assets) {
// @todo Remove once conditional ordering is introduced in
// https://www.drupal.org/node/1945262.
$path = drupal_get_path('module', 'outside_in') . '/css/outside_in.theme.css';
if (isset($css[$path])) {
// Use 200 to come after CSS_AGGREGATE_THEME.
$css[$path]['group'] = 200;
}
}
......@@ -2,6 +2,6 @@ entity.block.offcanvas_form:
path: '/admin/structure/block/manage/{block}/offcanvas'
defaults:
_entity_form: 'block.offcanvas'
_title: 'Configure block'
_title_callback: '\Drupal\outside_in\Block\BlockEntityOffCanvasForm::title'
requirements:
_permission: 'administer blocks'
......@@ -37,6 +37,9 @@ public function __construct($title, $content, array $dialog_options = [], $setti
$this->dialogOptions['resizable'] = 'w';
$this->dialogOptions['draggable'] = FALSE;
$this->dialogOptions['drupalAutoButtons'] = FALSE;
// @todo drupal.ajax.js does not respect drupalAutoButtons properly, pass an
// empty set of buttons until https://www.drupal.org/node/2793343 is in.
$this->dialogOptions['buttons'] = [];
}
/**
......
......@@ -3,6 +3,7 @@
namespace Drupal\outside_in\Block;
use Drupal\block\BlockForm;
use Drupal\block\BlockInterface;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\PluginWithFormsInterface;
......@@ -15,6 +16,21 @@
*/
class BlockEntityOffCanvasForm extends BlockForm {
/**
* Provides a title callback to get the block's admin label.
*
* @param \Drupal\block\BlockInterface $block
* The block entity.
*
* @return \Drupal\Core\StringTranslation\TranslatableMarkup
* The title.
*/
public function title(BlockInterface $block) {
// @todo Wrap "Configure " in <span class="visually-hidden"></span> once
// https://www.drupal.org/node/2359901 is fixed.
return $this->t('Configure @block', ['@block' => $block->getPlugin()->getPluginDefinition()['admin_label']]);
}
/**
* {@inheritdoc}
*/
......@@ -34,11 +50,21 @@ public function form(array $form, FormStateInterface $form_state) {
];
// Remove the ID and region elements.
unset($form['id'], $form['region']);
unset($form['id'], $form['region'], $form['settings']['admin_label']);
return $form;
}
/**
* {@inheritdoc}
*/
protected function actions(array $form, FormStateInterface $form_state) {
$actions = parent::actions($form, $form_state);
$actions['submit']['#value'] = $this->t('Save @block', ['@block' => $this->entity->getPlugin()->getPluginDefinition()['admin_label']]);
$actions['delete']['#access'] = FALSE;
return $actions;
}
/**
* {@inheritdoc}
*/
......
......@@ -54,6 +54,9 @@ public static function create(ContainerInterface $container) {
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
$form = $this->plugin->buildConfigurationForm($form, $form_state);
$form['block_branding']['#type'] = 'details';
$form['block_branding']['#weight'] = 10;
// Unset links to Site Information form, we can make these changes here.
unset($form['block_branding']['use_site_name']['#description'], $form['block_branding']['use_site_slogan']['#description']);
......@@ -62,7 +65,6 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
'#type' => 'details',
'#title' => t('Site details'),
'#open' => TRUE,
'#weight' => -100,
];
$form['site_information']['site_name'] = [
'#type' => 'textfield',
......
......@@ -8,6 +8,7 @@
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\PluginFormBase;
use Drupal\Core\Render\Element;
use Drupal\Core\Routing\RedirectDestinationTrait;
use Drupal\Core\StringTranslation\StringTranslationTrait;
use Drupal\Core\StringTranslation\TranslationInterface;
......@@ -84,6 +85,18 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
'#open' => TRUE,
];
$form['entity_form'] += $this->getEntityForm($this->entity)->buildForm([], $form_state);
// Print the menu link titles as text instead of a link.
if (!empty($form['entity_form']['links']['links'])) {
foreach (Element::children($form['entity_form']['links']['links']) as $child) {
$title = $form['entity_form']['links']['links'][$child]['title'][1]['#title'];
$form['entity_form']['links']['links'][$child]['title'][1] = ['#markup' => $title];
}
}
// Change the header text.
$form['entity_form']['links']['links']['#header'][0] = $this->t('Link');
$form['entity_form']['links']['links']['#header'][1]['data'] = $this->t('On');
// Remove the label, ID, description, and buttons from the entity form.
unset($form['entity_form']['label'], $form['entity_form']['id'], $form['entity_form']