tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ Adds an option to enable edit mode, in settings

This commit is contained in:
Alicia Sykes 2021-10-22 00:30:43 +01:00
parent 2876357297
commit 6f927797d8
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Settings/ConfigLauncher.vue
View File

@ -5,6 +5,9 @@
<div class="config-buttons"> <div class="config-buttons">
<IconSpanner @click="showEditor()" tabindex="-2" <IconSpanner @click="showEditor()" tabindex="-2"
v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" /> v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
<IconInteractiveEditor @click="startInteractiveEditor()" tabindex="-2"
v-tooltip="tooltip(enterEditModeTooltip)"
:class="isEditMode ? 'disabled' : ''" />
<IconViewMode @click="openChangeViewMenu()" tabindex="-2" <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" /> v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" />
</div> </div>
@ -50,6 +53,7 @@ import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults'; import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
import Keys from '@/utils/StoreMutations'; import Keys from '@/utils/StoreMutations';
import IconSpanner from '@/assets/interface-icons/config-editor.svg'; 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 IconViewMode from '@/assets/interface-icons/application-change-view.svg';
import IconHome from '@/assets/interface-icons/application-home.svg'; import IconHome from '@/assets/interface-icons/application-home.svg';
import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg'; import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
@ -67,6 +71,7 @@ export default {
ConfigContainer, ConfigContainer,
LanguageSwitcher, LanguageSwitcher,
IconSpanner, IconSpanner,
IconInteractiveEditor,
IconViewMode, IconViewMode,
IconHome, IconHome,
IconWorkspaceView, IconWorkspaceView,
@ -82,6 +87,15 @@ export default {
pageInfo() { pageInfo() {
return this.$store.getters.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: { methods: {
showEditor: function show() { showEditor: function show() {
@ -109,34 +123,24 @@ export default {
closeViewSwitcher() { closeViewSwitcher() {
this.viewSwitcherOpen = false; this.viewSwitcherOpen = false;
}, },
startInteractiveEditor() {
if (!this.isEditMode) {
this.$store.commit(Keys.SET_EDIT_MODE, true);
}
},
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/style-helpers.scss';
.config-options { .config-options {
@extend .svg-button;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--settings-text-color); color: var(--settings-text-color);
min-width: 3.2rem; 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 { .view-switcher {