tidy icons and complete poll information
Signed-off-by: dartcafe <github@dartcafe.de>
This commit is contained in:
dartcafe
Родитель
895746bc43
Коммит
fd0f6198b5
|
|
@ -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-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-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-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-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-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-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-public-poll: url('../icons/visible.svg');
|
||||
--icon-polls-public-poll--fff: url('../icons/visible-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); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче