From f92437428e8527992d50310731f7ec7562fb71a6 Mon Sep 17 00:00:00 2001 From: Lior Gil Date: Mon, 19 Jun 2023 12:46:29 +0300 Subject: [PATCH] MDL-76629 core_table: add sticky column option --- .../tool/policy/classes/acceptances_table.php | 1 + lib/tablelib.php | 23 +++++++++++++++++-- .../classes/local/reports/attempts_report.php | 2 ++ mod/quiz/styles.css | 3 ++- theme/boost/scss/moodle/tables.scss | 15 ++++++++++++ theme/boost/style/moodle.css | 15 ++++++++++++ theme/classic/style/moodle.css | 15 ++++++++++++ 7 files changed, 71 insertions(+), 3 deletions(-) diff --git a/admin/tool/policy/classes/acceptances_table.php b/admin/tool/policy/classes/acceptances_table.php index 734d329aeca..15ac140f2f2 100644 --- a/admin/tool/policy/classes/acceptances_table.php +++ b/admin/tool/policy/classes/acceptances_table.php @@ -155,6 +155,7 @@ class acceptances_table extends \table_sql { $this->columns[$key] = count($this->columns); $this->column_style[$key] = array(); $this->column_class[$key] = $columnclass; + $this->columnsticky[$key] = ''; $this->column_suppress[$key] = false; $this->headers[] = $label; } diff --git a/lib/tablelib.php b/lib/tablelib.php index b128e94c3d2..f835236ebb0 100644 --- a/lib/tablelib.php +++ b/lib/tablelib.php @@ -79,6 +79,12 @@ class flexible_table { var $column_suppress = array(); var $column_nosort = array('userpic'); private $column_textsort = array(); + + /** + * @var array The sticky attribute of each table column. + */ + protected $columnsticky = []; + /** @var boolean Stores if setup has already been called on this flixible table. */ var $setup = false; var $baseurl = NULL; @@ -430,6 +436,17 @@ class flexible_table { } } + /** + * Sets a sticky attribute to a column. + * @param string $column Column name + * @param bool $sticky + */ + public function column_sticky(string $column, bool $sticky = true): void { + if (isset($this->columnsticky[$column])) { + $this->columnsticky[$column] = $sticky == true ? ' sticky-column' : ''; + } + } + /** * Sets the given $attributes to $this->columnsattributes. * Column attributes will be added to every cell in the column. @@ -468,6 +485,7 @@ class flexible_table { $this->columns = array(); $this->column_style = array(); $this->column_class = array(); + $this->columnsticky = []; $this->columnsattributes = []; $colnum = 0; @@ -475,6 +493,7 @@ class flexible_table { $this->columns[$column] = $colnum++; $this->column_style[$column] = array(); $this->column_class[$column] = ''; + $this->columnsticky[$column] = ''; $this->columnsattributes[$column] = []; $this->column_suppress[$column] = false; } @@ -1150,7 +1169,7 @@ class flexible_table { } $attributes = [ - 'class' => "cell c{$index}" . $this->column_class[$column], + 'class' => "cell c{$index}" . $this->column_class[$column] . $this->columnsticky[$column], 'id' => "{$rowid}_c{$index}", 'style' => $this->make_styles_string($this->column_style[$column]), ]; @@ -1332,7 +1351,7 @@ class flexible_table { } $attributes = array( - 'class' => 'header c' . $index . $this->column_class[$column], + 'class' => 'header c' . $index . $this->column_class[$column] . $this->columnsticky[$column], 'scope' => 'col', ); if ($this->headers[$index] === NULL) { diff --git a/mod/quiz/classes/local/reports/attempts_report.php b/mod/quiz/classes/local/reports/attempts_report.php index ad8e5f3addc..b504dc135a7 100644 --- a/mod/quiz/classes/local/reports/attempts_report.php +++ b/mod/quiz/classes/local/reports/attempts_report.php @@ -238,6 +238,8 @@ abstract class attempts_report extends report_base { $table->column_class('lastname', 'bold'); $table->column_class('firstname', 'bold'); $table->column_class('fullname', 'bold'); + + $table->column_sticky('fullname'); } /** diff --git a/mod/quiz/styles.css b/mod/quiz/styles.css index 6669d3f55f3..cd0183668d2 100644 --- a/mod/quiz/styles.css +++ b/mod/quiz/styles.css @@ -306,7 +306,8 @@ table.quizattemptsummary .noreviewmessage { } body.path-mod-quiz .gradedattempt, -body.path-mod-quiz table tbody tr.gradedattempt > td { +body.path-mod-quiz table tbody tr.gradedattempt > td, +body.path-mod-quiz table tbody tr.gradedattempt > td.sticky-column { border-color: #bce8f1; background-color: #d9edf7; } diff --git a/theme/boost/scss/moodle/tables.scss b/theme/boost/scss/moodle/tables.scss index bbfbc952018..da06a04a3f8 100644 --- a/theme/boost/scss/moodle/tables.scss +++ b/theme/boost/scss/moodle/tables.scss @@ -24,6 +24,13 @@ tbody tr:nth-of-type(#{$table-striped-order}) { background-color: $table-accent-bg; } + thead .sticky-column, + tbody tr:nth-of-type(even) { + background-color: $white; + } + tbody tr:nth-of-type(#{$table-striped-order}) .sticky-column { + background-color: #f7f7f7; + } &.table-sm { th, td { @@ -39,6 +46,9 @@ color: $table-hover-color; } } + td.sticky-column { + background-color: #ececec; + } } } } @@ -51,6 +61,11 @@ table { text-align: left; caption-side: top; } + .sticky-column { + position: sticky; + left: 0; + background-color: inherit; + } } .table-dynamic .loading-icon { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index eea9d8d2922..1299a41fc5b 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -34386,6 +34386,13 @@ img.userpicture { .generaltable tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03); } +.generaltable thead .sticky-column, +.generaltable tbody tr:nth-of-type(even) { + background-color: #fff; +} +.generaltable tbody tr:nth-of-type(odd) .sticky-column { + background-color: #f7f7f7; +} .generaltable.table-sm th, .generaltable.table-sm td { padding: 0.3rem; @@ -34397,6 +34404,9 @@ img.userpicture { .generaltable tbody tr:hover.dimmed_text a:not(.menu-action) { color: #1d2125; } +.generaltable tbody tr:hover td.sticky-column { + background-color: #ececec; +} table caption { font-size: 24px; @@ -34405,6 +34415,11 @@ table caption { text-align: left; caption-side: top; } +table .sticky-column { + position: sticky; + left: 0; + background-color: inherit; +} .table-dynamic .loading-icon { position: absolute; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 274b5a91c24..74884b77461 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -34386,6 +34386,13 @@ img.userpicture { .generaltable tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03); } +.generaltable thead .sticky-column, +.generaltable tbody tr:nth-of-type(even) { + background-color: #fff; +} +.generaltable tbody tr:nth-of-type(odd) .sticky-column { + background-color: #f7f7f7; +} .generaltable.table-sm th, .generaltable.table-sm td { padding: 0.3rem; @@ -34397,6 +34404,9 @@ img.userpicture { .generaltable tbody tr:hover.dimmed_text a:not(.menu-action) { color: #1d2125; } +.generaltable tbody tr:hover td.sticky-column { + background-color: #ececec; +} table caption { font-size: 24px; @@ -34405,6 +34415,11 @@ table caption { text-align: left; caption-side: top; } +table .sticky-column { + position: sticky; + left: 0; + background-color: inherit; +} .table-dynamic .loading-icon { position: absolute;