mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-08-29 22:06:06 +02:00
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 <img width="270" alt="Screenshot 2022-12-19 at 19 40 32" src="https://user-images.githubusercontent.com/115237/208496795-ce8734a0-f109-47b7-8eb8-96931e867b23.png"> <img width="607" alt="Screenshot 2022-12-19 at 19 41 04" src="https://user-images.githubusercontent.com/115237/208496797-2ff68197-f520-4174-927e-ead15addd63e.png"> --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
87261f3fb9
commit
90cf07a2c8
3 changed files with 53 additions and 24 deletions
|
@ -3,22 +3,24 @@
|
|||
{{if .IsSigned}}
|
||||
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
|
||||
{{end}}
|
||||
<div class="item brand" style="justify-content: space-between;">
|
||||
<div class="item brand sb">
|
||||
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
|
||||
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
|
||||
</a>
|
||||
{{if .IsSigned}}
|
||||
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.Tr "notifications"}}'>
|
||||
<span class="text black">
|
||||
<span class="fitted">{{svg "octicon-bell"}}</span>
|
||||
<span class="ui red label mini{{if not $notificationUnreadCount}} hidden{{end}} notification_count">
|
||||
{{$notificationUnreadCount}}
|
||||
<div class="df ac">
|
||||
{{if .IsSigned}}
|
||||
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only mr-4 mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
|
||||
<span class="fitted item">
|
||||
{{svg "octicon-bell"}}
|
||||
<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
|
||||
{{$notificationUnreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
|
||||
<i class="sidebar icon"></i>
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="ui icon button mobile-only" id="navbar-expand-toggle">
|
||||
{{svg "octicon-three-bars"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -78,12 +80,10 @@
|
|||
{{else if .IsSigned}}
|
||||
<div class="right stackable menu">
|
||||
{{if EnableTimetracking}}
|
||||
<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
|
||||
<span class="text">
|
||||
<span class="fitted item">
|
||||
{{svg "octicon-stopwatch"}}
|
||||
<span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span>
|
||||
</span>
|
||||
<a class="active-stopwatch-trigger item ui mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
|
||||
<span class="fitted relative">
|
||||
{{svg "octicon-stopwatch"}}
|
||||
<span class="header-stopwatch-dot"></span>
|
||||
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
|
||||
</span>
|
||||
</a>
|
||||
|
@ -118,16 +118,16 @@
|
|||
</div>
|
||||
{{end}}
|
||||
|
||||
<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
|
||||
<span class="text">
|
||||
<span class="fitted">{{svg "octicon-bell"}}</span>
|
||||
<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
|
||||
<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
|
||||
<span class="fitted item">
|
||||
{{svg "octicon-bell"}}
|
||||
<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
|
||||
{{$notificationUnreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="ui dropdown jump item tooltip" data-content="{{.locale.Tr "create_new"}}">
|
||||
<div class="ui dropdown jump item tooltip mx-0" data-content="{{.locale.Tr "create_new"}}">
|
||||
<span class="text">
|
||||
<span class="fitted">{{svg "octicon-plus"}}</span>
|
||||
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
|
||||
|
@ -150,7 +150,7 @@
|
|||
</div><!-- end content create new menu -->
|
||||
</div><!-- end dropdown menu create new -->
|
||||
|
||||
<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
|
||||
<div class="ui dropdown jump item tooltip mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
|
||||
<span class="text">
|
||||
{{avatar .SignedUser 24 "tiny"}}
|
||||
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue