diff options
author | dartcafe <github@dartcafe.de> | 2020-08-31 18:56:43 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-08-31 18:56:43 +0300 |
commit | 6542bd60a22e244d081a9d689e75997665244e35 (patch) | |
tree | 246a633536462a0df2b3fc94c369effce34e49d9 /src | |
parent | 1289959a2ceba9d214a1222b5f7b89ed12488419 (diff) |
Add settings
Diffstat (limited to 'src')
-rw-r--r-- | src/js/App.vue | 52 | ||||
-rw-r--r-- | src/js/components/Navigation/NavigationSettings.vue | 27 | ||||
-rw-r--r-- | src/js/components/SideBar/SideBarTabConfiguration.vue | 2 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteTable.vue | 11 | ||||
-rw-r--r-- | src/js/store/modules/settings.js | 1 |
5 files changed, 40 insertions, 53 deletions
diff --git a/src/js/App.vue b/src/js/App.vue index f979106c..08a849e0 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -21,7 +21,7 @@ --> <template> - <Content app-name="polls" :class="[transitionClass, { 'experimental': settings.experimental, 'bgimage': settings.useImage, 'bgcolored': settings.experimental }]"> + <Content app-name="polls" :style="appStyle" :class="[transitionClass, { 'experimental': settings.experimental, 'bgimage': settings.useImage, 'bgcolored': settings.experimental }]"> <Navigation v-if="getCurrentUser()" :class="{ 'glassy': settings.glassyNavigation }" /> <router-view /> <SideBar v-if="sideBarOpen && $store.state.poll.id" @@ -60,7 +60,16 @@ export default { ...mapState({ settings: state => state.settings.user, }), - + appStyle() { + if (this.settings.useImage && this.settings.experimental) { + return { + backgroundImage: 'url(' + this.settings.imageUrl + ')', + backgroundSize: 'cover', + } + } else { + return {} + } + }, }, created() { @@ -340,45 +349,6 @@ input { // experimental background image &.app-polls.bgimage { - background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)'); - background-size: cover; - .glassy { - backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, 0.5); - } - .app-navigation { - border-right: 0px; - box-shadow: 2px 0 6px var(--color-box-shadow); - } - .app-content { - background-color: transparent; - } - [class*='area__'] { - box-shadow: 2px 2px 6px var(--color-box-shadow); - margin: 12px; - } - } -} - -.experimental { - &.app-polls.bgcolored { - .app-navigation { - border-right: 0px; - box-shadow: 2px 0 6px var(--color-box-shadow); - } - .app-content { - background-color: var(--color-primary-light); - [class*='area__'] { - box-shadow: 2px 2px 6px var(--color-box-shadow); - margin: 12px; - } - } - } - - // experimental background image - &.app-polls.bgimage { - background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)'); - background-size: cover; .glassy { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); diff --git a/src/js/components/Navigation/NavigationSettings.vue b/src/js/components/Navigation/NavigationSettings.vue index d17f7983..4c31d57f 100644 --- a/src/js/components/Navigation/NavigationSettings.vue +++ b/src/js/components/Navigation/NavigationSettings.vue @@ -22,22 +22,28 @@ <template> <div> + <input id="calendarPeek" v-model="calendarPeek" + type="checkbox" class="checkbox"> + <label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label> + <input id="experimental" v-model="experimental" type="checkbox" class="checkbox"> - <label for="experimental">{{ t('polls', 'Activate experimental settings.') }}</label> + <label for="experimental">{{ t('polls', 'Try experimental styles') }}</label> <div v-if="experimental"> - <input id="useimage" v-model="useImage" + <input id="useImage" v-model="useImage" type="checkbox" class="checkbox"> - <label for="useimage">{{ t('polls', 'Use background image.') }}</label> + <label for="useImage">{{ t('polls', 'Use background image') }}</label> + + <input v-if="useImage" v-model="imageUrl" type="text"> - <!-- <input v-if="bgImage" v-model="imageurl" type="text"> --> <input id="glassyNavigation" v-model="glassyNavigation" type="checkbox" class="checkbox"> - <label for="glassyNavigation">{{ t('polls', 'Glassy navigation.') }}</label> + <label for="glassyNavigation">{{ t('polls', 'Glassy navigation') }}</label> + <input id="glassySidebar" v-model="glassySidebar" type="checkbox" class="checkbox"> - <label for="glassySidebar">{{ t('polls', 'Glassy sidebar.') }}</label> + <label for="glassySidebar">{{ t('polls', 'Glassy sidebar') }}</label> </div> </div> </template> @@ -45,6 +51,7 @@ <script> import { mapState } from 'vuex' + export default { name: 'NavigationSettings', @@ -85,6 +92,14 @@ export default { this.writeValue({ glassyNavigation: value }) }, }, + calendarPeek: { + get() { + return this.settings.calendarPeek + }, + set(value) { + this.writeValue({ calendarPeek: value }) + }, + }, glassySidebar: { get() { return this.settings.glassySidebar diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue index 5339b250..aca08205 100644 --- a/src/js/components/SideBar/SideBarTabConfiguration.vue +++ b/src/js/components/SideBar/SideBarTabConfiguration.vue @@ -109,13 +109,13 @@ </template> <script> -import ConfigBox from '../Base/ConfigBox' import debounce from 'lodash/debounce' import { mapState } from 'vuex' import { showSuccess, showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' import moment from '@nextcloud/moment' import { DatetimePicker } from '@nextcloud/vue' +import ConfigBox from '../Base/ConfigBox' export default { name: 'SideBarTabConfiguration', diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue index 513e8225..6ece1213 100644 --- a/src/js/components/VoteTable/VoteTable.vue +++ b/src/js/components/VoteTable/VoteTable.vue @@ -43,7 +43,7 @@ :table-mode="tableMode" /> </transition-group> - <div v-if="poll.type === 'datePoll' && getCurrentUser()" class="vote-table__calendar"> + <div v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" class="vote-table__calendar"> <CalendarPeek v-for="(option) in rankedOptions" :key="option.id" @@ -113,8 +113,8 @@ export default { components: { Actions, ActionButton, - Modal, CalendarPeek, + Modal, VoteTableHeaderItem, VoteTableVoteItem, }, @@ -141,14 +141,15 @@ export default { computed: { ...mapState({ - poll: state => state.poll, acl: state => state.poll.acl, + poll: state => state.poll, + settings: state => state.settings.user, }), ...mapGetters({ - sortedOptions: 'poll/options/sorted', - participants: 'poll/participants', expired: 'poll/expired', + participants: 'poll/participants', + sortedOptions: 'poll/options/sorted', }), rankedOptions() { diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js index 406c18bb..a3dc6866 100644 --- a/src/js/store/modules/settings.js +++ b/src/js/store/modules/settings.js @@ -27,6 +27,7 @@ const defaultSettings = () => { return { user: { experimental: false, + calendarPeek: false, useImage: false, imageUrl: '', glassyNavigation: false, |