Skip to content

Commit 4774151

Browse files
wxiaoguangwxiaoguang
authored
Improve navbar: add "admin" tip, add "active" style (#32927)
By the way, remove all "tw-" patches and unused styles.
1 parent 1c9b022 commit 4774151

File tree

2 files changed

+46
-51
lines changed

2 files changed

+46
-51
lines changed

‎templates/base/head_navbar.tmpl‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@
1111
</a>
1212

1313
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
14-
<div class="ui secondary menu item navbar-mobile-right only-mobile">
14+
<div class="ui secondary menu navbar-mobile-right only-mobile">
1515
{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
16-
<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
16+
<a id="mobile-stopwatch-icon" class="active-stopwatch item" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
1717
<div class="tw-relative">
1818
{{svg "octicon-stopwatch"}}
1919
<span class="header-stopwatch-dot"></span>
2020
</div>
2121
</a>
2222
{{end}}
2323
{{if .IsSigned}}
24-
<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
24+
<a id="mobile-notifications-icon" class="item" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
2525
<div class="tw-relative">
2626
{{svg "octicon-bell"}}
2727
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
2828
</div>
2929
</a>
3030
{{end}}
31-
<button class="item tw-w-auto ui icon mini button tw-p-2 tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
31+
<button class="item ui icon mini button tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
3232
</div>
3333

3434
<!-- navbar links non-mobile -->
@@ -64,9 +64,9 @@
6464
<div class="navbar-right">
6565
{{if and .IsSigned .MustChangePassword}}
6666
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
67-
<span class="text tw-flex tw-items-center">
67+
<span class="text">
6868
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
69-
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
69+
<span class="only-mobile">{{.SignedUser.Name}}</span>
7070
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
7171
</span>
7272
<div class="menu user-menu">
@@ -83,22 +83,22 @@
8383
</div><!-- end dropdown avatar menu -->
8484
{{else if .IsSigned}}
8585
{{if and EnableTimetracking .ActiveStopwatch}}
86-
<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
86+
<a class="item not-mobile active-stopwatch" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
8787
<div class="tw-relative">
8888
{{svg "octicon-stopwatch"}}
8989
<span class="header-stopwatch-dot"></span>
9090
</div>
9191
</a>
9292
{{end}}
9393

94-
<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
94+
<a class="item not-mobile" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
9595
<div class="tw-relative">
9696
{{svg "octicon-bell"}}
9797
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
9898
</div>
9999
</a>
100100

101-
<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
101+
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
102102
<span class="text">
103103
{{svg "octicon-plus"}}
104104
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
@@ -121,12 +121,14 @@
121121
</div><!-- end content create new menu -->
122122
</div><!-- end dropdown menu create new -->
123123

124-
<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
125-
<span class="text tw-flex tw-items-center">
124+
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
125+
<span class="text">
126126
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
127-
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
127+
<span class="only-mobile">{{.SignedUser.Name}}</span>
128128
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
129129
</span>
130+
{{/* do not localize it, here it needs the fixed length (width) to make UI comfortable */}}
131+
{{if .IsAdmin}}<span class="navbar-profile-admin">admin</span>{{end}}
130132
<div class="menu user-menu">
131133
<div class="ui header">
132134
{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
@@ -157,7 +159,6 @@
157159
</a>
158160
{{if .IsAdmin}}
159161
<div class="divider"></div>
160-
161162
<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/-/admin">
162163
{{svg "octicon-server"}}
163164
{{ctx.Locale.Tr "admin_panel"}}

‎web_src/css/modules/navbar.css‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,43 @@
44
justify-content: space-between;
55
background: var(--color-nav-bg);
66
border-bottom: 1px solid var(--color-secondary);
7-
margin: 0 !important;
87
padding: 0 10px;
98
}
109

11-
#navbar,
1210
#navbar .navbar-left,
1311
#navbar .navbar-right {
14-
min-height: 49px; /* +1px border-bottom */
15-
}
16-
17-
#navbar .navbar-left,
18-
#navbar .navbar-right {
19-
margin: 0;
2012
display: flex;
2113
align-items: center;
2214
gap: 5px;
23-
}
24-
25-
#navbar-logo {
26-
margin: 0;
15+
min-height: 49px; /* +1px border-bottom */
2716
}
2817

2918
.navbar-left > .item,
30-
.navbar-right > .item {
19+
.navbar-right > .item,
20+
.navbar-mobile-right > .item {
21+
flex: 0 0 auto;
22+
display: flex;
23+
align-items: center;
3124
color: var(--color-nav-text);
3225
position: relative;
3326
text-decoration: none;
34-
line-height: var(--line-height-default);
35-
flex: 0 0 auto;
36-
font-weight: var(--font-weight-normal);
37-
align-items: center;
38-
padding: .78571429em .92857143em;
39-
border-radius: .28571429rem;
40-
}
41-
42-
#navbar .item {
4327
min-height: 36px;
4428
min-width: 36px;
45-
padding-top: 3px;
46-
padding-bottom: 3px;
47-
display: flex;
29+
padding: 3px 13px;
30+
border-radius: 4px;
4831
}
4932

50-
#navbar .dropdown .item {
51-
justify-content: stretch;
33+
#navbar .item.active {
34+
background: var(--color-active);
5235
}
5336

5437
#navbar a.item:hover,
5538
#navbar button.item:hover {
5639
background: var(--color-nav-hover-bg);
5740
}
5841

59-
#navbar .secondary.menu > .item > .svg,
60-
#navbar .right.menu > .item > .svg {
61-
margin-right: 0;
42+
#navbar .item.ui.dropdown {
43+
padding-right: 5px;
6244
}
6345

6446
@media (max-width: 767.98px) {
@@ -80,12 +62,12 @@
8062
}
8163
#navbar .navbar-mobile-right {
8264
display: flex;
83-
margin: 0 0 0 auto !important;
84-
width: auto !important;
65+
margin: 0 0 0 auto;
66+
width: auto;
8567
}
8668
#navbar .navbar-mobile-right > .item {
8769
display: flex;
88-
width: auto !important;
70+
width: auto;
8971
}
9072
/* show items if the navbar is open */
9173
#navbar.navbar-menu-open {
@@ -96,13 +78,12 @@
9678
flex-direction: column;
9779
}
9880
#navbar.navbar-menu-open .navbar-left {
99-
display: flex;
10081
flex-wrap: wrap;
10182
}
102-
#navbar.navbar-menu-open .item {
83+
#navbar.navbar-menu-open .navbar-left > .item,
84+
#navbar.navbar-menu-open .navbar-right > .item {
10385
display: flex;
10486
width: 100%;
105-
margin: 0;
10687
}
10788
#navbar.navbar-menu-open .navbar-left #navbar-logo {
10889
justify-content: flex-start;
@@ -111,14 +92,27 @@
11192
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
11293
justify-content: flex-end;
11394
width: 50%;
114-
min-height: 48px;
95+
min-height: 49px;
11596
}
11697
#navbar #mobile-stopwatch-icon,
11798
#navbar #mobile-notifications-icon {
118-
margin-right: 6px !important;
99+
margin-right: 6px;
119100
}
120101
}
121102

103+
#navbar .ui.dropdown .navbar-profile-admin {
104+
display: block;
105+
position: absolute;
106+
font-size: 10px;
107+
font-weight: var(--font-weight-bold);
108+
color: var(--color-nav-bg);
109+
background: var(--color-primary);
110+
padding: 2px 4px;
111+
border-radius: 10px;
112+
top: -1px;
113+
left: 18px;
114+
}
115+
122116
#navbar a.item:hover .notification_count,
123117
#navbar a.item:hover .header-stopwatch-dot {
124118
border-color: var(--color-nav-hover-bg);

0 commit comments

Comments
 (0)