Move to icon buttons

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Author: juliusknorr

src/components/navigation/AppNavigationBoard.vue

@@ -68,24 +68,28 @@
 			<ActionButton :icon="!showDueSettings ? 'icon-notifications-dark' : 'icon-view-previous' " @click="showDueSettings=!showDueSettings">
 				{{ t('deck', 'Due date reminders') }}
 			</ActionButton>
-			<ActionRadio v-if="showDueSettings"
+
+			<ActionButton v-if="showDueSettings"
 				name="notification"
-				:checked="board.settings['notify-due'] === 'all'"
-				@change="updateSetting('notify-due', 'all')">
+				icon="icon-sound"
+				:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
+				@click="updateSetting('notify-due', 'all')">
 				{{ t('deck', 'All cards') }}
-			</ActionRadio>
-			<ActionRadio v-if="showDueSettings"
+			</ActionButton>
+			<ActionButton v-if="showDueSettings"
 				name="notification"
-				:checked="board.settings['notify-due'] === 'assigned'"
-				@change="updateSetting('notify-due', 'assigned')">
+				icon="icon-user"
+				:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
+				@click="updateSetting('notify-due', 'assigned')">
 				{{ t('deck', 'Assigned cards') }}
-			</ActionRadio>
-			<ActionRadio v-if="showDueSettings"
+			</ActionButton>
+			<ActionButton v-if="showDueSettings"
 				name="notification"
-				:checked="board.settings['notify-due'] === 'off'"
-				@change="updateSetting('notify-due', 'off')">
+				icon="icon-sound-off"
+				:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
+				@click="updateSetting('notify-due', 'off')">
 				{{ t('deck', 'No notifications') }}
-			</ActionRadio>
+			</ActionButton>
 
 			<ActionButton v-if="canManage && !showDueSettings"
 				icon="icon-delete"
@@ -108,7 +112,7 @@
 </template>
 
 <script>
-import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton, ActionRadio } from '@nextcloud/vue'
+import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 
 export default {
@@ -120,7 +124,6 @@ export default {
 		ColorPicker,
 		Actions,
 		ActionButton,
-		ActionRadio,
 	},
 	directives: {
 		ClickOutside,
@@ -299,4 +302,8 @@ export default {
 			background-size: 14px;
 		}
 	}
+
+	.forced-active {
+		box-shadow: inset 4px 0 var(--color-primary-element);
+	}
 </style>

src/store/main.js

@@ -138,7 +138,21 @@ export default new Vuex.Store({
 	},
 	mutations: {
 		SET_CONFIG(state, { key, value }) {
-			Vue.set(state.config, key, value)
+			const [scope, id, configKey] = key.split(':', 3)
+			let indexExisting = -1
+			switch (scope) {
+			case 'board':
+				indexExisting = state.boards.findIndex((b) => {
+					return id === '' + b.id
+				})
+
+				if (indexExisting > -1) {
+					Vue.set(state.boards[indexExisting].settings, configKey, value)
+				}
+				break
+			default:
+				Vue.set(state.config, key, value)
+			}
 		},
 		setSearchQuery(state, searchQuery) {
 			state.searchQuery = searchQuery