diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue index 6db3ea6b..e2b574c4 100644 --- a/src/components/InteractiveEditor/EditModeSaveMenu.vue +++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue @@ -51,10 +51,11 @@ -
+

{{ $t('interactive-editor.menu.edit-site-data-subheading') }}

+ + + +
- + +
@@ -84,6 +96,7 @@ import Button from '@/components/FormElements/Button'; import StoreKeys from '@/utils/StoreMutations'; import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo'; import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig'; +import EditMultiPages from '@/components/InteractiveEditor/EditMultiPages'; import { modalNames } from '@/utils/defaults'; import AccessError from '@/components/Configuration/AccessError'; @@ -93,6 +106,7 @@ import ExportIcon from '@/assets/interface-icons/interactive-editor-export-chang import CancelIcon from '@/assets/interface-icons/interactive-editor-cancel-changes.svg'; import AppConfigIcon from '@/assets/interface-icons/interactive-editor-app-config.svg'; import PageInfoIcon from '@/assets/interface-icons/interactive-editor-page-info.svg'; +import MultiPagesIcon from '@/assets/interface-icons/config-pages.svg'; export default { name: 'EditModeSaveMenu', @@ -100,13 +114,15 @@ export default { components: { Button, EditPageInfo, + EditAppConfig, + EditMultiPages, SaveLocallyIcon, SaveToDiskIcon, ExportIcon, CancelIcon, AppConfigIcon, PageInfoIcon, - EditAppConfig, + MultiPagesIcon, AccessError, }, computed: { @@ -138,6 +154,10 @@ export default { this.$modal.show(modalNames.EDIT_APP_CONFIG); this.$store.commit(StoreKeys.SET_MODAL_OPEN, true); }, + openEditMultiPages() { + this.$modal.show(modalNames.EDIT_MULTI_PAGES); + this.$store.commit(StoreKeys.SET_MODAL_OPEN, true); + }, tooltip(content) { return { content, trigger: 'hover focus', delay: 250 }; }, @@ -145,7 +165,11 @@ export default { this.$toasted.show(message, { className: `toast-${success ? 'success' : 'error'}` }); }, saveLocally() { - this.saveConfigLocally(this.config); + const msg = this.$t('interactive-editor.menu.save-locally-warning'); + const youSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals + if (youSure) { + this.saveConfigLocally(this.config); + } }, writeToDisk() { this.writeConfigToDisk(this.config); @@ -168,14 +192,15 @@ div.edit-mode-bottom-banner { background: var(--interactive-editor-background-darker); box-shadow: 0 -5px 7px var(--transparent-50); grid-template-columns: 45% 10% 45%; - @include laptop-up { grid-template-columns: 40% 20% 40%; } - @include monitor-up { grid-template-columns: 30% 40% 30%; } + @include laptop-up { grid-template-columns: 50% 10% 40%; } + @include monitor-up { grid-template-columns: 40% 30% 30%; } @include big-screen-up { grid-template-columns: 25% 50% 25%; } /* Main sections */ .edit-banner-section { padding: 0.5rem; height: 90%; + display: grid; /* Section sub-titles */ p.section-sub-title { margin: 0; @@ -196,22 +221,24 @@ div.edit-mode-bottom-banner { padding: 0 0.5rem; } } + button { + margin: 0.25rem; + height: stretch; + max-height: 3rem; + } /* Button containers */ - &.edit-site-config-buttons, - &.save-buttons-container { - display: grid; - grid-template-columns: repeat(2, 1fr); - button { - margin: 0.25rem; - height: stretch; - max-height: 3rem; - } + &.edit-config-buttons-container { + grid-template-columns: repeat(3, 1fr); p.section-sub-title { - grid-column-start: span 2; + grid-column-start: span 3; } } &.save-buttons-container { grid-row-start: span 2; + grid-template-columns: repeat(2, 1fr); + p.section-sub-title { + grid-column-start: span 2; + } } } diff --git a/src/components/InteractiveEditor/EditMultiPages.vue b/src/components/InteractiveEditor/EditMultiPages.vue new file mode 100644 index 00000000..fe310b80 --- /dev/null +++ b/src/components/InteractiveEditor/EditMultiPages.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/components/InteractiveEditor/SaveCancelButtons.vue b/src/components/InteractiveEditor/SaveCancelButtons.vue index b2f77424..73764bdb 100644 --- a/src/components/InteractiveEditor/SaveCancelButtons.vue +++ b/src/components/InteractiveEditor/SaveCancelButtons.vue @@ -56,6 +56,9 @@ export default { path { fill: var(--interactive-editor-background); } } } + &:focus { + box-shadow: 1px 1px 6px var(--interactive-editor-color); + } } }