Merge branch 'master' into lib

Author: SebastienTainon

frontend/store.ts

@@ -82,6 +82,7 @@ export interface CodecastOptions {
     origin: string,
     task?: QuickalgoTask,
     taskInstructions?: string,
+    taskSolution?: string,
     taskHints?: TaskHint[],
     taskSuccessMessage?: string,
     taskSuccessStayOnCurrentVersionDisabled?: boolean,

frontend/task/TaskSolution.tsx

@@ -3,7 +3,7 @@ import {useAppSelector} from "../hooks";
 import {formatTaskInstructions} from './utils';
 import {
     convertHtmlInstructionsToReact,
-    selectLanguageStrings,
+    getTaskSolution,
 } from './instructions/instructions';
 
 export function TaskSolution() {
@@ -13,7 +13,7 @@ export function TaskSolution() {
     const contextId = useAppSelector(state => state.task.contextId);
     const [solutionsHtml, setSolutionsHtml] = useState(null);
     const platform = useAppSelector(state => state.options.platform);
-    const solutionHtml = useAppSelector(state => selectLanguageStrings(state)?.solution);
+    const solutionHtml = useAppSelector(getTaskSolution);
 
     useEffect(() => {
         let instructionsJQuery = formatTaskInstructions(solutionHtml, platform, taskLevel, taskVariant);

frontend/task/instructions/instructions.tsx

@@ -185,6 +185,14 @@ export const getInstructionsForLevelSelector = memoize(({state, context}: {state
     };
 });
 
+export function getTaskSolution(state: AppStore) {
+    if (state.options.taskSolution) {
+        return state.options.taskSolution;
+    }
+
+    return selectLanguageStrings(state)?.solution;
+}
+
 export const getFormattedInstructionsForLevelSelector = memoize(({state, context}: {state: AppStore, context: QuickAlgoLibrary}) => {
     const html = getInstructionsForLevelSelector({state, context}).html;
     const platform = state.options.platform;

frontend/task/task.scss

@@ -747,6 +747,10 @@ pre, #app .ace_editor, .stack-view, .subtitles-band-frame {
   line-height: 1.1em;
   background-color: #efa124;
 
+  &:not(.submission-pending) {
+    padding-right: 30px;
+  }
+
   .close-button, .maximize-button {
     position: absolute;
     top: 4px;
@@ -800,7 +804,7 @@ pre, #app .ace_editor, .stack-view, .subtitles-band-frame {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-right: 34px;
+  margin-right: 10px;
   .message {
     flex: 1 1 auto;
     color: #30242B;
@@ -818,12 +822,15 @@ pre, #app .ace_editor, .stack-view, .subtitles-band-frame {
   }
 }
 
-.codehelp-help .quickalgo-button .bp4-button-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  .bp4-icon {
-    color: white;
+.codehelp-help {
+  margin-left: 10px;
+  .quickalgo-button .bp4-button-text {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .bp4-icon {
+      color: white;
+    }
   }
 }