Various code view improvements (#30014)

1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: #18074
go-gitea · Mar 24, 2024 · db01bf6 · db01bf6
1 parent 9c6e6f4
commit db01bf6
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 103 deletions.
diff --git a/routers/web/repo/blame.go b/routers/web/repo/blame.go
@@ -278,7 +278,7 @@ func renderBlame(ctx *context.Context, blameParts []*git.BlamePart, commitNames
 
 				var avatar string
 				if commit.User != nil {
-					avatar = string(avatarUtils.Avatar(commit.User, 18, "gt-mr-3"))
+					avatar = string(avatarUtils.Avatar(commit.User, 18))
 				} else {
 					avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3"))
 				}

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
@@ -2,6 +2,13 @@
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	<div>
+		<h1>Link</h1>
+		<div>
+			<a href="#">normal</a>
+			<a class="muted" href="#">muted</a>
+			<a class="suppressed" href="#">suppressed</a>
+			<a class="silenced" href="#">silenced</a>
+		</div>
 		<h1>Button</h1>
 		<div>
 			Style:

diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
@@ -41,19 +41,19 @@
 											{{$row.Avatar}}
 										</div>
 										<div class="blame-message">
-											<a href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
+											<a class="suppressed tw-text-text" href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
 												{{$row.CommitMessage}}
 											</a>
 										</div>
-										<div class="blame-time">
+										<div class="blame-time not-mobile">
 											{{$row.CommitSince}}
 										</div>
 									</div>
 								</div>
 							</td>
 							<td class="lines-blame-btn">
 								{{if $row.PreviousSha}}
-									<a href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
+									<a role="button" class="muted" href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
 										{{svg "octicon-versions"}}
 									</a>
 								{{end}}
@@ -75,6 +75,12 @@
 					{{end}}
 				</tbody>
 			</table>
+			<div class="code-line-menu tippy-target">
+				{{if $.Permission.CanRead $.UnitTypeIssues}}
+					<a class="item ref-in-new-issue" role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
+				{{end}}
+				<a class="item copy-line-permalink" role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -215,10 +215,14 @@ progress::-moz-progress-bar {
 a {
   color: var(--color-primary);
   cursor: pointer;
-  text-decoration: none;
+  text-decoration-line: none;
   text-decoration-skip-ink: all;
 }
 
+a:hover {
+  text-decoration-line: underline;
+}
+
 /* a = always colored, underlined on hover */
 /* a.muted = colored on hover, underlined on hover */
 /* a.suppressed = never colored, underlined on hover */
@@ -245,15 +249,15 @@ a.suppressed:hover {
 }
 
 a.silenced:hover {
-  text-decoration: none;
+  text-decoration-line: none;
 }
 
 a.label,
 .ui.search .results a,
 .ui .menu a,
 .ui.cards a.card,
 .issue-keyword a {
-  text-decoration: none !important;
+  text-decoration-line: none !important;
 }
 
 .ui.search > .results {
@@ -1418,18 +1422,15 @@ a.ui.active.label:hover {
 }
 
 .lines-blame-btn {
-  padding-left: 10px;
-  padding-right: 10px;
-  text-align: right !important;
-  background-color: var(--color-code-sidebar-bg);
-  width: 2%;
+  padding: 0 0 0 5px;
+  display: flex;
+  justify-content: center;
 }
 
 .lines-num {
-  padding-left: 10px;
-  padding-right: 10px;
+  padding: 0 8px;
   text-align: right !important;
-  color: var(--color-text-light-1);
+  color: var(--color-text-light-2);
   width: 1%;
   font-family: var(--fonts-monospace);
 }
@@ -1483,22 +1484,34 @@ a.ui.active.label:hover {
 }
 
 .lines-code {
-  background-color: var(--color-code-bg);
   padding-left: 5px;
 }
 
-.lines-code.active,
-.lines-code .active {
-  background: var(--color-active-line) !important;
+.file-view tr.active {
+  color: inherit !important;
+  background: inherit !important;
 }
 
-.blame .lines-num {
-  padding: 0 !important;
-  background-color: var(--color-code-sidebar-bg);
+.file-view tr.active .lines-num,
+.file-view tr.active .lines-code {
+  background: var(--color-highlight-bg) !important;
 }
 
-.blame .lines-code {
-  padding: 0 !important;
+.file-view tr.active:last-of-type .lines-code {
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.file-view tr.active .lines-num {
+  position: relative;
+}
+
+.file-view tr.active .lines-num::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: var(--color-highlight-fg);
 }
 
 .code-inner {
@@ -1509,24 +1522,21 @@ a.ui.active.label:hover {
 }
 
 .blame .code-inner {
-  white-space: pre;
-  word-break: normal;
-  word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .lines-commit {
   vertical-align: top;
-  color: var(--color-text-light-2);
+  color: var(--color-text-light-1);
   padding: 0 !important;
-  background: var(--color-code-sidebar-bg);
   width: 1%;
 }
 
 .lines-commit .blame-info {
-  width: 350px;
-  max-width: 350px;
+  width: min(26vw, 300px);
   display: block;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 6px;
   line-height: 20px;
   box-sizing: content-box;
 }
@@ -1548,11 +1558,10 @@ a.ui.active.label:hover {
   flex-shrink: 0;
 }
 
-.lines-commit .ui.avatar {
-  height: 18px;
-  width: 18px;
-  display: block;
-  margin-top: 1px;
+.blame-avatar {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
 }
 
 .top-line-blame {
@@ -1568,6 +1577,11 @@ a.ui.active.label:hover {
   border-bottom: 1px solid var(--color-secondary);
 }
 
+.code-view {
+  background: var(--color-code-bg);
+  border-radius: var(--border-radius);
+}
+
 .code-view table {
   width: 100%;
 }

diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css
@@ -1,7 +1,3 @@
-.chroma {
-  background-color: var(--color-code-bg);
-}
-
 /* LineTableTD */
 .chroma .lntd {
   vertical-align: top;

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
@@ -11,6 +11,7 @@
 .ui.button:hover {
   background: var(--color-hover);
   color: var(--color-text);
+  border-color: var(--color-secondary-dark-2);
 }
 
 .page-content .ui.button {
@@ -61,11 +62,17 @@ It needs some tricks to tweak the left/right borders with active state */
   border-right: none;
 }
 
-.ui.buttons .button:first-child {
+.ui.buttons .button:hover + .button {
+  border-left: 1px solid var(--color-secondary-dark-2);
+}
+
+.ui.buttons .button:first-child,
+.ui.buttons .button.gt-hidden:first-child + .button {
   border-left: 1px solid var(--color-light-border);
 }
 
-.ui.buttons .button:last-child {
+.ui.buttons .button:last-child,
+.ui.buttons .button:nth-last-child(2):has(+ .button.gt-hidden) {
   border-right: 1px solid var(--color-light-border);
 }
 
@@ -105,6 +112,7 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.basic.button:hover {
   color: var(--color-text);
   background: var(--color-hover);
+  border-color: var(--color-secondary-dark-2);
 }
 
 .ui.basic.buttons .button:active,

diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css
@@ -100,3 +100,15 @@
   color: var(--color-warning-text);
   border-color: var(--color-warning-border);
 }
+
+.ui.message > .close.icon {
+  cursor: pointer;
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  opacity: .7;
+}
+
+.ui.message > .close.icon:hover {
+  opacity: 1;
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -1602,7 +1602,6 @@
 
 .repository .diff-file-box .file-body.file-code .lines-num {
   text-align: right;
-  color: var(--color-text-light);
   width: 1%;
   min-width: 50px;
 }

diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
@@ -3,18 +3,16 @@
 }
 
 .code-line-button {
-  background-color: var(--color-menu);
-  color: var(--color-text-light);
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
-  padding: 1px 10px;
+  padding: 1px 4px !important;
   position: absolute;
   font-family: var(--fonts-regular);
   left: 0;
-  transform: translateX(-50%);
+  transform: translateX(calc(-50% + 6px));
   cursor: pointer;
 }
 
 .code-line-button:hover {
-  color: var(--color-primary);
+  background: var(--color-secondary) !important;
 }
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
@@ -183,7 +183,7 @@
   --color-body: #1c1f25;
   --color-box-header: #1a1d1f;
   --color-box-body: #14171a;
-  --color-box-body-highlight: #121517;
+  --color-box-body-highlight: #1c2227;
   --color-text-dark: #f8f8f9;
   --color-text: #d1d5d8;
   --color-text-light: #bdc3c7;
@@ -207,11 +207,10 @@
   --color-markup-table-row: #e8e8ff06;
   --color-markup-code-block: #e8e8ff16;
   --color-button: #151a1e;
-  --color-code-bg: #191d20;
-  --color-code-sidebar-bg: #1b1f22;
+  --color-code-bg: #14171a;
   --color-shadow: #00001758;
-  --color-secondary-bg: #2f3135;
-  --color-expand-button: #414348;
+  --color-secondary-bg: #2f3138;
+  --color-expand-button: #2b353e;
   --color-placeholder-text: var(--color-text-light-3);
   --color-editor-line-highlight: var(--color-primary-light-5);
   --color-project-board-bg: var(--color-secondary-light-2);
@@ -233,7 +232,8 @@
   --color-label-active-bg: #73828eff;
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
-  --color-active-line: #534d1b;
+  --color-highlight-fg: #87651e;
+  --color-highlight-bg: #352c1c;
   --color-overlay-backdrop: #080808c0;
   accent-color: var(--color-accent);
   color-scheme: dark;

diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
@@ -183,7 +183,7 @@
   --color-body: #ffffff;
   --color-box-header: #f1f3f5;
   --color-box-body: #ffffff;
-  --color-box-body-highlight: #f4faff;
+  --color-box-body-highlight: #ecf5fd;
   --color-text-dark: #01050a;
   --color-text: #181c21;
   --color-text-light: #30363b;
@@ -208,10 +208,9 @@
   --color-markup-code-block: #00001710;
   --color-button: #f8f9fb;
   --color-code-bg: #fafdff;
-  --color-code-sidebar-bg: #f2f5f8;
   --color-shadow: #00001726;
   --color-secondary-bg: #f2f5f8;
-  --color-expand-button: #d8efff;
+  --color-expand-button: #cfe8fa;
   --color-placeholder-text: var(--color-text-light-3);
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);
@@ -233,7 +232,8 @@
   --color-label-active-bg: #949da6ff;
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-6);
-  --color-active-line: #fffbdd;
+  --color-highlight-fg: #eed200;
+  --color-highlight-bg: #fffbdd;
   --color-overlay-backdrop: #080808c0;
   accent-color: var(--color-accent);
   color-scheme: light;