From 90cf07a2c8dc2917d0c02648f0a69e0229cfce21 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 9 Feb 2023 06:42:18 +0100 Subject: [PATCH] Improve notification and stopwatch styles (#22169) - Add dot-style indicators to notification and time tracker - Slightly reduce whitespace between right-aligned icons - Move notification icon to right on mobile - Switch menu icon to SVG Screenshot 2022-12-19 at 19 40 32 Screenshot 2022-12-19 at 19 41 04 --------- Co-authored-by: Lunny Xiao --- templates/base/head_navbar.tmpl | 48 ++++++++++++++++----------------- web_src/less/_base.less | 28 +++++++++++++++++++ web_src/less/helpers.less | 1 + 3 files changed, 53 insertions(+), 24 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 90a54608e6..1c995e73e7 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -3,22 +3,24 @@ {{if .IsSigned}} {{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}} {{end}} -
+
- {{if .IsSigned}} - - - {{svg "octicon-bell"}} - - {{$notificationUnreadCount}} +
+ {{if .IsSigned}} + + + {{svg "octicon-bell"}} + + {{$notificationUnreadCount}} + - - - {{end}} -
@@ -78,12 +80,10 @@ {{else if .IsSigned}}
{{if EnableTimetracking}} - - - - {{svg "octicon-stopwatch"}} - {{svg "octicon-dot-fill"}} - + + + {{svg "octicon-stopwatch"}} + {{.locale.Tr "active_stopwatch"}} @@ -118,16 +118,16 @@
{{end}} - - - {{svg "octicon-bell"}} - + + + {{svg "octicon-bell"}} + {{$notificationUnreadCount}} -
+
{{svg "octicon-plus"}} {{.locale.Tr "create_new"}} @@ -150,7 +150,7 @@
-
+
{{avatar .SignedUser 24 "tiny"}} {{.locale.Tr "user_profile_and_more"}} diff --git a/web_src/less/_base.less b/web_src/less/_base.less index e58bf53f5d..6f35a49ad8 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1364,6 +1364,7 @@ a.ui.card:hover, visibility: hidden; } +.text.primary { color: var(--color-primary) !important; } .text.red { color: var(--color-red) !important; } .text.orange { color: var(--color-orange) !important; } .text.yellow { color: var(--color-yellow) !important; } @@ -2434,6 +2435,33 @@ a.ui.basic.label:hover { margin-top: 1rem; } +.header-stopwatch-dot { + position: absolute; + left: 8px; + top: -8px; + width: 13px; + height: 13px; + background: var(--color-primary); + border: 2px solid var(--color-header-bar); + border-radius: 100%; +} + +.notification_count { + position: absolute; + left: 5px; + top: -8px; + min-width: 1.5em; + text-align: center; + background: var(--color-primary); + border: 2px solid var(--color-header-bar); + color: var(--color-header-bar); + padding: 2px; + border-radius: 1em; + font-size: 10px; + font-weight: 700; + line-height: .7; +} + table th[data-sortt-asc], table th[data-sortt-desc] { &:hover { diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 46284811ee..20670a3786 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -21,6 +21,7 @@ /* below class names match Tailwind CSS */ .pointer-events-none { pointer-events: none !important; } +.relative { position: relative !important; } .mono { font-family: var(--fonts-monospace) !important;