move the apply state button out of the json editor to mapbuilder panel

closes(50)
Canadian-Geospatial-Platform · Nov 6, 2024 · fb42e17 · fb42e17
1 parent 786fd9a
commit fb42e17
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/src/components/ConfigTextEditor.tsx b/src/components/ConfigTextEditor.tsx
@@ -13,7 +13,7 @@ export function ConfigTextEditor() {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
 
-  const { configJson, validateConfigJson, createMapFromConfigText, handleApplyStateToConfigFile } = cgpvContext;
+  const { configJson, validateConfigJson, createMapFromConfigText } = cgpvContext;
   const { enqueueSnackbar } = useSnackbar();
 
   const textEditorRef = useRef<HTMLTextAreaElement>(null);
@@ -82,7 +82,7 @@ export function ConfigTextEditor() {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: { xs: '80%', sm: '90%', md: '80%', lg: '75%' },
+    width: { xs: '90%', sm: '90%', md: '80%', lg: '75%' },
     bgcolor: 'background.paper',
     border: '2px solid #ccc',
     borderRadius: 4,
@@ -105,13 +105,9 @@ export function ConfigTextEditor() {
       >
         <Box sx={modalContentStyle}>
           <Box className="config-editor" sx={{ position: 'relative' }}>
-
-              <Box sx={{ display: 'flex', justifyContent: 'center' ,mt: 2, gap: 2 }}>
-            <Box sx={{ position: 'absolute', top: 5, right: 200 }}>
-
+           <Box sx={{ position: 'absolute', top: 5, right: 10 }}>
+              <CopyToClipboardButton textToCopy={editorText} />
             </Box>
-
-              </Box>
             <div className="line-numbers">
               {generateArray(numberOfLines).map((lineNumber) => (
                 <span key={lineNumber}></span>
@@ -128,20 +124,14 @@ export function ConfigTextEditor() {
               spellCheck="false"
             ></textarea>
           </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>
-             <Button variant="contained" color="primary" size="small" onClick={handleApplyStateToConfigFile}>
-                Apply State to Config File
-            </Button>
-            <Box >
-              <CopyToClipboardButton textToCopy={editorText} />
-              </Box>
-
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>    
             <Button variant="contained" color="primary" onClick={validateText} disabled={!isEditorTouched}>
               Validate
             </Button>
             <Button variant="contained" color="primary" onClick={createMap} disabled={!isValidJson}>
               Create Map
             </Button>
+
           </Box>
         </Box>
       </Modal>

diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -26,7 +26,7 @@ export function MapBuilder() {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
 
-  const { configJson, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
+  const { configJson,handleApplyStateToConfigFile, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
   const [modifiedConfigJson, setModifiedConfigJson] = useState<object>(configJson);
   const [isModified, setIsModified] = useState<boolean>(false);
@@ -87,6 +87,12 @@ export function MapBuilder() {
         Apply Config Changes
       </Button>
 
+      <Divider sx={{ my: 2 }} />
+
+      <Button variant="contained" color="primary" size="small" onClick={handleApplyStateToConfigFile}>
+        Apply State to Config File
+      </Button>
+
       <FormControl component="fieldset" sx={{ mt: 4, gap: 3 }}>
 
         <SingleSelectComplete
@@ -136,8 +142,6 @@ export function MapBuilder() {
           defaultValue={getProperty('map.interaction')}
           onChange={(value) => updateProperty('map.interaction', value)}
           label="Map Interaction" placeholder="" />
-
-
         <FormGroup aria-label="position">
           <FormLabel component="legend">Zoom Levels</FormLabel>
 

diff --git a/src/index.css b/src/index.css
@@ -21,7 +21,7 @@ code {
   line-height: 21px;
   background: #282a3a;
   border-radius: 2px;
-  padding: 40px 40px;
+  padding: 20px 10px;
   height: 600px;
   overflow-y: auto;
   width: 100%;