diff options
| -rw-r--r-- | src/components/Composer.vue | 8 | ||||
| -rw-r--r-- | src/components/RecipientListItem.vue | 33 |
2 files changed, 31 insertions, 10 deletions
diff --git a/src/components/Composer.vue b/src/components/Composer.vue index 125b4013c..4ee285e58 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -1277,14 +1277,15 @@ export default { display: flex; align-items: flex-start; flex-wrap: wrap; - padding-top:5px; + padding-top:2px; width: calc(100% - 120px); button { margin-top: 0; background-color: transparent; border:none; - opacity: 0.5 + opacity: 0.5; + padding: 10px 16px; } button.active,button:active { @@ -1384,6 +1385,9 @@ export default { ::v-deep .multiselect .multiselect__tags { border: none !important; } +::v-deep .multiselect .multiselect__input { + height: auto !important; +} ::v-deep [data-select="create"] .avatardiv--unknown { background: var(--color-text-maxcontrast) !important; } diff --git a/src/components/RecipientListItem.vue b/src/components/RecipientListItem.vue index dd5bcab7f..50e03e1b6 100644 --- a/src/components/RecipientListItem.vue +++ b/src/components/RecipientListItem.vue @@ -4,23 +4,20 @@ :no-margin="true" :title="option.label" :avatar-size="24" /> - <Button type="tertiary-no-background" @click.prevent="removeRecipient(option)"> - <template #icon> - <Close :size="20" /> - </template> - </Button> + <Close + class="delete-recipient" + :size="20" + @click.prevent="removeRecipient(option)" /> </div> </template> <script> import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon' -import Button from '@nextcloud/vue/dist/Components/NcButton' import Close from 'vue-material-design-icons/Close' export default { name: 'RecipientListItem', components: { ListItemIcon, - Button, Close, }, props: { @@ -37,7 +34,7 @@ export default { } </script> -<style scoped> +<style scoped lang="scss"> .multiselect .multiselect__tags .multiselect__tags-wrap @@ -46,6 +43,11 @@ export default { border-radius: 25px; border-color: transparent; background-color: var(--color-background-dark); + height: 24px; + + & > span.option { + margin-left: 0 + } } .multiselect__tag--recipient .action-item--single { width: auto; @@ -58,6 +60,21 @@ export default { height: 24px; width: 24px; } +.delete-recipient { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + height: 24px; + width: 24px; + min-width: 24px; + margin-left: 6px; + border-radius: 50%; + + &:hover { + background: var(--color-background-darker); + } +} ::v-deep .option { margin-left: 10px; } |