mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 12:37:14 -04:00 
			
		
		
		
	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: https://github.com/go-gitea/gitea/issues/18074
This commit is contained in:
		| @@ -278,7 +278,7 @@ func renderBlame(ctx *context.Context, blameParts []*git.BlamePart, commitNames | |||||||
|  |  | ||||||
| 				var avatar string | 				var avatar string | ||||||
| 				if commit.User != nil { | 				if commit.User != nil { | ||||||
| 					avatar = string(avatarUtils.Avatar(commit.User, 18, "gt-mr-3")) | 					avatar = string(avatarUtils.Avatar(commit.User, 18)) | ||||||
| 				} else { | 				} else { | ||||||
| 					avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3")) | 					avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3")) | ||||||
| 				} | 				} | ||||||
|   | |||||||
| @@ -2,6 +2,13 @@ | |||||||
| <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> | <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> | ||||||
| <div class="page-content devtest ui container"> | <div class="page-content devtest ui container"> | ||||||
| 	<div> | 	<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> | 		<h1>Button</h1> | ||||||
| 		<div> | 		<div> | ||||||
| 			Style: | 			Style: | ||||||
|   | |||||||
| @@ -41,11 +41,11 @@ | |||||||
| 											{{$row.Avatar}} | 											{{$row.Avatar}} | ||||||
| 										</div> | 										</div> | ||||||
| 										<div class="blame-message"> | 										<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}} | 												{{$row.CommitMessage}} | ||||||
| 											</a> | 											</a> | ||||||
| 										</div> | 										</div> | ||||||
| 										<div class="blame-time"> | 										<div class="blame-time not-mobile"> | ||||||
| 											{{$row.CommitSince}} | 											{{$row.CommitSince}} | ||||||
| 										</div> | 										</div> | ||||||
| 									</div> | 									</div> | ||||||
| @@ -53,7 +53,7 @@ | |||||||
| 							</td> | 							</td> | ||||||
| 							<td class="lines-blame-btn"> | 							<td class="lines-blame-btn"> | ||||||
| 								{{if $row.PreviousSha}} | 								{{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"}} | 										{{svg "octicon-versions"}} | ||||||
| 									</a> | 									</a> | ||||||
| 								{{end}} | 								{{end}} | ||||||
| @@ -75,6 +75,12 @@ | |||||||
| 					{{end}} | 					{{end}} | ||||||
| 				</tbody> | 				</tbody> | ||||||
| 			</table> | 			</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> | 	</div> | ||||||
| </div> | </div> | ||||||
|   | |||||||
| @@ -215,10 +215,14 @@ progress::-moz-progress-bar { | |||||||
| a { | a { | ||||||
|   color: var(--color-primary); |   color: var(--color-primary); | ||||||
|   cursor: pointer; |   cursor: pointer; | ||||||
|   text-decoration: none; |   text-decoration-line: none; | ||||||
|   text-decoration-skip-ink: all; |   text-decoration-skip-ink: all; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | a:hover { | ||||||
|  |   text-decoration-line: underline; | ||||||
|  | } | ||||||
|  |  | ||||||
| /* a = always colored, underlined on hover */ | /* a = always colored, underlined on hover */ | ||||||
| /* a.muted = colored on hover, underlined on hover */ | /* a.muted = colored on hover, underlined on hover */ | ||||||
| /* a.suppressed = never colored, underlined on hover */ | /* a.suppressed = never colored, underlined on hover */ | ||||||
| @@ -245,7 +249,7 @@ a.suppressed:hover { | |||||||
| } | } | ||||||
|  |  | ||||||
| a.silenced:hover { | a.silenced:hover { | ||||||
|   text-decoration: none; |   text-decoration-line: none; | ||||||
| } | } | ||||||
|  |  | ||||||
| a.label, | a.label, | ||||||
| @@ -253,7 +257,7 @@ a.label, | |||||||
| .ui .menu a, | .ui .menu a, | ||||||
| .ui.cards a.card, | .ui.cards a.card, | ||||||
| .issue-keyword a { | .issue-keyword a { | ||||||
|   text-decoration: none !important; |   text-decoration-line: none !important; | ||||||
| } | } | ||||||
|  |  | ||||||
| .ui.search > .results { | .ui.search > .results { | ||||||
| @@ -1418,18 +1422,15 @@ a.ui.active.label:hover { | |||||||
| } | } | ||||||
|  |  | ||||||
| .lines-blame-btn { | .lines-blame-btn { | ||||||
|   padding-left: 10px; |   padding: 0 0 0 5px; | ||||||
|   padding-right: 10px; |   display: flex; | ||||||
|   text-align: right !important; |   justify-content: center; | ||||||
|   background-color: var(--color-code-sidebar-bg); |  | ||||||
|   width: 2%; |  | ||||||
| } | } | ||||||
|  |  | ||||||
| .lines-num { | .lines-num { | ||||||
|   padding-left: 10px; |   padding: 0 8px; | ||||||
|   padding-right: 10px; |  | ||||||
|   text-align: right !important; |   text-align: right !important; | ||||||
|   color: var(--color-text-light-1); |   color: var(--color-text-light-2); | ||||||
|   width: 1%; |   width: 1%; | ||||||
|   font-family: var(--fonts-monospace); |   font-family: var(--fonts-monospace); | ||||||
| } | } | ||||||
| @@ -1483,22 +1484,34 @@ a.ui.active.label:hover { | |||||||
| } | } | ||||||
|  |  | ||||||
| .lines-code { | .lines-code { | ||||||
|   background-color: var(--color-code-bg); |  | ||||||
|   padding-left: 5px; |   padding-left: 5px; | ||||||
| } | } | ||||||
|  |  | ||||||
| .lines-code.active, | .file-view tr.active { | ||||||
| .lines-code .active { |   color: inherit !important; | ||||||
|   background: var(--color-active-line) !important; |   background: inherit !important; | ||||||
| } | } | ||||||
|  |  | ||||||
| .blame .lines-num { | .file-view tr.active .lines-num, | ||||||
|   padding: 0 !important; | .file-view tr.active .lines-code { | ||||||
|   background-color: var(--color-code-sidebar-bg); |   background: var(--color-highlight-bg) !important; | ||||||
| } | } | ||||||
|  |  | ||||||
| .blame .lines-code { | .file-view tr.active:last-of-type .lines-code { | ||||||
|   padding: 0 !important; |   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 { | .code-inner { | ||||||
| @@ -1509,24 +1522,21 @@ a.ui.active.label:hover { | |||||||
| } | } | ||||||
|  |  | ||||||
| .blame .code-inner { | .blame .code-inner { | ||||||
|   white-space: pre; |   white-space: pre-wrap; | ||||||
|   word-break: normal; |   overflow-wrap: anywhere; | ||||||
|   word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */ |  | ||||||
| } | } | ||||||
|  |  | ||||||
| .lines-commit { | .lines-commit { | ||||||
|   vertical-align: top; |   vertical-align: top; | ||||||
|   color: var(--color-text-light-2); |   color: var(--color-text-light-1); | ||||||
|   padding: 0 !important; |   padding: 0 !important; | ||||||
|   background: var(--color-code-sidebar-bg); |  | ||||||
|   width: 1%; |   width: 1%; | ||||||
| } | } | ||||||
|  |  | ||||||
| .lines-commit .blame-info { | .lines-commit .blame-info { | ||||||
|   width: 350px; |   width: min(26vw, 300px); | ||||||
|   max-width: 350px; |  | ||||||
|   display: block; |   display: block; | ||||||
|   padding: 0 0 0 10px; |   padding: 0 0 0 6px; | ||||||
|   line-height: 20px; |   line-height: 20px; | ||||||
|   box-sizing: content-box; |   box-sizing: content-box; | ||||||
| } | } | ||||||
| @@ -1548,11 +1558,10 @@ a.ui.active.label:hover { | |||||||
|   flex-shrink: 0; |   flex-shrink: 0; | ||||||
| } | } | ||||||
|  |  | ||||||
| .lines-commit .ui.avatar { | .blame-avatar { | ||||||
|   height: 18px; |   display: flex; | ||||||
|   width: 18px; |   align-items: center; | ||||||
|   display: block; |   margin-right: 4px; | ||||||
|   margin-top: 1px; |  | ||||||
| } | } | ||||||
|  |  | ||||||
| .top-line-blame { | .top-line-blame { | ||||||
| @@ -1568,6 +1577,11 @@ a.ui.active.label:hover { | |||||||
|   border-bottom: 1px solid var(--color-secondary); |   border-bottom: 1px solid var(--color-secondary); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .code-view { | ||||||
|  |   background: var(--color-code-bg); | ||||||
|  |   border-radius: var(--border-radius); | ||||||
|  | } | ||||||
|  |  | ||||||
| .code-view table { | .code-view table { | ||||||
|   width: 100%; |   width: 100%; | ||||||
| } | } | ||||||
|   | |||||||
| @@ -1,7 +1,3 @@ | |||||||
| .chroma { |  | ||||||
|   background-color: var(--color-code-bg); |  | ||||||
| } |  | ||||||
|  |  | ||||||
| /* LineTableTD */ | /* LineTableTD */ | ||||||
| .chroma .lntd { | .chroma .lntd { | ||||||
|   vertical-align: top; |   vertical-align: top; | ||||||
|   | |||||||
| @@ -11,6 +11,7 @@ | |||||||
| .ui.button:hover { | .ui.button:hover { | ||||||
|   background: var(--color-hover); |   background: var(--color-hover); | ||||||
|   color: var(--color-text); |   color: var(--color-text); | ||||||
|  |   border-color: var(--color-secondary-dark-2); | ||||||
| } | } | ||||||
|  |  | ||||||
| .page-content .ui.button { | .page-content .ui.button { | ||||||
| @@ -61,11 +62,17 @@ It needs some tricks to tweak the left/right borders with active state */ | |||||||
|   border-right: none; |   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); |   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); |   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 { | .ui.basic.button:hover { | ||||||
|   color: var(--color-text); |   color: var(--color-text); | ||||||
|   background: var(--color-hover); |   background: var(--color-hover); | ||||||
|  |   border-color: var(--color-secondary-dark-2); | ||||||
| } | } | ||||||
|  |  | ||||||
| .ui.basic.buttons .button:active, | .ui.basic.buttons .button:active, | ||||||
|   | |||||||
| @@ -100,3 +100,15 @@ | |||||||
|   color: var(--color-warning-text); |   color: var(--color-warning-text); | ||||||
|   border-color: var(--color-warning-border); |   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; | ||||||
|  | } | ||||||
|   | |||||||
| @@ -1602,7 +1602,6 @@ | |||||||
|  |  | ||||||
| .repository .diff-file-box .file-body.file-code .lines-num { | .repository .diff-file-box .file-body.file-code .lines-num { | ||||||
|   text-align: right; |   text-align: right; | ||||||
|   color: var(--color-text-light); |  | ||||||
|   width: 1%; |   width: 1%; | ||||||
|   min-width: 50px; |   min-width: 50px; | ||||||
| } | } | ||||||
|   | |||||||
| @@ -3,18 +3,16 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .code-line-button { | .code-line-button { | ||||||
|   background-color: var(--color-menu); |  | ||||||
|   color: var(--color-text-light); |  | ||||||
|   border: 1px solid var(--color-secondary); |   border: 1px solid var(--color-secondary); | ||||||
|   border-radius: var(--border-radius); |   border-radius: var(--border-radius); | ||||||
|   padding: 1px 10px; |   padding: 1px 4px !important; | ||||||
|   position: absolute; |   position: absolute; | ||||||
|   font-family: var(--fonts-regular); |   font-family: var(--fonts-regular); | ||||||
|   left: 0; |   left: 0; | ||||||
|   transform: translateX(-50%); |   transform: translateX(calc(-50% + 6px)); | ||||||
|   cursor: pointer; |   cursor: pointer; | ||||||
| } | } | ||||||
|  |  | ||||||
| .code-line-button:hover { | .code-line-button:hover { | ||||||
|   color: var(--color-primary); |   background: var(--color-secondary) !important; | ||||||
| } | } | ||||||
|   | |||||||
| @@ -183,7 +183,7 @@ | |||||||
|   --color-body: #1c1f25; |   --color-body: #1c1f25; | ||||||
|   --color-box-header: #1a1d1f; |   --color-box-header: #1a1d1f; | ||||||
|   --color-box-body: #14171a; |   --color-box-body: #14171a; | ||||||
|   --color-box-body-highlight: #121517; |   --color-box-body-highlight: #1c2227; | ||||||
|   --color-text-dark: #f8f8f9; |   --color-text-dark: #f8f8f9; | ||||||
|   --color-text: #d1d5d8; |   --color-text: #d1d5d8; | ||||||
|   --color-text-light: #bdc3c7; |   --color-text-light: #bdc3c7; | ||||||
| @@ -207,11 +207,10 @@ | |||||||
|   --color-markup-table-row: #e8e8ff06; |   --color-markup-table-row: #e8e8ff06; | ||||||
|   --color-markup-code-block: #e8e8ff16; |   --color-markup-code-block: #e8e8ff16; | ||||||
|   --color-button: #151a1e; |   --color-button: #151a1e; | ||||||
|   --color-code-bg: #191d20; |   --color-code-bg: #14171a; | ||||||
|   --color-code-sidebar-bg: #1b1f22; |  | ||||||
|   --color-shadow: #00001758; |   --color-shadow: #00001758; | ||||||
|   --color-secondary-bg: #2f3135; |   --color-secondary-bg: #2f3138; | ||||||
|   --color-expand-button: #414348; |   --color-expand-button: #2b353e; | ||||||
|   --color-placeholder-text: var(--color-text-light-3); |   --color-placeholder-text: var(--color-text-light-3); | ||||||
|   --color-editor-line-highlight: var(--color-primary-light-5); |   --color-editor-line-highlight: var(--color-primary-light-5); | ||||||
|   --color-project-board-bg: var(--color-secondary-light-2); |   --color-project-board-bg: var(--color-secondary-light-2); | ||||||
| @@ -233,7 +232,8 @@ | |||||||
|   --color-label-active-bg: #73828eff; |   --color-label-active-bg: #73828eff; | ||||||
|   --color-accent: var(--color-primary-light-1); |   --color-accent: var(--color-primary-light-1); | ||||||
|   --color-small-accent: var(--color-primary-light-5); |   --color-small-accent: var(--color-primary-light-5); | ||||||
|   --color-active-line: #534d1b; |   --color-highlight-fg: #87651e; | ||||||
|  |   --color-highlight-bg: #352c1c; | ||||||
|   --color-overlay-backdrop: #080808c0; |   --color-overlay-backdrop: #080808c0; | ||||||
|   accent-color: var(--color-accent); |   accent-color: var(--color-accent); | ||||||
|   color-scheme: dark; |   color-scheme: dark; | ||||||
|   | |||||||
| @@ -183,7 +183,7 @@ | |||||||
|   --color-body: #ffffff; |   --color-body: #ffffff; | ||||||
|   --color-box-header: #f1f3f5; |   --color-box-header: #f1f3f5; | ||||||
|   --color-box-body: #ffffff; |   --color-box-body: #ffffff; | ||||||
|   --color-box-body-highlight: #f4faff; |   --color-box-body-highlight: #ecf5fd; | ||||||
|   --color-text-dark: #01050a; |   --color-text-dark: #01050a; | ||||||
|   --color-text: #181c21; |   --color-text: #181c21; | ||||||
|   --color-text-light: #30363b; |   --color-text-light: #30363b; | ||||||
| @@ -208,10 +208,9 @@ | |||||||
|   --color-markup-code-block: #00001710; |   --color-markup-code-block: #00001710; | ||||||
|   --color-button: #f8f9fb; |   --color-button: #f8f9fb; | ||||||
|   --color-code-bg: #fafdff; |   --color-code-bg: #fafdff; | ||||||
|   --color-code-sidebar-bg: #f2f5f8; |  | ||||||
|   --color-shadow: #00001726; |   --color-shadow: #00001726; | ||||||
|   --color-secondary-bg: #f2f5f8; |   --color-secondary-bg: #f2f5f8; | ||||||
|   --color-expand-button: #d8efff; |   --color-expand-button: #cfe8fa; | ||||||
|   --color-placeholder-text: var(--color-text-light-3); |   --color-placeholder-text: var(--color-text-light-3); | ||||||
|   --color-editor-line-highlight: var(--color-primary-light-6); |   --color-editor-line-highlight: var(--color-primary-light-6); | ||||||
|   --color-project-board-bg: var(--color-secondary-light-4); |   --color-project-board-bg: var(--color-secondary-light-4); | ||||||
| @@ -233,7 +232,8 @@ | |||||||
|   --color-label-active-bg: #949da6ff; |   --color-label-active-bg: #949da6ff; | ||||||
|   --color-accent: var(--color-primary-light-1); |   --color-accent: var(--color-primary-light-1); | ||||||
|   --color-small-accent: var(--color-primary-light-6); |   --color-small-accent: var(--color-primary-light-6); | ||||||
|   --color-active-line: #fffbdd; |   --color-highlight-fg: #eed200; | ||||||
|  |   --color-highlight-bg: #fffbdd; | ||||||
|   --color-overlay-backdrop: #080808c0; |   --color-overlay-backdrop: #080808c0; | ||||||
|   accent-color: var(--color-accent); |   accent-color: var(--color-accent); | ||||||
|   color-scheme: light; |   color-scheme: light; | ||||||
|   | |||||||
| @@ -16,8 +16,16 @@ function changeHash(hash) { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
| function selectRange($list, $select, $from) { | function isBlame() { | ||||||
|   $list.removeClass('active'); |   return Boolean(document.querySelector('div.blame')); | ||||||
|  | } | ||||||
|  |  | ||||||
|  | function getLineEls() { | ||||||
|  |   return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`); | ||||||
|  | } | ||||||
|  |  | ||||||
|  | function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { | ||||||
|  |   $linesEls.closest('tr').removeClass('active'); | ||||||
|  |  | ||||||
|   // add hashchange to permalink |   // add hashchange to permalink | ||||||
|   const $refInNewIssue = $('a.ref-in-new-issue'); |   const $refInNewIssue = $('a.ref-in-new-issue'); | ||||||
| @@ -25,7 +33,7 @@ function selectRange($list, $select, $from) { | |||||||
|   const $viewGitBlame = $('a.view_git_blame'); |   const $viewGitBlame = $('a.view_git_blame'); | ||||||
|  |  | ||||||
|   const updateIssueHref = function (anchor) { |   const updateIssueHref = function (anchor) { | ||||||
|     if ($refInNewIssue.length === 0) { |     if (!$refInNewIssue.length) { | ||||||
|       return; |       return; | ||||||
|     } |     } | ||||||
|     const urlIssueNew = $refInNewIssue.attr('data-url-issue-new'); |     const urlIssueNew = $refInNewIssue.attr('data-url-issue-new'); | ||||||
| @@ -35,9 +43,7 @@ function selectRange($list, $select, $from) { | |||||||
|   }; |   }; | ||||||
|  |  | ||||||
|   const updateViewGitBlameFragment = function (anchor) { |   const updateViewGitBlameFragment = function (anchor) { | ||||||
|     if ($viewGitBlame.length === 0) { |     if (!$viewGitBlame.length) return; | ||||||
|       return; |  | ||||||
|     } |  | ||||||
|     let href = $viewGitBlame.attr('href'); |     let href = $viewGitBlame.attr('href'); | ||||||
|     href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`; |     href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`; | ||||||
|     if (anchor.length !== 0) { |     if (anchor.length !== 0) { | ||||||
| @@ -47,17 +53,15 @@ function selectRange($list, $select, $from) { | |||||||
|   }; |   }; | ||||||
|  |  | ||||||
|   const updateCopyPermalinkUrl = function(anchor) { |   const updateCopyPermalinkUrl = function(anchor) { | ||||||
|     if ($copyPermalink.length === 0) { |     if (!$copyPermalink.length) return; | ||||||
|       return; |  | ||||||
|     } |  | ||||||
|     let link = $copyPermalink.attr('data-url'); |     let link = $copyPermalink.attr('data-url'); | ||||||
|     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`; |     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`; | ||||||
|     $copyPermalink.attr('data-url', link); |     $copyPermalink.attr('data-url', link); | ||||||
|   }; |   }; | ||||||
|  |  | ||||||
|   if ($from) { |   if ($selectionStartEls) { | ||||||
|     let a = parseInt($select.attr('rel').slice(1)); |     let a = parseInt($selectionEndEl.attr('rel').slice(1)); | ||||||
|     let b = parseInt($from.attr('rel').slice(1)); |     let b = parseInt($selectionStartEls.attr('rel').slice(1)); | ||||||
|     let c; |     let c; | ||||||
|     if (a !== b) { |     if (a !== b) { | ||||||
|       if (a > b) { |       if (a > b) { | ||||||
| @@ -69,7 +73,9 @@ function selectRange($list, $select, $from) { | |||||||
|       for (let i = a; i <= b; i++) { |       for (let i = a; i <= b; i++) { | ||||||
|         classes.push(`[rel=L${i}]`); |         classes.push(`[rel=L${i}]`); | ||||||
|       } |       } | ||||||
|       $list.filter(classes.join(',')).addClass('active'); |       $linesEls.filter(classes.join(',')).each(function () { | ||||||
|  |         $(this).closest('tr').addClass('active'); | ||||||
|  |       }); | ||||||
|       changeHash(`#L${a}-L${b}`); |       changeHash(`#L${a}-L${b}`); | ||||||
|  |  | ||||||
|       updateIssueHref(`L${a}-L${b}`); |       updateIssueHref(`L${a}-L${b}`); | ||||||
| @@ -78,12 +84,12 @@ function selectRange($list, $select, $from) { | |||||||
|       return; |       return; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|   $select.addClass('active'); |   $selectionEndEl.closest('tr').addClass('active'); | ||||||
|   changeHash(`#${$select.attr('rel')}`); |   changeHash(`#${$selectionEndEl.attr('rel')}`); | ||||||
|  |  | ||||||
|   updateIssueHref($select.attr('rel')); |   updateIssueHref($selectionEndEl.attr('rel')); | ||||||
|   updateViewGitBlameFragment($select.attr('rel')); |   updateViewGitBlameFragment($selectionEndEl.attr('rel')); | ||||||
|   updateCopyPermalinkUrl($select.attr('rel')); |   updateCopyPermalinkUrl($selectionEndEl.attr('rel')); | ||||||
| } | } | ||||||
|  |  | ||||||
| function showLineButton() { | function showLineButton() { | ||||||
| @@ -96,10 +102,10 @@ function showLineButton() { | |||||||
|   } |   } | ||||||
|  |  | ||||||
|   // find active row and add button |   // find active row and add button | ||||||
|   const tr = document.querySelector('.code-view td.lines-code.active').closest('tr'); |   const tr = document.querySelector('.code-view tr.active'); | ||||||
|   const td = tr.querySelector('td'); |   const td = tr.querySelector('td.lines-num'); | ||||||
|   const btn = document.createElement('button'); |   const btn = document.createElement('button'); | ||||||
|   btn.classList.add('code-line-button'); |   btn.classList.add('code-line-button', 'ui', 'basic', 'button'); | ||||||
|   btn.innerHTML = svg('octicon-kebab-horizontal'); |   btn.innerHTML = svg('octicon-kebab-horizontal'); | ||||||
|   td.prepend(btn); |   td.prepend(btn); | ||||||
|  |  | ||||||
| @@ -123,14 +129,18 @@ function showLineButton() { | |||||||
| export function initRepoCodeView() { | export function initRepoCodeView() { | ||||||
|   if ($('.code-view .lines-num').length > 0) { |   if ($('.code-view .lines-num').length > 0) { | ||||||
|     $(document).on('click', '.lines-num span', function (e) { |     $(document).on('click', '.lines-num span', function (e) { | ||||||
|       const $select = $(this); |       const linesEls = getLineEls(); | ||||||
|       let $list; |       const selectedEls = Array.from(linesEls).filter((el) => { | ||||||
|       if ($('div.blame').length) { |         return el.matches(`[rel=${this.getAttribute('id')}]`); | ||||||
|         $list = $('.code-view td.lines-code.blame-code'); |       }); | ||||||
|       } else { |  | ||||||
|         $list = $('.code-view td.lines-code'); |       let from; | ||||||
|  |       if (e.shiftKey) { | ||||||
|  |         from = Array.from(linesEls).filter((el) => { | ||||||
|  |           return el.closest('tr').classList.contains('active'); | ||||||
|  |         }); | ||||||
|       } |       } | ||||||
|       selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null)); |       selectRange($(linesEls), $(selectedEls), from ? $(from) : null); | ||||||
|  |  | ||||||
|       if (window.getSelection) { |       if (window.getSelection) { | ||||||
|         window.getSelection().removeAllRanges(); |         window.getSelection().removeAllRanges(); | ||||||
| @@ -138,28 +148,20 @@ export function initRepoCodeView() { | |||||||
|         document.selection.empty(); |         document.selection.empty(); | ||||||
|       } |       } | ||||||
|  |  | ||||||
|       // show code view menu marker (don't show in blame page) |       showLineButton(); | ||||||
|       if ($('div.blame').length === 0) { |  | ||||||
|         showLineButton(); |  | ||||||
|       } |  | ||||||
|     }); |     }); | ||||||
|  |  | ||||||
|     $(window).on('hashchange', () => { |     $(window).on('hashchange', () => { | ||||||
|       let m = window.location.hash.match(rangeAnchorRegex); |       let m = window.location.hash.match(rangeAnchorRegex); | ||||||
|       let $list; |       const $linesEls = $(getLineEls()); | ||||||
|       if ($('div.blame').length) { |  | ||||||
|         $list = $('.code-view td.lines-code.blame-code'); |  | ||||||
|       } else { |  | ||||||
|         $list = $('.code-view td.lines-code'); |  | ||||||
|       } |  | ||||||
|       let $first; |       let $first; | ||||||
|       if (m) { |       if (m) { | ||||||
|         $first = $list.filter(`[rel=${m[1]}]`); |         $first = $linesEls.filter(`[rel=${m[1]}]`); | ||||||
|         if ($first.length) { |         if ($first.length) { | ||||||
|           selectRange($list, $first, $list.filter(`[rel=${m[2]}]`)); |           selectRange($linesEls, $first, $linesEls.filter(`[rel=${m[2]}]`)); | ||||||
|  |  | ||||||
|           // show code view menu marker (don't show in blame page) |           // show code view menu marker (don't show in blame page) | ||||||
|           if ($('div.blame').length === 0) { |           if (!isBlame()) { | ||||||
|             showLineButton(); |             showLineButton(); | ||||||
|           } |           } | ||||||
|  |  | ||||||
| @@ -169,12 +171,12 @@ export function initRepoCodeView() { | |||||||
|       } |       } | ||||||
|       m = window.location.hash.match(singleAnchorRegex); |       m = window.location.hash.match(singleAnchorRegex); | ||||||
|       if (m) { |       if (m) { | ||||||
|         $first = $list.filter(`[rel=L${m[2]}]`); |         $first = $linesEls.filter(`[rel=L${m[2]}]`); | ||||||
|         if ($first.length) { |         if ($first.length) { | ||||||
|           selectRange($list, $first); |           selectRange($linesEls, $first); | ||||||
|  |  | ||||||
|           // show code view menu marker (don't show in blame page) |           // show code view menu marker (don't show in blame page) | ||||||
|           if ($('div.blame').length === 0) { |           if (!isBlame()) { | ||||||
|             showLineButton(); |             showLineButton(); | ||||||
|           } |           } | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user