Rename a file (#193)

- Created modal for renaming a file using inference based on existing
designs for other modals since could not find exact design for this
- Refactored `NewComponentButton` to be inside `#app` in the DOM and not
to need custom inline styling
- Abstracted out the file name validation checking so it can be shared
between `NewComponentButton` and `RenameFile`
- Added styles for a secondary button

Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>
Co-authored-by: Patrick Cherry <patch0@users.noreply.github.com>

Author: 3 people

CHANGELOG.md

@@ -6,8 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 
 ### Added
+
+- Functionality for renaming a file (#193)
+- Styling for a secondary button (#193)
 - The web component `runCompleted` event now returns `duration: null` if the host page's tab loses focus during the code run (#192)
 
+### Changed
+
+- Updated modal styling (#193)
+
 ## [0.4.0]
 
 ### Added

src/App.scss

@@ -3,6 +3,7 @@
 
 button {
   all: initial;
+  cursor: pointer;
 }
 
 #app {
@@ -34,7 +35,7 @@ button {
     fill: $editor-white;
   }
 
-  button svg {
+  .btn svg {
     fill: inherit;
   }
 }

src/Icons.js

@@ -25,6 +25,16 @@ export const ChevronDown = () => {
   )
 }
 
+export const CloseIcon = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = fontScaleFactors[cookies.fontSize] || 1
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+    </svg>
+  )
+}
+
 export const CogIcon = () => {
   return (
     <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -115,6 +125,16 @@ export const NewFileIcon = () => {
   )
 }
 
+export const PencilIcon = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = (fontScaleFactors[cookies.fontSize] || 1)
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.75795 3.67889L7.32009 4.24111L1.7842 9.77778H1.22205V9.21556L6.75795 3.67889V3.67889ZM8.95765 0C8.80489 0 8.64602 0.0611111 8.52993 0.177222L7.41175 1.29556L9.7031 3.58722L10.8213 2.46889C11.0596 2.23056 11.0596 1.84556 10.8213 1.60722L9.39147 0.177222C9.26927 0.055 9.11651 0 8.95765 0V0ZM6.75795 1.94944L0 8.70833V11H2.29135L9.0493 4.24111L6.75795 1.94944V1.94944Z"/>
+    </svg>
+  )
+}
+
 export const PressureIcon = () => {
   const [cookies] = useCookies(['fontSize'])
   const scale = (fontScaleFactors[cookies.fontSize] || 1) * 1.6

src/Modal.scss

@@ -0,0 +1,111 @@
+@import './colours.scss';
+
+.modal__content {
+  position: absolute;
+  width: 40%;
+  max-width: 450px;
+  top: 50%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  border: 0;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-2);
+
+  .modal__header {
+    display: flex;
+    h2 {
+      margin-top: 0;
+      margin-bottom: var(--spacing-3);
+      font-size: var(--font-size-u-2)
+    }
+
+    button {
+      margin-left: auto;
+      height: fit-content;
+      margin-right: var(--spacing-1);
+      margin-top: var(--spacing-1);
+    }
+  }
+
+  label {
+    margin-bottom: var(--spacing-1);
+    font-weight: var(--font-weight-bold);
+  }
+  input {
+    font-size: 1em;
+    border-radius: 12px;
+    padding: var(--spacing-1);
+  }
+
+  .modal__buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--spacing-2);
+    margin-left: calc(-1 * var(--spacing-half));
+    margin-right: calc(-1 * var(--spacing-half));
+
+    button {
+      flex: 1;
+      margin: 0 var(--spacing-half);
+    }
+  }
+}
+
+.modal__overlay {
+  z-index: 1000;
+  position: fixed;
+  inset: 0px;
+}
+
+.--dark {
+  .modal__overlay {
+    background-color: rgba(0,0,0,0.5);
+
+    input {
+      border: 2px solid $editor-white;
+      background-color: $editor-dark;
+      color: inherit;
+    }
+  }
+  .modal__content {
+    background-color: $editor-dark;
+  }
+}
+
+.--light {
+  .modal__overlay{
+    background-color: rgba(67,69,76,0.5);
+    input {
+      border: 2px solid $editor-light-grey;
+      background-color: $editor-light-light-light-grey;
+    }
+  }
+  .modal__content {
+    background-color: $editor-white;
+  }
+}
+
+.font-size-medium {
+  .modal__overlay {
+    .modal__header {
+      h2 {
+        font-size: var(--font-size-u-4)
+      }
+    }
+  }
+}
+
+.font-size-large {
+  .modal__overlay {
+    .modal__header {
+      h2 {
+        font-size: var(--font-size-u-6)
+      }
+    }
+  }
+}

src/components/Button/Button.scss

@@ -23,6 +23,13 @@
     color: inherit;
     text-decoration: none;
   }
+
+  &--secondary {
+    background-color: $editor-light-grey;
+    &:hover {
+      background-color: $editor-mid-light-grey;
+    }
+  }
 
   &:disabled {
     background-color: $editor-grey;
@@ -35,3 +42,11 @@
   }
 }
 
+.--dark {
+  .btn--secondary {
+    background-color: $editor-mid-light-grey;
+    &:hover {
+      background-color: $editor-mid-grey;
+    }
+  }
+}

src/components/Editor/EditorSlice.js

@@ -68,8 +68,10 @@ export const EditorSlice = createSlice({
     },
     updateComponentName: (state, action) => {
       const key = action.payload.key;
-      const fileName = action.payload.name;
-      state.project.components[key].name = fileName;
+      const name = action.payload.name;
+      const extension = action.payload.extension
+      state.project.components[key].name = name;
+      state.project.components[key].extension = extension;
     },
     setError: (state, action) => {
       state.error = action.payload;

src/components/Editor/ErrorMessage/ErrorMessage.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import './ErrorMessage.css'
+import './ErrorMessage.scss'
 import { useSelector } from 'react-redux'
 
 const ErrorMessage = () => {

…nts/Editor/ErrorMessage/ErrorMessage.css …ts/Editor/ErrorMessage/ErrorMessage.scsssrc/components/Editor/ErrorMessage/ErrorMessage.css renamed to src/components/Editor/ErrorMessage/ErrorMessage.scss src/components/Editor/ErrorMessage/ErrorMessage.css renamed to src/components/Editor/ErrorMessage/ErrorMessage.scss

@@ -2,9 +2,9 @@
   color: #7e0305;
   background-color: #FDE2E1;
   padding: 0.75rem 1.25rem;
-}
 
-.error-message--content {
-  padding: 0;
-  margin: 0;
+  &--content {
+    padding: 0;
+    margin: 0;
+  }
 }

src/components/Editor/ErrorMessage/NameErrorMessage.js

@@ -1,4 +1,4 @@
-import './ErrorMessage.css'
+import './ErrorMessage.scss'
 import { useSelector } from 'react-redux'
 
 const NameErrorMessage = () => {

src/components/Editor/NewComponentButton/NewComponentButton.js

@@ -7,24 +7,9 @@ import Modal from 'react-modal';
 import { addProjectComponent, setNameError } from '../EditorSlice';
 import Button from '../../Button/Button'
 import NameErrorMessage from '../ErrorMessage/NameErrorMessage';
-import { NewFileIcon } from '../../../Icons';
-
-const allowedExtensions = {
-  "python": [
-    "py",
-    "csv",
-    "txt"
-  ]
-}
-
-const allowedExtensionsString = (projectType) => {
-  const extensionsList = allowedExtensions[projectType];
-  if (extensionsList.length === 1) {
-    return `'.${extensionsList[0]}'`
-  } else {
-    return `'.` + extensionsList.slice(0,-1).join(`', '.`) + `' or '.` + extensionsList[extensionsList.length-1] + `'`;
-  }
-}
+import { CloseIcon, NewFileIcon } from '../../../Icons';
+import { validateFileName } from '../../../utils/componentNameValidation';
+import { useCookies } from 'react-cookie';
 
 const NewComponentButton = () => {
     const [modalIsOpen, setIsOpen] = useState(false);
@@ -33,6 +18,10 @@ const NewComponentButton = () => {
     const projectComponents = useSelector((state) => state.editor.project.components);
     const componentNames = projectComponents.map(component => `${component.name}.${component.extension}`)
 
+    const [cookies] = useCookies(['fontSize', 'theme'])
+    const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
+    const theme = isDarkMode ? "dark" : "light"
+
     const closeModal = () => setIsOpen(false);
     const showModal = () => {
       dispatch(setNameError(""));
@@ -42,62 +31,42 @@ const NewComponentButton = () => {
       const fileName = document.getElementById('name').value
       const name = fileName.split('.')[0];
       const extension = fileName.split('.').slice(1).join('.');
-      if (isValidFileName(fileName)) {
+      validateFileName(fileName, projectType, componentNames, dispatch, () => {
         dispatch(addProjectComponent({extension: extension, name: name}));
         closeModal();
-      } else if (componentNames.includes(fileName)) {
-        dispatch(setNameError("File names must be unique."));
-      } else if (!allowedExtensions[projectType].includes(extension)) {
-        dispatch(setNameError(`File names must end in ${allowedExtensionsString(projectType)}.`));
-      } else {
-        dispatch(setNameError("Error"));
-      }
+      })
     }
 
-    const isValidFileName = (fileName) => {
-      const extension = fileName.split('.').slice(1).join('.')
-      if (allowedExtensions[projectType].includes(extension) && !componentNames.includes(fileName)) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-
-    const customStyles = {
-      content: {
-        top: '50%',
-        left: '50%',
-        right: 'auto',
-        bottom: 'auto',
-        marginRight: '-50%',
-        transform: 'translate(-50%, -50%)',
-      },
-      overlay: {
-        zIndex: 1000
-      }
-    };
-
     return (
-      <>
+      <div className={`--${theme}`}>
         <Button buttonText={<><NewFileIcon />Add file</>} onClickHandler={showModal} className="proj-new-component-button" />
 
         <Modal
           isOpen={modalIsOpen}
           onRequestClose={closeModal}
-          style={customStyles}
           contentLabel="New File"
-          appElement={document.getElementById('root') || undefined}
+          className='modal__content'
+          overlayClassName='modal__overlay'
+          parentSelector={() => document.querySelector('#app')}
+          appElement={document.getElementById('app') || undefined}
         >
-          <h2>Add a new file to your project</h2>
+          <div className='modal__header'>
+            <h2>Add a new file to your project</h2>
+            <button onClick={closeModal}>
+              <CloseIcon/>
+            </button>
+          </div>
 
+          <label htmlFor='name'>Name your file</label>
           <NameErrorMessage />
-          <label htmlFor='name'>Name: </label>
           <input type='text' name='name' id='name'></input>
-          <Button buttonText='Cancel' onClickHandler={closeModal} />
-          <Button buttonText='Save' onClickHandler={createComponent} />
+          <div className='modal__buttons'>
+            <Button className='btn--secondary' buttonText='Cancel' onClickHandler={closeModal} />
+            <Button buttonText='Save' onClickHandler={createComponent} />
+          </div>
 
         </Modal>
-      </>
+      </div>
     );
   }