diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 470a186f..9143a465 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -47,7 +47,6 @@ export default {
},
methods: {
updateIconSize(iconSize) {
- this.$emit('iconSizeUpdated', iconSize);
this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
},
tooltip(content) {
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index f7fea7a0..f4c624e5 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -32,11 +32,6 @@ import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
export default {
name: 'LayoutSelector',
- data() {
- return {
- input: '',
- };
- },
props: {
displayLayout: String,
},
@@ -47,7 +42,6 @@ export default {
},
methods: {
updateDisplayLayout(layout) {
- this.$emit('layoutUpdated', layout);
this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
},
tooltip(content) {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 36f9226a..dd3834f1 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -7,8 +7,8 @@
@@ -106,12 +106,6 @@ export default {
clearFilterInput() {
this.$refs.SearchBar.clearFilterInput();
},
- updateDisplayLayout(layout) {
- this.$emit('change-display-layout', layout);
- },
- updateIconSize(iconSize) {
- this.$emit('change-icon-size', iconSize);
- },
getInitialTheme() {
return this.appConfig.theme || '';
},
diff --git a/src/store.js b/src/store.js
index fa986990..f978bcc5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -86,6 +86,12 @@ const store = new Vuex.Store({
});
return foundSection;
},
+ layout(state) {
+ return state.config.appConfig.layout || 'auto';
+ },
+ iconSize(state) {
+ return state.config.appConfig.iconSize || 'medium';
+ },
},
mutations: {
[SET_CONFIG](state, config) {
@@ -217,12 +223,15 @@ const store = new Vuex.Store({
},
[SET_ITEM_LAYOUT](state, layout) {
state.config.appConfig.layout = layout;
+ InfoHandler('Layout updated', InfoKeys.VISUAL);
},
[SET_ITEM_SIZE](state, iconSize) {
state.config.appConfig.iconSize = iconSize;
+ InfoHandler('Item size updated', InfoKeys.VISUAL);
},
[UPDATE_CUSTOM_CSS](state, customCss) {
state.config.appConfig.customCss = customCss;
+ InfoHandler('Custom colors updated', InfoKeys.VISUAL);
},
},
actions: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ef782c04..bba5b52b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,8 +4,6 @@
this.filterTiles(section.items, this.searchValue));
},
/* Updates layout (when button clicked), and saves in local storage */
- layoutOrientation: {
- get() { return this.appConfig.layout || Defaults.layout; },
- set: function setLayout(layout) {
- localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
- this.layout = layout;
- },
+ layoutOrientation() {
+ return this.$store.getters.layout;
},
/* Updates icon size (when button clicked), and saves in local storage */
- iconSize: {
- get() { return this.appConfig.iconSize || Defaults.iconSize; },
- set: function setIconSize(iconSize) {
- localStorage.setItem(localStorageKeys.ICON_SIZE, iconSize);
- this.itemSizeBound = iconSize;
- },
+ iconSize() {
+ return this.$store.getters.iconSize;
+ },
+ },
+ watch: {
+ layoutOrientation(layout) {
+ localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
+ this.layout = layout;
+ },
+ iconSize(size) {
+ localStorage.setItem(localStorageKeys.ICON_SIZE, size);
+ this.itemSizeBound = size;
},
},
methods: {
@@ -158,14 +158,6 @@ export default {
getDisplayData(section) {
return !section.displayData ? {} : section.displayData;
},
- /* Sets layout attribute, which is used by Section */
- setLayoutOrientation(layout) {
- this.layoutOrientation = layout;
- },
- /* Sets item size attribute, which is used by Section */
- setItemSize(itemSize) {
- this.iconSize = itemSize;
- },
/* Update data when modal is open (so that key bindings can be disabled) */
updateModalVisibility(modalState) {
this.$store.commit('SET_MODAL_OPEN', modalState);