diff options
author | Marco Ambrosini <marcoambrosini@icloud.com> | 2022-08-31 15:17:15 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@icloud.com> | 2022-08-31 15:17:15 +0300 |
commit | 47b4f4d890966ddc8e96ffb553139b0fca1dae7c (patch) | |
tree | 3eae8f0c0f42aca804dacf8ca209309fe185d08d /src/components | |
parent | a9cc254a7a9fedc24b20a0176463f108e67f802f (diff) |
Display popover on click
Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
Diffstat (limited to 'src/components')
3 files changed, 46 insertions, 5 deletions
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 51bcef25e..60313b198 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -153,6 +153,7 @@ export default { width: unset; height: unset; margin-left: -2px; + display: flex; ::v-deep img { outline: 2px solid var(--color-main-background); } diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue index c4a194ca4..fee80ad1b 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue @@ -532,6 +532,7 @@ export default { &__details { display: flex; + height: 32px; } &-subtitle { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue index 1edc2aec2..50484ba5b 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue @@ -21,19 +21,36 @@ <template> <NcPopover trigger="hover"> - <div slot="trigger" tabindex="0" class="poll-voters-details"> + <button slot="trigger" + tabindex="0" + class="poll-voters-details"> <AvatarWrapper v-for="(item, index) in details" :id="item.actorId" :key="index" :source="item.actorType" :disable-menu="true" + :disable-tooltip="true" :show-user-status="false" :name="item.actorDisplayName" :condensed="true" :size="24" /> - </div> - <div tabindex="0"> - Some content + </button> + <div class="poll-voters-details__popover" tabindex="0"> + <div v-for="(item, index) in details" + :key="index" + class="poll-voters-details__list-item"> + <AvatarWrapper :id="item.actorId" + :key="index" + :source="item.actorType" + :disable-menu="true" + :show-user-status="false" + :name="item.actorDisplayName" + :condensed="true" + :size="24" /> + <p class="poll-voters-details__display-name"> + {{ item.actorDisplayName }} + </p> + </div> </div> </NcPopover> </template> @@ -64,7 +81,29 @@ export default { .poll-voters-details { display: flex; - cursor: pointer; + background: none; + border: none; + padding: 0; + + &__popover{ + padding: 8px; + max-height: 400px; + overflow-y: scroll; + } + + &__display-name { + margin-left: 4px; + } + + &__list-item { + display: flex; + align-items: center; + height: 32px; + margin-bottom: var(--margin-small); + min-width: 150px; + justify-content: flex-start; + align-items: center; + } } </style> |