✨ Adds an option to enable edit mode, in settings

src/components/Settings/ConfigLauncher.vue

@@ -5,7 +5,10 @@
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
         v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
-       <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
+      <IconInteractiveEditor @click="startInteractiveEditor()" tabindex="-2"
+        v-tooltip="tooltip(enterEditModeTooltip)"
+        :class="isEditMode ? 'disabled' : ''" />
+      <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
         v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" />
     </div>
 
@@ -50,6 +53,7 @@ import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-start-editing.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
 import IconHome from '@/assets/interface-icons/application-home.svg';
 import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
@@ -67,6 +71,7 @@ export default {
     ConfigContainer,
     LanguageSwitcher,
     IconSpanner,
+    IconInteractiveEditor,
     IconViewMode,
     IconHome,
     IconWorkspaceView,
@@ -82,6 +87,15 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+    enterEditModeTooltip() {
+      // Change tooltip text for 'Enter Edit Mode' button, when already in Edit Mode
+      return this.$t(
+        `interactive-editor.${this.isEditMode ? 'edit-mode-subtitle' : 'start-editing-tooltip'}`,
+      );
+    },
   },
   methods: {
     showEditor: function show() {
@@ -109,34 +123,24 @@ export default {
     closeViewSwitcher() {
       this.viewSwitcherOpen = false;
     },
+    startInteractiveEditor() {
+      if (!this.isEditMode) {
+        this.$store.commit(Keys.SET_EDIT_MODE, true);
+      }
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+
 .config-options {
+  @extend .svg-button;
   display: flex;
   flex-direction: column;
   color: var(--settings-text-color);
   min-width: 3.2rem;
-  svg {
-    path {
-      fill: var(--settings-text-color);
-    }
-    width: 1rem;
-    height: 1rem;
-    margin: 0.2rem;
-    padding: 0.2rem;
-    text-align: center;
-    background: var(--background);
-    border: 1px solid currentColor;
-    border-radius: var(--curve-factor);
-    cursor: pointer;
-    &:hover, &.selected {
-      background: var(--settings-text-color);
-      path { fill: var(--background); }
-    }
-  }
 }
 
 .view-switcher {