Browse Source

fix: Switched to NcButton for selected bubble menu

pull/7046/head
Muhammed Mustafa 1 year ago
parent
commit
7e08fb76af
  1. 177
      packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
  2. 7
      packages/nc-gui/lang/en.json

177
packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue

@ -70,6 +70,53 @@ const onToggleLink = () => {
'full-mode': !embedMode,
}"
>
<NcTooltip>
<template #title> {{ $t('labels.bold') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor!.chain().focus().toggleBold().run()"
>
<MdiFormatBold />
</NcButton>
</NcTooltip>
<NcTooltip>
<template #title> {{ $t('labels.italic') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('italic') }"
@click=";(editor!.chain().focus() as any).toggleItalic().run()"
>
<MdiFormatItalic />
</NcButton>
</NcTooltip>
<NcTooltip>
<template #title> {{ $t('labels.underline') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('underline') }"
@click="editor!.chain().focus().toggleUnderline().run()"
>
<MdiFormatUnderline />
</NcButton>
</NcTooltip>
<NcTooltip>
<template #title> {{ $t('labels.strike') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('strike') }"
@click="editor!.chain().focus().toggleStrike().run()"
>
<MdiFormatStrikeThrough />
</NcButton>
</NcTooltip>
<div class="divider"></div>
<template v-if="embedMode">
<NcTooltip>
<template #title> {{ $t('labels.heading1') }} </template>
@ -108,93 +155,52 @@ const onToggleLink = () => {
<div class="divider"></div>
</template>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('bold') }"
:aria-active="editor.isActive('bold')"
class="menu-button"
data-testid="nc-docs-editor-bold-button"
@click="editor!.chain().focus().toggleBold().run()"
>
<MdiFormatBold />
</a-button>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('italic') }"
:aria-active="editor.isActive('italic')"
class="menu-button"
data-testid="nc-docs-editor-italic-button"
@click=";(editor!.chain().focus() as any).toggleItalic().run()"
>
<MdiFormatItalic />
</a-button>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('underline') }"
:aria-active="editor.isActive('underline')"
class="menu-button"
data-testid="nc-docs-editor-underline-button"
@click="editor!.chain().focus().toggleUnderline().run()"
>
<MdiFormatUnderline />
</a-button>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('strike') }"
:aria-active="editor.isActive('strike')"
class="menu-button"
data-testid="nc-docs-editor-strike-button"
@click="editor!.chain().focus().toggleStrike().run()"
>
<MdiFormatStrikeThrough />
</a-button>
<div class="divider"></div>
<NcTooltip>
<template #title> {{ $t('labels.taskList') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('taskList') }"
@click="editor!.chain().focus().toggleTaskList().run()"
>
<MdiFormatListCheckbox />
</NcButton>
</NcTooltip>
<NcTooltip>
<template #title> {{ $t('labels.bulletList') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor!.chain().focus().toggleBulletList().run()"
>
<MdiFormatBulletList />
</NcButton>
</NcTooltip>
<NcTooltip>
<template #title> {{ $t('labels.numberedList') }}</template>
<NcButton
size="small"
type="text"
:class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor!.chain().focus().toggleOrderedList().run()"
>
<MdiFormatListNumber />
</NcButton>
</NcTooltip>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('taskList') }"
:aria-active="editor.isActive('taskList')"
class="menu-button"
data-testid="nc-docs-editor-task-button"
@click="editor!.chain().focus().toggleTaskList().run()"
>
<MdiFormatListCheckbox />
</a-button>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('bulletList') }"
:aria-active="editor.isActive('bulletList')"
class="menu-button"
data-testid="nc-docs-editor-bullet-button"
@click="editor!.chain().focus().toggleBulletList().run()"
>
<MdiFormatBulletList />
</a-button>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('orderedList') }"
:aria-active="editor.isActive('orderedList')"
class="menu-button"
data-testid="nc-docs-editor-ordered-button"
@click="editor!.chain().focus().toggleOrderedList().run()"
>
<MdiFormatListNumber />
</a-button>
<div class="divider"></div>
<a-button
type="text"
:class="{ 'is-active': editor.isActive('link') }"
:aria-active="editor.isActive('link')"
class="menu-button"
data-testid="nc-docs-editor-link-button"
@click="onToggleLink"
>
<div class="flex flex-row items-center px-0.5">
<MdiLink />
<div class="!text-xs !ml-1">Link</div>
</div>
</a-button>
<NcTooltip>
<template #title> {{ $t('general.link') }}</template>
<NcButton size="small" type="text" :class="{ 'is-active': editor.isActive('link') }" @click="onToggleLink">
<div class="flex flex-row items-center px-0.5">
<MdiLink />
<div class="!text-xs !ml-1">{{ $t('general.link') }}</div>
</div>
</NcButton>
</NcTooltip>
</div>
</template>
@ -235,9 +241,6 @@ const onToggleLink = () => {
.is-active {
@apply border-1 !hover:bg-gray-200 border-1 border-gray-200 bg-gray-100;
}
.menu-button {
@apply rounded-md !py-0 !my-0 !px-1.5 !h-8 hover:bg-gray-100;
}
.divider {
@apply border-r-1 border-gray-200 !h-6 !mx-0.5 my-1;
}

7
packages/nc-gui/lang/en.json

@ -414,6 +414,13 @@
"heading1": "Heading 1",
"heading2": "Heading 2",
"heading3": "Heading 3",
"bold": "Bold",
"italic": "Italic",
"underline": "Underline",
"strike": "Strike",
"taskList": "Task List",
"bulletList": "Bullet List",
"numberedList": "Numbered List",
"downloadData": "Download Data",
"noToken": "No Token",
"tokenLimit": "Only one token per user is allowed",

Loading…
Cancel
Save