diff --git a/public/translations/en.json b/public/translations/en.json index eec4fa86a..5ee05037e 100644 --- a/public/translations/en.json +++ b/public/translations/en.json @@ -123,10 +123,20 @@ "edit": "Edit", "view": "View", "removeStepModal": { - "heading": "Remove instruction step?", - "warning": "Are you sure you want to delete this instructions step? You will not be able to get this back.", + "heading": "Remove instructions?", + "warning": "You will not be able to get deleted instructions back.", + "studentsWarning": "Students who have already started working on this project will still be able to see the instructions as they were when they started.", + "scopeLegend": "What do you want to remove?", + "scope": { + "currentStep": "Remove current step only", + "allSteps": "Remove all steps" + }, + "confirm": { + "currentStep": "Remove current step", + "allSteps": "Remove all steps" + }, "cancel": "Cancel", - "removeStep": "Remove step" + "removeInstructions": "Remove instructions" } }, "projectsPanel": { diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss index f3a9eadc8..b42ebfe5d 100644 --- a/src/assets/stylesheets/Instructions.scss +++ b/src/assets/stylesheets/Instructions.scss @@ -401,3 +401,13 @@ } } } + +.modal-content--remove-step { + .modal-content__body { + row-gap: var(--space-2); + } + + .rpf-fieldset { + margin-block-end: 0; + } +} diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index a628c3db7..6cb3235d9 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -27,11 +27,6 @@ display: flex; flex-direction: column; - label, - legend { - font-weight: $font-weight-bold; - } - input[type="text"] { @include font-size-1(regular); inline-size: 100%; @@ -100,6 +95,10 @@ .modal-content__input-section { display: flex; flex-direction: column; + + label { + font-weight: $font-weight-bold; + } } .modal-content__buttons { @@ -143,7 +142,7 @@ .modal-overlay { background-color: rgba(0, 0, 0, 0.5); - input { + input[type="text"] { border: 2px solid $rpf-white; background-color: $rpf-grey-700; color: inherit; @@ -175,7 +174,7 @@ .modal-overlay { background-color: rgba(67, 69, 76, 0.5); - input { + input[type="text"] { border: 2px solid $rpf-grey-100; &:focus-visible { diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 00e85325e..b9129af2b 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -19,6 +19,8 @@ import { insertStepAfter, removeStepAt, updateStepMarkdown, + REMOVE_ALL_STEPS, + REMOVE_CURRENT_STEP, } from "../../../../utils/instructionSteps"; import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate"; import { Button } from "@raspberrypifoundation/design-system-react"; @@ -30,6 +32,7 @@ import BinIcon from "../../../../assets/icons/bin.svg"; const InstructionsPanel = () => { const [tabIndex, setTabIndex] = useState(0); const [showRemoveStepModal, setShowRemoveStepModal] = useState(false); + const [removeScope, setRemoveScope] = useState(REMOVE_CURRENT_STEP); const instructionsEditable = useSelector( (state) => state.editor?.instructionsEditable, ); @@ -80,9 +83,25 @@ const InstructionsPanel = () => { dispatch(setCurrentStepPosition(currentStepPosition + 1)); }; - const confirmRemoveStep = () => { - dispatch(setProjectInstructions(removeStepAt(steps, currentStepPosition))); - dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0))); + const confirmRemoveText = hasMultipleSteps + ? t(`instructionsPanel.removeStepModal.confirm.${removeScope}`) + : t("instructionsPanel.removeStepModal.removeInstructions"); + + const openRemoveStepModal = () => { + setRemoveScope(REMOVE_CURRENT_STEP); + setShowRemoveStepModal(true); + }; + + const confirmRemove = () => { + if (removeScope === REMOVE_ALL_STEPS) { + dispatch(setProjectInstructions([])); + dispatch(setCurrentStepPosition(0)); + } else { + dispatch( + setProjectInstructions(removeStepAt(steps, currentStepPosition)), + ); + dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0))); + } setShowRemoveStepModal(false); }; @@ -97,6 +116,7 @@ const InstructionsPanel = () => { instructionsEditable && !hasInstructions ? [