tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-19 16:58:37 +00:00
Code Releases Activity

Rework and fix stopwatch (#30732) (#30787)

Browse Source 
Backport #30732 by @silverwind

Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot
2024-05-01 05:46:45 +08:00
committed by GitHub
parent 2bedd16c14
commit ab344a36e3
11 changed files with 99 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web_src/css/modules/navbar.css
View File

@@ -103,19 +103,12 @@
width: 50%;
min-height: 48px;
}
#navbar #mobile-stopwatch-icon,
#navbar #mobile-notifications-icon {
margin-right: 6px !important;
}
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
border-color: var(--color-nav-hover-bg);
@@ -123,6 +116,11 @@
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
position: absolute;
@@ -135,6 +133,8 @@
align-items: center;
justify-content: center;
z-index: 1; /* prevent menu button background from overlaying icon */
user-select: none;
white-space: nowrap;
}
.secondary-nav {