refactor: improve editor ui (#5828)
#### What type of PR is this? /area ui /kind improvement /milestone 2.15.x #### What this PR does / why we need it: 优化编辑器的部分 UI。 1. 优化顶部工具栏的样式。 2. 统一格式刷和清除格式的图标。 before: <img width="1001" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/4d3f2e9a-a79d-429e-aaa4-70313f61da6c"> after: <img width="1021" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/676ce83b-da87-4c5b-bc63-1405106827f8"> #### Does this PR introduce a user-facing change? ```release-note 优化编辑器的部分 UI。 ```
This commit is contained in:
parent
546d63740b
commit
d1d4705705
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PropType } from "vue";
|
||||
import type { Editor, AnyExtension } from "@/tiptap/vue-3";
|
||||
import type { AnyExtension, Editor } from "@/tiptap/vue-3";
|
||||
import BubbleMenu from "@/components/bubble/BubbleMenu.vue";
|
||||
import type { NodeBubbleMenu } from "@/types";
|
||||
import BubbleItem from "@/components/bubble/BubbleItem.vue";
|
||||
import type { EditorView, EditorState } from "@/tiptap/pm";
|
||||
import type { EditorState, EditorView } from "@/tiptap/pm";
|
||||
|
||||
const props = defineProps({
|
||||
editor: {
|
||||
|
@ -71,7 +71,7 @@ const shouldShow = (
|
|||
:default-animation="bubbleMenu.defaultAnimation"
|
||||
>
|
||||
<div
|
||||
class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-0.5"
|
||||
class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-1"
|
||||
>
|
||||
<template v-if="bubbleMenu.items">
|
||||
<template
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { Menu as VMenu, Dropdown as VDropdown } from "floating-vue";
|
||||
import { Editor, type AnyExtension } from "@/tiptap/vue-3";
|
||||
import { Dropdown as VDropdown, Menu as VMenu } from "floating-vue";
|
||||
import { type AnyExtension, Editor } from "@/tiptap/vue-3";
|
||||
import MdiPlusCircle from "~icons/mdi/plus-circle";
|
||||
import type { ToolbarItem, ToolboxItem } from "@/types";
|
||||
|
||||
|
@ -59,11 +59,11 @@ function getToolboxItemsFromExtensions() {
|
|||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="editor-header flex items-center py-1 space-x-0.5 justify-start px-1 overflow-auto sm:!justify-center border-b drop-shadow-sm bg-white"
|
||||
class="editor-header flex items-center py-1 space-x-1 justify-start px-1 overflow-auto sm:!justify-center border-b drop-shadow-sm bg-white"
|
||||
>
|
||||
<div class="inline-flex items-center justify-center">
|
||||
<VMenu>
|
||||
<button class="p-1 rounded-sm hover:bg-gray-100" tabindex="-1">
|
||||
<button class="p-1.5 rounded-md hover:bg-gray-100" tabindex="-1">
|
||||
<MdiPlusCircle class="text-[#4CCBA0]" />
|
||||
</button>
|
||||
<template #popper>
|
||||
|
@ -108,7 +108,7 @@ function getToolboxItemsFromExtensions() {
|
|||
/>
|
||||
<template #popper>
|
||||
<div
|
||||
class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
|
||||
class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
|
||||
>
|
||||
<component
|
||||
v-bind="child.props"
|
||||
|
|
|
@ -78,7 +78,7 @@ function onColorChange(color: Payload) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VDropdown class="inline-flex">
|
||||
<VDropdown class="inline-flex items-center">
|
||||
<slot />
|
||||
<template #popper>
|
||||
<slot name="prefix" />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { Component } from "vue";
|
||||
import { VTooltip } from "floating-vue";
|
||||
import IconArrowDown from "~icons/ri/arrow-down-s-fill";
|
||||
import MdiMenuDown from "~icons/mdi/menu-down";
|
||||
import type { ToolbarItem } from "@/types";
|
||||
|
||||
withDefaults(
|
||||
|
@ -11,7 +11,7 @@ withDefaults(
|
|||
title?: string;
|
||||
action?: () => void;
|
||||
icon?: Component;
|
||||
children: ToolbarItem[];
|
||||
children?: ToolbarItem[];
|
||||
}>(),
|
||||
{
|
||||
isActive: false,
|
||||
|
@ -28,16 +28,16 @@ withDefaults(
|
|||
<button
|
||||
v-tooltip="title"
|
||||
:class="[
|
||||
{ 'bg-gray-200': isActive },
|
||||
{ 'bg-gray-200/70': isActive },
|
||||
{ 'cursor-not-allowed opacity-70': disabled },
|
||||
{ 'hover:bg-gray-100': !disabled },
|
||||
]"
|
||||
class="inline-flex items-center space-x-1 p-1 rounded-sm"
|
||||
class="inline-flex items-center space-x-1 p-1.5 rounded-md"
|
||||
:disabled="disabled"
|
||||
tabindex="-1"
|
||||
@click="action"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<IconArrowDown v-if="children?.length" />
|
||||
<MdiMenuDown v-if="children?.length" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
@ -31,19 +31,19 @@ const action = () => {
|
|||
{ 'cursor-not-allowed opacity-70 ': disabled },
|
||||
{ 'hover:bg-gray-100': !disabled },
|
||||
]"
|
||||
class="flex flex-row items-center rounded gap-4 p-1 group cursor-pointer"
|
||||
class="flex flex-row items-center rounded gap-3 py-1 px-1.5 group cursor-pointer"
|
||||
@click="action"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
class="bg-gray-100 p-1 rounded w-6 h-6"
|
||||
class="bg-gray-100 p-1.5 rounded w-7 h-7"
|
||||
:class="[
|
||||
{ '!bg-white': isActive },
|
||||
{ 'group-hover:bg-white': !disabled },
|
||||
]"
|
||||
/>
|
||||
<span
|
||||
class="text-xs text-gray-600"
|
||||
class="text-sm text-gray-600"
|
||||
:class="[
|
||||
{ '!text-gray-900 !font-medium': isActive },
|
||||
{ 'group-hover:font-medium group-hover:text-gray-900': !disabled },
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import type { Editor } from "@/tiptap";
|
||||
import { Extension } from "@/tiptap";
|
||||
import type { ExtensionOptions } from "@/types";
|
||||
import type { Editor } from "@/tiptap";
|
||||
import { markRaw } from "vue";
|
||||
import IconParkSolidClearFormat from "~icons/icon-park-solid/clear-format";
|
||||
import MdiEraser from "~icons/mdi/eraser";
|
||||
import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
|
||||
import { i18n } from "@/locales";
|
||||
|
||||
|
@ -16,7 +16,7 @@ const clearFormat = Extension.create<ExtensionOptions>({
|
|||
props: {
|
||||
editor,
|
||||
isActive: false,
|
||||
icon: markRaw(IconParkSolidClearFormat),
|
||||
icon: markRaw(MdiEraser),
|
||||
title: i18n.global.t("editor.common.clear_format"),
|
||||
action: () => editor.chain().focus().unsetAllMarks().run(),
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@ import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
|
|||
import { i18n } from "@/locales";
|
||||
import { CoreEditor, Extension, Plugin, PluginKey } from "@/tiptap";
|
||||
import { markRaw } from "vue";
|
||||
import BxsBrushAlt from "~icons/bxs/brush-alt";
|
||||
import MdiBrushVariant from "~icons/mdi/brush-variant";
|
||||
import { getMarksByFirstTextNode, setMarks } from "./util";
|
||||
|
||||
declare module "@/tiptap" {
|
||||
|
@ -32,7 +32,7 @@ const formatBrush = Extension.create<any, FormatBrushStore>({
|
|||
props: {
|
||||
editor,
|
||||
isActive: formatBrush,
|
||||
icon: markRaw(BxsBrushAlt),
|
||||
icon: markRaw(MdiBrushVariant),
|
||||
title: formatBrush
|
||||
? i18n.global.t(
|
||||
"editor.extensions.format_brush.toolbar_item.cancel"
|
||||
|
|
Loading…
Reference in New Issue