diff options
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue | 41 |
1 files changed, 36 insertions, 5 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue index 3b94890d0..f83c9d4cd 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue @@ -130,9 +130,14 @@ {{ getVotePercentage(index) + '%' }} </p> </div> - <p v-if="selfHasVotedOption(index)" class="results__option-subtitle"> - {{ t('spreed','You voted') }} - </p> + <div v-if="getFilteredDetails(index).length > 0 || selfHasVotedOption(index)" + class="results__option__details"> + <PollVotersDetails v-if="details" + :details="getFilteredDetails(index)" /> + <p v-if="selfHasVotedOption(index)" class="results__option-subtitle"> + {{ t('spreed','You voted') }} + </p> + </div> <NcProgressBar class="results__option-progress" :value="getVotePercentage(index)" size="medium" /> @@ -166,6 +171,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import PollIcon from 'vue-material-design-icons/Poll.vue' import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' import { PARTICIPANT } from '../../../../../constants.js' +import PollVotersDetails from './PollVotersDetails.vue' export default { @@ -177,6 +183,7 @@ export default { NcButton, PollIcon, NcProgressBar, + PollVotersDetails, }, props: { @@ -272,6 +279,14 @@ export default { return this.status === 1 }, + details() { + if (!this.pollLoaded || this.pollIsOpen) { + return undefined + } else { + return this.poll.details + } + }, + checkboxRadioSwitchType() { if (this.pollLoaded) { return this.poll.maxVotes === 0 ? 'checkbox' : 'radio' @@ -335,7 +350,7 @@ export default { if (this.pollIsOpen) { return this.selfHasVoted ? t('spreed', 'Poll ・ You voted') : t('spreed', 'Poll ・ Click to vote') } else if (this.pollIsClosed) { - return t('spreed', 'Poll ・ Closed') + return t('spreed', 'Poll ・ Ended') } return '' }, @@ -427,6 +442,15 @@ export default { return false } }, + + getFilteredDetails(index) { + if (!this.details) { + return [] + } + return this.details.filter((item) => { + return item.optionId === index + }).slice(0, 8) + }, }, } </script> @@ -506,13 +530,19 @@ export default { .results__options { display: flex; flex-direction: column; - gap: 20px; + gap: 24px; word-wrap: anywhere; margin: 8px 0 20px 0; } .results__option { display: flex; flex-direction: column; + + &__details { + display: flex; + height: 32px; + } + &-subtitle { color: var(--color-text-maxcontrast); } @@ -526,6 +556,7 @@ export default { display: flex; justify-content: space-between; align-items: flex-start; + margin-bottom: 4px; .percentage { white-space: nowrap; margin-left: 16px; |