diff options
| author | Marco Ambrosini <marcoambrosini@icloud.com> | 2022-08-31 11:02:53 +0300 |
|---|---|---|
| committer | Marco Ambrosini <marcoambrosini@icloud.com> | 2022-08-31 11:02:53 +0300 |
| commit | b5841dce83c7883cfa82f4cc2c9619de482f2ed3 (patch) | |
| tree | d8595fcbeec848aa2ac54833daf9f907e2acad23 /src | |
| parent | 447867f2cb17bcfed2e770e25728f8f2c466bf4e (diff) | |
Style avatars
Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
Diffstat (limited to 'src')
3 files changed, 27 insertions, 7 deletions
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 08b2db1c3..51bcef25e 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -21,7 +21,10 @@ <template> <div class="avatar-wrapper" - :class="{'offline': offline}"> + :class="{ + 'offline': offline, + 'avatar-wrapper--condensed': condensed, + }"> <div v-if="iconClass" class="icon" :class="[`avatar-${sizeToString}px`, iconClass]" /> @@ -102,6 +105,11 @@ export default { type: String, default: undefined, }, + + condensed: { + type: Boolean, + default: false, + }, }, computed: { // Determines which icon is displayed @@ -141,6 +149,14 @@ export default { height: $avatar-size; width: $avatar-size; @include avatar-mixin($avatar-size); + &--condensed { + width: unset; + height: unset; + margin-left: -2px; + ::v-deep img { + outline: 2px solid var(--color-main-background); + } + } } .offline .avatar-wrapper .avatardiv { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue index 5c68f80b9..a4b39d4b2 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue @@ -126,15 +126,17 @@ <p> {{ option }} </p> - <PollVotersDetails v-if="details" - :details="details" /> <p class="percentage"> {{ getVotePercentage(index) + '%' }} </p> </div> - <p v-if="selfHasVotedOption(index)" class="results__option-subtitle"> - {{ t('spreed','You voted') }} - </p> + <div> + <PollVotersDetails v-if="details" + :details="details" /> + <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" /> diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue index 202d90846..1edc2aec2 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue @@ -27,8 +27,9 @@ :key="index" :source="item.actorType" :disable-menu="true" - :show-user-status-compact="true" + :show-user-status="false" :name="item.actorDisplayName" + :condensed="true" :size="24" /> </div> <div tabindex="0"> @@ -63,6 +64,7 @@ export default { .poll-voters-details { display: flex; + cursor: pointer; } </style> |