From 1e40528bba3eb86257aedbc380654f841965be3e Mon Sep 17 00:00:00 2001
From: wangyidong <wangyidong@cnezsoft.com>
Date: Tue, 30 Jul 2024 14:55:48 +0800
Subject: [PATCH]  * [perf] Adjust messageBar style.

---
 lib/zin/wg/header/v1.php                   | 10 ++++++----
 module/index/js/index.ui.js                | 11 ++++++++---
 module/message/js/common.ui.js             |  7 ++++++-
 module/message/ui/ajaxgetdropmenu.html.php |  2 +-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/lib/zin/wg/header/v1.php b/lib/zin/wg/header/v1.php
index e542638c1b..4b2f82e36a 100644
--- a/lib/zin/wg/header/v1.php
+++ b/lib/zin/wg/header/v1.php
@@ -40,7 +40,7 @@ class header extends wg
         {
             $toolbar = new toolbar
             (
-                setClass('gap-2'),
+                setClass('gap-4'),
                 $messageBar = static::messageBar(),
                 $addMenu    = static::quickAddMenu(),
                 static::userBar()
@@ -256,14 +256,17 @@ class header extends wg
         if(!$config->message->browser->turnon) return null;
 
         $showCount   = $config->message->browser->count;
-        $dotStyle    = array('top' => '0px', 'right' => '0px', 'aspect-ratio' => '0', 'padding' => '2px');
+        $dotStyle    = array('top' => '-5px', 'right' => '-10px', 'aspect-ratio' => '0', 'padding' => '2px');
         $unreadCount = $app->dbh->query("SELECT COUNT(1) as count FROM " . TABLE_NOTIFY . " WHERE `objectType` = 'message' AND status != 'read' AND `toList` = ',{$app->user->account},'")->fetch()->count;
         if($unreadCount > 99) $unreadCount = '99+';
+        if($unreadCount < 10) $dotStyle['right'] = '-5px';
         if(!$showCount)
         {
             $dotStyle['aspect-ratio'] = '1 / 1';
             $dotStyle['width']        = '5px';
             $dotStyle['height']       = '5px';
+            $dotStyle['right']        = '-2px';
+            $dotStyle['top']          = '-2px';
         }
 
         return dropdown
@@ -277,8 +280,7 @@ class header extends wg
                 (
                     setID('messageBar'),
                     set(array('data-on' => 'click', 'data-call' => 'fetchMessage', 'data-params' => 'event', 'data-fetcher' => createLink('message', 'ajaxGetDropMenu'))),
-                    setClass('ring-primary bg-inherit border border-gray-50'),
-                    setStyle(array('--tw-border-opacity' => 1, 'border-color' => "rgba(var(--color-gray-200-rgb), var(--tw-border-opacity))")),
+                    setClass('bg-inherit ring ring-opacity-40'),
                     set::square(true),
                     set::caret(false),
                     set::size('sm'),
diff --git a/module/index/js/index.ui.js b/module/index/js/index.ui.js
index 6c8a994b7a..ad29e400e2 100644
--- a/module/index/js/index.ui.js
+++ b/module/index/js/index.ui.js
@@ -995,11 +995,16 @@ window.browserNotify = function()
                 }
             }
 
-            let newCount  = data.newCount;
-            let showCount = data.showCount != '0';
-            let dotStyle  = 'top: 0px; right: 0px; padding: 2px; aspect-ratio: ' + (showCount ? '0;' : '1 / 1;');
+            let newCount   = parseInt(data.newCount);
+            let showCount  = data.showCount != '0';
+            let dotStyle   = 'padding: 2px;';
+            let rightStyle = showCount ? 'right: -10px;' : 'right: -2px;';
             if(!showCount) dotStyle += 'width: 5px; height: 5px;';
             if(newCount > 99) newCount = '99+';
+            if(newCount < 10) rightStyle = 'right: -5px;';
+
+            dotStyle += showCount ? 'top: -5px; aspect-ratio: 0;' : 'top: -2px; aspect-ratio: 1 / 1;';
+            dotStyle += rightStyle;
 
             let dotHtml = '<span class="label danger label-dot absolute' + (showCount ? ' rounded-sm' : '') + '" style="' + dotStyle + '">' + (showCount ? newCount : '') + '</span>';
             $('#apps .app-container').each(function()
diff --git a/module/message/js/common.ui.js b/module/message/js/common.ui.js
index a994aac075..5c57eb28e8 100644
--- a/module/message/js/common.ui.js
+++ b/module/message/js/common.ui.js
@@ -1,11 +1,16 @@
 window.updateAllDot = function(showCount)
 {
-    let dotStyle = 'top: 0px; right: 0px; padding: 2px; aspect-ratio: ' + (showCount != '0' ? '0;' : '1 / 1;');
+    let dotStyle   = 'padding: 2px;';
+    let rightStyle = showCount ? 'right: -10px;' : 'right: -2px;';
     if(showCount == 0) dotStyle += 'width: 5px; height: 5px;';
 
     let $unreadTab  = $('#messageTabs #unread-messages.tab-pane');
     let unreadCount = $unreadTab.find('.message-item.unread').length;
     if(unreadCount > 99) unreadCount = '99+';
+    if(unreadCount < 10) rightStyle = 'right: -5px;';
+
+    dotStyle += showCount ? 'top: -5px; aspect-ratio: 0;' : 'top: -2px; aspect-ratio: 1 / 1;';
+    dotStyle += rightStyle;
 
     let dotHtml = '<span class="label danger label-dot absolute' + (showCount ? ' rounded-sm' : '') + '" style="' + dotStyle + '">' + (showCount != '0' ? unreadCount : '') + '</span>';
     parent.$('#apps .app-container').each(function()
diff --git a/module/message/ui/ajaxgetdropmenu.html.php b/module/message/ui/ajaxgetdropmenu.html.php
index 11062cab03..13c0f7cf35 100644
--- a/module/message/ui/ajaxgetdropmenu.html.php
+++ b/module/message/ui/ajaxgetdropmenu.html.php
@@ -76,7 +76,7 @@ tabs
     (
         setClass('absolute top-3 right-5'),
         set::style(array('z-index' => '100')),
-        btn(set::size('sm'), set::type('link'), setClass('allMarkRead'), set::hint($lang->message->notice->allMarkRead), icon('eye')),
+        btn(set::size('sm'), set::type('link'), setClass('allMarkRead'), set::hint($lang->message->notice->allMarkRead), icon('clear')),
         btn(set::size('sm'), set::type('link'), setClass('clearRead'),   set::hint($lang->message->notice->clearRead),   icon('trash')),
         btn(set::size('sm'), set::type('link'), set::hint($lang->message->browserSetting->more), setData('target', '#messageSettingModal'), setData('toggle', 'modal'), setData('size', 'sm'), icon('cog-outline'))
     ),