Add fullscreen mode as a more efficient operation way to view projects

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

templates/org/projects/view.tmpl

@@ -8,8 +8,6 @@
 {{template "user/overview/header" .}}
 </div>
 {{end}}
-<div class="ui container fluid padded">
-{{template "projects/view" .}}
-</div>
+{{template "projects/view" .}}
 </div>
 {{template "base/footer" .}}

templates/projects/view.tmpl

@@ -1,7 +1,7 @@
 {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
 
-<div class="ui container tw-max-w-full">
-<div class="flex-text-block tw-flex-wrap tw-mb-4">
+<div class="ui container fluid padded projects-view">
+<div class="ui container flex-text-block tw-flex-wrap tw-mb-4">
 <h2 class="tw-mb-0">{{.Project.Title}}</h2>
 <div class="tw-flex-1"></div>
 <div class="ui secondary menu tw-m-0">
@@ -19,6 +19,14 @@
 </div>
 {{if $canWriteProject}}
 <div class="ui compact mini menu">
+<a class="item screen-full">
+{{svg "octicon-screen-full"}}
+{{ctx.Locale.Tr "projects.enter_fullscreen"}}
+</a>
+<a class="item screen-normal tw-hidden">
+{{svg "octicon-screen-normal"}}
+{{ctx.Locale.Tr "projects.exit_fullscreen"}}
+</a>
 <a class="item" href="{{.Link}}/edit?redirect=project">
 {{svg "octicon-pencil"}}
 {{ctx.Locale.Tr "repo.issues.label_edit"}}
@@ -56,13 +64,12 @@
 {{end}}
 </div>
 
-<div class="content">{{$.Project.RenderedContent}}</div>
-
-<div class="divider"></div>
-</div>
+<div class="ui container">
+{{$.Project.RenderedContent}}
+<div class="divider"></div>
+</div>
 
-<div id="project-board" data-project-borad-writable="{{$canWriteProject}}">
-<div class="board {{if $canWriteProject}}sortable{{end}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
+<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-borad-writable="{{$canWriteProject}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
 {{range .Columns}}
 <div class="project-column" {{if .Color}}style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
 <div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">

templates/repo/projects/view.tmpl

@@ -8,9 +8,7 @@
 <a class="ui small primary button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
 </div>
 </div>
-<div class="ui container fluid padded">
-{{template "projects/view" .}}
-</div>
+{{template "projects/view" .}}
 </div>
 
 {{template "base/footer" .}}

web_src/css/features/projects.css

@@ -98,3 +98,27 @@
 .card-ghost * {
  opacity: 0;
 }
+
+.fullscreen.projects-view .ui.container.flex-text-block {
+ 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);
+}
+
+/* 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: 50px;
+ left: 0;
+}

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;

web_src/js/features/repo-projects.ts

@@ -2,8 +2,9 @@ import {contrastColor} from '../utils/color.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;
@@ -35,7 +36,7 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<voi
 
 async function initRepoProjectSortable(): Promise<void> {
  // 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<HTMLElement>('.project-column');
  createSortable(mainBoard, {
  group: 'project-column',
@@ -139,7 +140,24 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
  });
 }
 
+function initRepoProjectToggleFullScreen(): void {
+ const enterFullscreenBtn = document.querySelector('.screen-full');
+ const exitFullscreenBtn = document.querySelector('.screen-normal');
+ if (!enterFullscreenBtn || !exitFullscreenBtn) return;
+
+ const toggleFullscreenState = (isFullScreen: boolean) => {
+ toggleFullScreen('.projects-view', isFullScreen);
+ toggleElem(enterFullscreenBtn, !isFullScreen);
+ toggleElem(exitFullscreenBtn, isFullScreen);
+ };
+
+ enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true));
+ exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false));
+}
+
 export function initRepoProject(): void {
+ initRepoProjectToggleFullScreen();
+
  const writableProjectBoard = document.querySelector('#project-board[data-project-borad-writable="true"]');
  if (!writableProjectBoard) return;
 

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 fullScreenEl = document.querySelector(fullscreenElementsSelector);
+ const outerEl = document.querySelector('.full.height');
+ toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen);
+ if (isFullScreen) {
+ outerEl.append(fullScreenEl);
+ } else {
+ sourceParentEl.append(fullScreenEl);
+ }
+}