Unverified Commit fac878ce authored by lauriii's avatar lauriii
Browse files

Issue #3191725 by mherchel, kostyashupenko, Kristen Pol, andy-blum, lauriii,...

Issue #3191725 by mherchel, kostyashupenko, Kristen Pol, andy-blum, lauriii, proeung, Gauravmahlawat, jwitkowski79, katannshaw: Ensure that tabledrag user interface is usable within Olivero
parent 9d05a12a
......@@ -12,7 +12,8 @@
.forum table,
.text-content table,
.views-table {
.views-table,
.draggable-table {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
border-spacing: 0;
......@@ -24,15 +25,15 @@
line-height: 1.6875rem
}
[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption {
[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption,[dir="ltr"] .draggable-table caption {
text-align: left
}
[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption {
[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption,[dir="rtl"] .draggable-table caption {
text-align: right
}
.forum table caption, .text-content table caption, .views-table caption {
.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {
margin-bottom: 1.125rem;
color: #313637;
font-family: "Lora", "georgia", serif;
......@@ -41,7 +42,7 @@
line-height: 1.125rem;
}
.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td {
.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td {
border-bottom: 0;
}
......@@ -50,7 +51,9 @@
.text-content table td,[dir="ltr"]
.text-content table th,[dir="ltr"]
.views-table td,[dir="ltr"]
.views-table th {
.views-table th,[dir="ltr"]
.draggable-table td,[dir="ltr"]
.draggable-table th {
padding-left: 0
}
......@@ -59,7 +62,9 @@
.text-content table td,[dir="rtl"]
.text-content table th,[dir="rtl"]
.views-table td,[dir="rtl"]
.views-table th {
.views-table th,[dir="rtl"]
.draggable-table td,[dir="rtl"]
.draggable-table th {
padding-right: 0
}
......@@ -68,7 +73,9 @@
.text-content table td,[dir="ltr"]
.text-content table th,[dir="ltr"]
.views-table td,[dir="ltr"]
.views-table th {
.views-table th,[dir="ltr"]
.draggable-table td,[dir="ltr"]
.draggable-table th {
padding-right: 1.125rem
}
......@@ -77,7 +84,9 @@
.text-content table td,[dir="rtl"]
.text-content table th,[dir="rtl"]
.views-table td,[dir="rtl"]
.views-table th {
.views-table th,[dir="rtl"]
.draggable-table td,[dir="rtl"]
.draggable-table th {
padding-left: 1.125rem
}
......@@ -86,37 +95,39 @@
.text-content table td,
.text-content table th,
.views-table td,
.views-table th {
.views-table th,
.draggable-table td,
.draggable-table th {
padding-top: 1.125rem;
padding-bottom: 1.125rem;
vertical-align: top;
}
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th {
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
margin-left: 0
}
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th {
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
margin-right: 0
}
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th {
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
margin-right: 0
}
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th {
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
margin-left: 0
}
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th {
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
text-align: left
}
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th {
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
text-align: right
}
.forum table th, .text-content table th, .views-table th {
.forum table th, .text-content table th, .views-table th, .draggable-table th {
margin-top: 0;
margin-bottom: 0;
letter-spacing: 0.02em;
......@@ -131,35 +142,54 @@
*/
}
[dir="ltr"] .forum table th.text-align-left,[dir="ltr"] .text-content table th.text-align-left,[dir="ltr"] .views-table th.text-align-left {
[dir="ltr"] .forum table th.text-align-left,[dir="ltr"] .text-content table th.text-align-left,[dir="ltr"] .views-table th.text-align-left,[dir="ltr"] .draggable-table th.text-align-left {
text-align: left
}
[dir="rtl"] .forum table th.text-align-left,[dir="rtl"] .text-content table th.text-align-left,[dir="rtl"] .views-table th.text-align-left {
[dir="rtl"] .forum table th.text-align-left,[dir="rtl"] .text-content table th.text-align-left,[dir="rtl"] .views-table th.text-align-left,[dir="rtl"] .draggable-table th.text-align-left {
text-align: right
}
[dir="ltr"] .forum table th.text-align-right,[dir="ltr"] .text-content table th.text-align-right,[dir="ltr"] .views-table th.text-align-right {
[dir="ltr"] .forum table th.text-align-right,[dir="ltr"] .text-content table th.text-align-right,[dir="ltr"] .views-table th.text-align-right,[dir="ltr"] .draggable-table th.text-align-right {
text-align: right
}
[dir="rtl"] .forum table th.text-align-right,[dir="rtl"] .text-content table th.text-align-right,[dir="rtl"] .views-table th.text-align-right {
[dir="rtl"] .forum table th.text-align-right,[dir="rtl"] .text-content table th.text-align-right,[dir="rtl"] .views-table th.text-align-right,[dir="rtl"] .draggable-table th.text-align-right {
text-align: left
}
.forum table th.text-align-center, .text-content table th.text-align-center, .views-table th.text-align-center {
.forum table th.text-align-center, .text-content table th.text-align-center, .views-table th.text-align-center, .draggable-table th.text-align-center {
text-align: center;
}
.forum table th.text-align-justify, .text-content table th.text-align-justify, .views-table th.text-align-justify {
.forum table th.text-align-justify, .text-content table th.text-align-justify, .views-table th.text-align-justify, .draggable-table th.text-align-justify {
text-align: justify;
}
.forum table td, .text-content table td, .views-table td {
.forum table td, .text-content table td, .views-table td, .draggable-table td {
white-space: normal;
border-bottom: 2px solid #98abb9;
}
.forum table th.checkbox,
.forum table td.checkbox,
.text-content table th.checkbox,
.text-content table td.checkbox,
.views-table th.checkbox,
.views-table td.checkbox,
.draggable-table th.checkbox,
.draggable-table td.checkbox {
text-align: center;
}
.draggable-table {
width: 100%;
}
.draggable-table .form-item {
margin-top: 0;
}
.tablesort {
vertical-align: middle;
}
......
......@@ -7,7 +7,8 @@
.forum table,
.text-content table,
.views-table {
.views-table,
.draggable-table {
margin-block-start: var(--sp2);
margin-block-end: var(--sp2);
border-spacing: 0;
......@@ -80,6 +81,19 @@
white-space: normal;
border-block-end: 2px solid var(--color--gray-40);
}
& th.checkbox,
& td.checkbox {
text-align: center;
}
}
.draggable-table {
width: 100%;
}
.draggable-table .form-item {
margin-top: 0;
}
.tablesort {
......
......@@ -10,12 +10,69 @@
* Styles for tabledrag.
*/
.draggable:hover {
background-color: #f7f9fa;
}
.draggable.drag {
background-color: #f1f4f7;
}
.draggable.drag-previous {
background-color: #e7edf1;
}
.drag-previous a {
color: #313637; /* Ensure proper contrast. */
}
a.tabledrag-handle,
.touchevents a.tabledrag-handle {
width: 2.25rem;
height: 2.25rem;
}
[dir="ltr"] .draggable a.tabledrag-handle {
margin-left: 0;
}
[dir="rtl"] .draggable a.tabledrag-handle {
margin-right: 0;
}
a.tabledrag-handle .handle {
width: 2.25rem;
height: 2.25rem;
margin: 0;
background-position: 50% 5px;
}
.touchevents a.tabledrag-handle .handle {
height: 2.25rem;
background-position: 40% 10px;
background-position: 50% 5px;
}
[dir="ltr"] .touchevents .draggable td {
padding-left: 0;
}
[dir="rtl"] .touchevents .draggable td {
padding-right: 0;
}
[dir="ltr"] .touchevents .draggable td {
padding-right: 0.5625rem;
}
[dir="rtl"] .touchevents .draggable td {
padding-left: 0.5625rem;
}
.touchevents .draggable td {
padding-top: 0.5625rem;
padding-bottom: 0.5625rem;
}
.touchevents .draggable .menu-item__link {
padding: 0;
}
......@@ -5,12 +5,50 @@
@import "../base/variables.pcss.css";
.draggable:hover {
background-color: var(--color--gray-95);
}
.draggable.drag {
background-color: var(--color--gray-90);
}
.draggable.drag-previous {
background-color: var(--color--gray-80);
}
.drag-previous a {
color: var(--color--gray-10); /* Ensure proper contrast. */
}
a.tabledrag-handle,
.touchevents a.tabledrag-handle {
width: 36px;
height: 36px;
}
.draggable a.tabledrag-handle {
margin-inline-start: 0;
}
a.tabledrag-handle .handle {
width: var(--sp2);
height: var(--sp2);
margin: 0;
background-position: 50% 5px;
}
.touchevents a.tabledrag-handle .handle {
height: var(--sp2);
background-position: 40% 10px;
background-position: 50% 5px;
}
.touchevents .draggable td {
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: var(--sp0-5);
}
.touchevents .draggable .menu-item__link {
padding: 0;
}
......@@ -596,3 +596,22 @@ function olivero_preprocess_links__comment(&$variables) {
$link['link']['#options']['attributes']['class'][] = 'comment__links-link';
}
}
/**
* Implements hook_preprocess_table().
*/
function olivero_preprocess_table(&$variables) {
// Mark the whole table and the first cells if rows are draggable.
if (!empty($variables['rows'])) {
$draggable_row_found = FALSE;
foreach ($variables['rows'] as &$row) {
/** @var \Drupal\Core\Template\Attribute $row['attributes'] */
if (!empty($row['attributes']) && $row['attributes']->hasClass('draggable')) {
if (!$draggable_row_found) {
$variables['attributes']['class'][] = 'draggable-table';
$draggable_row_found = TRUE;
}
}
}
}
}
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