@capytale/meta-player 0.3.4 → 0.3.5

package/src/features/pedago/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from "primereact/button";
 import { Panel } from "primereact/panel";
 import styles from "./style.module.scss";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
@@ -6,8 +5,6 @@ import {
   selectIsGradingVisible,
   selectOrientation,
   selectPedagoTab,
-  toggleIsGradingVisible,
-  toggleIsPedagoVisible,
 } from "../layout/layoutSlice";
 
 import "@capytale/capytale-rich-text-editor/style.css";
@@ -24,9 +21,10 @@ import {
   setIsMPDirty,
 } from "../activityData/activityDataSlice";
 import { ChangeEventHandler } from "react";
-import settings from "../../settings";
 import { DivProps } from "react-html-props";
-import AnswerSheetEditor from "./AnswerSheetEditor";
+import SharedNotesEditor from "./SharedNotesEditor";
+import { PedagoCommands } from "./PedagoCommands";
+import { PdfEditor } from "./PdfEditor";
 
 const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   const dispatch = useAppDispatch();
@@ -60,40 +58,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   return (
     // @ts-ignore - Incompatibility for props in TS
     <div className={classNames(styles.pedago, className)} {...props}>
-      <div className={styles.pedagoCommands}>
-        <Button
-          severity="secondary"
-          icon="pi pi-times"
-          rounded
-          text
-          aria-label="Masquer les consignes"
-          tooltip="Masquer les consignes"
-          tooltipOptions={{
-            position: "left",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-          }}
-          onClick={() => dispatch(toggleIsPedagoVisible())}
-        />
-        {/*
-        <Button
-          rounded
-          text
-          icon="pi pi-times"
-          label="H"
-          onClick={() => {
-            dispatch(
-              setPedagoTab(
-                pedagoTab === "instructions" ? "answerSheet" : "instructions",
-              ),
-            );
-          }}
-        />
-        */}
-        <div className={styles.pedagoSeparator}></div>
-        {(mode === "assignment" || mode === "review") && (
-          <ShowHideGradingButton />
-        )}
-      </div>
+      <PedagoCommands />
       <div
         className={styles.pedagoContent}
         data-grading-visible={isGradingVisible}
@@ -101,7 +66,8 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
         {!isGradingVisible && (
           <>
             {pedagoTab === "instructions" && <InstructionsEditor />}
-            {pedagoTab === "answerSheet" && <AnswerSheetEditor />}
+            {pedagoTab === "sharedNotes" && <SharedNotesEditor />}
+            {pedagoTab === "pdf" && <PdfEditor />}
           </>
         )}
         {isGradingVisible && (
@@ -173,11 +139,21 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
                 size={60}
                 className={styles.pedagoPanel}
               >
-                <Panel className={styles.fullSizePanel} header="Consignes">
+                <Panel
+                  className={styles.fullSizePanel}
+                  header={
+                    pedagoTab === "instructions"
+                      ? "Consignes"
+                      : pedagoTab === "pdf"
+                        ? "PDF"
+                        : "Notes partagées"
+                  }
+                >
                   {pedagoTab === "instructions" && <InstructionsEditor />}
-                  {pedagoTab === "answerSheet" && <AnswerSheetEditor />}
+                  {pedagoTab === "sharedNotes" && <SharedNotesEditor />}
+                  {pedagoTab === "pdf" && <PdfEditor />}
                 </Panel>
-              </SplitterPanel>
+              </SplitterPanel>,
             ])}
           </Splitter>
         )}
@@ -186,35 +162,4 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   );
 };
 
-const ShowHideGradingButton: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const mode = useAppSelector(selectMode);
-  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const isGradingVisible = useAppSelector(selectIsGradingVisible);
-  const tooltip =
-    hasGradingOrComments || mode === "review"
-      ? isGradingVisible
-        ? "Masquer la notation"
-        : "Afficher la notation"
-      : "Pas de note";
-
-  return (
-    <Button
-      severity="secondary"
-      icon="pi pi-graduation-cap"
-      disabled={!(hasGradingOrComments || mode === "review")}
-      rounded
-      text={!isGradingVisible || !(hasGradingOrComments || mode === "review")}
-      aria-label={tooltip}
-      tooltip={tooltip}
-      tooltipOptions={{
-        position: "left",
-        showDelay: settings.TOOLTIP_SHOW_DELAY,
-        showOnDisabled: true,
-      }}
-      onClick={() => dispatch(toggleIsGradingVisible())}
-    />
-  );
-};
-
 export default Pedago;

package/src/features/pedago/style.module.scss

@@ -1,29 +1,114 @@
 .pedago {
-  display: grid;
+  display: flex;
   height: 100%;
   width: 100%;
   :global(.layout-horizontal) & {
-    grid-template-columns: 1fr calc(3rem + 8px);
-    grid-template-rows: 1fr;
+    flex-direction: row-reverse;
   }
   :global(.layout-vertical) & {
-    grid-template-rows: calc(3rem + 8px) 1fr;
-    grid-template-columns: 1fr;
+    flex-direction: column;
   }
 }
 
 .pedagoCommands {
   flex-direction: column;
-  padding: 4px;
+  flex-shrink: 0;
   display: flex;
-  gap: 8px;
   background-color: var(--surface-200);
-  :global(.layout-horizontal) & {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  :global(.layout-horizontal) & > *:first-child {
+    background-color: var(--surface-300);
   }
   :global(.layout-vertical) & {
-    flex-direction: row-reverse;
+    gap: 8px;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.pdfActions {
+  padding: 10px 0;
+  display: flex;
+  :global(.layout-horizontal) & {
+    padding-right: 9px;
+  }
+}
+
+.pedagoHorizontalTabMenu {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.pedagoHorizontalTab {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-color-secondary);
+  padding: 0 16px;
+  transition: background-color 0.2s;
+  user-select: none;
+  cursor: pointer;
+  &[data-selected="true"] {
+    background-color: var(--surface-100);
+    color: var(--text-color);
+  }
+  &:hover,
+  &:focus {
+    background-color: var(--surface-50);
+  }
+  & > span {
+    padding: 13px 0;
+  }
+  & > i {
+    padding-right: 8px;
+  }
+}
+
+.dropzone {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  cursor: pointer;
+  outline: none;
+}
+
+.dropzoneRectangle {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 20px;
+  border: 2px dashed var(--surface-100);
+  border-radius: 2px;
+  background-color: var(--surface-50);
+  color: var(--text-color-secondary);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s ease-in-out;
+
+  &[data-is-ficused="true"] {
+    border-color: var(--primary-300);
+  }
+  &[data-is-drag-accept="true"] {
+    border-color: var(--green-300);
+  }
+  &[data-is-drag-reject="true"] {
+    border-color: var(--red-300);
+  }
+}
+
+.smallSelectButton {
+  flex-shrink: 0;
+  & > * {
+    padding: 11px 8px;
   }
 }
 
@@ -70,12 +155,31 @@
   }
 }
 
+.pedagoTabMenu {
+  align-self: stretch;
+  & > * {
+    background-color: transparent;
+    flex-wrap: wrap;
+    min-height: 100%;
+  }
+}
+
+.pedagoTab {
+  background-color: transparent;
+  padding: 4px 1.25rem;
+  gap: 16px;
+  font-weight: normal;
+  border-right: 1px solid var(--surface-300);
+  border-radius: 0;
+  :global(.p-highlight) & {
+    z-index: 1;
+  }
+}
+
 .pedagoContent {
+  flex-grow: 1;
   overflow-y: auto;
-  :global(.layout-horizontal) & {
-    grid-column-start: 1;
-    grid-row-start: 1;
-  }
+  text-align: center;
 }
 
 .pedagoFeedbackPanel {

package/src/index.css

@@ -33,11 +33,15 @@ body,
   color-scheme: light;
 }
 
-.p-splitter-panel:has(> #meta-player-content-cover) {
+.editor-shell {
+  text-align: start;
+}
+
+.p-splitter-panel:has(> .meta-player-content-cover) {
   position: relative;
 }
 
-#meta-player-content-cover {
+.meta-player-content-cover {
   display: none;
   width: 100%;
   height: 100%;

package/src/features/pedago/AnswerSheetEditor.tsx

@@ -1,72 +0,0 @@
-import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  selectAnswerSheetContent,
-  selectMode,
-  setCanSaveAnswerSheet,
-  setIsMPDirty,
-  setLexicalAnswerSheetState,
-} from "../activityData/activityDataSlice";
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import { Toast } from "primereact/toast";
-import settings from "../../settings";
-
-const AnswerSheetEditor: React.FC = forwardRef((_props, ref) => {
-  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
-  const dispatch = useAppDispatch();
-  const toast = useRef<Toast>(null);
-  const mode = useAppSelector(selectMode);
-  const isEditable =
-    mode === "create" || mode === "assignment" || mode === "review";
-  const initialEditorState = useAppSelector(selectAnswerSheetContent);
-  const initialStateOnChangeDone = useRef<boolean>(false);
-
-  useImperativeHandle(ref, () => {
-    return {
-      save: async () => {
-        const state = await getState();
-        dispatch(setLexicalAnswerSheetState(state.json));
-      },
-    };
-  });
-
-  return (
-    <>
-      <Toast position="bottom-right" ref={toast} />
-      <Editor
-        placeholderText="Écrivez le contenu initial de la fiche réponse ici..."
-        initialEditorState={initialEditorState}
-        jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
-        onChange={(editorState) => {
-          dispatch(setLexicalAnswerSheetState(editorState));
-          if (initialStateOnChangeDone.current) {
-            dispatch(setIsMPDirty(true));
-          } else {
-            initialStateOnChangeDone.current = true;
-          }
-        }}
-        onJsonSizeLimitExceeded={() => {
-          dispatch(setCanSaveAnswerSheet(false));
-          toast.current!.show({
-            summary: "Erreur",
-            detail: `Le contenu de la fiche réponse est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
-            severity: "error",
-            life: 10000,
-          });
-        }}
-        onJsonSizeLimitMet={() => {
-          dispatch(setCanSaveAnswerSheet(true));
-          toast.current!.show({
-            summary: "Succès",
-            detail: `Le contenu de la fiche réponse ne dépasse plus la taille limite.`,
-            severity: "success",
-            life: 4000,
-          });
-        }}
-        isEditable={isEditable}
-      />
-    </>
-  );
-});
-
-export default AnswerSheetEditor;