diff options
| author | Marco <marcoambrosini@icloud.com> | 2022-08-10 16:12:03 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-10 16:12:03 +0300 |
| commit | 5d5098f91fe65688ede3ff14ff0dfceb7103b30f (patch) | |
| tree | 836cfa28397d7745cce4d2aa18eb74eeef74bd86 /src | |
| parent | da138aa9af8a74ba4488a418ad17ac7b2bea8073 (diff) | |
| parent | 0619a543cce9a85d06c83f4283862439e236eb66 (diff) | |
Merge pull request #7698 from nextcloud/bugfix/noid/move-participant-removal-button-to-vue
Move "Remove participant" button to Vue
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue | 29 |
1 files changed, 15 insertions, 14 deletions
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue index 7fcb4308f..eacca0878 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue @@ -31,18 +31,27 @@ <span class="contact-selection-bubble__username"> {{ displayName }} </span> - <button class="icon-close contact-selection-bubble__remove" - @click="removeParticipantFromSelection(participant)" /> + <ButtonVue type="tertiary-no-background" + :aria-label="removeLabel" + @click="removeParticipantFromSelection(participant)"> + <template #icon> + <Close size="16" /> + </template> + </ButtonVue> </div> </template> <script> +import ButtonVue from '@nextcloud/vue/dist/Components/Button' +import Close from 'vue-material-design-icons/Close.vue' import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue' export default { name: 'ContactSelectionBubble', components: { AvatarWrapperSmall, + ButtonVue, + Close, }, props: { @@ -58,6 +67,10 @@ export default { // But it causes weird scenarios in formal companies or when people have titles. return this.participant.label }, + + removeLabel() { + return t('spreed', 'Remove participant {name}', { name: this.displayName }) + }, }, methods: { @@ -90,18 +103,6 @@ $bubble-height: 24px; overflow: hidden; text-overflow: ellipsis; } - &__remove { - margin: 0 0 0 4px; - border: none; - border-radius: $bubble-height; - height: $bubble-height; - width: $bubble-height; - background-color: var(--color-primary-active); - &:active, - &:focus { - background-color: transparent !important; - } - } } </style> |