diff options
| author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-05-31 15:38:56 +0300 |
|---|---|---|
| committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-05-31 15:38:56 +0300 |
| commit | 6345231321b461fe98c0a39464432c06702f430d (patch) | |
| tree | 54b1c8168f2c8bfa67ba3fbe23b88f0743c2e00c /src/components/Menu | |
| parent | 4ad919a041600b65a8a7fc953858c6afca186dde (diff) | |
🩹 (#2345): use nextcloud button instead of html button
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src/components/Menu')
| -rw-r--r-- | src/components/Menu/ActionEntry.scss | 11 | ||||
| -rw-r--r-- | src/components/Menu/EmojiPickerAction.vue | 10 |
2 files changed, 16 insertions, 5 deletions
diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss index 1f49654af..643d2c452 100644 --- a/src/components/Menu/ActionEntry.scss +++ b/src/components/Menu/ActionEntry.scss @@ -6,7 +6,7 @@ border-radius: 100%; position: absolute; background: var(--color-primary-element); - bottom: 3px; + bottom: 0; height: 6px; width: 6px; content: ''; @@ -19,11 +19,12 @@ height: 44px; margin: 0; border: 0; - opacity: 0.5; + // opacity: 0.5; position: relative; color: var(--color-main-text); background-color: transparent; vertical-align: top; + box-shadow: none; padding: 0; p { @@ -42,12 +43,18 @@ &:focus, &:active { background-color: var(--color-background-dark); + &:not(:disabled) { + box-shadow: var(--color-primary); + } } &:hover, &:focus { opacity: 1; } + &:focus-visible { + box-shadow: var(--color-primary); + } &.is-active { @extend %text__is-active-item-btn; diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue index cb23fabde..2c852a86b 100644 --- a/src/components/Menu/EmojiPickerAction.vue +++ b/src/components/Menu/EmojiPickerAction.vue @@ -23,24 +23,28 @@ <EmojiPicker class="entry-action entry-action__emoji" :data-text-action-entry="actionEntry.key" @selectData="addEmoji"> - <button v-tooltip="actionEntry.label" + <Button v-tooltip="actionEntry.label" class="entry-action__button" :title="actionEntry.label" :aria-label="actionEntry.label" :aria-haspopup="true"> - <component :is="icon" /> - </button> + <template #icon> + <component :is="icon" /> + </template> + </Button> </EmojiPicker> </template> <script> import { BaseActionEntry } from './BaseActionEntry.js' import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' +import Button from '@nextcloud/vue/dist/Components/Button' export default { name: 'EmojiPickerAction', components: { EmojiPicker, + Button, }, extends: BaseActionEntry, methods: { |