From fefdb7ffd11bbfbff66dae8e88681ec840dedfde Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 19 Nov 2022 05:02:30 +0100
Subject: [PATCH] Timeline and color tweaks (#21799)
Followup to https://github.com/go-gitea/gitea/pull/21784.
- Restore muted effect on timeline author and issuelist comment icon
- Remove whitespace inside shared user templates, fixing link hover
underline
- Use shared author link template more
- Use `bold` class instead of CSS
- Fix grey-light color being too dark on arc-green
- Add missing black-light color
- Fix issuelist progress bar color
- Fix various other cases of missing `.muted`
<img width="416" alt="Screenshot 2022-11-13 at 12 15 22"
src="https://user-images.githubusercontent.com/115237/201519497-1d4725c6-bc8b-47b5-9f68-1278ac9a8c92.png">
<img width="324" alt="Screenshot 2022-11-13 at 12 16 52"
src="https://user-images.githubusercontent.com/115237/201519501-c0d03700-f9af-4316-ab46-482f2c7c738b.png">
<img width="79" alt="Screenshot 2022-11-13 at 12 30 55"
src="https://user-images.githubusercontent.com/115237/201519502-46dc2d73-bbdf-4a2e-84d3-d2976f793163.png">
<img width="440" alt="Screenshot 2022-11-13 at 12 41 03"
src="https://user-images.githubusercontent.com/115237/201519876-ada33948-f84a-4aeb-a40d-5c873f9a49e9.png">
<img width="213" alt="Screenshot 2022-11-13 at 12 52 54"
src="https://user-images.githubusercontent.com/115237/201520291-a4d7238e-aeca-46c7-9008-8b644b1b676e.png">
<img width="208" alt="Screenshot 2022-11-13 at 12 56 16"
src="https://user-images.githubusercontent.com/115237/201520436-aa8ba109-b959-42fb-831a-021e806c7082.png">
Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
templates/explore/repo_list.tmpl | 6 +++---
templates/org/home.tmpl | 4 ++--
templates/repo/diff/comments.tmpl | 2 +-
templates/repo/issue/view_content.tmpl | 4 ++--
.../repo/issue/view_content/comments.tmpl | 20 +++++++++----------
.../repo/issue/view_content/sidebar.tmpl | 2 +-
templates/shared/issuelist.tmpl | 2 +-
templates/shared/user/authorlink.tmpl | 4 +---
templates/shared/user/avatarlink.tmpl | 4 +---
templates/shared/user/namelink.tmpl | 4 +---
web_src/less/_base.less | 7 +++++--
web_src/less/_repository.less | 18 +++++++----------
web_src/less/shared/issuelist.less | 8 ++++++++
web_src/less/themes/theme-arc-green.less | 9 +++++----
14 files changed, 47 insertions(+), 47 deletions(-)
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 2a5c444dce2..044af9522e6 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -38,10 +38,10 @@
{{end}}
</div>
</div>
- <div class="metas df ac">
+ <div class="metas df ac text grey">
{{if .PrimaryLanguage}}
- <a href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
- <span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
+ <a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
+ <span class="df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
</a>
{{end}}
{{if not $.DisableStars}}
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 3ff86259d53..448639975f8 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -68,8 +68,8 @@
<div class="item">
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong class="team-name">{{.Name}}</strong></a>
<p class="text grey">
- <a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
- <a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
+ <a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
+ <a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
</p>
</div>
{{end}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 5d298f820c2..647c662d51c 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -11,7 +11,7 @@
<div class="ui top attached header comment-header df ac sb">
<div class="comment-header-left df ac">
{{if .OriginalAuthor}}
- <span class="text black mr-2">
+ <span class="text black bold mr-2">
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index de11846af7e..0cb74e81829 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -30,7 +30,7 @@
<div class="ui top attached header comment-header df ac sb">
<div class="comment-header-left df ac">
{{if .Issue.OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
{{.Issue.OriginalAuthor}}
</span>
@@ -45,7 +45,7 @@
{{avatar .Issue.Poster}}
</a>
<span class="text grey">
- <a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
+ {{template "shared/user/authorlink" .Issue.Poster}}
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
</span>
{{end}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 7ed8cf3bde5..e9b7172d1b3 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -25,7 +25,7 @@
<div class="ui top attached header comment-header df ac sb">
<div class="comment-header-left df ac">
{{if .OriginalAuthor}}
- <span class="text black mr-2">
+ <span class="text black bold mr-2">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
@@ -42,9 +42,7 @@
</a>
{{end}}
<span class="text grey">
- <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
- {{.Poster.GetDisplayName}}
- </a>
+ {{template "shared/user/authorlink" .Poster}}
{{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
</span>
{{end}}
@@ -151,14 +149,14 @@
<span class="badge">{{svg "octicon-bookmark"}}</span>
{{template "shared/user/avatarlink" .Poster}}
{{if eq .RefAction 3}}<del>{{end}}
- <span class="text grey">
+ <span class="text grey muted-links">
{{template "shared/user/authorlink" .Poster}}
{{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentHTMLURL|Escape) $refFrom | Safe}}
</span>
{{if eq .RefAction 3}}</del>{{end}}
<div class="detail">
- <span class="text grey"><a href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
+ <span class="text grey"><a class="muted" href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
</div>
</div>
{{else if eq .Type 4}}
@@ -207,7 +205,7 @@
{{if .RemovedAssignee}}
{{template "shared/user/avatarlink" .Assignee}}
<span class="text grey">
- <a class="author" {{if gt .Assignee.ID 0}}href="{{.Assignee.HomeLink}}"{{end}}>{{.Assignee.GetDisplayName}}</a>
+ {{template "shared/user/authorlink" .Assignee}}
{{if eq .Poster.ID .Assignee.ID}}
{{$.locale.Tr "repo.issues.remove_self_assignment" $createdStr | Safe}}
{{else}}
@@ -331,7 +329,7 @@
<div class="detail">
{{svg "octicon-plus"}}
<span class="text grey">
- <a href="{{.DependentIssue.HTMLURL}}">
+ <a class="muted" href="{{.DependentIssue.HTMLURL}}">
{{if eq .DependentIssue.RepoID .Issue.RepoID}}
#{{.DependentIssue.Index}} {{.DependentIssue.Title}}
{{else}}
@@ -354,7 +352,7 @@
<div class="detail">
<span class="text grey">{{svg "octicon-trash"}}</span>
<span class="text grey">
- <a href="{{.DependentIssue.HTMLURL}}">
+ <a class="muted" href="{{.DependentIssue.HTMLURL}}">
{{if eq .DependentIssue.RepoID .Issue.RepoID}}
#{{.DependentIssue.Index}} {{.DependentIssue.Title}}
{{else}}
@@ -408,7 +406,7 @@
<div class="comment-header-left df ac">
<span class="text grey">
{{if .OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
@@ -536,7 +534,7 @@
{{end}}
<span class="text grey">
{{if .OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index eb95674b13d..af648387db5 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -389,7 +389,7 @@
{{avatar $user}}
</a>
<div class="content">
- <a class="author">{{$user.DisplayName}}</a>
+ {{template "shared/user/authorlink" $user}}
<div class="text">
{{$trackedtime}}
</div>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 6fce412ffa1..e8ad8406cd2 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -160,7 +160,7 @@
</div>
<div class="issue-item-icon-right text grey">
{{if .NumComments}}
- <a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+ <a class="tdn muted" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
</a>
{{end}}
diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
index 81c2a4ed5e5..4a6672181f4 100644
--- a/templates/shared/user/authorlink.tmpl
+++ b/templates/shared/user/authorlink.tmpl
@@ -1,3 +1 @@
-<a class="author"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{.GetDisplayName}}
-</a>
+<a class="author text black bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/shared/user/avatarlink.tmpl b/templates/shared/user/avatarlink.tmpl
index 40f5ee71297..90f5d96700e 100644
--- a/templates/shared/user/avatarlink.tmpl
+++ b/templates/shared/user/avatarlink.tmpl
@@ -1,3 +1 @@
-<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{avatar .}}
-</a>
+<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{avatar .}}</a>
diff --git a/templates/shared/user/namelink.tmpl b/templates/shared/user/namelink.tmpl
index 25dff36a788..a122f4f45b5 100644
--- a/templates/shared/user/namelink.tmpl
+++ b/templates/shared/user/namelink.tmpl
@@ -1,3 +1 @@
-<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{.GetDisplayName}}
-</a>
+<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index dc0e69c6d1b..f2173d6d2b2 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -79,6 +79,7 @@
--color-pink: #e03997;
--color-brown: #a5673f;
--color-grey: #888888;
+ --color-black: #1b1c1d;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
@@ -92,9 +93,9 @@
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-grey-light: #a6a6a6;
+ --color-black-light: #525558;
/* other colors */
--color-gold: #a1882b;
- --color-black: #1b1c1d;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-added-word-bg: #acf2bd;
@@ -293,13 +294,15 @@ a,
text-decoration-skip-ink: all;
}
-a.muted {
+a.muted,
+.muted-links a {
color: inherit;
}
a:hover,
a.muted:hover,
a.muted:hover [class*="color-text"],
+.muted-links a:hover,
.ui.breadcrumb a:hover {
color: var(--color-primary);
}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index bf1fb53e2b8..63f1f954a0c 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -829,7 +829,7 @@
.timeline-avatar {
position: absolute;
- left: -72px;
+ left: -68px;
img {
width: 40px !important;
@@ -846,7 +846,6 @@
.avatar img {
width: 20px;
height: 20px;
- margin: 0 .25rem;
vertical-align: middle;
}
@@ -981,10 +980,6 @@
margin-top: 4px;
}
- .author {
- font-weight: 600;
- }
-
.comment-form-reply .footer {
padding-bottom: 1em;
}
@@ -1165,9 +1160,12 @@
padding-left: 15px;
.detail {
- font-size: .9rem;
- margin-top: 5px;
- margin-left: 8px;
+ margin-top: 4px;
+ margin-left: 14px;
+
+ .svg {
+ margin-right: 2px;
+ }
}
.segments {
@@ -2723,12 +2721,10 @@
a {
color: var(--color-text);
- text-decoration: none;
}
a:hover {
color: var(--color-primary);
- text-decoration: none;
}
}
diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
index 2dffe19909a..8d4cfc46d49 100644
--- a/web_src/less/shared/issuelist.less
+++ b/web_src/less/shared/issuelist.less
@@ -91,6 +91,14 @@
border-radius: 3px;
vertical-align: 2px !important;
}
+
+ progress::-webkit-progress-value {
+ background-color: var(--color-secondary-dark-4);
+ }
+
+ progress::-moz-progress-bar {
+ background-color: var(--color-secondary-dark-4);
+ }
}
.conflicting {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 370a866abb4..b793f995091 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -67,8 +67,9 @@
--color-purple: #b259d0;
--color-pink: #d22e8b;
--color-brown: #a47252;
- --color-grey: #5e626a;
- /* light variants */
+ --color-grey: #9ea2aa;
+ --color-black: #1e222e;
+ /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-light: #c23636;
--color-orange-light: #b84f0b;
--color-yellow-light: #b88a03;
@@ -80,9 +81,9 @@
--color-purple-light: #a742c9;
--color-pink-light: #be297d;
--color-brown-light: #94674a;
- --color-grey-light: #55585f;
+ --color-grey-light: #8d919b;
+ --color-black-light: #1b1f29;
/* other colors */
- --color-black: #1e222e;
--color-gold: #b1983b;
--color-white: #ffffff;
--color-diff-removed-word-bg: #6f3333;