Unverified Commit fac878ce authored by Lauri Timmanee's avatar Lauri Timmanee
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

core/themes/olivero/css/components/table.css

+54 −24
Original line number Diff line number Diff line
@@ -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;

}

core/themes/olivero/css/components/table.pcss.css

+15 −1
Original line number Diff line number Diff line
@@ -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 {

core/themes/olivero/css/components/tabledrag.css

+58 −1
Original line number Diff line number Diff line
@@ -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;

}

core/themes/olivero/css/components/tabledrag.pcss.css

+39 −1
Original line number Diff line number Diff line
@@ -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;

}

core/themes/olivero/olivero.theme

+19 −0
Original line number Diff line number Diff line
@@ -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;

        }

      }

    }

  }

}