vertical toolboxpreview

Program-AR · May 21, 2024 · 4678009 · 4678009
1 parent 04c8fdb
commit 4678009
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/src/components/blockly/PBBlocklyWorkspace.tsx b/src/components/blockly/PBBlocklyWorkspace.tsx
@@ -6,6 +6,7 @@ import { categorizedToolbox, setupBlocklyBlocks, uncategorizedToolbox } from "./
 import { PBCard } from "../PBCard";
 import { PaperProps, Typography } from "@mui/material";
 import { BlocklyWorkspaceProps } from "react-blockly/dist/BlocklyWorkspaceProps";
+import { useThemeContext } from "../../theme/ThemeContext";
 
 export type PBBlocklyWorkspaceProps = {
   blockIds: string[]
@@ -16,27 +17,33 @@ export type PBBlocklyWorkspaceProps = {
 
 export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWorkspaceProps) => {
   const { t } = useTranslation("blocks")
-
+  const { isSmallScreen } = useThemeContext()
+
   const blocksWithCategories: BlockType[] = blockIds.map(getBlockFromId)
 
   setupBlocklyBlocks(t)
-
-  return <PBCard sx={{ ...sx, ".blocklyToolboxContents": { flexWrap: "noWrap", }}}>
-    {title && <Typography>{t('preview')}</Typography>}
-    <BlocklyWorkspace 
-      data-testid={blockIds.join(",")}
-      key={blockIds.join("") + categorized} //rerenders on toolbox or categorization changes
-      toolboxConfiguration={categorized ? categorizedToolbox(t, blocksWithCategories) : uncategorizedToolbox(blocksWithCategories)}
-      workspaceConfiguration={{}}
-      onWorkspaceChange={() => { }}
-      onImportXmlError={() => { }}
-      onImportError={() => { }}
-      onXmlChange={() => { }}
-      onJsonChange={() => { }}
-      onInject={() => { }}
-      onDispose={() => { }}
-      className={styles.fill}
-      {...props}
-    />
-  </PBCard>
+
+  // con la version de scroll en las categorias del toolbox en la visualizacion del desafio en pantalla chica se hace con esto en el sx ".blocklyToolboxContents": { flexWrap: "noWrap" }, 
+
+  return <PBCard sx={ isSmallScreen ? {...sx, ".blocklyToolboxDiv": { position: "relative !important"  }, 
+                                              ".blocklyNonSelectable.blocklyToolboxDiv": { height: "auto !important"  }, 
+                                              ".blocklyFlyout": { transform: "translate(0px, 0px) !important" }} 
+                                    : { ...sx  }}>
+  {title && <Typography>{t('preview')}</Typography>}
+  <BlocklyWorkspace
+    data-testid={blockIds.join(",")}
+    key={blockIds.join("") + categorized} //rerenders on toolbox or categorization changes
+    toolboxConfiguration={categorized ? categorizedToolbox(t, blocksWithCategories) : uncategorizedToolbox(blocksWithCategories)}
+    workspaceConfiguration={{}}
+    onWorkspaceChange={() => { }}
+    onImportXmlError={() => { }}
+    onImportError={() => { }}
+    onXmlChange={() => { }}
+    onJsonChange={() => { }}
+    onInject={() => { }}
+    onDispose={() => { }}
+    className={styles.fill}
+    {...props}
+  />
+</PBCard>
 }
diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/ToolBoxEditor/ToolboxPreview.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/ToolBoxEditor/ToolboxPreview.tsx
@@ -1,3 +1,4 @@
+import { useThemeContext } from "../../../../../theme/ThemeContext";
 import { PBBlocklyWorkspace } from "../../../../blockly/PBBlocklyWorkspace"
 import Blockly from "blockly";
 
@@ -7,8 +8,10 @@ type ToolboxPreviewProps = {
 }
 
 export const ToolboxPreview = ( {categorized, blockIds} : ToolboxPreviewProps ) => {
+  const { isSmallScreen } = useThemeContext()
+
     return <PBBlocklyWorkspace
-            sx={{display: "flex", flexDirection:"column", minWidth: "400px", padding:"5px"}}
+            sx={{display: "flex", flexDirection:"column", minWidth: isSmallScreen ? "auto" : "400px", padding:"5px"}}
             title
             blockIds={blockIds}
             categorized={categorized}