diff options
author | dartcafe <github@dartcafe.de> | 2020-09-16 19:45:15 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-09-16 19:45:15 +0300 |
commit | 4765dd1283c94143842faa3c0b9a84dcf3a5d58f (patch) | |
tree | 2511594d43515f2eb2bf4b1636cfa7cb007ea67f | |
parent | 197c8e2265275c4bad0c6cce4da71c53ee62502b (diff) |
initialv1.5.2-view
-rw-r--r-- | src/js/components/VoteTable/VoteTable.vue | 10 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteTableHeaderItem.vue | 29 | ||||
-rw-r--r-- | src/js/store/modules/settings.js | 4 | ||||
-rw-r--r-- | src/js/views/Vote.vue | 59 |
4 files changed, 85 insertions, 17 deletions
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue index 73e0a565..d19cbc65 100644 --- a/src/js/components/VoteTable/VoteTable.vue +++ b/src/js/components/VoteTable/VoteTable.vue @@ -21,7 +21,7 @@ --> <template lang="html"> - <div class="vote-table" :class="[tableMode ? 'desktop' : 'mobile', { expired: expired }]"> + <div class="vote-table" :class="[viewMode, { expired: expired }]"> <div class="vote-table__users fixed"> <UserItem v-for="(participant) in participants" :key="participant.userId" @@ -41,7 +41,7 @@ :option="option" :class="{ 'confirmed' : option.confirmed }" :poll-type="poll.type" - :table-mode="tableMode" /> + :view-mode="viewMode" /> </transition-group> <transition-group v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" @@ -133,9 +133,9 @@ export default { mixins: [confirmOption], props: { - tableMode: { - type: Boolean, - default: false, + viewMode: { + type: String, + default: 'desktop', }, ranked: { type: Boolean, diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue index b6400f58..b914e1f0 100644 --- a/src/js/components/VoteTable/VoteTableHeaderItem.vue +++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue @@ -23,12 +23,12 @@ <template> <div class="vote-table-header-item" :class=" { winner: isWinner }"> - <OptionItem :option="option" :display="tableMode ? 'dateBox' : 'textBox'" /> + <OptionItem :option="option" :display="optionStyle" /> <Confirmation v-if="isConfirmed" :option="option" /> <Counter v-else :show-maybe="Boolean(poll.allowMaybe)" :option="option" - :counter-style="tableMode ? 'iconStyle' : 'barStyle'" - :show-no="!tableMode" /> + :counter-style="counterStyle" + :show-no="showNo" /> </div> </template> @@ -52,9 +52,9 @@ export default { type: Object, default: undefined, }, - tableMode: { - type: Boolean, - default: false, + viewMode: { + type: String, + default: 'desktop', }, }, @@ -69,6 +69,23 @@ export default { confirmedOptions: 'poll/options/confirmed', }), + optionStyle() { + if (this.viewMode === 'desktop') { + return 'dateBox' + } else { + return 'textBox' + } + }, + counterStyle() { + if (this.viewMode === 'desktop') { + return 'iconStyle' + } else { + return 'barStyle' + } + }, + showNo() { + return (this.viewMode === 'desktop') + }, isWinner() { // highlight best option until poll is expired and // at least one option is confirmed diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js index a3dc6866..8753c492 100644 --- a/src/js/store/modules/settings.js +++ b/src/js/store/modules/settings.js @@ -32,6 +32,10 @@ const defaultSettings = () => { imageUrl: '', glassyNavigation: false, glassySidebar: false, + defaultView: { + textPoll: 'mobile', + datePoll: 'desktop', + }, }, } } diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue index f8816f93..3265043e 100644 --- a/src/js/views/Vote.vue +++ b/src/js/views/Vote.vue @@ -67,8 +67,8 @@ <PersonalLink v-if="share.userId" /> </div> - <div class="area__main"> - <VoteTable v-show="options.length" :table-mode="tableMode" :ranked="ranked" /> + <div class="area__main" :class="viewMode"> + <VoteTable v-show="options.length" :view-mode="viewMode" :ranked="ranked" /> <div v-if="!options.length" class="emptycontent"> <div class="icon-toggle-filelist" /> <button v-if="acl.allowEdit" @click="openOptions"> @@ -127,8 +127,9 @@ export default { voteSaved: false, delay: 50, isLoading: true, - tableMode: (window.innerWidth > 480), ranked: false, + manualViewDatePoll: false, + manualViewTextPoll: false, } }, @@ -138,12 +139,51 @@ export default { acl: state => state.poll.acl, options: state => state.poll.options.list, share: state => state.poll.share, + settings: state => state.settings, }), ...mapGetters({ isExpired: 'poll/expired', }), + viewTextPoll() { + if (this.manualViewTextPoll) { + if (this.settings.user.defaultView.textPoll === 'desktop') { + return 'mobile' + } else { + return 'desktop' + } + } else { + return this.settings.user.defaultView.textPoll + } + }, + + viewDatePoll() { + if (this.manualViewDatePoll) { + if (this.settings.user.defaultView.datePoll === 'desktop') { + return 'mobile' + } else { + return 'desktop' + } + } else { + if (window.innerWidth < 481) { + return 'mobile' + } else { + return this.settings.user.defaultView.datePoll + } + } + }, + + viewMode() { + if (this.poll.type === 'datePoll') { + return this.viewDatePoll + } else if (this.poll.type === 'textPoll') { + return this.viewTextPoll + } else { + return 'desktop' + } + }, + linkifyDescription() { return linkifyStr(this.poll.description) }, @@ -156,7 +196,7 @@ export default { return moment.unix(this.poll.expire).format('LLLL') }, viewCaption() { - if (this.tableMode) { + if (this.viewMode === 'desktop') { return t('polls', 'Switch to mobile view') } else { return t('polls', 'Switch to desktop view') @@ -195,7 +235,7 @@ export default { }, toggleViewIcon() { - if (this.tableMode) { + if (this.viewMode === 'desktop') { return 'icon-phone' } else { return 'icon-desktop' @@ -245,19 +285,26 @@ export default { toggleView() { emit('transitions-off', { delay: 500 }) - this.tableMode = !this.tableMode + if (this.poll.type === 'datePoll') { + this.manualViewDatePoll = !this.manualViewDatePoll + } else { + this.manualViewTextPoll = !this.manualViewTextPoll + } }, loadPoll() { this.isLoading = true + emit('transitions-off') this.$store .dispatch({ type: 'poll/get', pollId: this.$route.params.id, token: this.$route.params.token }) .then((response) => { this.isLoading = false + emit('transitions-off', 500) window.document.title = this.windowTitle }) .catch(() => { this.isLoading = false + emit('transitions-off', 500) this.$router.replace({ name: 'notfound' }) }) }, |