From 2b22b2667692ee2a042e76e6132274f47c41317d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20K=C3=BCndig?= <tobias@offline.swiss>
Date: Wed, 18 Apr 2018 07:34:08 +0200
Subject: [PATCH] Added align property to list columns definition (#3509)

Documented in https://github.com/octobercms/docs/pull/289; credit to @tobias-kuendig
---
 modules/backend/classes/ListColumn.php          | 17 +++++++++++++++++
 .../widgets/lists/partials/_list_body_row.htm   |  2 +-
 .../widgets/lists/partials/_list_head_row.htm   |  2 +-
 modules/system/assets/ui/less/list.less         | 15 +++++++++++++++
 modules/system/assets/ui/storm.css              |  3 +++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/modules/backend/classes/ListColumn.php b/modules/backend/classes/ListColumn.php
index e74ac29cc..99bd2e2d7 100644
--- a/modules/backend/classes/ListColumn.php
+++ b/modules/backend/classes/ListColumn.php
@@ -91,6 +91,11 @@ class ListColumn
      */
     public $path;
 
+    /**
+     * @var string Specifies the alignment of this column.
+     */
+    public $align;
+
     /**
      * @var array Raw field configuration.
      */
@@ -163,6 +168,9 @@ class ListColumn
         if (isset($config['path'])) {
             $this->path = $config['path'];
         }
+        if (isset($config['align']) && \in_array($config['align'], ['left', 'right', 'center'])) {
+            $this->align = $config['align'];
+        }
 
         return $config;
     }
@@ -194,6 +202,15 @@ class ListColumn
         return HtmlHelper::nameToId($id);
     }
 
+    /**
+     * Returns the column specific aligment css class.
+     * @return string
+     */
+    public function getAlignClass()
+    {
+        return $this->align ? 'list-cell-align-' . $this->align : '';
+    }
+
     /**
      * Returns this columns value from a supplied data set, which can be
      * an array or a model or another generic collection.
diff --git a/modules/backend/widgets/lists/partials/_list_body_row.htm b/modules/backend/widgets/lists/partials/_list_body_row.htm
index e5cb00644..55111e08a 100644
--- a/modules/backend/widgets/lists/partials/_list_body_row.htm
+++ b/modules/backend/widgets/lists/partials/_list_body_row.htm
@@ -18,7 +18,7 @@
 
     <?php $index = $url = 0; foreach ($columns as $key => $column): ?>
         <?php $index++; ?>
-        <td class="list-cell-index-<?= $index ?> list-cell-name-<?= $column->getName() ?> list-cell-type-<?= $column->type ?> <?= $column->clickable ? '' : 'nolink' ?> <?= $column->cssClass ?>">
+        <td class="list-cell-index-<?= $index ?> list-cell-name-<?= $column->getName() ?> list-cell-type-<?= $column->type ?> <?= $column->clickable ? '' : 'nolink' ?> <?= $column->getAlignClass() ?> <?= $column->cssClass ?>">
             <?php if ($column->clickable && !$url && ($url = $this->getRecordUrl($record))): ?>
                 <a <?= $this->getRecordOnClick($record) ?> href="<?= $url ?>">
                     <?= $this->getColumnValue($record, $column) ?>
diff --git a/modules/backend/widgets/lists/partials/_list_head_row.htm b/modules/backend/widgets/lists/partials/_list_head_row.htm
index a812ceef2..d250a641f 100644
--- a/modules/backend/widgets/lists/partials/_list_head_row.htm
+++ b/modules/backend/widgets/lists/partials/_list_head_row.htm
@@ -18,7 +18,7 @@
         <?php if ($showSorting && $column->sortable): ?>
             <th
                 <?php if ($column->width): ?>style="width: <?= $column->width ?>"<?php endif ?>
-                class="<?= $this->sortColumn==$column->columnName?'sort-'.$this->sortDirection.' active':'sort-desc' ?> list-cell-name-<?= $column->getName() ?> list-cell-type-<?= $column->type ?>"
+                class="<?= $this->sortColumn==$column->columnName?'sort-'.$this->sortDirection.' active':'sort-desc' ?> list-cell-name-<?= $column->getName() ?> list-cell-type-<?= $column->type ?> <?= $column->getAlignClass() ?>"
                 >
                 <a
                     href="javascript:;"
diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less
index 660a58f0b..89bad6b49 100644
--- a/modules/system/assets/ui/less/list.less
+++ b/modules/system/assets/ui/less/list.less
@@ -290,6 +290,21 @@ table.table.data {
         text-align: right;
     }
 
+    th.list-cell-align-left,
+    td.list-cell-align-left {
+        text-align: left;
+    }
+
+    th.list-cell-align-right,
+    td.list-cell-align-right {
+        text-align: right;
+    }
+
+    th.list-cell-align-center,
+    td.list-cell-align-center {
+        text-align: center;
+    }
+
     //
     // Labels
     //
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 7bdf6bf2c..417b52818 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -2665,6 +2665,9 @@ table.table.data tfoot a{color:#666666;text-decoration:none}
 table.table.data tfoot td,table.table.data tfoot th{border-color:#d4d8da;padding:10px 15px}
 table.table.data th.list-cell-type-switch,table.table.data td.list-cell-type-switch{text-align:center}
 table.table.data th.list-cell-type-number,table.table.data td.list-cell-type-number{text-align:right}
+table.table.data th.list-cell-align-left,table.table.data td.list-cell-align-left{text-align:left}
+table.table.data th.list-cell-align-right,table.table.data td.list-cell-align-right{text-align:right}
+table.table.data th.list-cell-align-center,table.table.data td.list-cell-align-center{text-align:center}
 table.table.data .list-badge{display:inline-block;position:relative;top:0;margin:0 5px 0 0;padding:1px 0 0 0;font-size:10px;width:15px;height:15px;text-align:center;border-radius:3px;color:#fff}
 table.table.data .list-badge > i{position:relative;top:-1px}
 table.table.data .list-badge.badge-default{background:#999999}