Commit ac521b9a authored by alexpott's avatar alexpott

Issue #2408525 by MathieuSpil, cosmicdreams, Manjit.Singh, njbarrett,...

Issue #2408525 by MathieuSpil, cosmicdreams, Manjit.Singh, njbarrett, kamalpreetkaur, LewisNyman, axe312, dawehner: Rewrite Views UI CSS inline with our CSS standards - Part 1
parent c97bf911
......@@ -223,7 +223,7 @@ function views_ui_standard_display_dropdown(&$form, FormStateInterface $form_sta
// @todo Move this to a separate function if it's needed on any forms that
// don't have the display dropdown.
$form['override'] = array(
'#prefix' => '<div class="views-override clearfix form--inline" data-drupal-views-offset="top">',
'#prefix' => '<div class="views-override clearfix form--inline views-offset-top" data-drupal-views-offset="top">',
'#suffix' => '</div>',
'#weight' => -1000,
'#tree' => TRUE,
......@@ -231,7 +231,7 @@ function views_ui_standard_display_dropdown(&$form, FormStateInterface $form_sta
// Add the "2 of 3" progress indicator.
if ($form_progress = $view->getFormProgress()) {
$form['progress']['#markup'] = '<div id="views-progress-indicator">' . t('@current of @total', array('@current' => $form_progress['current'], '@total' => $form_progress['total'])) . '</div>';
$form['progress']['#markup'] = '<div id="views-progress-indicator" class="views-progress-indicator">' . t('@current of @total', array('@current' => $form_progress['current'], '@total' => $form_progress['total'])) . '</div>';
$form['progress']['#weight'] = -1001;
}
......
/**
* @file
* The .admin.css file is intended to only contain positioning and size
* declarations. For example: display, position, float, clear, and overflow.
*/
/* @group Resets */
.views-admin ul,
.views-admin menu,
.views-admin dir {
padding-left: 0; /* LTR for IE */
/* padding-start is used so that RTL works out of the box */
-moz-padding-start: 0;
-webkit-padding-start: 0;
padding-start: 0;
padding: 0;
}
.views-admin pre {
margin-bottom: 0;
margin-top: 0;
white-space: pre-wrap;
}
/* @end */
/* @group Columns */
.views-left-25 {
float: left; /* LTR */
width: 25%;
......@@ -32,7 +21,6 @@
[dir="rtl"] .views-left-25 {
float: right;
}
.views-left-30 {
float: left; /* LTR */
width: 30%;
......@@ -40,7 +28,6 @@
[dir="rtl"] .views-left-30 {
float: right;
}
.views-left-40 {
float: left; /* LTR */
width: 40%;
......@@ -48,7 +35,6 @@
[dir="rtl"] .views-left-40 {
float: right;
}
.views-left-50 {
float: left; /* LTR */
width: 50%;
......@@ -56,7 +42,6 @@
[dir="rtl"] .views-left-50 {
float: right;
}
.views-left-75 {
float: left; /* LTR */
width: 75%;
......@@ -64,7 +49,6 @@
[dir="rtl"] .views-left-75 {
float: right;
}
.views-right-50 {
float: right; /* LTR */
width: 50%;
......@@ -72,7 +56,6 @@
[dir="rtl"] .views-right-50 {
float: left;
}
.views-right-60 {
float: right; /* LTR */
width: 60%;
......@@ -80,7 +63,6 @@
[dir="rtl"] .views-right-60 {
float: left;
}
.views-right-70 {
float: right; /* LTR */
width: 70%;
......@@ -88,16 +70,12 @@
[dir="rtl"] .views-right-70 {
float: left;
}
.views-group-box .form-item {
margin-left: 3px;
margin-right: 3px;
}
/* @end */
/* @group Attachment details
*
/*
* The attachment details section, its tabs for each section and the buttons
* to add a new section
*/
......@@ -105,104 +83,66 @@
clear: both;
}
/* @end */
/* @group Attachment details tabs
*
* The tabs that switch between sections
*/
.views-displays .secondary {
border-bottom: 0 none;
margin: 0;
overflow: visible;
padding: 0;
}
.views-displays .secondary > li {
/* The tabs that switch between sections */
.views-displays .tabs {
border-bottom: 0 none;
margin: 0;
overflow: visible;
padding: 0;
}
.views-displays .tabs > li {
border-right: 0 none; /* LTR */
display: inline-block;
float: left; /* LTR */
padding: 0;
}
[dir="rtl"] .views-displays .secondary > li {
[dir="rtl"] .views-displays .tabs > li {
float: right;
border-left: 0 none;
border-right: 1px solid #bfbfbf;
}
.views-displays .secondary .open > a {
.views-displays .tabs .open > a {
position: relative;
z-index: 51;
}
.views-displays .secondary .views-display-deleted-link {
.views-displays .tabs .views-display-deleted-link {
text-decoration: line-through;
}
.views-display-deleted > details > summary,
.views-display-deleted .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-deleted .views-display-columns {
opacity: 0.25;
}
.views-display-disabled > details > summary,
.views-display-disabled .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-disabled .views-display-columns {
opacity: 0.5;
}
.views-display-tab .details-wrapper > .views-ui-display-tab-bucket .actions {
opacity: 1.0;
}
.js .views-ui-display-tab-bucket:first-of-type {
border-top: none;
}
/* @end */
/* @group Attachment details new section button */
.views-displays .secondary li.add {
.views-displays .tabs .add {
position: relative;
}
.views-displays .secondary .action-list {
.views-displays .tabs .action-list {
left: 0; /* LTR */
margin: 0;
position: absolute;
top: 23px;
z-index: 50;
}
[dir="rtl"] .views-displays .secondary .action-list {
[dir="rtl"] .views-displays .tabs .action-list {
left: auto;
right: 0;
}
.views-displays .secondary .action-list li {
.views-displays .tabs .action-list li {
display: block;
}
/* @end */
/* @group Attachment collapsible details */
.views-display-columns .details-wrapper {
padding: 0;
}
.views-display-column {
box-sizing: border-box;
}
.js .views-display-column details.collapsed {
height: auto;
}
/* @end */
/* @group Attachment configuration columns */
.views-display-columns > * {
margin-bottom: 2em;
}
......@@ -219,7 +159,6 @@
margin-left: 0;
margin-right: 2%;
}
.views-display-columns > *:first-child {
margin-left: 0; /* LTR */
}
......@@ -228,32 +167,14 @@
}
}
/* @end */
.views-ui-dialog #views-ajax-popup {
padding: 0;
overflow: hidden;
}
.views-ui-dialog #views-ajax-body {
margin: 0;
padding: 0;
}
.views-ui-dialog #views-ajax-popup {
overflow: hidden;
}
.views-ui-dialog .scroll {
overflow: auto;
padding: 1em;
}
#views-filterable-options-controls {
.views-filterable-options-controls {
display: none;
}
.views-ui-dialog #views-filterable-options-controls {
.views-ui-dialog .views-filterable-options-controls {
display: inline;
}
......@@ -262,46 +183,26 @@
max-height: 200px;
overflow: auto;
}
/* @end */
/* @group Settings forms */
.views-display-setting .label,
.views-display-setting .views-ajax-link {
display: inline-block;
float: left; /* LTR */
}
[dir="rtl"] .views-display-setting .label,
[dir="rtl"] .views-display-setting .views-ajax-link {
float: right;
}
/* @end */
/* @group Filter Settings form */
div.form-item-options-value-all {
.form-item-options-value-all {
display: none;
}
/* @end */
/* @group Javascript dependent styling */
.js-only {
display: none;
}
html.js .js-only {
display: inherit;
}
html.js span.js-only {
display: inline;
}
/* @end */
.js .views-edit-view .dropbutton-wrapper {
width: auto;
}
/**
* @file
* The .contextual.css file is intended to contain styles that override declarations
* in the Contextual module.
*/
/* @group Wrapper */
#views-live-preview .contextual-region-active {
.views-live-preview .contextual-region-active {
outline: medium none;
}
#views-live-preview div.contextual {
.views-live-preview .contextual {
right: auto; /* LTR */
top: auto;
}
[dir="rtl"] #views-live-preview div.contextual {
[dir="rtl"] .views-live-preview .contextual {
left: auto;
}
html.js #views-live-preview div.contextual {
.js .views-live-preview .contextual {
display: inline;
}
/* @end */
/* @group Trigger */
#views-live-preview a.contextual-links-trigger {
.views-live-preview .contextual-links-trigger {
display: block;
}
/* @end */
/* @group List */
div.contextual ul.contextual-links {
.contextual .contextual-links {
border-radius: 0 4px 4px 4px; /* LTR */
min-width: 10em;
padding: 6px 6px 9px 6px;
right: auto; /* LTR */
}
[dir="rtl"] div.contextual ul.contextual-links {
[dir="rtl"] .contextual .contextual-links {
border-radius: 4px 0 4px 4px;
left: auto;
}
ul.contextual-links li a,
ul.contextual-links li span {
.contextual-links li a,
.contextual-links li span {
padding-bottom: 0.25em;
padding-right: 0.1667em; /* LTR */
padding-top: 0.25em;
}
[dir="rtl"] ul.contextual-links li a,
[dir="rtl"] ul.contextual-links li span {
[dir="rtl"] .contextual-links li a,
[dir="rtl"] .contextual-links li span {
padding-left: 0.1667em;
padding-right: 0;
}
ul.contextual-links li span {
.contextual-links li span {
font-weight: bold;
}
ul.contextual-links li a {
color: #666 !important;
.contextual-links li a {
margin: 0.25em 0;
padding-left: 1em; /* LTR */
}
[dir="rtl"] ul.contextual-links li a {
[dir="rtl"] .contextual-links li a {
padding-left: 0.1667em;
padding-right: 1em;
}
ul.contextual-links li a:hover {
.contextual-links li a:hover {
background-color: #badbec;
}
/* @end */
......@@ -90,7 +90,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
$form['override']['controls'] = array(
'#theme_wrappers' => array('container'),
'#id' => 'views-filterable-options-controls',
'#attributes' => ['class' => ['form--inline']],
'#attributes' => ['class' => ['form--inline', 'views-filterable-options-controls']],
);
$form['override']['controls']['options_search'] = array(
'#type' => 'textfield',
......@@ -171,7 +171,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#markup' => '<span class="views-ui-view-title">' . $this->t('Selected:') . '</span> ' . '<div class="views-selected-options"></div>',
'#theme_wrappers' => array('form_element', 'views_ui_container'),
'#attributes' => array(
'class' => array('container-inline', 'views-add-form-selected'),
'class' => array('container-inline', 'views-add-form-selected', 'views-offset-bottom'),
'data-drupal-views-offset' => 'bottom',
),
);
......
......@@ -215,6 +215,9 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#value' => $this->t('Create new filter group'),
'#id' => 'views-add-group',
'#group' => 'add',
'#attributes' => array(
'class' => array('views-add-group'),
),
'#ajax' => ['url' => NULL],
);
......
......@@ -123,9 +123,9 @@ public function form(array $form, FormStateInterface $form_state) {
$form['#attached']['library'][] = 'views_ui/admin.styling';
$form['#attached']['drupalSettings']['views']['ajax'] = [
'id' => '#views-ajax-body',
'title' => '#views-ajax-title',
'popup' => '#views-ajax-popup',
'id' => '.views-ajax-body',
'title' => '.views-ajax-title',
'popup' => '.views-ajax-popup',
'defaultForm' => $view->getDefaultAJAXMessage(),
];
......@@ -190,6 +190,9 @@ public function form(array $form, FormStateInterface $form_state) {
$form['displays']['settings'] = array(
'#type' => 'container',
'#id' => 'edit-display-settings',
'#attributes' => array(
'class' => array('edit-display-settings'),
),
);
// Add a text that the display is disabled.
......@@ -222,14 +225,18 @@ public function form(array $form, FormStateInterface $form_state) {
// The content of the popup dialog.
$form['ajax-area'] = array(
'#type' => 'container',
'#id' => 'views-ajax-popup',
'#attributes' => array(
'class' => array('views-ajax-popup'),
),
);
$form['ajax-area']['ajax-title'] = array(
'#markup' => '<div id="views-ajax-title"></div>',
'#markup' => '<div class="views-ajax-title"></div>',
);
$form['ajax-area']['ajax-body'] = array(
'#type' => 'container',
'#id' => 'views-ajax-body',
'#attributes' => array(
'class' => array('views-ajax-body'),
),
);
}
......@@ -404,7 +411,7 @@ public function getDisplayDetails($view, $display) {
if ($display['id'] != 'default') {
$build['top']['#theme_wrappers'] = array('container');
$build['top']['#attributes']['id'] = 'edit-display-settings-top';
$build['top']['#attributes']['class'] = array('views-ui-display-tab-actions', 'views-ui-display-tab-bucket', 'clearfix');
$build['top']['#attributes']['class'] = array('views-ui-display-tab-actions', 'edit-display-settings-top', 'views-ui-display-tab-bucket', 'clearfix');
// The Delete, Duplicate and Undo Delete buttons.
$build['top']['actions'] = array(
......
......@@ -21,7 +21,7 @@ class ViewPreviewForm extends ViewFormBase {
public function form(array $form, FormStateInterface $form_state) {
$view = $this->entity;
$form['#prefix'] = '<div id="views-preview-wrapper" class="views-admin clearfix">';
$form['#prefix'] = '<div id="views-preview-wrapper" class="views-preview-wrapper views-admin clearfix">';
$form['#suffix'] = '</div>';
$form['#id'] = 'views-ui-preview-form';
......@@ -61,7 +61,7 @@ public function form(array $form, FormStateInterface $form_state) {
$form['preview'] = array(
'#weight' => 110,
'#theme_wrappers' => array('container'),
'#attributes' => array('id' => 'views-live-preview'),
'#attributes' => array('id' => 'views-live-preview', 'class' => 'views-live-preview'),
'preview' => $view->renderPreview($this->displayID, $args),
);
}
......@@ -80,6 +80,7 @@ protected function actions(array $form, FormStateInterface $form_state) {
return array(
'#attributes' => array(
'id' => 'preview-submit-wrapper',
'class' => array('preview-submit-wrapper')
),
'button' => array(
'#type' => 'submit',
......
......@@ -26,7 +26,7 @@
%}
<div{{ attributes.addClass(classes) }}>
{% if title -%}
<h3>{{ title }}</h3>
<h3 class="views-ui-display-tab-bucket__title">{{ title }}</h3>
{%- endif %}
{% if actions -%}
{{ actions }}
......
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