Skip to content

Commit 9a2a8bc

Browse files
kerwin612kerwin612
committed
fix
1 parent be3f1be commit 9a2a8bc

File tree

6 files changed

+60
-41
lines changed

6 files changed

+60
-41
lines changed

‎options/locale/locale_en-US.ini‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3844,6 +3844,8 @@ deleted.display_name = Deleted Project
38443844
type-1.display_name = Individual Project
38453845
type-2.display_name = Repository Project
38463846
type-3.display_name = Organization Project
3847+
enter_fullscreen = Fullscreen
3848+
exit_fullscreen = Exit Fullscreen
38473849

38483850
[git.filemode]
38493851
changed_filemode = %[1]s → %[2]s

‎templates/org/projects/view.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
{{template "user/overview/header" .}}
99
</div>
1010
{{end}}
11-
<div class="ui container fluid padded">
12-
{{template "projects/view" .}}
11+
<div class="ui container fluid padded org-projects-view">
12+
{{template "projects/view" dict "." . "FullscreenElementsSelector" ".org-projects-view"}}
1313
</div>
1414
</div>
1515
{{template "base/footer" .}}

‎templates/projects/view.tmpl‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
</div>
2020
{{if $canWriteProject}}
2121
<div class="ui compact mini menu">
22+
<a class="item screen-full" data-fullscreen-elements-selector="{{.FullscreenElementsSelector}}">
23+
{{svg "octicon-screen-full"}}
24+
{{ctx.Locale.Tr "projects.enter_fullscreen"}}
25+
</a>
26+
<a class="item screen-normal tw-hidden">
27+
{{svg "octicon-screen-normal"}}
28+
{{ctx.Locale.Tr "projects.exit_fullscreen"}}
29+
</a>
2230
<a class="item" href="{{.Link}}/edit?redirect=project">
2331
{{svg "octicon-pencil"}}
2432
{{ctx.Locale.Tr "repo.issues.label_edit"}}

‎templates/repo/projects/view.tmpl‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
33
{{template "repo/header" .}}
4-
<div class="ui container padded projects-view-top">
4+
<div class="ui container padded repo-projects-view-top">
55
<div class="flex-text-block tw-justify-end tw-mb-4">
6-
<a class="ui small button toggle-fullscreen">Fullscreen</a>
76
<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
87
<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
98
<a class="ui small primary button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
109
</div>
1110
</div>
12-
<div class="ui container fluid padded projects-view-bottom">
13-
{{template "projects/view" .}}
11+
<div class="ui container fluid padded repo-projects-view">
12+
{{template "projects/view" dict "." . "FullscreenElementsSelector" ".repo-projects-view-top, .repo-projects-view"}}
1413
</div>
1514
</div>
1615

‎web_src/css/features/projects.css‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,25 +99,31 @@
9999
opacity: 0;
100100
}
101101

102-
.is-fullscreen.projects-view-top,
103-
.is-fullscreen.projects-view-bottom .ui.container {
102+
.fullscreen.org-projects-view .ui.container,
103+
.fullscreen.repo-projects-view-top,
104+
.fullscreen.repo-projects-view .ui.container {
104105
position: fixed;
105106
z-index: 1000;
106107
top: 0;
107108
left: 0;
108109
right: 0;
109110
margin: 0 !important;
111+
padding: .25rem;
110112
width: 100%;
111113
max-width: 100%;
112114
background-color: var(--color-body);
113115
}
114116

115-
.is-fullscreen.projects-view-bottom .ui.container {
116-
top: 36px;
117+
.fullscreen.repo-projects-view-top>div:first-child {
118+
margin: 0 !important;
119+
}
120+
121+
.fullscreen.repo-projects-view .ui.container {
122+
top: 40px;
117123
}
118124

119-
.is-fullscreen #project-board {
125+
.fullscreen #project-board {
120126
position: absolute;
121-
top: 120px;
127+
top: 115px;
122128
left: 0;
123129
}

‎web_src/js/features/repo-projects.ts‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -140,36 +140,40 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
140140
});
141141
}
142142

143+
function toggleProjectViewFullScreen(fullscreenElementsSelector: string, isFullScreen: boolean): void {
144+
// hide other elements
145+
const headerEl = document.querySelector('#navbar');
146+
const contentEl = document.querySelector('.page-content');
147+
const footerEl = document.querySelector('.page-footer');
148+
toggleElem(headerEl, isFullScreen);
149+
toggleElem(contentEl, isFullScreen);
150+
toggleElem(footerEl, isFullScreen);
151+
152+
const fullScreenEls = document.querySelectorAll(fullscreenElementsSelector);
153+
const outerEl = document.querySelector('.full.height');
154+
toggleClass(fullscreenElementsSelector, 'fullscreen');
155+
if (isFullScreen) {
156+
for (const e of fullScreenEls) contentEl.append(e);
157+
} else {
158+
for (const e of fullScreenEls) outerEl.append(e);
159+
}
160+
}
161+
143162
function initRepoProjectToggleFullScreen(): void {
144-
const el = document.querySelector('.toggle-fullscreen');
145-
el.addEventListener('click', () => {
146-
const isFullScreen = el.getAttribute('data-fullscreen') === 'true';
147-
148-
// hide other elements
149-
const headerEl = document.querySelector('#navbar');
150-
const contentEl = document.querySelector('.page-content');
151-
const footerEl = document.querySelector('.page-footer');
152-
toggleElem(headerEl, isFullScreen);
153-
toggleElem(contentEl, isFullScreen);
154-
toggleElem(footerEl, isFullScreen);
155-
156-
el.innerHTML = isFullScreen ? 'Fullscreen' : 'Exit';
157-
el.setAttribute('data-fullscreen', String(!isFullScreen));
158-
toggleClass(el, 'is-fullscreen');
159-
160-
const fullScreenEl1 = document.querySelector('.projects-view-top');
161-
const fullScreenEl2 = document.querySelector('.projects-view-bottom');
162-
const outerEl = document.querySelector('.full.height');
163-
toggleClass(fullScreenEl1, 'is-fullscreen');
164-
toggleClass(fullScreenEl2, 'is-fullscreen');
165-
if (isFullScreen) {
166-
contentEl.append(fullScreenEl1);
167-
contentEl.append(fullScreenEl2);
168-
} else {
169-
outerEl.append(fullScreenEl1);
170-
outerEl.append(fullScreenEl2);
171-
}
172-
});
163+
const enterFullscreenBtn = document.querySelector('.screen-full');
164+
const exitFullscreenBtn = document.querySelector('.screen-normal');
165+
if (!enterFullscreenBtn || !exitFullscreenBtn) return;
166+
167+
const fullscreenElementsSelector = enterFullscreenBtn.getAttribute('data-fullscreen-elements-selector');
168+
169+
const toggleFullscreenState = (isExiting: boolean) => {
170+
toggleProjectViewFullScreen(fullscreenElementsSelector, isExiting);
171+
toggleElem(enterFullscreenBtn);
172+
toggleElem(exitFullscreenBtn);
173+
};
174+
175+
enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false));
176+
exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true));
173177
}
174178

175179
export function initRepoProject(): void {

0 commit comments

Comments
 (0)