diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-05-30 21:55:04 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-05-30 21:55:04 +0300 |
commit | a3a438e21d6945c5a09a2d957227cf66fd2717fe (patch) | |
tree | 76e84181a5de7bd677eef4374ebe9c39ad373a9c /src | |
parent | 66bdbaf6821c6311865bdf9b5589d848894a16ab (diff) |
💄 (#2345): use mdi icons in bubble menu
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MenuBubble.vue | 26 |
1 files changed, 18 insertions, 8 deletions
diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue index 16cfa7348..706de84ad 100644 --- a/src/components/MenuBubble.vue +++ b/src/components/MenuBubble.vue @@ -32,11 +32,13 @@ type="text" placeholder="https://" @keydown.esc="hideLinkMenu"> - <button class="menububble__button icon-confirm" + <button class="menububble__button" data-text-bubble-action="confirm" type="button" tabindex="0" - @click="setLinkUrl()" /> + @click="setLinkUrl()"> + <Check /> + </button> </form> <template v-else> @@ -44,7 +46,7 @@ data-text-bubble-action="add-link" :class="{ 'is-active': isActive('link') }" @click="showLinkMenu()"> - <span class="icon-link" /> + <Link /> <span class="menububble__buttontext"> {{ isActive('link') ? t('text', 'Update Link') : t('text', 'Add Link') }} </span> @@ -54,7 +56,7 @@ class="menububble__button" :class="{ 'is-active': isActive('link') }" @click="selectFile()"> - <span class="icon-file" /> + <Document /> <span class="menububble__buttontext">{{ t('text', 'Link file') }}</span> </button> <button v-if="isActive('link')" @@ -62,7 +64,7 @@ data-text-bubble-action="remove-link" :class="{ 'is-active': isActive('link') }" @click="removeLinkUrl()"> - <span class="icon-delete" /> + <Delete /> <span class="menububble__buttontext"> {{ t('text', 'Remove Link') }} </span> @@ -74,17 +76,23 @@ <script> import { BubbleMenu } from '@tiptap/vue-2' import { getMarkAttributes } from '@tiptap/core' -import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import { getCurrentUser } from '@nextcloud/auth' -import { optimalPath } from './../helpers/files.js' import { loadState } from '@nextcloud/initial-state' +import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' +import { optimalPath } from './../helpers/files.js' import { useEditorMixin } from './EditorWrapper.provider.js' +import { Link, Document, Delete, Check } from '../components/icons.js' + export default { name: 'MenuBubble', components: { BubbleMenu, + Link, + Document, + Delete, + Check, }, directives: { tooltip: Tooltip, @@ -183,7 +191,6 @@ export default { height: 44px; &__button { - display: block; flex-grow: 1; border: 0; padding: 0.9rem 0.7rem; @@ -192,6 +199,8 @@ export default { cursor: pointer; background-color: var(--color-main-background); border-right: 1px solid var(--color-border); + display: flex; + align-items: center; &:focus, &:hover { @@ -220,6 +229,7 @@ export default { border: none; background: transparent; min-width: 250px; + margin: 0 0.5em 0 1em; } } </style> |