mirror of https://github.com/Lissy93/dashy.git
🚧 Adds responsivness, translations, icons and layout to bottom banner
This commit is contained in:
Alicia Sykes
parent
6f0ee82821
commit
03906130c7
|
|
@ -168,5 +168,22 @@
|
|||
"newtab": "New Tab",
|
||||
"modal": "Pop-Up Modal",
|
||||
"workspace": "Workspace View"
|
||||
},
|
||||
"interactive-editor": {
|
||||
"edit-page-info-btn": "Edit Page Info",
|
||||
"edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
|
||||
"edit-app-config-btn": "Edit App Config",
|
||||
"edit-app-config-tooltip": "All other app configuration options",
|
||||
"save-locally-btn": "Save Locally",
|
||||
"save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
|
||||
"save-disk-btn": "Save to Disk",
|
||||
"save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
|
||||
"export-config-btn": "Export Config",
|
||||
"export-config-tooltip": "View and export new config, either to a file, or to clipboard",
|
||||
"cancel-changes-btn": "Reset Changes",
|
||||
"cancel-changes-tooltip": "Reset current modifications. This will not affect your saved config",
|
||||
"edit-mode-name": "Edit Mode",
|
||||
"edit-mode-subtitle": "You are in Edit Mode",
|
||||
"edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved."
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,59 @@
|
|||
<template>
|
||||
<!-- Intro Info -->
|
||||
<div class="edit-mode-bottom-banner">
|
||||
<div class="edit-banner-section intro-container">
|
||||
<p class="edit-mode-intro l-1">You are in Edit Mode</p>
|
||||
<p class="section-sub-title edit-mode-intro l-1">
|
||||
{{ $t('interactive-editor.edit-mode-subtitle') }}
|
||||
</p>
|
||||
<p class="edit-mode-intro l-2">
|
||||
This means you can make modifications to your config,
|
||||
and preview the results, but until you save, none of your changes will be preserved.
|
||||
{{ $t('interactive-editor.edit-mode-description') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="edit-banner-section"></div>
|
||||
<div class="edit-banner-section empty-space"></div>
|
||||
<!-- Save Buttons -->
|
||||
<div class="edit-banner-section save-buttons-container">
|
||||
<Button :click="reset">Reset</Button>
|
||||
<Button>Export Config</Button>
|
||||
<Button>Save Locally</Button>
|
||||
<Button>Save to Disk</Button>
|
||||
<p class="section-sub-title">Config Saving Options</p>
|
||||
<Button
|
||||
v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.export-config-btn') }}
|
||||
<ExportIcon />
|
||||
</Button>
|
||||
<Button
|
||||
:click="reset"
|
||||
v-tooltip="tooltip($t('interactive-editor.cancel-changes-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.cancel-changes-btn') }}
|
||||
<CancelIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="tooltip($t('interactive-editor.save-locally-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.save-locally-btn') }}
|
||||
<SaveLocallyIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="tooltip($t('interactive-editor.save-disk-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.save-disk-btn') }}
|
||||
<SaveToDiskIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<!-- Open Modal Buttons -->
|
||||
<div class="edit-banner-section edit-site-config-buttons">
|
||||
<p class="section-sub-title">Edit Site Data</p>
|
||||
<Button
|
||||
v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.edit-page-info-btn') }}
|
||||
<PageInfoIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
|
||||
>
|
||||
{{ $t('interactive-editor.edit-app-config-btn') }}
|
||||
<AppConfigIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,16 +62,32 @@
|
|||
import Button from '@/components/FormElements/Button';
|
||||
import StoreKeys from '@/utils/StoreMutations';
|
||||
|
||||
import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
|
||||
import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
|
||||
import ExportIcon from '@/assets/interface-icons/interactive-editor-export-changes.svg';
|
||||
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';
|
||||
|
||||
export default {
|
||||
name: 'EditModeSaveMenu',
|
||||
components: {
|
||||
Button,
|
||||
SaveLocallyIcon,
|
||||
SaveToDiskIcon,
|
||||
ExportIcon,
|
||||
CancelIcon,
|
||||
AppConfigIcon,
|
||||
PageInfoIcon,
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
|
||||
this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
|
||||
},
|
||||
tooltip(content) {
|
||||
return { content, trigger: 'hover focus', delay: 250 };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -40,39 +97,59 @@ export default {
|
|||
|
||||
div.edit-mode-bottom-banner {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
z-index: 5;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
justify-content: space-between;
|
||||
padding: 0.25rem 0;
|
||||
border-top: 2px solid var(--primary);
|
||||
background: var(--background);
|
||||
z-index: 5;
|
||||
background: var(--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 big-screen-up { grid-template-columns: 25% 50% 25%; }
|
||||
|
||||
/* Main sections */
|
||||
.edit-banner-section {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.edit-banner-section.intro-container {
|
||||
max-width: 35%;
|
||||
p.edit-mode-intro {
|
||||
color: var(--primary);
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
/* Section sub-titles */
|
||||
p.section-sub-title {
|
||||
margin: 0;
|
||||
&.l-1 {
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
/* Intro-text container */
|
||||
&.intro-container {
|
||||
p.edit-mode-intro {
|
||||
margin: 0;
|
||||
color: var(--primary);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-banner-section.save-buttons-container {
|
||||
display: flex;
|
||||
place-self: center;
|
||||
button {
|
||||
margin: 0.25rem;
|
||||
height: fit-content;
|
||||
/* Button containers */
|
||||
&.edit-site-config-buttons,
|
||||
&.save-buttons-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
button {
|
||||
margin: 0.25rem;
|
||||
height: fit-content;
|
||||
}
|
||||
p.section-sub-title {
|
||||
grid-column-start: span 2;
|
||||
}
|
||||
}
|
||||
&.save-buttons-container {
|
||||
grid-row-start: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile layout */
|
||||
@include tablet-down {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.edit-banner-section,
|
||||
.edit-banner-section.intro-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue