From 1fc3ab1c6ab40403b4bb2b8859395be7c51b0965 Mon Sep 17 00:00:00 2001
From: sunhao <sunhao@easycorp.ltd>
Date: Fri, 22 Mar 2024 17:43:30 +0800
Subject: [PATCH] * block: story #53159, optimize style of statistic block.

---
 lib/zin/wg/statisticblock/css/v1.css          | 19 --------------
 lib/zin/wg/statisticblock/v1.php              | 26 ++++++++++++++++---
 .../block/ui/executionstatisticblock.html.php |  2 +-
 3 files changed, 24 insertions(+), 23 deletions(-)
 delete mode 100644 lib/zin/wg/statisticblock/css/v1.css

diff --git a/lib/zin/wg/statisticblock/css/v1.css b/lib/zin/wg/statisticblock/css/v1.css
deleted file mode 100644
index deb7a7dc3e..0000000000
--- a/lib/zin/wg/statisticblock/css/v1.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.block-statistic-nav {overflow-y: overlay;}
-.block-statistic-nav-item .text {opacity: .8;}
-.block-statistic-nav-item.active .text, .block-statistic-nav-item:hover .text {opacity: 1;}
-
-.is-long .block-statistic-nav-item {width: auto!important; height: 36px!important;}
-.is-long .block-statistic-nav-item:hover {padding-right: 32px;}
-.is-long .block-statistic-nav-item.active {background: var(--color-canvas); box-shadow: inset 2px 0 0 var(--color-primary-500);}
-.is-long .block-statistic-nav-url {position: absolute!important; padding: 0!important; width: 32px!important; justify-content: center!important; height: 36px!important;}
-.is-long .block-statistic-nav-url:hover {background-color: var(--color-canvas);}
-
-
-.is-short .block-statistic-nav .nav {justify-content: center;}
-.is-short .block-statistic-nav .nav-item {gap: 0;}
-.is-short .block-statistic-nav .nav-item.active {gap: 0;}
-.is-short .block-statistic-nav .nav-item:not(.active) {display: none;}
-.is-short .block-statistic-nav .nav-item > a {gap: 0; padding: 0px 0.25rem;}
-.is-short .block-statistic-nav .nav-item .block-statistic-nav-item {display: none;}
-
-.block-statistic-nav-btn {opacity: 1;}
diff --git a/lib/zin/wg/statisticblock/v1.php b/lib/zin/wg/statisticblock/v1.php
index 2d384d6cfc..e20c975e48 100644
--- a/lib/zin/wg/statisticblock/v1.php
+++ b/lib/zin/wg/statisticblock/v1.php
@@ -40,6 +40,26 @@ class statisticBlock extends blockPanel
      */
     public static function getPageCSS(): ?string
     {
+        return <<<'CSS'
+        .block-statistic-nav {overflow-y: overlay;  --nav-active-bg: var(--color-primary-50); --nav-active-color: var(--color-fore)}
+        .block-statistic-nav-item .text {opacity: .8;}
+        .block-statistic-nav-item.active .text, .block-statistic-nav-item:hover .text {opacity: 1;}
+
+        .is-long .block-statistic-nav-item {width: auto!important; height: 36px!important;}
+        .is-long .block-statistic-nav-item:hover {padding-right: 32px;}
+        .is-long .block-statistic-nav-url {position: absolute!important; padding: 0!important; width: 32px!important; justify-content: center!important; height: 36px!important;}
+        .is-long .block-statistic-nav-url:hover {background-color: var(--color-canvas);}
+
+
+        .is-short .block-statistic-nav .nav {justify-content: center;}
+        .is-short .block-statistic-nav .nav-item {gap: 0;}
+        .is-short .block-statistic-nav .nav-item.active {gap: 0;}
+        .is-short .block-statistic-nav .nav-item:not(.active) {display: none;}
+        .is-short .block-statistic-nav .nav-item > a {gap: 0; padding: 0px 0.25rem;}
+        .is-short .block-statistic-nav .nav-item .block-statistic-nav-item {display: none;}
+
+        .block-statistic-nav-btn {opacity: 1;}
+        CSS;
         return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css');
     }
 
@@ -68,7 +88,7 @@ class statisticBlock extends blockPanel
             }
             $navItems[] = li
             (
-                setClass('nav-item group' . ($item['id'] == $active ? ' active' : '')),
+                setClass('nav-item item group' . ($item['id'] == $active ? ' active' : '')),
                 a
                 (
                     toggle::tab(array('target' => "#blockTab_{$id}_{$item['id']}")),
@@ -87,10 +107,10 @@ class statisticBlock extends blockPanel
 
         return div
         (
-            setClass('flex-none block-statistic-nav border-r', $longBlock ? 'bg-surface w-52' : 'relative w-full'),
+            setClass('flex-none block-statistic-nav border-r', $longBlock ? 'w-52' : 'relative w-full'),
             nav
             (
-                setClass('scrollbar-thin scrollbar-hover', $longBlock ? 'overflow-y-auto overflow-x-hidden h-full' : 'overflow-x-auto overflow-y-hidden p-2'),
+                setClass('scrollbar-thin scrollbar-hover p-2 pr-0.5', $longBlock ? 'overflow-y-auto overflow-x-hidden h-full' : 'overflow-x-auto overflow-y-hidden'),
                 set::stacked($longBlock),
                 $navItems
             ),
diff --git a/module/block/ui/executionstatisticblock.html.php b/module/block/ui/executionstatisticblock.html.php
index 510833f36e..9ed51a8f6f 100644
--- a/module/block/ui/executionstatisticblock.html.php
+++ b/module/block/ui/executionstatisticblock.html.php
@@ -96,7 +96,7 @@ statisticBlock
         (
             btn
             (
-                setClass('ghost text-gray font-normal'),
+                setClass('font-normal rounded-full gray-400-outline size-md ml-3'),
                 set::caret(true),
                 isset($projects[$currentProjectID]) ? $projects[$currentProjectID] : $lang->block->executionstatistic->allProject,
             ),