From 4a2f3b4b53276c0b0f165a6584ac7bb7b057c6fe Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 31 Mar 2025 03:19:10 +0000 Subject: [PATCH 01/14] Add fullscreen mode for view projects --- templates/repo/projects/view.tmpl | 5 ++-- web_src/css/features/projects.css | 23 ++++++++++++++++++ web_src/js/features/repo-projects.ts | 35 ++++++++++++++++++++++++++++ 3 files changed, 61 insertions(+), 2 deletions(-) diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 7267a99b1db0f..6b0a2c2393f6d 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -1,14 +1,15 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
+ Fullscreen {{ctx.Locale.Tr "repo.labels"}} {{ctx.Locale.Tr "repo.milestones"}} {{ctx.Locale.Tr "repo.issues.new"}}
-
+
{{template "projects/view" .}}
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 72ef523913e34..3b749c46da8ad 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -98,3 +98,26 @@ .card-ghost * { opacity: 0; } + +.is-fullscreen.projects-view-top, +.is-fullscreen.projects-view-bottom .ui.container { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + right: 0; + margin: 0 !important; + width: 100%; + max-width: 100%; + background-color: var(--color-body); +} + +.is-fullscreen.projects-view-bottom .ui.container { + top: 36px; +} + +.is-fullscreen #project-board { + position: absolute; + top: 120px; + left: 0; +} diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index 11f5c19c8d335..e2ec7d17909e2 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -1,4 +1,5 @@ import {contrastColor} from '../utils/color.ts'; +import {toggleClass, toggleElem} from '../utils/dom.ts'; import {createSortable} from '../modules/sortable.ts'; import {POST, request} from '../modules/fetch.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; @@ -139,7 +140,41 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void { }); } +function initRepoProjectToggleFullScreen(): void { + const el = document.querySelector('.toggle-fullscreen'); + el.addEventListener('click', () => { + const isFullScreen = el.getAttribute('data-fullscreen') === 'true'; + + // hide other elements + const headerEl = document.querySelector('#navbar'); + const contentEl = document.querySelector('.page-content'); + const footerEl = document.querySelector('.page-footer'); + toggleElem(headerEl, isFullScreen); + toggleElem(contentEl, isFullScreen); + toggleElem(footerEl, isFullScreen); + + el.innerHTML = isFullScreen ? 'Fullscreen' : 'Exit'; + el.setAttribute('data-fullscreen', String(!isFullScreen)); + toggleClass(el, 'is-fullscreen'); + + const fullScreenEl1 = document.querySelector('.projects-view-top'); + const fullScreenEl2 = document.querySelector('.projects-view-bottom'); + const outerEl = document.querySelector('.full.height'); + toggleClass(fullScreenEl1, 'is-fullscreen'); + toggleClass(fullScreenEl2, 'is-fullscreen'); + if (isFullScreen) { + contentEl.append(fullScreenEl1); + contentEl.append(fullScreenEl2); + } else { + outerEl.append(fullScreenEl1); + outerEl.append(fullScreenEl2); + } + }); +} + export function initRepoProject(): void { + initRepoProjectToggleFullScreen(); + const writableProjectBoard = document.querySelector('#project-board[data-project-borad-writable="true"]'); if (!writableProjectBoard) return; From 9a2a8bc71d2297998a540fc0ac741757484aaab7 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 14 Apr 2025 03:08:52 +0000 Subject: [PATCH 02/14] fix --- options/locale/locale_en-US.ini | 2 + templates/org/projects/view.tmpl | 4 +- templates/projects/view.tmpl | 8 ++++ templates/repo/projects/view.tmpl | 7 ++-- web_src/css/features/projects.css | 18 +++++--- web_src/js/features/repo-projects.ts | 62 +++++++++++++++------------- 6 files changed, 60 insertions(+), 41 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 9e6c5e61acc58..de5076092ffc7 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -3844,6 +3844,8 @@ deleted.display_name = Deleted Project type-1.display_name = Individual Project type-2.display_name = Repository Project type-3.display_name = Organization Project +enter_fullscreen = Fullscreen +exit_fullscreen = Exit Fullscreen [git.filemode] changed_filemode = %[1]s → %[2]s diff --git a/templates/org/projects/view.tmpl b/templates/org/projects/view.tmpl index bd74114fe2e47..accfc9ee64c3f 100644 --- a/templates/org/projects/view.tmpl +++ b/templates/org/projects/view.tmpl @@ -8,8 +8,8 @@ {{template "user/overview/header" .}}
{{end}} -
- {{template "projects/view" .}} +
+ {{template "projects/view" dict "." . "FullscreenElementsSelector" ".org-projects-view"}}
{{template "base/footer" .}} diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index d6a335ef4b5ad..7d449ed75d954 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -19,6 +19,14 @@
{{if $canWriteProject}}
+ + {{svg "octicon-screen-full"}} + {{ctx.Locale.Tr "projects.enter_fullscreen"}} + + + {{svg "octicon-screen-normal"}} + {{ctx.Locale.Tr "projects.exit_fullscreen"}} + {{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}} diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 6b0a2c2393f6d..4bf9e9092c152 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -1,16 +1,15 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
- Fullscreen {{ctx.Locale.Tr "repo.labels"}} {{ctx.Locale.Tr "repo.milestones"}} {{ctx.Locale.Tr "repo.issues.new"}}
-
- {{template "projects/view" .}} +
+ {{template "projects/view" dict "." . "FullscreenElementsSelector" ".repo-projects-view-top, .repo-projects-view"}}
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 3b749c46da8ad..ccb078cdb2be9 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -99,25 +99,31 @@ opacity: 0; } -.is-fullscreen.projects-view-top, -.is-fullscreen.projects-view-bottom .ui.container { +.fullscreen.org-projects-view .ui.container, +.fullscreen.repo-projects-view-top, +.fullscreen.repo-projects-view .ui.container { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; margin: 0 !important; + padding: .25rem; width: 100%; max-width: 100%; background-color: var(--color-body); } -.is-fullscreen.projects-view-bottom .ui.container { - top: 36px; +.fullscreen.repo-projects-view-top>div:first-child { + margin: 0 !important; +} + +.fullscreen.repo-projects-view .ui.container { + top: 40px; } -.is-fullscreen #project-board { +.fullscreen #project-board { position: absolute; - top: 120px; + top: 115px; left: 0; } diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index e2ec7d17909e2..b7ed56eff1429 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -140,36 +140,40 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void { }); } +function toggleProjectViewFullScreen(fullscreenElementsSelector: string, isFullScreen: boolean): void { + // hide other elements + const headerEl = document.querySelector('#navbar'); + const contentEl = document.querySelector('.page-content'); + const footerEl = document.querySelector('.page-footer'); + toggleElem(headerEl, isFullScreen); + toggleElem(contentEl, isFullScreen); + toggleElem(footerEl, isFullScreen); + + const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector); + const outerEl = document.querySelector('.full.height'); + toggleClass(fullscreenElementsSelector, 'fullscreen'); + if (isFullScreen) { + for (const e of fullScreenEls) contentEl.append(e); + } else { + for (const e of fullScreenEls) outerEl.append(e); + } +} + function initRepoProjectToggleFullScreen(): void { - const el = document.querySelector('.toggle-fullscreen'); - el.addEventListener('click', () => { - const isFullScreen = el.getAttribute('data-fullscreen') === 'true'; - - // hide other elements - const headerEl = document.querySelector('#navbar'); - const contentEl = document.querySelector('.page-content'); - const footerEl = document.querySelector('.page-footer'); - toggleElem(headerEl, isFullScreen); - toggleElem(contentEl, isFullScreen); - toggleElem(footerEl, isFullScreen); - - el.innerHTML = isFullScreen ? 'Fullscreen' : 'Exit'; - el.setAttribute('data-fullscreen', String(!isFullScreen)); - toggleClass(el, 'is-fullscreen'); - - const fullScreenEl1 = document.querySelector('.projects-view-top'); - const fullScreenEl2 = document.querySelector('.projects-view-bottom'); - const outerEl = document.querySelector('.full.height'); - toggleClass(fullScreenEl1, 'is-fullscreen'); - toggleClass(fullScreenEl2, 'is-fullscreen'); - if (isFullScreen) { - contentEl.append(fullScreenEl1); - contentEl.append(fullScreenEl2); - } else { - outerEl.append(fullScreenEl1); - outerEl.append(fullScreenEl2); - } - }); + const enterFullscreenBtn = document.querySelector('.screen-full'); + const exitFullscreenBtn = document.querySelector('.screen-normal'); + if (!enterFullscreenBtn || !exitFullscreenBtn) return; + + const fullscreenElementsSelector = enterFullscreenBtn.getAttribute('data-fullscreen-elements-selector'); + + const toggleFullscreenState = (isExiting: boolean) => { + toggleProjectViewFullScreen(fullscreenElementsSelector, isExiting); + toggleElem(enterFullscreenBtn); + toggleElem(exitFullscreenBtn); + }; + + enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false)); + exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true)); } export function initRepoProject(): void { From afc8bcbcb0616a849e870291333f7cee901150b1 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 14 Apr 2025 05:19:14 +0000 Subject: [PATCH 03/14] fix --- templates/repo/projects/view.tmpl | 4 ++-- web_src/css/features/projects.css | 9 --------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 4bf9e9092c152..356070c4cc0e4 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{ctx.Locale.Tr "repo.labels"}} {{ctx.Locale.Tr "repo.milestones"}} @@ -9,7 +9,7 @@
- {{template "projects/view" dict "." . "FullscreenElementsSelector" ".repo-projects-view-top, .repo-projects-view"}} + {{template "projects/view" dict "." . "FullscreenElementsSelector" ".repo-projects-view"}}
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index ccb078cdb2be9..ba09a6a3c8cba 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -100,7 +100,6 @@ } .fullscreen.org-projects-view .ui.container, -.fullscreen.repo-projects-view-top, .fullscreen.repo-projects-view .ui.container { position: fixed; z-index: 1000; @@ -114,14 +113,6 @@ background-color: var(--color-body); } -.fullscreen.repo-projects-view-top>div:first-child { - margin: 0 !important; -} - -.fullscreen.repo-projects-view .ui.container { - top: 40px; -} - .fullscreen #project-board { position: absolute; top: 115px; From ac3c4df3504268885ab3345fca44564379d3d04c Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 14 Apr 2025 06:28:26 +0000 Subject: [PATCH 04/14] fix --- web_src/css/features/projects.css | 2 +- web_src/js/features/repo-projects.ts | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index ba09a6a3c8cba..b4745d5cd8d12 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -115,6 +115,6 @@ .fullscreen #project-board { position: absolute; - top: 115px; + top: 75px; left: 0; } diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index b7ed56eff1429..97bb1811d08f4 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -145,17 +145,17 @@ function toggleProjectViewFullScreen(fullscreenElementsSelector: string, isFullS const headerEl = document.querySelector('#navbar'); const contentEl = document.querySelector('.page-content'); const footerEl = document.querySelector('.page-footer'); - toggleElem(headerEl, isFullScreen); - toggleElem(contentEl, isFullScreen); - toggleElem(footerEl, isFullScreen); + toggleElem(headerEl, !isFullScreen); + toggleElem(contentEl, !isFullScreen); + toggleElem(footerEl, !isFullScreen); const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector); const outerEl = document.querySelector('.full.height'); - toggleClass(fullscreenElementsSelector, 'fullscreen'); + toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen); if (isFullScreen) { - for (const e of fullScreenEls) contentEl.append(e); - } else { for (const e of fullScreenEls) outerEl.append(e); + } else { + for (const e of fullScreenEls) contentEl.append(e); } } @@ -166,14 +166,14 @@ function initRepoProjectToggleFullScreen(): void { const fullscreenElementsSelector = enterFullscreenBtn.getAttribute('data-fullscreen-elements-selector'); - const toggleFullscreenState = (isExiting: boolean) => { - toggleProjectViewFullScreen(fullscreenElementsSelector, isExiting); + const toggleFullscreenState = (isFullScreen: boolean) => { + toggleProjectViewFullScreen(fullscreenElementsSelector, isFullScreen); toggleElem(enterFullscreenBtn); toggleElem(exitFullscreenBtn); }; - enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false)); - exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true)); + enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true)); + exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false)); } export function initRepoProject(): void { From 31060eec29c82550e2f9ccf3e197c7fc0e873bbf Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 14 Apr 2025 11:57:42 +0000 Subject: [PATCH 05/14] share the same fullscreen logic to utils --- web_src/js/components/RepoActionView.vue | 17 ++-------------- web_src/js/features/repo-projects.ts | 25 +++--------------------- web_src/js/utils.ts | 22 +++++++++++++++++++++ 3 files changed, 27 insertions(+), 37 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 5a4c22bc9007c..447347890b7f4 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -7,6 +7,7 @@ import {formatDatetime} from '../utils/time.ts'; import {renderAnsi} from '../render/ansi.ts'; import {POST, DELETE} from '../modules/fetch.ts'; import type {IntervalId} from '../types.ts'; +import {toggleFullScreen} from '../utils.ts'; // see "models/actions/status.go", if it needs to be used somewhere else, move it to a shared file like "types/actions.ts" type RunStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked'; @@ -416,21 +417,7 @@ export default defineComponent({ toggleFullScreen() { this.isFullScreen = !this.isFullScreen; - const fullScreenEl = document.querySelector('.action-view-right'); - const outerEl = document.querySelector('.full.height'); - const actionBodyEl = document.querySelector('.action-view-body'); - const headerEl = document.querySelector('#navbar'); - const contentEl = document.querySelector('.page-content'); - const footerEl = document.querySelector('.page-footer'); - toggleElem(headerEl, !this.isFullScreen); - toggleElem(contentEl, !this.isFullScreen); - toggleElem(footerEl, !this.isFullScreen); - // move .action-view-right to new parent - if (this.isFullScreen) { - outerEl.append(fullScreenEl); - } else { - actionBodyEl.append(fullScreenEl); - } + toggleFullScreen('.action-view-right', this.isFullScreen, '.action-view-body'); }, async hashChangeListener() { const selectedLogStep = window.location.hash; diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index 97bb1811d08f4..b3558c3a24c00 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -1,10 +1,10 @@ import {contrastColor} from '../utils/color.ts'; -import {toggleClass, toggleElem} from '../utils/dom.ts'; import {createSortable} from '../modules/sortable.ts'; import {POST, request} from '../modules/fetch.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; -import {queryElemChildren, queryElems} from '../utils/dom.ts'; +import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts'; import type {SortableEvent} from 'sortablejs'; +import {toggleFullScreen} from '../utils.ts'; function updateIssueCount(card: HTMLElement): void { const parent = card.parentElement; @@ -140,25 +140,6 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void { }); } -function toggleProjectViewFullScreen(fullscreenElementsSelector: string, isFullScreen: boolean): void { - // hide other elements - const headerEl = document.querySelector('#navbar'); - const contentEl = document.querySelector('.page-content'); - const footerEl = document.querySelector('.page-footer'); - toggleElem(headerEl, !isFullScreen); - toggleElem(contentEl, !isFullScreen); - toggleElem(footerEl, !isFullScreen); - - const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector); - const outerEl = document.querySelector('.full.height'); - toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen); - if (isFullScreen) { - for (const e of fullScreenEls) outerEl.append(e); - } else { - for (const e of fullScreenEls) contentEl.append(e); - } -} - function initRepoProjectToggleFullScreen(): void { const enterFullscreenBtn = document.querySelector('.screen-full'); const exitFullscreenBtn = document.querySelector('.screen-normal'); @@ -167,7 +148,7 @@ function initRepoProjectToggleFullScreen(): void { const fullscreenElementsSelector = enterFullscreenBtn.getAttribute('data-fullscreen-elements-selector'); const toggleFullscreenState = (isFullScreen: boolean) => { - toggleProjectViewFullScreen(fullscreenElementsSelector, isFullScreen); + toggleFullScreen(fullscreenElementsSelector, isFullScreen); toggleElem(enterFullscreenBtn); toggleElem(exitFullscreenBtn); }; diff --git a/web_src/js/utils.ts b/web_src/js/utils.ts index b825a9339d101..1883eb67609e4 100644 --- a/web_src/js/utils.ts +++ b/web_src/js/utils.ts @@ -1,5 +1,6 @@ import {decode, encode} from 'uint8-to-base64'; import type {IssuePageInfo, IssuePathInfo, RepoOwnerPathInfo} from './types.ts'; +import {toggleClass, toggleElem} from './utils/dom.ts'; // transform /path/to/file.ext to /path/to export function dirname(path: string): string { @@ -179,3 +180,24 @@ export function isImageFile({name, type}: {name?: string, type?: string}): boole export function isVideoFile({name, type}: {name?: string, type?: string}): boolean { return /\.(mpe?g|mp4|mkv|webm)$/i.test(name || '') || type?.startsWith('video/'); } + +export function toggleFullScreen(fullscreenElementsSelector: string, isFullScreen: boolean, sourceParentSelector?: string): void { + // hide other elements + const headerEl = document.querySelector('#navbar'); + const contentEl = document.querySelector('.page-content'); + const footerEl = document.querySelector('.page-footer'); + toggleElem(headerEl, !isFullScreen); + toggleElem(contentEl, !isFullScreen); + toggleElem(footerEl, !isFullScreen); + + const sourceParentEl = sourceParentSelector ? document.querySelector(sourceParentSelector) : contentEl; + + const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector); + const outerEl = document.querySelector('.full.height'); + toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen); + if (isFullScreen) { + for (const e of fullScreenEls) outerEl.append(e); + } else { + for (const e of fullScreenEls) sourceParentEl.append(e); + } +} From 987206f8bfc3ffee686b82efcf0453f0b529fbac Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 21 Apr 2025 11:04:48 +0800 Subject: [PATCH 06/14] fix --- templates/org/projects/view.tmpl | 4 +--- templates/projects/view.tmpl | 6 ++---- templates/repo/projects/view.tmpl | 4 +--- web_src/js/features/repo-projects.ts | 2 +- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/templates/org/projects/view.tmpl b/templates/org/projects/view.tmpl index accfc9ee64c3f..1bfbc8d8b47de 100644 --- a/templates/org/projects/view.tmpl +++ b/templates/org/projects/view.tmpl @@ -8,8 +8,6 @@ {{template "user/overview/header" .}}
{{end}} -
- {{template "projects/view" dict "." . "FullscreenElementsSelector" ".org-projects-view"}} -
+ {{template "projects/view" .}}
{{template "base/footer" .}} diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 7d449ed75d954..944a47d140cac 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,6 +1,6 @@ {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}} -
+

{{.Project.Title}}

@@ -67,10 +67,8 @@
{{$.Project.RenderedContent}}
-
-
-
+
{{range .Columns}}
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 356070c4cc0e4..1acaaf8b4bb10 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -8,9 +8,7 @@ {{ctx.Locale.Tr "repo.issues.new"}}
-
- {{template "projects/view" dict "." . "FullscreenElementsSelector" ".repo-projects-view"}} -
+ {{template "projects/view" .}}
{{template "base/footer" .}} diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index b3558c3a24c00..7d09303a9b432 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -36,7 +36,7 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise { // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card - const mainBoard = document.querySelector('#project-board > .board.sortable'); + const mainBoard = document.querySelector('#project-board'); let boardColumns = mainBoard.querySelectorAll('.project-column'); createSortable(mainBoard, { group: 'project-column', From d3ad69001e28bc158fc940fe325bf8f9452fc589 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 21 Apr 2025 11:07:52 +0800 Subject: [PATCH 07/14] fix --- templates/projects/view.tmpl | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 944a47d140cac..2dfc3b6ddd676 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,7 +1,7 @@ {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
-
+

{{.Project.Title}}

@@ -64,9 +64,10 @@ {{end}}
-
{{$.Project.RenderedContent}}
- -
+
+ {{$.Project.RenderedContent}} +
+
{{range .Columns}} From 79e6a6aab8f115de0d80b72173b5d717b1a524c7 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 21 Apr 2025 03:55:10 +0000 Subject: [PATCH 08/14] fix --- templates/projects/view.tmpl | 4 ++-- web_src/css/features/projects.css | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 2dfc3b6ddd676..4201216c83aac 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,6 +1,6 @@ {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}} -
+

{{.Project.Title}}

@@ -19,7 +19,7 @@
{{if $canWriteProject}}
- + {{svg "octicon-screen-full"}} {{ctx.Locale.Tr "projects.enter_fullscreen"}} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index b4745d5cd8d12..a8db12186743b 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -99,8 +99,7 @@ opacity: 0; } -.fullscreen.org-projects-view .ui.container, -.fullscreen.repo-projects-view .ui.container { +.fullscreen.projects-view .ui.container.flex-text-block { position: fixed; z-index: 1000; top: 0; @@ -113,8 +112,13 @@ background-color: var(--color-body); } +/* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */ +.fullscreen.projects-view div[class="ui container"] { + display: none; +} + .fullscreen #project-board { position: absolute; - top: 75px; + top: 50px; left: 0; } From 246474969756935f23a719f5fa11334d8afcbdd9 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 22 Apr 2025 07:10:51 +0000 Subject: [PATCH 09/14] fix --- templates/projects/view.tmpl | 2 +- web_src/js/features/repo-projects.ts | 8 +++----- web_src/js/utils.ts | 6 +++--- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 4201216c83aac..a6355ee39bae2 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -19,7 +19,7 @@
{{if $canWriteProject}}
- + {{svg "octicon-screen-full"}} {{ctx.Locale.Tr "projects.enter_fullscreen"}} diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index 7d09303a9b432..17874afdf0a55 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -145,12 +145,10 @@ function initRepoProjectToggleFullScreen(): void { const exitFullscreenBtn = document.querySelector('.screen-normal'); if (!enterFullscreenBtn || !exitFullscreenBtn) return; - const fullscreenElementsSelector = enterFullscreenBtn.getAttribute('data-fullscreen-elements-selector'); - const toggleFullscreenState = (isFullScreen: boolean) => { - toggleFullScreen(fullscreenElementsSelector, isFullScreen); - toggleElem(enterFullscreenBtn); - toggleElem(exitFullscreenBtn); + toggleFullScreen('.projects-view', isFullScreen); + toggleElem(enterFullscreenBtn, !isFullScreen); + toggleElem(exitFullscreenBtn, isFullScreen); }; enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true)); diff --git a/web_src/js/utils.ts b/web_src/js/utils.ts index 1883eb67609e4..e33b1413e8a7d 100644 --- a/web_src/js/utils.ts +++ b/web_src/js/utils.ts @@ -192,12 +192,12 @@ export function toggleFullScreen(fullscreenElementsSelector: string, isFullScree const sourceParentEl = sourceParentSelector ? document.querySelector(sourceParentSelector) : contentEl; - const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector); + const fullScreenEl = document.querySelector(fullscreenElementsSelector); const outerEl = document.querySelector('.full.height'); toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen); if (isFullScreen) { - for (const e of fullScreenEls) outerEl.append(e); + outerEl.append(fullScreenEl); } else { - for (const e of fullScreenEls) sourceParentEl.append(e); + sourceParentEl.append(fullScreenEl); } } From b47127c93d36e1b3faf013ee061917754b28c750 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 22 Apr 2025 07:29:39 +0000 Subject: [PATCH 10/14] fix --- templates/projects/view.tmpl | 4 ++-- web_src/css/features/projects.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index a6355ee39bae2..1caa3207763a7 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,7 +1,7 @@ {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
-
+

{{.Project.Title}}

@@ -64,7 +64,7 @@ {{end}}
-
+
{{$.Project.RenderedContent}}
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index a8db12186743b..d1a48a0376e42 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -99,7 +99,7 @@ opacity: 0; } -.fullscreen.projects-view .ui.container.flex-text-block { +.fullscreen.projects-view .project-header { position: fixed; z-index: 1000; top: 0; @@ -113,7 +113,7 @@ } /* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */ -.fullscreen.projects-view div[class="ui container"] { +.fullscreen.projects-view .project-description { display: none; } From a7c019b3442ae9860df71385beac20830eb62552 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 22 Apr 2025 15:36:59 +0800 Subject: [PATCH 11/14] Update web_src/js/features/repo-projects.ts --- web_src/js/features/repo-projects.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-projects.ts b/web_src/js/features/repo-projects.ts index 17874afdf0a55..dc4aa8274b931 100644 --- a/web_src/js/features/repo-projects.ts +++ b/web_src/js/features/repo-projects.ts @@ -35,7 +35,7 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise { - // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card + // the HTML layout is: #project-board.board > .project-column .cards > .issue-card const mainBoard = document.querySelector('#project-board'); let boardColumns = mainBoard.querySelectorAll('.project-column'); createSortable(mainBoard, { From b553c70471dd1b7d466d7b5cd53919a6fc9896d6 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Wed, 23 Apr 2025 00:53:55 +0000 Subject: [PATCH 12/14] fix --- web_src/css/features/projects.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index d1a48a0376e42..9f18ccd8cd2b9 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -121,4 +121,10 @@ position: absolute; top: 50px; left: 0; + right: 0; + max-height: calc(100vh - 50px); +} + +.fullscreen #project-board .project-column .ui.cards { + overflow-y: auto; } From 5025717d8e2cde080594cd65dd62ed0a903849d3 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 23 Apr 2025 09:39:50 +0800 Subject: [PATCH 13/14] fix --- web_src/css/features/projects.css | 51 ++++++++++++------------------- 1 file changed, 20 insertions(+), 31 deletions(-) diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 9f18ccd8cd2b9..f019ddb0742b4 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -1,31 +1,24 @@ -.board { +#project-board { display: flex; + align-items: stretch; flex-direction: row; flex-wrap: nowrap; - overflow-x: auto; - overflow-y: clip; - align-items: stretch; + overflow: auto; margin: 0 0.5em; + max-height: calc(100vh - 120px); } .project-column { - background-color: var(--color-project-column-bg) !important; - border: 1px solid var(--color-secondary) !important; - border-radius: var(--border-radius); - margin: 0 0.5rem !important; - padding: 0.5rem !important; - width: 320px; - height: initial; - min-height: max(calc(100vh - 400px), 300px); flex: 0 0 auto; - overflow: visible; display: flex; flex-direction: column; - cursor: default; -} - -.project-column .issue-card { - color: var(--color-text); + background-color: var(--color-project-column-bg); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + margin: 0 0.5rem; + padding: 0.5rem; + width: 320px; + overflow: visible; } .project-column-header { @@ -39,16 +32,15 @@ color: inherit; } -.project-column > .cards { +.project-column > .ui.cards { flex: 1; display: flex; - align-content: baseline; - margin: 0 !important; - padding: 0 !important; - flex-wrap: nowrap !important; + flex-wrap: nowrap; flex-direction: column; - overflow-x: clip; + overflow: clip auto; gap: .25rem; + margin: 0; + padding: 0; } .project-column > .divider { @@ -110,6 +102,7 @@ width: 100%; max-width: 100%; background-color: var(--color-body); + border-bottom: 1px solid var(--color-secondary); } /* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */ @@ -117,14 +110,10 @@ display: none; } -.fullscreen #project-board { +.fullscreen.projects-view #project-board { position: absolute; - top: 50px; + top: 60px; left: 0; right: 0; - max-height: calc(100vh - 50px); -} - -.fullscreen #project-board .project-column .ui.cards { - overflow-y: auto; + max-height: calc(100vh - 70px); } From 6fd79032b04b46fd830d13462150fefa7120d2b9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 23 Apr 2025 09:50:06 +0800 Subject: [PATCH 14/14] fix --- templates/projects/view.tmpl | 4 ++-- web_src/css/features/projects.css | 13 +++++++++++-- web_src/css/modules/menu.css | 2 ++ 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 1caa3207763a7..7e89db0005d54 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,8 +1,8 @@ {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
-
-

{{.Project.Title}}

+
+

{{.Project.Title}}

{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "archived_labels" (Iif $.ShowArchivedLabels "true")}} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index f019ddb0742b4..80c9d89638efc 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -8,6 +8,16 @@ max-height: calc(100vh - 120px); } +.project-header { + padding: 0.5em 0; + overflow-x: auto; /* in fullscreen mode, the position is fixed, so we can't use "flex wrap" which would change the height */ +} + +.project-header h2 { + white-space: nowrap; + margin: 0; +} + .project-column { flex: 0 0 auto; display: flex; @@ -97,8 +107,7 @@ top: 0; left: 0; right: 0; - margin: 0 !important; - padding: .25rem; + padding: 0.5em; width: 100%; max-width: 100%; background-color: var(--color-body); diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css index a5efd23053de2..5072dcbd0e17d 100644 --- a/web_src/css/modules/menu.css +++ b/web_src/css/modules/menu.css @@ -1,5 +1,6 @@ .ui.menu { display: flex; + flex-shrink: 0; margin: 1rem 0; font-family: var(--fonts-regular); font-weight: var(--font-weight-normal); @@ -643,6 +644,7 @@ display: inline-flex; margin: 0; vertical-align: middle; + flex-shrink: 0; } .ui.compact.vertical.menu { display: inline-block;