From dde8c3acce1d08b49114b0965c87d5e9dbe03565 Mon Sep 17 00:00:00 2001
From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:53:57 +0800
Subject: [PATCH 1/8] Added fullscreen button to playground side content
---
package.json | 1 +
src/commons/workspace/Workspace.tsx | 21 ++++++++++++++++++++-
src/styles/_workspace.scss | 8 ++++++++
yarn.lock | 5 +++++
4 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/package.json b/package.json
index f8ff5b4743..412a459cfc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@blueprintjs/icons": "^5.5.0",
"@blueprintjs/popover2": "^2.0.0",
"@blueprintjs/select": "^5.0.0",
+ "@mantine/hooks": "^7.7.0",
"@octokit/rest": "^20.0.0",
"@reduxjs/toolkit": "^1.9.7",
"@sentry/browser": "^7.57.0",
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index b15423a4cd..e29d7d89f9 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,4 +1,7 @@
import { FocusStyleManager } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
import { Direction } from 're-resizable/lib/resizer';
import React from 'react';
@@ -187,6 +190,15 @@ const Workspace: React.FC<WorkspaceProps> = props => {
</Resizable>
);
+ // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
+ // It returns a ref to attach to the element that should be fullscreened,
+ // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
+ const {
+ ref: fullscreenRef,
+ toggle: toggleFullscreen,
+ fullscreen: isFullscreen
+ } = useFullscreen<HTMLDivElement>();
+
return (
<div className="workspace">
<Prompt
@@ -206,7 +218,14 @@ const Workspace: React.FC<WorkspaceProps> = props => {
<div className="row content-parent" ref={contentContainerDiv}>
<div className="editor-divider" ref={editorDividerDiv} />
<Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
- <div className="right-parent">
+ <div className="right-parent" ref={fullscreenRef}>
+ <Icon
+ id="fullscreen-button"
+ icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+ color="white"
+ htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
+ onClick={toggleFullscreen}
+ />
{props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
? resizableSideContent
: sideContent}
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 1332cec81d..57383458ee 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -80,6 +80,14 @@ $code-color-notification: #f9f0d7;
height: 100%;
padding-bottom: 0.6rem;
overflow: auto;
+
+ #fullscreen-button {
+ position: absolute;
+ right: 8px;
+ padding: 5px;
+ cursor: pointer;
+ z-index: 100;
+ }
}
.left-parent {
diff --git a/yarn.lock b/yarn.lock
index 2e33550ecc..ef13527e36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1924,6 +1924,11 @@
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
+"@mantine/hooks@^7.7.0":
+ version "7.7.1"
+ resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.1.tgz#04fd8999fe109615d064bf42a8ff04435c93b927"
+ integrity sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==
+
"@mapbox/node-pre-gyp@^1.0.0":
version "1.0.10"
resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"
From b51a01bcb51446dc2111f8a71ef4017c8730ed07 Mon Sep 17 00:00:00 2001
From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 18:05:37 +0800
Subject: [PATCH 2/8] Refactor fullscreen button to use class as reference and
Blueprint's Tooltip
---
src/commons/workspace/Workspace.tsx | 37 ++++++++++++++++++++---------
src/styles/_workspace.scss | 2 +-
2 files changed, 27 insertions(+), 12 deletions(-)
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index e29d7d89f9..02355afc13 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,5 +1,4 @@
-import { FocusStyleManager } from '@blueprintjs/core';
-import { Icon } from '@blueprintjs/core';
+import { FocusStyleManager, Icon, Tooltip } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { useFullscreen } from '@mantine/hooks';
import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
@@ -191,7 +190,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
);
// This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
- // It returns a ref to attach to the element that should be fullscreened,
+ // It returns a ref callback function to attach to the element that should be fullscreened,
// a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
const {
ref: fullscreenRef,
@@ -199,6 +198,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
fullscreen: isFullscreen
} = useFullscreen<HTMLDivElement>();
+ const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
+ const setFullscreenRefs = React.useCallback(
+ (node: HTMLDivElement | null) => {
+ // Refs returned by useRef()
+ fullscreenContainerRef.current = node;
+
+ // Ref callback function from useFullscreen
+ fullscreenRef(node);
+ },
+ [fullscreenRef]
+ );
+
return (
<div className="workspace">
<Prompt
@@ -218,14 +229,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
<div className="row content-parent" ref={contentContainerDiv}>
<div className="editor-divider" ref={editorDividerDiv} />
<Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
- <div className="right-parent" ref={fullscreenRef}>
- <Icon
- id="fullscreen-button"
- icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
- color="white"
- htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
- onClick={toggleFullscreen}
- />
+ <div className="right-parent" ref={setFullscreenRefs}>
+ <Tooltip
+ className="fullscreen-button"
+ content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+ portalContainer={fullscreenContainerRef.current || undefined}
+ >
+ <Icon
+ icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+ color="white"
+ onClick={toggleFullscreen}
+ />
+ </Tooltip>
{props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
? resizableSideContent
: sideContent}
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 57383458ee..d3cd86b8af 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -81,7 +81,7 @@ $code-color-notification: #f9f0d7;
padding-bottom: 0.6rem;
overflow: auto;
- #fullscreen-button {
+ .fullscreen-button {
position: absolute;
right: 8px;
padding: 5px;
From 774ed4fbea2e460965ed46c3654675c5577f357c Mon Sep 17 00:00:00 2001
From: henz <henz@comp.nus.edu.sg>
Date: Mon, 8 Apr 2024 21:58:18 +0800
Subject: [PATCH 3/8] updating snapshots
---
.../AssessmentWorkspace.tsx.snap | 107 ++++++++++++++++++
.../__snapshots__/Playground.tsx.snap | 35 ++++++
2 files changed, 142 insertions(+)
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index f8fce30095..1331ef9c7c 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -333,6 +333,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
+ tabindex="0"
+ >
+ <svg
+ data-icon="maximize"
+ fill="white"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1583,6 +1607,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
+ tabindex="0"
+ >
+ <svg
+ data-icon="maximize"
+ fill="white"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -2363,6 +2411,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
+ tabindex="0"
+ >
+ <svg
+ data-icon="maximize"
+ fill="white"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3137,6 +3209,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+ data-icon="maximize"
+ tabindex="0"
+ />
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3863,6 +3946,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
+ tabindex="0"
+ >
+ <svg
+ data-icon="maximize"
+ fill="white"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 250b5fc50b..20da3cf9b5 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -412,6 +412,17 @@ exports[`Playground tests Playground renders correctly 1`] = `
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+ data-icon="maximize"
+ tabindex="0"
+ />
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1749,6 +1760,30 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
<div
class="right-parent"
>
+ <span
+ class="fullscreen-button bp5-popover-target"
+ >
+ <span
+ aria-expanded="false"
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
+ tabindex="0"
+ >
+ <svg
+ data-icon="maximize"
+ fill="white"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </span>
<div
class="resize-side-content"
style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
From 057cf5527893b3cb70b8e5942073d13d1ce8a21d Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:34:12 +0800
Subject: [PATCH 4/8] Remove unnecessary comments
---
src/commons/workspace/Workspace.tsx | 6 ------
1 file changed, 6 deletions(-)
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index 02355afc13..ed9a0058da 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -189,9 +189,6 @@ const Workspace: React.FC<WorkspaceProps> = props => {
</Resizable>
);
- // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
- // It returns a ref callback function to attach to the element that should be fullscreened,
- // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
const {
ref: fullscreenRef,
toggle: toggleFullscreen,
@@ -201,10 +198,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
const setFullscreenRefs = React.useCallback(
(node: HTMLDivElement | null) => {
- // Refs returned by useRef()
fullscreenContainerRef.current = node;
-
- // Ref callback function from useFullscreen
fullscreenRef(node);
},
[fullscreenRef]
From d79934ab1e43027f8abf459f548158488f9fb2ad Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:39:58 +0800
Subject: [PATCH 5/8] Replace icon with button
For more correct semantics.
---
src/commons/workspace/Workspace.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index ed9a0058da..93fd2ca8c6 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,4 +1,4 @@
-import { FocusStyleManager, Icon, Tooltip } from '@blueprintjs/core';
+import { Button, FocusStyleManager, Tooltip } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { useFullscreen } from '@mantine/hooks';
import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
@@ -229,9 +229,9 @@ const Workspace: React.FC<WorkspaceProps> = props => {
content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
portalContainer={fullscreenContainerRef.current || undefined}
>
- <Icon
+ <Button
+ minimal
icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
- color="white"
onClick={toggleFullscreen}
/>
</Tooltip>
From 4f258c3f550e25741572eeeb9b67d3abc893549a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:43:04 +0800
Subject: [PATCH 6/8] 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.
---
src/styles/_workspace.scss | 17 ++++++++---------
1 file changed, 8 insertions(+), 9 deletions(-)
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index d3cd86b8af..ec4f1f9830 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -85,8 +85,7 @@ $code-color-notification: #f9f0d7;
position: absolute;
right: 8px;
padding: 5px;
- cursor: pointer;
- z-index: 100;
+ z-index: 10;
}
}
@@ -154,7 +153,7 @@ $code-color-notification: #f9f0d7;
}
.ace_breakpoint:before {
- content: ' \25CF';
+ content: " \25CF";
margin-left: -10px;
color: red;
}
@@ -469,8 +468,8 @@ $code-color-notification: #f9f0d7;
* sourcecode, font size modified.
*/
font:
- 16px / normal 'Inconsolata',
- 'Consolas',
+ 16px / normal "Inconsolata",
+ "Consolas",
monospace;
.canvas-container {
@@ -501,7 +500,7 @@ $code-color-notification: #f9f0d7;
// Set colour of icons in blueprintjs tabs
color: #a7b6c2;
- &[aria-selected='true'] {
+ &[aria-selected="true"] {
.side-content-tooltip {
background-color: #495a6b;
@@ -514,7 +513,7 @@ $code-color-notification: #f9f0d7;
}
}
- &[aria-disabled='true'] {
+ &[aria-disabled="true"] {
.side-content-tooltip {
// Set tooltip colour to always be the same as the background
background-color: inherit;
@@ -800,8 +799,8 @@ $code-color-notification: #f9f0d7;
* sourcecode, font size modified.
*/
font:
- 16px / normal 'Inconsolata',
- 'Consolas',
+ 16px / normal "Inconsolata",
+ "Consolas",
monospace;
}
From b22b75ffb6a4dfd3fc7a5e0a4af52d5d69602880 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 03:10:00 +0800
Subject: [PATCH 7/8] Fix format
---
src/styles/_workspace.scss | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index ec4f1f9830..63af80872f 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -153,7 +153,7 @@ $code-color-notification: #f9f0d7;
}
.ace_breakpoint:before {
- content: " \25CF";
+ content: ' \25CF';
margin-left: -10px;
color: red;
}
@@ -468,8 +468,8 @@ $code-color-notification: #f9f0d7;
* sourcecode, font size modified.
*/
font:
- 16px / normal "Inconsolata",
- "Consolas",
+ 16px / normal 'Inconsolata',
+ 'Consolas',
monospace;
.canvas-container {
@@ -500,7 +500,7 @@ $code-color-notification: #f9f0d7;
// Set colour of icons in blueprintjs tabs
color: #a7b6c2;
- &[aria-selected="true"] {
+ &[aria-selected='true'] {
.side-content-tooltip {
background-color: #495a6b;
@@ -513,7 +513,7 @@ $code-color-notification: #f9f0d7;
}
}
- &[aria-disabled="true"] {
+ &[aria-disabled='true'] {
.side-content-tooltip {
// Set tooltip colour to always be the same as the background
background-color: inherit;
@@ -799,8 +799,8 @@ $code-color-notification: #f9f0d7;
* sourcecode, font size modified.
*/
font:
- 16px / normal "Inconsolata",
- "Consolas",
+ 16px / normal 'Inconsolata',
+ 'Consolas',
monospace;
}
From 81d2559c5ec5be38271a79539a1a62ab63e34b63 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 03:20:22 +0800
Subject: [PATCH 8/8] Update test snapshots
---
.../AssessmentWorkspace.tsx.snap | 159 ++++++++++--------
.../__snapshots__/Playground.tsx.snap | 51 +++---
2 files changed, 120 insertions(+), 90 deletions(-)
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index 1331ef9c7c..9b9db5f8e7 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -336,26 +336,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
+ type="button"
>
- <svg
- data-icon="maximize"
- fill="white"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
>
- <path
- 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"
- fill-rule="evenodd"
- />
- </svg>
- </span>
+ <svg
+ data-icon="maximize"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
</span>
<div
class="resize-side-content"
@@ -1610,26 +1614,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
+ type="button"
>
- <svg
- data-icon="maximize"
- fill="white"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
>
- <path
- 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"
- fill-rule="evenodd"
- />
- </svg>
- </span>
+ <svg
+ data-icon="maximize"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
</span>
<div
class="resize-side-content"
@@ -2414,26 +2422,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
+ type="button"
>
- <svg
- data-icon="maximize"
- fill="white"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
>
- <path
- 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"
- fill-rule="evenodd"
- />
- </svg>
- </span>
+ <svg
+ data-icon="maximize"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
</span>
<div
class="resize-side-content"
@@ -3212,13 +3224,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-standard bp5-icon-maximize"
- data-icon="maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
- />
+ type="button"
+ >
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+ data-icon="maximize"
+ />
+ </button>
</span>
<div
class="resize-side-content"
@@ -3949,26 +3966,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
+ type="button"
>
- <svg
- data-icon="maximize"
- fill="white"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
>
- <path
- 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"
- fill-rule="evenodd"
- />
- </svg>
- </span>
+ <svg
+ data-icon="maximize"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
</span>
<div
class="resize-side-content"
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 20da3cf9b5..e0ee8352d6 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -415,13 +415,18 @@ exports[`Playground tests Playground renders correctly 1`] = `
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-standard bp5-icon-maximize"
- data-icon="maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
- />
+ type="button"
+ >
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+ data-icon="maximize"
+ />
+ </button>
</span>
<div
class="resize-side-content"
@@ -1763,26 +1768,30 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
<span
class="fullscreen-button bp5-popover-target"
>
- <span
+ <button
aria-expanded="false"
- aria-hidden="true"
- class="bp5-icon bp5-icon-maximize"
+ class="bp5-button bp5-minimal"
tabindex="0"
+ type="button"
>
- <svg
- data-icon="maximize"
- fill="white"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
+ <span
+ aria-hidden="true"
+ class="bp5-icon bp5-icon-maximize"
>
- <path
- 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"
- fill-rule="evenodd"
- />
- </svg>
- </span>
+ <svg
+ data-icon="maximize"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ 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"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
</span>
<div
class="resize-side-content"