Skip to content

Commit 4cc0204

Browse files
Johnwz123martin-henzRichDom2185
authored
Add full-screen button for Playground side content (#2911)
* Added fullscreen button to playground side content * Refactor fullscreen button to use class as reference and Blueprint's Tooltip * updating snapshots * Remove unnecessary comments * Replace icon with button For more correct semantics. * Remove unnecessary styles Following the change from icon to button, `cursor: pointer` is no longer needed. Also lowered the z-index to a more reasonable value. * Fix format * Update test snapshots --------- Co-authored-by: henz <henz@comp.nus.edu.sg> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
1 parent e2abe18 commit 4cc0204

File tree

5 files changed

+212
-5
lines changed

5 files changed

+212
-5
lines changed

‎src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
333333
<div
334334
class="right-parent"
335335
>
336+
<span
337+
class="fullscreen-button bp5-popover-target"
338+
>
339+
<button
340+
aria-expanded="false"
341+
class="bp5-button bp5-minimal"
342+
tabindex="0"
343+
type="button"
344+
>
345+
<span
346+
aria-hidden="true"
347+
class="bp5-icon bp5-icon-maximize"
348+
>
349+
<svg
350+
data-icon="maximize"
351+
height="16"
352+
role="img"
353+
viewBox="0 0 16 16"
354+
width="16"
355+
>
356+
<path
357+
d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
358+
fill-rule="evenodd"
359+
/>
360+
</svg>
361+
</span>
362+
</button>
363+
</span>
336364
<div
337365
class="resize-side-content"
338366
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1583,6 +1611,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
15831611
<div
15841612
class="right-parent"
15851613
>
1614+
<span
1615+
class="fullscreen-button bp5-popover-target"
1616+
>
1617+
<button
1618+
aria-expanded="false"
1619+
class="bp5-button bp5-minimal"
1620+
tabindex="0"
1621+
type="button"
1622+
>
1623+
<span
1624+
aria-hidden="true"
1625+
class="bp5-icon bp5-icon-maximize"
1626+
>
1627+
<svg
1628+
data-icon="maximize"
1629+
height="16"
1630+
role="img"
1631+
viewBox="0 0 16 16"
1632+
width="16"
1633+
>
1634+
<path
1635+
d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
1636+
fill-rule="evenodd"
1637+
/>
1638+
</svg>
1639+
</span>
1640+
</button>
1641+
</span>
15861642
<div
15871643
class="resize-side-content"
15881644
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -2363,6 +2419,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
23632419
<div
23642420
class="right-parent"
23652421
>
2422+
<span
2423+
class="fullscreen-button bp5-popover-target"
2424+
>
2425+
<button
2426+
aria-expanded="false"
2427+
class="bp5-button bp5-minimal"
2428+
tabindex="0"
2429+
type="button"
2430+
>
2431+
<span
2432+
aria-hidden="true"
2433+
class="bp5-icon bp5-icon-maximize"
2434+
>
2435+
<svg
2436+
data-icon="maximize"
2437+
height="16"
2438+
role="img"
2439+
viewBox="0 0 16 16"
2440+
width="16"
2441+
>
2442+
<path
2443+
d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
2444+
fill-rule="evenodd"
2445+
/>
2446+
</svg>
2447+
</span>
2448+
</button>
2449+
</span>
23662450
<div
23672451
class="resize-side-content"
23682452
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3137,6 +3221,22 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
31373221
<div
31383222
class="right-parent"
31393223
>
3224+
<span
3225+
class="fullscreen-button bp5-popover-target"
3226+
>
3227+
<button
3228+
aria-expanded="false"
3229+
class="bp5-button bp5-minimal"
3230+
tabindex="0"
3231+
type="button"
3232+
>
3233+
<span
3234+
aria-hidden="true"
3235+
class="bp5-icon bp5-icon-standard bp5-icon-maximize"
3236+
data-icon="maximize"
3237+
/>
3238+
</button>
3239+
</span>
31403240
<div
31413241
class="resize-side-content"
31423242
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3863,6 +3963,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
38633963
<div
38643964
class="right-parent"
38653965
>
3966+
<span
3967+
class="fullscreen-button bp5-popover-target"
3968+
>
3969+
<button
3970+
aria-expanded="false"
3971+
class="bp5-button bp5-minimal"
3972+
tabindex="0"
3973+
type="button"
3974+
>
3975+
<span
3976+
aria-hidden="true"
3977+
class="bp5-icon bp5-icon-maximize"
3978+
>
3979+
<svg
3980+
data-icon="maximize"
3981+
height="16"
3982+
role="img"
3983+
viewBox="0 0 16 16"
3984+
width="16"
3985+
>
3986+
<path
3987+
d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
3988+
fill-rule="evenodd"
3989+
/>
3990+
</svg>
3991+
</span>
3992+
</button>
3993+
</span>
38663994
<div
38673995
class="resize-side-content"
38683996
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"

‎src/commons/workspace/Workspace.tsx

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { FocusStyleManager } from '@blueprintjs/core';
1+
import { Button, FocusStyleManager, Tooltip } from '@blueprintjs/core';
2+
import { IconNames } from '@blueprintjs/icons';
3+
import { useFullscreen } from '@mantine/hooks';
24
import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
35
import { Direction } from 're-resizable/lib/resizer';
46
import React from 'react';
@@ -187,6 +189,21 @@ const Workspace: React.FC<WorkspaceProps> = props => {
187189
</Resizable>
188190
);
189191

192+
const {
193+
ref: fullscreenRef,
194+
toggle: toggleFullscreen,
195+
fullscreen: isFullscreen
196+
} = useFullscreen<HTMLDivElement>();
197+
198+
const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
199+
const setFullscreenRefs = React.useCallback(
200+
(node: HTMLDivElement | null) => {
201+
fullscreenContainerRef.current = node;
202+
fullscreenRef(node);
203+
},
204+
[fullscreenRef]
205+
);
206+
190207
return (
191208
<div className="workspace">
192209
<Prompt
@@ -206,7 +223,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
206223
<div className="row content-parent" ref={contentContainerDiv}>
207224
<div className="editor-divider" ref={editorDividerDiv} />
208225
<Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
209-
<div className="right-parent">
226+
<div className="right-parent" ref={setFullscreenRefs}>
227+
<Tooltip
228+
className="fullscreen-button"
229+
content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
230+
portalContainer={fullscreenContainerRef.current || undefined}
231+
>
232+
<Button
233+
minimal
234+
icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
235+
onClick={toggleFullscreen}
236+
/>
237+
</Tooltip>
210238
{props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
211239
? resizableSideContent
212240
: sideContent}

‎src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,22 @@ exports[`Playground tests Playground renders correctly 1`] = `
412412
<div
413413
class="right-parent"
414414
>
415+
<span
416+
class="fullscreen-button bp5-popover-target"
417+
>
418+
<button
419+
aria-expanded="false"
420+
class="bp5-button bp5-minimal"
421+
tabindex="0"
422+
type="button"
423+
>
424+
<span
425+
aria-hidden="true"
426+
class="bp5-icon bp5-icon-standard bp5-icon-maximize"
427+
data-icon="maximize"
428+
/>
429+
</button>
430+
</span>
415431
<div
416432
class="resize-side-content"
417433
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1749,6 +1765,34 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
17491765
<div
17501766
class="right-parent"
17511767
>
1768+
<span
1769+
class="fullscreen-button bp5-popover-target"
1770+
>
1771+
<button
1772+
aria-expanded="false"
1773+
class="bp5-button bp5-minimal"
1774+
tabindex="0"
1775+
type="button"
1776+
>
1777+
<span
1778+
aria-hidden="true"
1779+
class="bp5-icon bp5-icon-maximize"
1780+
>
1781+
<svg
1782+
data-icon="maximize"
1783+
height="16"
1784+
role="img"
1785+
viewBox="0 0 16 16"
1786+
width="16"
1787+
>
1788+
<path
1789+
d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
1790+
fill-rule="evenodd"
1791+
/>
1792+
</svg>
1793+
</span>
1794+
</button>
1795+
</span>
17521796
<div
17531797
class="resize-side-content"
17541798
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"

‎src/styles/_workspace.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,13 @@ $code-color-notification: #f9f0d7;
8080
height: 100%;
8181
padding-bottom: 0.6rem;
8282
overflow: auto;
83+
84+
.fullscreen-button {
85+
position: absolute;
86+
right: 8px;
87+
padding: 5px;
88+
z-index: 10;
89+
}
8390
}
8491

8592
.left-parent {

‎yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1920,9 +1920,9 @@
19201920
integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
19211921

19221922
"@mantine/hooks@^7.7.0":
1923-
version "7.7.0"
1924-
resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.0.tgz#52f0fdc97e953798d2e632aa5e90959f389cbd1e"
1925-
integrity sha512-m99vMzeONMpBLv0Rcb2LD88xAhpvwVdTMBo/7WohBDYtk1shJKHAc/WbQ/cJPcNk11Bzp/mhx/EPNZfs9+NwZA==
1923+
version "7.7.1"
1924+
resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.1.tgz#04fd8999fe109615d064bf42a8ff04435c93b927"
1925+
integrity sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==
19261926

19271927
"@mapbox/node-pre-gyp@^1.0.0":
19281928
version "1.0.10"

0 commit comments

Comments
 (0)