diff options
| -rw-r--r-- | src/js/assets/scss/icons.scss | 236 | ||||
| -rw-r--r-- | src/js/components/Poll/PollInformation.vue | 132 | ||||
| -rw-r--r-- | src/js/store/modules/poll.js | 2 |
3 files changed, 151 insertions, 219 deletions
diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss index 31cf98d4..b4809c90 100644 --- a/src/js/assets/scss/icons.scss +++ b/src/js/assets/scss/icons.scss @@ -1,46 +1,50 @@ :root { --polls-vote-rows: 1; --polls-vote-columns: 1; - --icon-polls: url('../icons/polls.svg'); - --icon-polls--fff: url('../icons/polls-fff.svg'); --icon-circles: url('../icons/circles.svg'); + --icon-circles--fff: url('../icons/circles-fff.svg'); --icon-clock: url('../icons/clock.svg'); --icon-clock--fff: url('../icons/clock-fff.svg'); - --icon-circles--fff: url('../icons/circles-fff.svg'); + --icon-polls: url('../icons/polls.svg'); + --icon-polls--fff: url('../icons/polls-fff.svg'); --icon-polls-anonymous: url('../icons/anonymous.svg'); --icon-polls-back: url('../icons/back.svg'); --icon-polls-back--fff: url('../icons/back-fff.svg'); - --icon-polls-confirmed: url('../icons/confirmed.svg'); - --icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg'); - --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); - --icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg'); --icon-polls-clone: url('../icons/clone.svg'); --icon-polls-clone--fff: url('../icons/clone-fff.svg'); - --icon-polls-move: url('../icons/move.svg'); - --icon-polls-move--fff: url('../icons/move-fff.svg'); - --icon-polls-yes: url('../icons/yes-vote.svg'); - --icon-polls-no: url('../icons/no-vote.svg'); - --icon-polls-maybe: url('../icons/maybe-vote.svg'); - --icon-polls-minus: url('../icons/minus.svg'); + --icon-polls-closed: url('../icons/closed.svg'); + --icon-polls-closed--fff: url('../icons/closed-fff.svg'); + --icon-polls-confirmed: url('../icons/confirmed.svg'); + --icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg'); --icon-polls-handle: url('../icons/handle.svg'); --icon-polls-handle--fff: url('../icons/handle-fff.svg'); - --icon-polls-mail: url('../icons/mail.svg'); - --icon-polls-mail--fff: url('../icons/mail-fff.svg'); - --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); - --icon-polls-table-view: url('../icons/table-view.svg'); - --icon-polls-table-view-fff: url('../icons/table-view-fff.svg'); + --icon-polls-hidden-poll: url('../icons/invisible.svg'); + --icon-polls-hidden-poll--fff: url('../icons/invisible-fff.svg'); + --icon-polls-hidden: url('../icons/invisible.svg'); + --icon-polls-hidden--fff: url('../icons/invisible-fff.svg'); --icon-polls-list-view: url('../icons/list-view.svg'); --icon-polls-list-view-fff: url('../icons/list-view-fff.svg'); - --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg'); --icon-polls-loading: url('../icons/loading-small.gif'); + --icon-polls-mail: url('../icons/mail.svg'); + --icon-polls-mail--fff: url('../icons/mail-fff.svg'); + --icon-polls-maybe: url('../icons/maybe-vote.svg'); + --icon-polls-move: url('../icons/move.svg'); + --icon-polls-move--fff: url('../icons/move-fff.svg'); + --icon-polls-minus: url('../icons/minus.svg'); + --icon-polls-no: url('../icons/no-vote.svg'); --icon-polls-open: url('../icons/open.svg'); --icon-polls-open--fff: url('../icons/open-fff.svg'); - --icon-polls-closed: url('../icons/closed.svg'); - --icon-polls-closed--fff: url('../icons/closed-fff.svg'); --icon-polls-public-poll: url('../icons/visible.svg'); --icon-polls-public-poll--fff: url('../icons/visible-fff.svg'); - --icon-polls-hidden-poll: url('../icons/invisible.svg'); - --icon-polls-hidden-poll--fff: url('../icons/invisible-fff.svg'); + --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); + --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg'); + --icon-polls-table-view: url('../icons/table-view.svg'); + --icon-polls-table-view-fff: url('../icons/table-view-fff.svg'); + --icon-polls-visible: url('../icons/visible.svg'); + --icon-polls-visible--fff: url('../icons/visible-fff.svg'); + --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); + --icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg'); + --icon-polls-yes: url('../icons/yes-vote.svg'); // filters to colorize background svg from black // generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2 @@ -49,153 +53,45 @@ --color-polls-foreground-filter-maybe: invert(81%) sepia(22%) saturate(3383%) hue-rotate(353deg) brightness(101%) contrast(101%); } -.icon-polls { - background-image: var(--icon-polls); -} - -.icon-circles { - background-image: var(--icon-circles); -} - -.icon-polls-back { - background-image: var(--icon-polls-back); -} - -.icon-polls-confirmed { - background-image: var(--icon-polls-confirmed); -} - -.icon-polls-unconfirmed { - background-image: var(--icon-polls-unconfirmed); -} - -.icon-polls-move { - background-image: var(--icon-polls-move); -} - -.icon-polls-minus { - background-image: var(--icon-polls-minus); -} - -.icon-polls-clone { - background-image: var(--icon-polls-clone); -} - -.icon-polls-yes { - background-image: var(--icon-polls-yes); -} - -.icon-polls-no { - background-image: var(--icon-polls-no); -} - -.icon-polls-maybe { - background-image: var(--icon-polls-maybe); -} - -.icon-polls-mail { - background-image: var(--icon-polls-mail); -} - -.icon-polls-open { - background-image: var(--icon-polls-open); -} - -.icon-polls-closed { - background-image: var(--icon-polls-closed); -} - -.icon-polls-closed-fff { - background-image: var(--icon-polls-closed--fff); -} - -.icon-polls-public-poll { - background-image: var(--icon-polls-public-poll); -} - -.icon-polls-hidden-poll { - background-image: var(--icon-polls-hidden-poll); -} - -.icon-polls-sidebar-toggle { - background-image: var(--icon-polls-sidebar-toggle); -} - -.icon-handle { - background-image: var(--icon-polls-handle); -} - -.icon-table-view { - background-image: var(--icon-polls-table-view); -} - -.icon-list-view { - background-image: var(--icon-polls-list-view); -} +.icon-circles { background-image: var(--icon-circles); } +.icon-handle { background-image: var(--icon-polls-handle); } +.icon-list-view { background-image: var(--icon-polls-list-view); } +.icon-polls { background-image: var(--icon-polls); } +.icon-polls-back { background-image: var(--icon-polls-back); } +.icon-polls-clone { background-image: var(--icon-polls-clone); } +.icon-polls-closed { background-image: var(--icon-polls-closed); } +.icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); } +.icon-polls-confirmed { background-image: var(--icon-polls-confirmed); } +.icon-polls-hidden-poll { background-image: var(--icon-polls-hidden-poll); } +.icon-polls-hidden { background-image: var(--icon-polls-hidden-poll); } +.icon-polls-mail { background-image: var(--icon-polls-mail); } +.icon-polls-maybe { background-image: var(--icon-polls-maybe); } +.icon-polls-minus { background-image: var(--icon-polls-minus); } +.icon-polls-move { background-image: var(--icon-polls-move); } +.icon-polls-no { background-image: var(--icon-polls-no); } +.icon-polls-open { background-image: var(--icon-polls-open); } +.icon-polls-public-poll { background-image: var(--icon-polls-public-poll); } +.icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); } +.icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); } +.icon-table-view { background-image: var(--icon-polls-table-view); } +.icon-polls-visible { background-image: var(--icon-polls-public-poll); } +.icon-polls-yes { background-image: var(--icon-polls-yes); } .theme--dark { - .icon-polls { - background-image: var(--icon-polls--fff); - } - - .icon-circles { - background-image: var(--icon-circles--fff); - } - - .icon-polls-back { - background-image: var(--icon-polls-back--fff); - } - - .icon-polls-confirmed { - background-image: var(--icon-polls-confirmed--fff); - } - - .icon-polls-unconfirmed { - background-image: var(--icon-polls-unconfirmed--fff); - } - - .icon-polls-move { - background-image: var(--icon-polls-move--fff); - } - - .icon-polls-clone { - background-image: var(--icon-polls-clone--fff); - } - - .icon-polls-mail { - background-image: var(--icon-polls-mail--fff); - } - - .icon-polls-open { - background-image: var(--icon-polls-open--fff); - } - - .icon-polls-closed { - background-image: var(--icon-polls-closed--fff); - } - - .icon-polls-public-poll { - background-image: var(--icon-polls-public-poll--fff); - } - - .icon-polls-hidden-poll { - background-image: var(--icon-polls-hidden-poll--fff); - } - - .icon-polls-sidebar-toggle { - background-image: var(--icon-polls-sidebar-toggle--fff); - } - - .icon-handle { - background-image: var(--icon-polls-handle--fff); - } - - .icon-table-view { - background-image: var(--icon-polls-table-view-fff); - } - - .icon-list-view { - background-image: var(--icon-polls-list-view-fff); - } - + .icon-circles { background-image: var(--icon-circles--fff); } + .icon-handle { background-image: var(--icon-polls-handle--fff); } + .icon-list-view { background-image: var(--icon-polls-list-view-fff); } + .icon-polls { background-image: var(--icon-polls--fff); } + .icon-polls-back { background-image: var(--icon-polls-back--fff); } + .icon-polls-clone { background-image: var(--icon-polls-clone--fff); } + .icon-polls-closed { background-image: var(--icon-polls-closed--fff); } + .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); } + .icon-polls-hidden-poll { background-image: var(--icon-polls-hidden-poll--fff); } + .icon-polls-mail { background-image: var(--icon-polls-mail--fff); } + .icon-polls-move { background-image: var(--icon-polls-move--fff); } + .icon-polls-open { background-image: var(--icon-polls-open--fff); } + .icon-polls-public-poll { background-image: var(--icon-polls-public-poll--fff); } + .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); } + .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); } + .icon-table-view { background-image: var(--icon-polls-table-view-fff); } } diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue index de7a36eb..04a2a9b1 100644 --- a/src/js/components/Poll/PollInformation.vue +++ b/src/js/components/Poll/PollInformation.vue @@ -30,34 +30,43 @@ </Actions> </div> <div class="poll-information"> - <div class="owner"> + <div class="icon-user"> {{ t('polls', 'Poll owner:') }} <UserBubble v-if="poll.owner" :user="poll.owner" :display-name="poll.ownerDisplayName" /> </div> - <div class="created"> + <div :class="accessClass"> + {{ accessCaption }} + </div> + <div class="icon-star"> {{ t('polls', 'Created {dateRelative}', { dateRelative: dateCreatedRelative }) }} </div> - <div v-if="poll.expire" class="closed"> + <div v-if="poll.expire" class="icon-polls-closed"> {{ t('polls', 'Closing: {dateRelative}', {dateRelative: dateExpiryRelative}) }} </div> - <div v-if="poll.anonymous" class="anonymous"> + <div v-if="poll.anonymous" class="icon-polls-anonymous"> {{ t('polls', 'Anonymous poll') }} </div> - <div v-if="participantsVoted.length && acl.allowSeeResults" class="participants"> + <div :class="resultsClass"> + {{ resultsCaption }} + </div> + <div v-if="participantsVoted.length && acl.allowSeeResults" class="icon-user"> {{ n('polls', '%n Participant', '%n Participants', participantsVoted.length) }} </div> - <div class="timezone"> + <div class="icon-timezone"> {{ t('polls', 'Time zone: {timezoneString}', { timezoneString: currentTimeZone}) }} </div> - <div v-if="poll.voteLimit" class="vote-limit"> + <div v-if="proposalsAllowed" class="icon-add"> + {{ proposalsStatus }} + </div> + <div v-if="poll.voteLimit" class="icon-checkmark"> {{ n('polls', '%n of {maximalVotes} vote left.', '%n of {maximalVotes} votes left.', poll.voteLimit - countVotes('yes'), { maximalVotes: poll.voteLimit }) }} </div> - <div v-if="poll.optionLimit" class="option-limit"> + <div v-if="poll.optionLimit" class="icon-close"> {{ n('polls', 'Only %n vote per option.', 'Only %n votes per option.', poll.optionLimit) }} </div> - <div v-if="$route.name === 'publicVote' && share.emailAddress" class="email-address"> + <div v-if="$route.name === 'publicVote' && share.emailAddress" class="icon-mail"> {{ share.emailAddress }} </div> - <div v-if="subscribed" class="subscribed"> + <div v-if="subscribed" class="icon-sound"> {{ t('polls', 'You subscribed to this poll') }} </div> </div> @@ -85,6 +94,9 @@ export default { acl: (state) => state.poll.acl, poll: (state) => state.poll, subscribed: (state) => state.subscription.subscribed, + showResults: (state) => state.poll.showResults, + important: (state) => state.poll.important, + access: (state) => state.poll.access, }), ...mapGetters({ @@ -92,8 +104,69 @@ export default { closed: 'poll/closed', confirmedOptions: 'options/confirmed', countVotes: 'votes/countVotes', + proposalsAllowed: 'poll/proposalsAllowed', + proposalsExpirySet: 'poll/proposalsExpirySet', + proposalsExpired: 'poll/proposalsExpired', + proposalsExpireRelative: 'poll/proposalsExpireRelative', + proposalsOpen: 'poll/proposalsOpen', + displayResults: 'polls/displayResults', }), + proposalsStatus() { + if (this.proposalsOpen && !this.proposalsExpirySet) { + return t('polls', 'Option proposals allowed') + } + if (this.proposalsExpirySet && !this.proposalsExpired) { + return t('polls', 'Option proposal term ends {timeRelative}', { timeRelative: this.proposalsExpireRelative }) + } + if (this.proposalsExpirySet && this.proposalsExpired) { + return t('polls', 'Option proposal term ended {timeRelative}', { timeRelative: this.proposalsExpireRelative }) + } + return t('polls', 'No proposals are allowed') + }, + + resultsCaption() { + if (this.showResults === 'closed' && !this.closed) { + return t('polls', 'Results are hidden until closing poll') + } + if (this.showResults === 'closed' && this.closed) { + return t('polls', 'Results are visible since closing poll') + } + if (this.showResults === 'never') { + return t('polls', 'Results are always hidden') + } + return t('polls', 'Results are visible') + + }, + + accessCaption() { + if (this.access === 'hidden') { + return t('polls', 'Access only for invited persons') + } + if (this.important) { + return t('polls', 'Relevant and accessible for all users') + } + return t('polls', 'Access for all users') + }, + + accessClass() { + if (this.access === 'hidden') { + return 'icon-polls-hidden-poll' + } + if (this.important) { + return 'icon-polls-public-poll' + } + return 'icon-polls-public-poll' + }, + + resultsClass() { + if (this.showResults === 'never' || (this.showResults === 'closed' && !this.closed)) { + return 'icon-polls-hidden' + } + return 'icon-polls-visible' + + }, + voteLimitReached() { return (this.poll.voteLimit > 0 && this.countVotes('yes') >= this.poll.voteLimit) }, @@ -131,45 +204,6 @@ export default { margin: 8px 0 4px 0; padding-left: 24px; } - .owner { - background-image: var(--icon-user-000); - } - - .created { - background-image: var(--icon-star-000); - } - - .closed { - background-image: var(--icon-polls-closed); - } - - .anonymous { - background-image: var(--icon-polls-anonymous); - } - - .timezone { - background-image: var(--icon-clock); - } - - .participants { - background-image: var(--icon-user-000); - } - - .subscribed { - background-image: var(--icon-sound-000); - } - - .vote-limit { - background-image: var(--icon-checkmark-000); - } - - .option-limit { - background-image: var(--icon-close-000); - } - - .email-address { - background-image: var(--icon-mail-000); - } } </style> diff --git a/src/js/store/modules/poll.js b/src/js/store/modules/poll.js index 7e1edd78..9ad5ef42 100644 --- a/src/js/store/modules/poll.js +++ b/src/js/store/modules/poll.js @@ -94,6 +94,8 @@ const getters = { }, + displayResults: (state, getters) => (state.showResults === 'always' || (state.showResults === 'closed' && !getters.closed)), + proposalsAllowed: (state) => (state.allowProposals === 'allow' || state.allowProposals === 'review'), proposalsOpen: (state, getters) => getters.proposalsAllowed && !getters.proposalsExpired, |