aboutsummaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
Diffstat (limited to 'web_src')
-rw-r--r--web_src/css/base.css47
-rw-r--r--web_src/css/index.css2
-rw-r--r--web_src/css/markup/content.css17
-rw-r--r--web_src/css/modules/navbar.css4
-rw-r--r--web_src/css/repo.css26
-rw-r--r--web_src/css/repo/file-view.css62
-rw-r--r--web_src/css/repo/linebutton.css16
-rw-r--r--web_src/js/components/DashboardRepoList.vue19
-rw-r--r--web_src/js/components/RepoActionView.vue3
-rw-r--r--web_src/js/features/repo-code.ts13
-rw-r--r--web_src/js/modules/tippy.ts27
11 files changed, 133 insertions, 103 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css
index a28fb7b92a..ab7e6dc414 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -815,10 +815,6 @@ overflow-menu .ui.label {
display: block;
}
-.code-view .lines-num span::after {
- cursor: pointer;
-}
-
.lines-type-marker {
vertical-align: top;
white-space: nowrap;
@@ -855,39 +851,13 @@ overflow-menu .ui.label {
.lines-escape {
width: 0;
white-space: nowrap;
+ padding: 0;
}
.lines-code {
padding-left: 5px;
}
-.file-view tr.active {
- color: inherit !important;
- background: inherit !important;
-}
-
-.file-view tr.active .lines-num,
-.file-view tr.active .lines-code {
- background: var(--color-highlight-bg) !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 {
font: 12px var(--fonts-monospace);
white-space: pre-wrap;
@@ -938,12 +908,12 @@ overflow-menu .ui.label {
margin-right: 4px;
}
-.top-line-blame {
+tr.top-line-blame {
border-top: 1px solid var(--color-secondary);
}
-.code-view tr.top-line-blame:first-of-type {
- border-top: none;
+tr.top-line-blame:first-of-type {
+ border-top: none; /* merge code lines belonging to the same commit into one block */
}
.lines-code .bottom-line,
@@ -951,15 +921,6 @@ overflow-menu .ui.label {
border-bottom: 1px solid var(--color-secondary);
}
-.code-view {
- background: var(--color-code-bg);
- border-radius: var(--border-radius);
-}
-
-.code-view table {
- width: 100%;
-}
-
.migrate .svg.gitea-git {
color: var(--color-git);
}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index c20aa028e4..de15c5c69c 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -62,7 +62,7 @@
@import "./repo/issue-label.css";
@import "./repo/issue-list.css";
@import "./repo/list-header.css";
-@import "./repo/linebutton.css";
+@import "./repo/file-view.css";
@import "./repo/wiki.css";
@import "./repo/header.css";
@import "./repo/home.css";
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index ace028b4d0..b983855630 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -134,6 +134,11 @@
margin-bottom: 16px;
}
+/* override p:last-child from base.css */
+.markup p:last-child {
+ margin-bottom: 16px;
+}
+
.markup hr {
height: 4px;
padding: 0;
@@ -309,10 +314,18 @@
box-sizing: initial;
}
+.file-view.markup {
+ padding: 1em 2em;
+}
+
+.file-view.markup:has(.file-not-rendered-prompt) {
+ padding: 0; /* let the file-not-rendered-prompt layout itself */
+}
+
/* this background ensures images can break <hr>. We can only do this on
cases where the background is known and not transparent. */
-.markup.file-view img,
-.markup.file-view video,
+.file-view.markup img,
+.file-view.markup video,
.comment-body .markup img, /* regular comment */
.comment-body .markup video,
.comment-content .markup img, /* code comment */
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b09b271ad4..ab431e3675 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -129,8 +129,8 @@
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
position: absolute;
- left: 6px;
- top: -9px;
+ left: calc(100% - 9px);
+ bottom: calc(100% - 9px);
min-width: 17px;
height: 17px;
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 306db34300..af89c0dcff 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -523,7 +523,7 @@ td .commit-summary {
.repository.view.issue .comment-list .timeline-item,
.repository.view.issue .comment-list .timeline-item-group {
- padding: 16px 0;
+ padding: 8px 0;
}
.repository.view.issue .comment-list .timeline-item-group .timeline-item {
@@ -577,6 +577,11 @@ td .commit-summary {
justify-content: center;
}
+.repository.view.issue .comment-list .timeline-item.commits-list .badge {
+ margin-right: 0;
+ height: 28px;
+}
+
.repository.view.issue .comment-list .timeline-item .badge .svg {
width: 22px;
height: 22px;
@@ -601,10 +606,6 @@ td .commit-summary {
padding-top: 0;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
- margin-right: 0.25em;
-}
-
.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
float: right;
margin-right: 8px;
@@ -1238,21 +1239,6 @@ td .commit-summary {
white-space: nowrap;
}
-.file-view.markup {
- padding: 1em 2em;
-}
-
-.file-view.markup:has(.file-not-rendered-prompt) {
- padding: 0; /* let the file-not-rendered-prompt layout itself */
-}
-
-.file-not-rendered-prompt {
- padding: 1rem;
- text-align: center;
- font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */
- line-height: var(--line-height-default) !important; /* same as above */
-}
-
.repository .activity-header {
display: flex;
justify-content: space-between;
diff --git a/web_src/css/repo/file-view.css b/web_src/css/repo/file-view.css
new file mode 100644
index 0000000000..54af5f4602
--- /dev/null
+++ b/web_src/css/repo/file-view.css
@@ -0,0 +1,62 @@
+.file-view tr.active .lines-num,
+.file-view tr.active .lines-escape,
+.file-view tr.active .lines-code {
+ background: var(--color-highlight-bg);
+}
+
+/* set correct border radius on the last active lines, to avoid border overflow */
+.file-view tr.active:last-of-type .lines-code {
+ border-bottom-right-radius: var(--border-radius);
+}
+
+.file-view tr.active .lines-num {
+ position: relative;
+}
+
+/* add a darker "handler" at the beginning of the active line */
+.file-view tr.active .lines-num::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ width: 2px;
+ height: 100%;
+ background: var(--color-highlight-fg);
+}
+
+.file-view .file-not-rendered-prompt {
+ padding: 1rem;
+ text-align: center;
+ font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */
+ line-height: var(--line-height-default) !important; /* same as above */
+}
+
+/* ".code-view" is always used with ".file-view", to show the code of a file */
+.file-view.code-view {
+ background: var(--color-code-bg);
+ border-radius: var(--border-radius);
+}
+
+.file-view.code-view table {
+ width: 100%;
+}
+
+.file-view.code-view .lines-num span::after {
+ cursor: pointer;
+}
+
+.file-view.code-view .lines-num:hover {
+ color: var(--color-text-dark);
+}
+
+.file-view.code-view .ui.button.code-line-button {
+ border: 1px solid var(--color-secondary);
+ padding: 1px 4px;
+ margin: 0;
+ min-height: 0;
+ position: absolute;
+ left: 6px;
+}
+
+.file-view.code-view .ui.button.code-line-button:hover {
+ background: var(--color-secondary);
+}
diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
deleted file mode 100644
index f7e3d48b48..0000000000
--- a/web_src/css/repo/linebutton.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.code-view .lines-num:hover {
- color: var(--color-text-dark) !important;
-}
-
-.ui.button.code-line-button {
- border: 1px solid var(--color-secondary);
- padding: 1px 4px;
- margin: 0;
- min-height: 0;
- position: absolute;
- left: 6px;
-}
-
-.ui.button.code-line-button:hover {
- background: var(--color-secondary);
-}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index fc6a7bd281..6b16ff9efb 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -6,7 +6,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
const {appSubUrl, assetUrlPrefix, pageData} = window.config;
-type CommitStatus = 'pending' | 'success' | 'error' | 'failure' | 'warning';
+type CommitStatus = 'pending' | 'success' | 'error' | 'failure' | 'warning' | 'skipped';
type CommitStatusMap = {
[status in CommitStatus]: {
@@ -22,6 +22,7 @@ const commitStatus: CommitStatusMap = {
error: {name: 'gitea-exclamation', color: 'red'},
failure: {name: 'octicon-x', color: 'red'},
warning: {name: 'gitea-exclamation', color: 'yellow'},
+ skipped: {name: 'octicon-skip', color: 'grey'},
};
export default defineComponent({
@@ -218,7 +219,9 @@ export default defineComponent({
this.searchRepos();
},
- changePage(page: number) {
+ async changePage(page: number) {
+ if (this.isLoading) return;
+
this.page = page;
if (this.page > this.finalPage) {
this.page = this.finalPage;
@@ -228,7 +231,7 @@ export default defineComponent({
}
this.repos = [];
this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
- this.searchRepos();
+ await this.searchRepos();
},
async searchRepos() {
@@ -298,7 +301,7 @@ export default defineComponent({
return commitStatus[status].color;
},
- reposFilterKeyControl(e: KeyboardEvent) {
+ async reposFilterKeyControl(e: KeyboardEvent) {
switch (e.key) {
case 'Enter':
document.querySelector<HTMLAnchorElement>('.repo-owner-name-list li.active a')?.click();
@@ -307,7 +310,7 @@ export default defineComponent({
if (this.activeIndex > 0) {
this.activeIndex--;
} else if (this.page > 1) {
- this.changePage(this.page - 1);
+ await this.changePage(this.page - 1);
this.activeIndex = this.searchLimit - 1;
}
break;
@@ -316,17 +319,17 @@ export default defineComponent({
this.activeIndex++;
} else if (this.page < this.finalPage) {
this.activeIndex = 0;
- this.changePage(this.page + 1);
+ await this.changePage(this.page + 1);
}
break;
case 'ArrowRight':
if (this.page < this.finalPage) {
- this.changePage(this.page + 1);
+ await this.changePage(this.page + 1);
}
break;
case 'ArrowLeft':
if (this.page > 1) {
- this.changePage(this.page - 1);
+ await this.changePage(this.page - 1);
}
break;
}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index af300622b4..aedae4d97f 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -439,7 +439,8 @@ export default defineComponent({
});
</script>
<template>
- <div class="ui container action-view-container">
+ <!-- make the view container full width to make users easier to read logs -->
+ <div class="ui fluid container">
<div class="action-view-header">
<div class="action-info-summary">
<div class="action-info-summary-title">
diff --git a/web_src/js/features/repo-code.ts b/web_src/js/features/repo-code.ts
index c699de59e6..bf7fd762b0 100644
--- a/web_src/js/features/repo-code.ts
+++ b/web_src/js/features/repo-code.ts
@@ -110,10 +110,15 @@ function showLineButton() {
}
export function initRepoCodeView() {
- if (!document.querySelector('.code-view .lines-num')) return;
+ // When viewing a file or blame, there is always a ".file-view" element,
+ // but the ".code-view" class is only present when viewing the "code" of a file; it is not present when viewing a PDF file.
+ // Since the ".file-view" will be dynamically reloaded when navigating via the left file tree (eg: view a PDF file, then view a source code file, etc.)
+ // the "code-view" related event listeners should always be added when the current page contains ".file-view" element.
+ if (!document.querySelector('.repo-view-container .file-view')) return;
+ // "file code view" and "blame" pages need this "line number button" feature
let selRangeStart: string;
- addDelegatedEventListener(document, 'click', '.lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
+ addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
if (!selRangeStart || !e.shiftKey) {
selRangeStart = el.getAttribute('id');
selectRange(selRangeStart);
@@ -125,12 +130,14 @@ export function initRepoCodeView() {
showLineButton();
});
+ // apply the selected range from the URL hash
const onHashChange = () => {
if (!window.location.hash) return;
+ if (!document.querySelector('.code-view .lines-num')) return;
const range = window.location.hash.substring(1);
const first = selectRange(range);
if (first) {
- // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
+ // set scrollRestoration to 'manual' when there is a hash in the URL, so that the scroll position will not be remembered after refreshing
if (window.history.scrollRestoration !== 'manual') window.history.scrollRestoration = 'manual';
first.scrollIntoView({block: 'start'});
showLineButton();
diff --git a/web_src/js/modules/tippy.ts b/web_src/js/modules/tippy.ts
index af715f48b9..f7a4b3723b 100644
--- a/web_src/js/modules/tippy.ts
+++ b/web_src/js/modules/tippy.ts
@@ -40,6 +40,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
}
}
visibleInstances.add(instance);
+ target.setAttribute('aria-controls', instance.popper.id);
return onShow?.(instance);
},
arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
@@ -180,13 +181,25 @@ export function initGlobalTooltips(): void {
}
export function showTemporaryTooltip(target: Element, content: Content): void {
- // if the target is inside a dropdown, the menu will be hidden soon
- // so display the tooltip on the dropdown instead
- target = target.closest('.ui.dropdown') || target;
- const tippy = target._tippy ?? attachTooltip(target, content);
- tippy.setContent(content);
- if (!tippy.state.isShown) tippy.show();
- tippy.setProps({
+ // if the target is inside a dropdown or tippy popup, the menu will be hidden soon
+ // so display the tooltip on the "aria-controls" element or dropdown instead
+ let refClientRect: DOMRect;
+ const popupTippyId = target.closest(`[data-tippy-root]`)?.id;
+ if (popupTippyId) {
+ // for example, the "Copy Permalink" button in the "File View" page for the selected lines
+ target = document.body;
+ refClientRect = document.querySelector(`[aria-controls="${CSS.escape(popupTippyId)}"]`)?.getBoundingClientRect();
+ refClientRect = refClientRect ?? new DOMRect(0, 0, 0, 0); // fallback to empty rect if not found, tippy doesn't accept null
+ } else {
+ // for example, the "Copy Link" button in the issue header dropdown menu
+ target = target.closest('.ui.dropdown') ?? target;
+ refClientRect = target.getBoundingClientRect();
+ }
+ const tooltipTippy = target._tippy ?? attachTooltip(target, content);
+ tooltipTippy.setContent(content);
+ tooltipTippy.setProps({getReferenceClientRect: () => refClientRect});
+ if (!tooltipTippy.state.isShown) tooltipTippy.show();
+ tooltipTippy.setProps({
onHidden: (tippy) => {
// reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
if (!attachTooltip(target)) {
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-07 08:56:25 +0000