Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Various code view improvements #30014

Merged
merged 25 commits into from Mar 24, 2024
Merged

Various code view improvements #30014

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
34efd71
Various code view improvements
silverwind Mar 22, 2024
ebb322e
rewrite click handle to vanilla js
silverwind Mar 23, 2024
4dab7d2
rename vars for clarity
silverwind Mar 23, 2024
61d5d62
more refactor
silverwind Mar 23, 2024
cd1dc26
remove code sidebar, remove 1 var and introduce 2
silverwind Mar 23, 2024
9f909b9
fix lint
silverwind Mar 23, 2024
03f20a5
fix buttons last button border with hidden last child
silverwind Mar 23, 2024
0bd44c8
tweak blame commit link and add missing underline styles
silverwind Mar 23, 2024
c6a8568
lighten
silverwind Mar 23, 2024
950b473
link fixes, add devtest
silverwind Mar 23, 2024
3341bdc
color tweak
silverwind Mar 23, 2024
8139649
tweak blame button and author
silverwind Mar 23, 2024
eb9bddd
blame tweaks
silverwind Mar 23, 2024
7e8d1bf
fix border-radius of last line active
silverwind Mar 23, 2024
e39b872
more tweaks
silverwind Mar 23, 2024
69e9e92
enable blame wrap
silverwind Mar 23, 2024
fceb473
padding tweak
silverwind Mar 23, 2024
11051b0
color tweak
silverwind Mar 24, 2024
8e4423e
make code-line-menu work in blame
silverwind Mar 24, 2024
782d887
color tweak
silverwind Mar 24, 2024
5e55437
fix button hover in button group
silverwind Mar 24, 2024
fed1edb
fix button border approxiimation
silverwind Mar 24, 2024
d8bd752
darken by one shade
silverwind Mar 24, 2024
b7bcc01
Update web_src/js/features/repo-code.js
silverwind Mar 24, 2024
d7fe168
Merge branch 'main' into codetweaks
GiteaBot Mar 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion routers/web/repo/blame.go
View file
Open in desktop
Expand Up @@ -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"))
}
Expand Down
7 changes: 7 additions & 0 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Expand Up @@ -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:
Expand Down
12 changes: 9 additions & 3 deletions templates/repo/blame.tmpl
View file
Open in desktop
Expand Up @@ -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}}
Expand All @@ -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>
80 changes: 47 additions & 33 deletions web_src/css/base.css
View file
Open in desktop
Expand Up @@ -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 */
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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%;
}
Expand Down
4 changes: 0 additions & 4 deletions web_src/css/chroma/base.css
View file
Open in desktop
@@ -1,7 +1,3 @@
.chroma {
background-color: var(--color-code-bg);
}

/* LineTableTD */
.chroma .lntd {
vertical-align: top;
Expand Down
10 changes: 8 additions & 2 deletions web_src/css/modules/button.css
View file
Open in desktop
Expand Up @@ -61,11 +61,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-1); /* color is approximation */
}

.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);
}

silverwind marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
12 changes: 12 additions & 0 deletions web_src/css/modules/message.css
View file
Open in desktop
Expand Up @@ -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;
}
1 change: 0 additions & 1 deletion web_src/css/repo.css
View file
Open in desktop
Expand Up @@ -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;
}
Expand Down
8 changes: 3 additions & 5 deletions web_src/css/repo/linebutton.css
View file
Open in desktop
Expand Up @@ -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;
}
12 changes: 6 additions & 6 deletions web_src/css/themes/theme-gitea-dark.css
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions web_src/css/themes/theme-gitea-light.css
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand Down