Use body text color in repository files table links #20386

lhsazevedo · 2022-07-16T02:45:05Z

Hi, this is my first contribution here! 👋

Use body text color in for links in the repository files table:

Header (author, commit message), and file names: --color-text.
File commit message and age: --color-text-light-2.

Issue/PR links (.ref-issue) will not be affected, as seen in other git services.

Gitea theme before/after

Before:

After:

Arc Green theme before/after

Before:

After:

PS: I found it more convenient to create this PR without a prior issue, as this is such a small change.

silverwind · 2022-07-16T08:51:22Z

You can use the muted class to have links inherit the color from the parents, it could be used on the left column to save a selector. As for the other two column, the contrast seems a bit too low, maybe use --color-text-light-1 for them.

silverwind · 2022-07-16T08:55:41Z

web_src/less/_repository.less

+
+          a:not(.ref-issue) {
+            color: var(--color-text-light-2);
+          }


You can probably avoid this :not by using a > a selector instead.

Unfortunately it didn't work, as the anchors are siblings. Maybe I am missing something?

<span class="truncate"> <a href="..." class="default-link">Add support for http signatures (</a> <a href="..." class="ref-issue">#553</a> <a href="..." class="default-link">)</a> </span>

But now that you mentioned it, I noticed that there other types of links that should be highlighted as well.
So I guess its safer to explicitly target .default-link instead of every link except .ref-issue.

Just pushed this change, will add new screenshots.

lhsazevedo · 2022-07-16T22:42:07Z

Thanks for reviewing.

Here are updated screenshots, with a submodule this time.

Gitea theme

Arc Green theme

silverwind · 2022-07-17T19:10:54Z

Try this patch, it fixes hover states and adds a new color for columns 2 and 3:

diff --git a/modules/markup/html.go b/modules/markup/html.go
index 607118050..a5606dbb5 100644
--- a/modules/markup/html.go
+++ b/modules/markup/html.go
@@ -1175,9 +1175,9 @@ func genDefaultLinkProcessor(defaultLink string) processor {
 		node.Data = "a"
 		node.DataAtom = atom.A
 		node.Attr = []html.Attribute{
 			{Key: "href", Val: defaultLink},
-			{Key: "class", Val: "default-link"},
+			{Key: "class", Val: "default-link muted"},
 		}
 		node.FirstChild, node.LastChild = ch, ch
 	}
 }
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 0c3697d95..af47b3446 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -64,9 +64,9 @@
 								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
 								{{svg "octicon-file-directory-fill"}}
 								<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
 									{{if eq (len $subJumpablePath) 2}}
-										<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
+										<span class="color-text-light-2">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
 									{{else}}
 										{{index $subJumpablePath 0}}
 									{{end}}
 								</a>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 638801e39..3bf524ba1 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -117,8 +117,9 @@
   --color-body: #ffffff;
   --color-text-dark: #080808;
   --color-text: #212121;
   --color-text-light: #555555;
+  --color-text-light-1: #6a6a6a;
   --color-text-light-2: #808080;
   --color-text-light-3: #a0a0a0;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
@@ -274,8 +275,9 @@ a.muted {
 }
 
 a:hover,
 a.muted:hover,
+a.muted:hover [class*="color-text"],
 .ui.breadcrumb a:hover {
   color: var(--color-primary);
 }
 
@@ -2205,4 +2207,8 @@ table th[data-sortt-desc] {
       position: initial;
     }
   }
 }
+
+.color-text-light-2 {
+  color: var(--color-text-light-2);
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 3e253f9be..354ed81dd 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -322,12 +322,8 @@
 
         .ui.avatar {
           margin-bottom: 5px;
         }
-
-        .commit-summary a.default-link {
-          color: var(--color-text);
-        }
       }
 
       tbody {
         .svg {
@@ -370,8 +366,10 @@
           max-width: calc(100vw - 140px);
         }
 
         &.message {
+          color: var(--color-text-light-1);
+
           @media @mediaXl {
             max-width: 400px;
           }
           @media @mediaLg {
@@ -380,17 +378,13 @@
           @media @mediaMd {
             max-width: 250px;
           }
           width: 66%;
-
-          a.default-link {
-            color: var(--color-text-light);
-          }
         }
 
         &.age {
           width: 120px;
-          color: var(--color-text-light);
+          color: var(--color-text-light-1);
         }
 
         .truncate {
           display: inline-block;
@@ -440,12 +434,8 @@
         padding-top: 8px;
         padding-bottom: 8px;
         width: calc(100% - 1.25rem);
       }
-
-      .jumpable-path {
-        color: var(--color-text-light-2);
-      }
     }
 
     .non-diff-file-content {
       .header {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 01150d353..b35e8c922 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -97,8 +97,9 @@
   --color-box-body: #303440;
   --color-text-dark: #dbe0ea;
   --color-text: #bbc0ca;
   --color-text-light: #a6aab5;
+  --color-text-light-1: #979ba6;
   --color-text-light-2: #8a8e99;
   --color-text-light-3: #707687;
   --color-footer: #2e323e;
   --color-timeline: #4c525e;

Additionally, add a new --color-text-light-1 color. Co-authored-by: silverwind <[email protected]>

lhsazevedo · 2022-07-17T23:36:59Z

Great! Adding muted in genDefaultLinkProcessor is really better.

Here's a quick preview:

Should I squash these commits?

silverwind · 2022-07-18T12:23:48Z

Can leave it unsquashed. I think we should probably mute the left-side of @ in a submodule entry, but good to double-check how GH renders these.

silverwind · 2022-07-19T15:17:48Z

Checked the GH rendering, they do color everthing in a submodule reference:

Still, I think it would be better to mute the left part of the @, so only the hash is colored.

lhsazevedo · 2022-07-19T22:07:01Z

Agreed, as we have two different links (instead of a single one like GH).

* giteaofficial/main: Fix Ruby package parsing by removed unused email field (go-gitea#20470) [skip ci] Updated translations via Crowdin Add repository condition for issue count (go-gitea#20454) Prepend commit message to template content (go-gitea#20429) Improve pprof doc (go-gitea#20463) Improve code diff highlight, fix incorrect rendered diff result (go-gitea#19958) Add Cache-Control header to html and api responses, add no-transform (go-gitea#20432) [skip ci] Updated translations via Crowdin Allow non-semver packages in the Conan package registry (go-gitea#20412) Use body text color in repository files table links (go-gitea#20386) Correct code block in installation docs for Snap (go-gitea#20440) Downgrade golangci-lint to 1.47.0 (go-gitea#20445) Add eslint-plugin-sonarjs (go-gitea#20431) Fix: Actor is required to get user repositories (go-gitea#20443) Add "X-Gitea-Object-Type" header for GET `/raw/` & `/media/` API (go-gitea#20438) Simplify visibility checks (go-gitea#20406)

Use body text color in for links in the repository files table Issue/PR links (`.ref-issue`) will not be affected, as seen in other git services. Co-authored-by: silverwind <[email protected]> Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Lauris BH <[email protected]>

Use body text color in #repo-files-table links

4a6b618

lhsazevedo force-pushed the repo-files-color branch from 598becd to 4a6b618 Compare July 16, 2022 03:36

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 16, 2022

silverwind reviewed Jul 16, 2022

View reviewed changes

lhsazevedo added 3 commits July 16, 2022 19:02

Save a selector by using .muted

515354b

Improve contrast of file list message and age

8b04e0d

Avoid :not by targeting .default-link instead

2475d5e

Fix hover state and save more selectors

ac6ee52

Additionally, add a new --color-text-light-1 color. Co-authored-by: silverwind <[email protected]>

Gusted added this to the 1.18.0 milestone Jul 18, 2022

Mute submodule name

acf0ad4

silverwind approved these changes Jul 20, 2022

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jul 20, 2022

wxiaoguang approved these changes Jul 20, 2022

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jul 20, 2022

wxiaoguang and others added 4 commits July 21, 2022 00:37

Merge branch 'main' into repo-files-color

bf8c567

Merge branch 'main' into repo-files-color

051c937

Merge branch 'main' into repo-files-color

d372272

Merge branch 'main' into repo-files-color

7b4060f

wxiaoguang approved these changes Jul 22, 2022

View reviewed changes

wxiaoguang merged commit 599ae09 into go-gitea:main Jul 22, 2022

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use body text color in repository files table links #20386

Use body text color in repository files table links #20386

lhsazevedo commented Jul 16, 2022 •

edited

Loading

silverwind commented Jul 16, 2022

silverwind Jul 16, 2022

lhsazevedo Jul 16, 2022 •

edited

Loading

lhsazevedo commented Jul 16, 2022

silverwind commented Jul 17, 2022

lhsazevedo commented Jul 17, 2022

silverwind commented Jul 18, 2022

silverwind commented Jul 19, 2022

lhsazevedo commented Jul 19, 2022

Use body text color in repository files table links #20386

Use body text color in repository files table links #20386

Conversation

lhsazevedo commented Jul 16, 2022 • edited Loading

silverwind commented Jul 16, 2022

silverwind Jul 16, 2022

Choose a reason for hiding this comment

lhsazevedo Jul 16, 2022 • edited Loading

Choose a reason for hiding this comment

lhsazevedo commented Jul 16, 2022

silverwind commented Jul 17, 2022

lhsazevedo commented Jul 17, 2022

silverwind commented Jul 18, 2022

silverwind commented Jul 19, 2022

lhsazevedo commented Jul 19, 2022

lhsazevedo commented Jul 16, 2022 •

edited

Loading

lhsazevedo Jul 16, 2022 •

edited

Loading