From ddd258339de4b335d1122ebfdc182a2ef94c2ffd Mon Sep 17 00:00:00 2001 From: dingyongliang Date: Mon, 8 May 2023 16:41:50 +0800 Subject: [PATCH] * refactor history style. --- lib/zin/wg/history/css/v1.css | 27 ++++- lib/zin/wg/history/v1.php | 183 ++++++++++++++++++---------------- 2 files changed, 123 insertions(+), 87 deletions(-) diff --git a/lib/zin/wg/history/css/v1.css b/lib/zin/wg/history/css/v1.css index 38a6ccf1fe..856255a00c 100644 --- a/lib/zin/wg/history/css/v1.css +++ b/lib/zin/wg/history/css/v1.css @@ -6,6 +6,12 @@ font-size: 14px; font-weight: 700; line-height: 20px; + display: flex; + align-items: center; +} + +.histories { + background: #FCFDFE; } .histories .btn-mini { @@ -22,7 +28,8 @@ .histories .btn { background-color: #fff; - display: inline-block; + display: inline-flex; + align-items: center; margin-bottom: 0; font-weight: 400; text-align: center; @@ -69,6 +76,7 @@ background: 0 0; box-shadow: none; border-color: transparent; + text-decoration: none; } .detail-content { @@ -77,7 +85,6 @@ } .histories-list { - padding-left: 15px; margin-bottom: 0; margin-top: 0; list-style: decimal; @@ -85,6 +92,21 @@ flex-direction: column; } +.histories-list .timeline { + top: 13px; + bottom: 13px; + left: 10px; + background: #EEE; +} + +.histories-list .marker { + color: #5E626D; + border-color: #EEE; + border-width: 1px; + box-shadow: none; + background: #FCFDFE; +} + .histories-list.sort-reverse { flex-direction: column-reverse; } @@ -93,6 +115,7 @@ word-break: break-word; word-wrap: break-word; position: relative; + list-style: none; } .histories-list > li strong { diff --git a/lib/zin/wg/history/v1.php b/lib/zin/wg/history/v1.php index ac7c2c8a7e..ddea540d68 100644 --- a/lib/zin/wg/history/v1.php +++ b/lib/zin/wg/history/v1.php @@ -14,10 +14,24 @@ class history extends wg return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css'); } + private function marker(int $num) + { + return span + ( + setClass('marker', 'label', 'rounded-full', 'aspect-square', 'inline-flex', 'justify-center', 'items-center', 'mr-2'), + $num + ); + } + + private function timeline() + { + return div(setClass('timeline w-px absolute')); + } + private function checkEditCommentPriv($action) { global $app; - $methodName = $this->prop('methodName') ?? data('methodName'); + $methodName = $this->prop('methodName') === null ? $this->prop('methodName') : data('methodName'); return (!isset($canBeChanged) || !empty($canBeChanged)) && end($actions) == $action @@ -27,10 +41,9 @@ class history extends wg && common::hasPriv('action', 'editComment'); } - private function createExpandBtn($i) + private function expandBtn($i) { global $lang; - return button ( setClass('btn btn-mini switch-btn btn-icon btn-expand'), @@ -52,10 +65,9 @@ class history extends wg ); } - private function createEditCommentBtn() + private function editCommentBtn() { global $lang; - return button ( setClass('btn btn-link btn-icon btn-sm btn-edit-comment'), @@ -64,10 +76,9 @@ class history extends wg ); } - private function createHistoryChangesView($action, $i) + private function historyChanges($action, $i) { global $app; - return div ( setClass('history-changes'), @@ -76,18 +87,19 @@ class history extends wg ); } - private function createActionItemView($action, $i) + private function actionItem($action, $i) { global $app; - return li ( + setClass('my-3'), set::value($i), + $this->marker($i), html($app->loadTarget('action')->renderAction($action)) ); } - private function generateComment($action) + private function getComment($action) { if(str_contains($action->comment, '
'))
         {
@@ -102,10 +114,9 @@ class history extends wg
             : $action->comment;
     }
 
-    private function createCommentView($action)
+    private function comment($action)
     {
-        $comment = $this->generateComment($action);
-
+        $comment = $this->getComment($action);
         return div
         (
             setClass('article-content comment'),
@@ -117,10 +128,9 @@ class history extends wg
         );
     }
 
-    private function createCommentEditForm($action)
+    private function commentEditForm($action)
     {
         global $lang;
-
         return form
         (
             setClass('comment-edit-form'),
@@ -156,51 +166,38 @@ class history extends wg
         );
     }
 
-    private function buildHistoriesList()
+    private function historyList()
     {
-        $actions    = $this->prop('actions') ?? data('actions');
-        $users      = $this->prop('users') ?? data('users');
-        $historiesListView = h::ol(setClass('histories-list'));
+        $actions = $this->prop('actions') === null ? $this->prop('actions') : data('actions');
+        $users   = $this->prop('users') === null ? $this->prop('users') : data('users');
+        $historiesListView = h::ol(setClass('histories-list relative'));
         $i = 0;
 
+        $historiesListView->add($this->timeline());
         foreach($actions as $action)
         {
-            if($action->action === 'assigned' || $action->action === 'toaudit')
-                $action->extra = zget($users, $action->extra);
+            if($action->action === 'assigned' || $action->action === 'toaudit') $action->extra = zget($users, $action->extra);
 
             $action->actor = zget($users, $action->actor);
-            if(str_contains($action->actor, ':'))
-                $action->actor = substr($action->actor, strpos($action->actor, ':') + 1);
+            if(str_contains($action->actor, ':')) $action->actor = substr($action->actor, strpos($action->actor, ':') + 1);
 
             $i++;
-            $actionItemView = $this->createActionItemView($action, $i);
+            $actionItemView = $this->actionItem($action, $i);
 
             if(!empty($action->history))
             {
-                $allExpandBtn = $this->createExpandBtn($i);
-                $actionItemView->add($allExpandBtn);
-
-                $historyChangesView = $this->createHistoryChangesView($action, $i);
-                $actionItemView->add($historyChangesView);
+                $actionItemView->add($this->expandBtn($i));
+                $actionItemView->add($this->historyChanges($action, $i));
             }
             if(strlen(trim(($action->comment))) !== 0)
             {
                 $canEditComment = $this->checkEditCommentPriv($action);
 
-                if($canEditComment)
-                {
-                    $editCommentBtn = $this->createEditCommentBtn();
-                    $actionItemView->add($editCommentBtn);
-                }
+                if($canEditComment) $actionItemView->add($this->editCommentBtn());
 
-                $commentView = $this->createCommentView($action);
-                $actionItemView->add($commentView);
+                $actionItemView->add($this->comment($action));
 
-                if($canEditComment)
-                {
-                    $commentEditForm = $this->createCommentEditForm($action);
-                    $actionItemView->add($commentEditForm);
-                }
+                if($canEditComment) $actionItemView->add($this->commentEditForm($action));
             }
             $historiesListView->add($actionItemView);
         }
@@ -208,6 +205,62 @@ class history extends wg
         return $historiesListView;
     }
 
+    private function reverseBtn()
+    {
+        global $lang;
+        return btn
+        (
+            setClass('btn-mini btn-icon btn-reverse mr-2'),
+            set::title($lang->reverse),
+            set::icon('arrow-up'),
+            on::click(<<switchDisplay),
+            set::icon('plus'),
+            on::click(<<action->create
+        );
+    }
+
     protected function build()
     {
         global $lang;
@@ -221,51 +274,11 @@ class history extends wg
             (
                 setClass('detail-title'),
                 span($lang->history),
-                button
-                (
-                    setClass('btn btn-mini btn-icon btn-reverse'),
-                    setStyle('margin-right', '4px'),
-                    set::type('button'),
-                    set::title($lang->reverse),
-                    h::i(setClass('icon icon-arrow-up icon-sm')),
-                    on::click(<<switchDisplay),
-                    h::i(setClass('icon icon-plus icon-sm')),
-                    on::click(<<action->create)
-                ),
+                $this->reverseBtn(),
+                $this->expandAllBtn(),
+                $this->commentBtn(),
             ),
-            div(setClass('detail-content'), $this->buildHistoriesList())
+            div(setClass('detail-content'), $this->historyList())
         );
     }
 }