diff options
Diffstat (limited to 'src/components/MenuBubble.vue')
-rw-r--r-- | src/components/MenuBubble.vue | 31 |
1 files changed, 23 insertions, 8 deletions
diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue index ed296dc0a..706de84ad 100644 --- a/src/components/MenuBubble.vue +++ b/src/components/MenuBubble.vue @@ -23,6 +23,7 @@ <template> <BubbleMenu :editor="$editor" :tippy-options="{ onHide: hideLinkMenu, duration: 200, placement: 'bottom' }" + data-text-el="menu-bubble" class="menububble"> <form v-if="linkMenuIsActive" class="menububble__form" @submit.prevent="setLinkUrl()"> <input ref="linkInput" @@ -31,33 +32,39 @@ 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> <button class="menububble__button" + 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> </button> <button v-if="!isUsingDirectEditing" + data-text-bubble-action="add-file" 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')" class="menububble__button" + 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> @@ -69,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, @@ -178,7 +191,6 @@ export default { height: 44px; &__button { - display: block; flex-grow: 1; border: 0; padding: 0.9rem 0.7rem; @@ -187,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 { @@ -215,6 +229,7 @@ export default { border: none; background: transparent; min-width: 250px; + margin: 0 0.5em 0 1em; } } </style> |