Move to icon buttons

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-11-04 18:30:03 +01:00
parent af3043668f
commit 40cfed4240
2 changed files with 36 additions and 15 deletions

View File

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

View File

@@ -138,7 +138,21 @@ export default new Vuex.Store({
}, },
mutations: { mutations: {
SET_CONFIG(state, { key, value }) { SET_CONFIG(state, { 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) Vue.set(state.config, key, value)
}
}, },
setSearchQuery(state, searchQuery) { setSearchQuery(state, searchQuery) {
state.searchQuery = searchQuery state.searchQuery = searchQuery