Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve notification icon and navbar #25111

Merged
merged 8 commits into from
Jun 7, 2023
Merged

Improve notification icon and navbar #25111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c11ff13
Improve notification count icon
silverwind Jun 6, 2023
1d4850c
rename color
silverwind Jun 6, 2023
7e112fd
fix selector
silverwind Jun 6, 2023
af4f6ce
tweak menu margins
silverwind Jun 6, 2023
8332fee
rename --color-navbar to --color-header-wrapper
silverwind Jun 7, 2023
640092e
rename --color-header-bar to --color-nav-bg and --color-header-bar-ho…
silverwind Jun 7, 2023
2da4349
remove the 'following bar' wrapper
silverwind Jun 7, 2023
3cb1bf5
Merge branch 'main' into notifcircle
lafriks Jun 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions templates/base/head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,7 @@
{{template "custom/body_inner_pre" .}}

{{if not .PageIsInstall}}
<div class="ui top secondary stackable main menu following bar light">
{{template "base/head_navbar" .}}
</div><!-- end bar -->
{{template "base/head_navbar" .}}
{{end}}

{{if false}}
Expand Down
8 changes: 4 additions & 4 deletions templates/base/head_navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="ui container" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
Copy link
Contributor

@wxiaoguang wxiaoguang Jun 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it shouldn't use container here (although it's from old code)

ui container means limited width (not full width).

The main also seems a no-op here.

Update : maybe the secondary is also a no-op now, because the bg color is provided by #navbar now.

tested, secondary is necessary.

The minimal styles are: class="ui secondary stackable menu"

{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
Expand Down Expand Up @@ -78,7 +78,7 @@
</div><!-- end dropdown avatar menu -->
</div>
{{else if .IsSigned}}
<div class="right stackable menu">
<div class="right stackable menu gt-mr-4">
{{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
<span class="fitted gt-relative">
Expand Down Expand Up @@ -125,7 +125,7 @@
</span>
</a>

<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "create_new"}}">
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-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>
Expand All @@ -148,7 +148,7 @@
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->

<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
Expand Down
2 changes: 1 addition & 1 deletion templates/status/500.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</head>
<body>
<div class="full height">
<nav class="ui secondary menu following bar light">
<nav class="ui container secondary stackable main menu" id="navbar">
Copy link
Contributor

@wxiaoguang wxiaoguang Jun 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<nav class="ui container secondary stackable main menu" id="navbar">
<nav class="ui secondary stackable menu" id="navbar">

?

<div class="ui container gt-df">
<div class="item brand gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
Expand Down
70 changes: 39 additions & 31 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@
--color-input-toggle-background: #dedede;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
--color-navbar-transparent: #f8f8f800;
--color-header-wrapper: #f8f8f8;
--color-header-wrapper-transparent: #f8f8f800;
--color-light: #00000006;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
Expand All @@ -223,7 +223,8 @@
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #ffffff;
--color-nav-bg: #ffffff;
--color-nav-hover-bg: #ebebeb;
--color-label-text: #232323;
--color-label-bg: #cacaca5b;
--color-label-hover-bg: #cacacaa0;
Expand Down Expand Up @@ -946,44 +947,44 @@ img.ui.avatar,
}
}

.following.bar {
margin: 0 !important;
}

.following.bar.light {
background: var(--color-header-bar);
#navbar {
display: flex;
align-items: center;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
width: 100vw;
min-height: 52px;
margin: 0 !important;
}

.following.bar .column .menu {
#navbar .column .menu {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seems no column in code

margin-top: 0;
}

.following.bar .fitted .svg {
#navbar .fitted .svg {
margin-right: 0;
vertical-align: middle;
}

.following.bar .searchbox {
#navbar .searchbox {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seems no searchbox in code.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this searchbox is commented out in templates as a TODO, we can clean this up.

background-color: var(--color-input-background) !important;
}

.following.bar .text .svg {
#navbar .text .svg {
width: 16px;
text-align: center;
}

.following.bar #navbar {
width: 100vw;
min-height: 52px;
#navbar a.item:hover {
background: var(--color-nav-hover-bg);
}

.following.bar #navbar .dropdown .avatar {
#navbar .dropdown .avatar {
margin-right: 0 !important;
}

@media (max-width: 767px) {
.following.bar #navbar:not(.shown) > *:not(:first-child) {
#navbar:not(.shown) > *:not(:first-child) {
display: none;
}
}
Expand Down Expand Up @@ -1576,7 +1577,7 @@ img.ui.avatar,

.ui.menu.new-menu {
margin-bottom: 15px;
background: var(--color-navbar);
background: var(--color-header-wrapper);
border-bottom: 1px solid var(--color-secondary) !important;
overflow: auto;
}
Expand All @@ -1591,7 +1592,7 @@ img.ui.avatar,
.ui.menu.new-menu::after {
position: absolute;
display: block;
background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%);
background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%);
content: '';
right: 0;
height: 39px;
Expand Down Expand Up @@ -2126,24 +2127,31 @@ a.ui.basic.label:hover {
width: 13px;
height: 13px;
background: var(--color-primary);
border: 2px solid var(--color-header-bar);
border: 2px solid var(--color-nav-bg);
border-radius: 100%;
}

.notification_count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 7px;
top: -9px;
min-width: 1.5em;
text-align: center;
left: 6px;
top: -8px;
min-width: 17px;
min-height: 17px;
background: var(--color-primary);
border: 2px solid var(--color-header-bar);
color: var(--color-header-bar);
padding: 2.75px;
border-radius: 1em;
font-size: 11px;
border: 2px solid var(--color-nav-bg);
color: var(--color-nav-bg);
border-radius: 17px;
padding: 0 3.5px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
line-height: .7;
}

#navbar a.item:hover .notification_count {
border-color: var(--color-nav-hover-bg);
}

.rss-icon {
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/explore.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.explore .navbar {
margin-bottom: 15px !important;
background-color: var(--color-navbar) !important;
background-color: var(--color-header-wrapper) !important;
border-width: 1px !important;
}

Expand Down
2 changes: 1 addition & 1 deletion web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
}

.repository .header-wrapper {
background-color: var(--color-navbar);
background-color: var(--color-header-wrapper);
}

.repository .header-wrapper .ui.tabs.divider {
Expand Down
7 changes: 4 additions & 3 deletions web_src/css/themes/theme-arc-green.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,8 @@
--color-input-toggle-background: #454a57;
--color-input-border: #454a57;
--color-input-border-hover: #505667;
--color-navbar: #2a2e3a;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a question, since the names have been changed, will third party themes be broken?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, they need to do the rename as well. I try to avoid such breaks, but in this case it was necessary because otherwise the naming would have been very confusing.

--color-navbar-transparent: #2a2e3a00;
--color-header-wrapper: #2a2e3a;
--color-header-wrapper-transparent: #2a2e3a00;
--color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28;
Expand All @@ -207,7 +207,8 @@
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #2e323e;
--color-nav-bg: #2e323e;
--color-nav-hover-bg: #434651;
--color-label-text: #dfe3ec;
--color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0;
Expand Down