✨ Show banner when in edit mode

src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="dashy">
+    <EditModeTopBanner v-if="isEditMode" />
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
     <router-view />
@@ -10,6 +11,7 @@
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
+import EditModeTopBanner from '@/components/InteractiveEditor/EditModeTopBanner.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -27,6 +29,7 @@ export default {
     Header,
     Footer,
     LoadingScreen,
+    EditModeTopBanner,
   },
   data() {
     return {
@@ -57,6 +60,9 @@ export default {
     visibleComponents() {
       return this.$store.getters.visibleComponents;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
   },
   created() {
     this.$store.dispatch('initializeConfig');

src/components/InteractiveEditor/EditItem.vue

@@ -152,10 +152,17 @@ export default {
     },
     /* Saves the updated item to VueX Store */
     saveItem() {
+      // Convert form data back into section.item data structure
       const structured = {};
       this.formData.forEach((row) => { structured[row.name] = row.value; });
+      // Some attributes need a little extra formatting
       const newItem = this.formatBeforeSave(structured);
+      // Update the data store, with new item data
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      // If we're not already in edit mode, enable it now
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      // Close edit menu
+      this.$emit('closeEditMenu');
     },
     /* Adds filed from extras list to main form, then removes from extras list */
     appendNewField(fieldId) {

src/components/InteractiveEditor/EditModeTopBanner.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="edit-mode-top-banner">
+    <span>Edit Mode Enabled</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+div.edit-mode-top-banner {
+  width: 100%;
+  text-align: center;
+  padding: 0.2rem 0;
+  background: var(--primary);
+  opacity: var(--dimming-factor);
+  span {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--background);
+  }
+}
+</style>

src/store.js

@@ -13,12 +13,14 @@ const {
   SET_MODAL_OPEN,
   SET_LANGUAGE,
   UPDATE_ITEM,
+  SET_EDIT_MODE,
 } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
     lang: '', // The users language, auto-detected or read from local storage / config
+    editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
   getters: {
@@ -59,6 +61,9 @@ const store = new Vuex.Store({
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
+    [SET_EDIT_MODE](state, editMode) {
+      state.editMode = editMode;
+    },
     [UPDATE_ITEM](state, payload) {
       const { itemId, newItem } = payload;
       const newConfig = state.config;

src/utils/StoreMutations.js

@@ -4,6 +4,7 @@ const KEY_NAMES = [
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'UPDATE_ITEM',
+  'SET_EDIT_MODE',
 ];
 
 // Convert array of key names into an object, and export