🚧 WIP, redo layout and size, to use VueX state

This commit is contained in:
Alicia Sykes 2021-10-25 23:41:05 +01:00
parent 06d08a8fff
commit b882a38950
No known key found for this signature in database
GPG Key ID: 3D0EA672EE9945ED
4 changed files with 14 additions and 0 deletions

View File

@ -25,6 +25,7 @@
</template> </template>
<script> <script>
import StoreKeys from '@/utils/StoreMutations';
import IconSmall from '@/assets/interface-icons/icon-size-small.svg'; import IconSmall from '@/assets/interface-icons/icon-size-small.svg';
import IconMedium from '@/assets/interface-icons/icon-size-medium.svg'; import IconMedium from '@/assets/interface-icons/icon-size-medium.svg';
import IconLarge from '@/assets/interface-icons/icon-size-large.svg'; import IconLarge from '@/assets/interface-icons/icon-size-large.svg';
@ -47,6 +48,7 @@ export default {
methods: { methods: {
updateIconSize(iconSize) { updateIconSize(iconSize) {
this.$emit('iconSizeUpdated', iconSize); this.$emit('iconSizeUpdated', iconSize);
this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
}, },
tooltip(content) { tooltip(content) {
return { content, trigger: 'hover focus', delay: 250 }; return { content, trigger: 'hover focus', delay: 250 };

View File

@ -25,6 +25,7 @@
</template> </template>
<script> <script>
import StoreKeys from '@/utils/StoreMutations';
import IconDeafault from '@/assets/interface-icons/layout-default.svg'; import IconDeafault from '@/assets/interface-icons/layout-default.svg';
import IconHorizontal from '@/assets/interface-icons/layout-horizontal.svg'; import IconHorizontal from '@/assets/interface-icons/layout-horizontal.svg';
import IconVertical from '@/assets/interface-icons/layout-vertical.svg'; import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
@ -47,6 +48,7 @@ export default {
methods: { methods: {
updateDisplayLayout(layout) { updateDisplayLayout(layout) {
this.$emit('layoutUpdated', layout); this.$emit('layoutUpdated', layout);
this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
}, },
tooltip(content) { tooltip(content) {
return { content, trigger: 'hover focus', delay: 250 }; return { content, trigger: 'hover focus', delay: 250 };

View File

@ -14,6 +14,8 @@ const {
UPDATE_CONFIG, UPDATE_CONFIG,
SET_MODAL_OPEN, SET_MODAL_OPEN,
SET_LANGUAGE, SET_LANGUAGE,
SET_ITEM_LAYOUT,
SET_ITEM_SIZE,
UPDATE_ITEM, UPDATE_ITEM,
SET_EDIT_MODE, SET_EDIT_MODE,
UPDATE_PAGE_INFO, UPDATE_PAGE_INFO,
@ -164,6 +166,12 @@ const store = new Vuex.Store({
}); });
state.config = config; state.config = config;
}, },
[SET_ITEM_LAYOUT](state, layout) {
state.config.appConfig.layout = layout;
},
[SET_ITEM_SIZE](state, iconSize) {
state.config.appConfig.iconSize = iconSize;
},
}, },
actions: { actions: {
/* Called when app first loaded. Reads config and sets state */ /* Called when app first loaded. Reads config and sets state */

View File

@ -5,6 +5,8 @@ const KEY_NAMES = [
'SET_MODAL_OPEN', 'SET_MODAL_OPEN',
'SET_LANGUAGE', 'SET_LANGUAGE',
'SET_EDIT_MODE', 'SET_EDIT_MODE',
'SET_ITEM_LAYOUT',
'SET_ITEM_SIZE',
'UPDATE_ITEM', 'UPDATE_ITEM',
'UPDATE_PAGE_INFO', 'UPDATE_PAGE_INFO',
'UPDATE_APP_CONFIG', 'UPDATE_APP_CONFIG',