From 732cd6d2cfc2749de15d2c5f1ca17cf9a59e16f9 Mon Sep 17 00:00:00 2001 From: Wenzhao Hu Date: Fri, 25 Apr 2025 11:08:07 +0800 Subject: [PATCH] refactor(uni): refactor uni mode with tailwindcss (#5075) --- packages-experimental/uni-docs-ui/README.md | 2 +- ...ntroller.tsx => uni-docs-ui.controller.ts} | 16 +- .../uni-docs-ui/src/global.css | 2 - .../uni-docs-ui/src/index.ts | 2 - .../src/views/components/DocFormulaPopup.tsx | 35 +- .../src/views/components/index.module.less | 67 --- .../uni-formula/src/index.ts | 4 +- .../src/services/uni-formula.service.ts | 4 - .../uni-formula/src/uni-formula.plugin.ts | 14 +- .../controllers/uni-sheets-ui.controller.tsx | 2 +- .../src/views/uni-sheet-bar/UniSheetBar.tsx | 26 +- .../src/views/uni-sheet-bar/index.module.less | 80 --- .../src/views/UniSlideSideBar.tsx | 43 +- .../uni-slides-ui/src/views/index.module.less | 112 ---- packages-experimental/uniui/src/global.css | 6 + .../src/views/uni-controls/UniControls.tsx | 62 ++- .../src/views/uni-controls/index.module.less | 234 --------- .../src/views/uni-sidebar/UniSidebar.tsx | 53 +- .../src/views/uni-sidebar/index.module.less | 95 ---- .../src/views/uni-toolbar/UniFloatToolbar.tsx | 22 +- .../src/views/uni-toolbar/UniFormulaBar.tsx | 36 +- .../src/views/uni-toolbar/UniToolbar.tsx | 11 +- .../src/views/uni-toolbar/index.module.less | 477 ------------------ .../src/views/workbench/UniWorkbench.tsx | 49 +- .../src/views/workbench/workbench.module.less | 151 ------ 25 files changed, 284 insertions(+), 1321 deletions(-) rename packages-experimental/uni-docs-ui/src/controllers/{uni-docs-ui.controller.tsx => uni-docs-ui.controller.ts} (89%) delete mode 100644 packages-experimental/uni-docs-ui/src/global.css delete mode 100644 packages-experimental/uni-formula-ui/src/views/components/index.module.less delete mode 100644 packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/index.module.less delete mode 100644 packages-experimental/uni-slides-ui/src/views/index.module.less delete mode 100644 packages-experimental/uniui/src/views/uni-controls/index.module.less delete mode 100644 packages-experimental/uniui/src/views/uni-sidebar/index.module.less delete mode 100644 packages-experimental/uniui/src/views/uni-toolbar/index.module.less delete mode 100644 packages-experimental/uniui/src/views/workbench/workbench.module.less diff --git a/packages-experimental/uni-docs-ui/README.md b/packages-experimental/uni-docs-ui/README.md index 57db079f8f..0a4b4bad90 100644 --- a/packages-experimental/uni-docs-ui/README.md +++ b/packages-experimental/uni-docs-ui/README.md @@ -5,7 +5,7 @@ ## Introduction -> TODO: Introduction +This package provides a UI controller in replacement of the `@univerjs/docs-ui` package. ## Usage diff --git a/packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.tsx b/packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.ts similarity index 89% rename from packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.tsx rename to packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.ts index d8bab0363b..d807efe0d4 100644 --- a/packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.tsx +++ b/packages-experimental/uni-docs-ui/src/controllers/uni-docs-ui.controller.ts @@ -16,7 +16,20 @@ import { ICommandService, IConfigService, Inject, Injector, IUniverInstanceService, UniverInstanceType } from '@univerjs/core'; import { DOCS_IMAGE_MENU_ID } from '@univerjs/docs-drawing-ui'; -import { BulletListCommand, DocCreateTableOperation, DocUIController, OrderListCommand, SetInlineFormatBoldCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from '@univerjs/docs-ui'; +import { + BulletListCommand, + DocCreateTableOperation, + DocUIController, + OrderListCommand, + SetInlineFormatBoldCommand, + SetInlineFormatFontFamilyCommand, + SetInlineFormatFontSizeCommand, + SetInlineFormatItalicCommand, + SetInlineFormatStrikethroughCommand, + SetInlineFormatTextBackgroundColorCommand, + SetInlineFormatTextColorCommand, + SetInlineFormatUnderlineCommand, +} from '@univerjs/docs-ui'; import { ComponentManager, ILayoutService, IMenuManagerService, IShortcutService, IUIPartsService } from '@univerjs/ui'; import { BuiltinUniToolbarItemId, generateCloneMutation, UniToolbarService } from '@univerjs/uniui'; import { DOC_BOLD_MUTATION_ID, DOC_ITALIC_MUTATION_ID, DOC_STRIKE_MUTATION_ID, DOC_TABLE_MUTATION_ID, DOC_UNDERLINE_MUTATION_ID } from './menu'; @@ -46,6 +59,7 @@ export class UniDocsUIController extends DocUIController { shortcutService, configService ); + this._initUniMenus(); this._initMutations(); } diff --git a/packages-experimental/uni-docs-ui/src/global.css b/packages-experimental/uni-docs-ui/src/global.css deleted file mode 100644 index 7c05d4ddc4..0000000000 --- a/packages-experimental/uni-docs-ui/src/global.css +++ /dev/null @@ -1,2 +0,0 @@ -@tailwind components; -@tailwind utilities; diff --git a/packages-experimental/uni-docs-ui/src/index.ts b/packages-experimental/uni-docs-ui/src/index.ts index 63ada7105a..67f5352c2e 100644 --- a/packages-experimental/uni-docs-ui/src/index.ts +++ b/packages-experimental/uni-docs-ui/src/index.ts @@ -14,6 +14,4 @@ * limitations under the License. */ -import './global.css'; - export { UniDocsUIController } from './controllers/uni-docs-ui.controller'; diff --git a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx index 4dc7aaca38..d07e7c990e 100644 --- a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx +++ b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx @@ -16,16 +16,24 @@ import type { IDocumentData, Nullable } from '@univerjs/core'; import type { IUniFormulaPopupInfo } from '../../services/formula-popup.service'; -import { BooleanNumber, createInternalEditorID, DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, HorizontalAlign, ICommandService, LocaleService, VerticalAlign, WrapStrategy } from '@univerjs/core'; -import { clsx } from '@univerjs/design'; -// import { TextEditor } from '@univerjs/docs-ui'; + +import { + BooleanNumber, + createInternalEditorID, + DEFAULT_EMPTY_DOCUMENT_VALUE, + DocumentFlavor, + HorizontalAlign, + ICommandService, + LocaleService, + VerticalAlign, + WrapStrategy, +} from '@univerjs/core'; import { CheckMarkSingle, CloseSingle } from '@univerjs/icons'; import { useDependency, useObservable } from '@univerjs/ui'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { CloseFormulaPopupOperation, ConfirmFormulaPopupCommand } from '../../commands/operations/operation'; import { DOC_FORMULA_POPUP_KEY, UniFormulaPopupService } from '../../services/formula-popup.service'; -import styles from './index.module.less'; export const UNI_FORMULA_EDITOR_ID = createInternalEditorID('UNI_FORMULA'); @@ -122,7 +130,17 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) { }, [handleEscKey]); return ( -
onHovered(true)} onMouseLeave={() => onHovered(false)}> +
onHovered(true)} + onMouseLeave={() => onHovered(false)} + > + {/* TODO@wzhudev: fix DocFormulaFloat */} {/* setFocused(false)} /> */} -
+
- diff --git a/packages-experimental/uni-formula-ui/src/views/components/index.module.less b/packages-experimental/uni-formula-ui/src/views/components/index.module.less deleted file mode 100644 index 899d2526fd..0000000000 --- a/packages-experimental/uni-formula-ui/src/views/components/index.module.less +++ /dev/null @@ -1,67 +0,0 @@ -.doc-ui-formula-popup { - overflow: hidden; - - width: 482px; - display: flex; - - border-radius: 10px; - border: 1px solid var(--, #ecedef); - background: #fff; - height: 48px; - padding: 8px; - align-items: center; - box-sizing: border-box; - gap: 8px; - box-shadow: 0px 2px 4px 0px rgba(30, 34, 43, 0.06); - - &-title { - font-size: var(--font-size-xs); - } - - &-editor { - position: relative; - width: 100%; - height: 100%; - color: var(---Hyacinth-Blue-500, #274fee); - font-size: 13px; - font-style: normal; - font-weight: 500; - line-height: 20px; /* 153.846% */ - - user-select: none; - transition: all 0.15s; - border-radius: var(--radius-m, 6px); - border: 1px solid var(---Hyacinth-Blue-500, #274fee); - background: #f0f3fe; - box-shadow: 0px 0px 4px 0px rgba(39, 79, 238, 0.4); - - // &-activated { - // border-color: rgb(var(--primary-color)); - // } - } - - &-button-grp { - margin-top: var(--margin-xs); - text-align: right; - text-wrap: nowrap; - - button:not(:last-of-type) { - margin-right: var(--margin-xxs); - } - } - - .formula-icon { - display: flex; - } - .icon-container { - display: flex; - padding: var(--radius-m, 6px); - align-items: center; - gap: 10px; - border-radius: 8px; - &:hover { - background: var(--hyacinth-blue-5007, rgba(39, 79, 238, 0.07)); - color: #274fee; - } - } -} diff --git a/packages-experimental/uni-formula/src/index.ts b/packages-experimental/uni-formula/src/index.ts index 29209fb210..dff196cffa 100644 --- a/packages-experimental/uni-formula/src/index.ts +++ b/packages-experimental/uni-formula/src/index.ts @@ -15,7 +15,7 @@ */ export { UniverDocUniFormulaPlugin } from './uni-formula.plugin'; -export { IUniFormulaService, DumbUniFormulaService } from './services/uni-formula.service'; +export { DumbUniFormulaService, IUniFormulaService } from './services/uni-formula.service'; export { UNI_FORMULA_PLUGIN_NAME as DOC_FORMULA_PLUGIN_NAME } from './const'; export type { IDocFormulaCache, IDocFormulaData, IDocFormulaReference } from './models/doc-formula'; export type { ISlideFormulaCache, ISlideFormulaData, ISlideFormulaReference } from './models/slide-formula'; @@ -23,10 +23,10 @@ export type { ISlideFormulaCache, ISlideFormulaData, ISlideFormulaReference } fr // #region - all commands export { + AddDocUniFormulaMutation, type IAddDocUniFormulaMutationParams, type IRemoveDocUniFormulaMutationParams, type IUpdateDocUniFormulaMutationParams, - AddDocUniFormulaMutation, RemoveDocUniFormulaMutation, UpdateDocUniFormulaMutation, } from './commands/mutations/doc-formula.mutation'; diff --git a/packages-experimental/uni-formula/src/services/uni-formula.service.ts b/packages-experimental/uni-formula/src/services/uni-formula.service.ts index 7a4881ccc8..09e6c5a0f2 100644 --- a/packages-experimental/uni-formula/src/services/uni-formula.service.ts +++ b/packages-experimental/uni-formula/src/services/uni-formula.service.ts @@ -35,21 +35,17 @@ export interface IUniFormulaService { updateSlideFormulaResults(unitId: string, pageId: string, elementId: string, formulaId: string, v: IDocFormulaCache): boolean; // #region doc - hasDocFormula(unitId: string, formulaId: string): boolean; getDocFormula(unitId: string, rangeId: string): Nullable; registerDocFormula(unitId: string, rangeId: string, f: string, v: ICellData['v'], t: ICellData['t']): IDisposable; unregisterDocFormula(unitId: string, rangeId: string): void; - // #endregion // #region slide - hasSlideFormula(unitId: string, pageId: string, elementId: string, formulaId: string): boolean; getSlideFormula(unitId: string, pageId: string, elementId: string, formulaId: string): Nullable; registerSlideFormula(unitId: string, pageId: string, elementId: string, f: string, v: ICellData['v'], t: ICellData['t']): IDisposable; unregisterSlideFormula(unitId: string, pageId: string, elementId: string, formulaId: string): void; - // #endregion } diff --git a/packages-experimental/uni-formula/src/uni-formula.plugin.ts b/packages-experimental/uni-formula/src/uni-formula.plugin.ts index 32a15a2229..e1d81262ca 100644 --- a/packages-experimental/uni-formula/src/uni-formula.plugin.ts +++ b/packages-experimental/uni-formula/src/uni-formula.plugin.ts @@ -15,10 +15,10 @@ */ import type { Dependency } from '@univerjs/core'; -import { Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/core'; -import { DumbUniFormulaService, IUniFormulaService } from './services/uni-formula.service'; +import { Inject, Injector, Plugin, registerDependencies, touchDependencies, UniverInstanceType } from '@univerjs/core'; import { UNI_FORMULA_PLUGIN_NAME } from './const'; import { UniFormulaController } from './controller/uni-formula.controller'; +import { DumbUniFormulaService, IUniFormulaService } from './services/uni-formula.service'; export class UniverDocUniFormulaPlugin extends Plugin { static override pluginName: string = UNI_FORMULA_PLUGIN_NAME; @@ -34,12 +34,12 @@ export class UniverDocUniFormulaPlugin extends Plugin { } override onStarting(): void { - this._injector.add([UniFormulaController]); - this._injector.get(UniFormulaController); - + const dependencies: Dependency[] = [[UniFormulaController]]; if (this._config?.playDumb) { - this._injector.add([IUniFormulaService, { useClass: DumbUniFormulaService }] as Dependency); - this._injector.get(IUniFormulaService); + dependencies.push([IUniFormulaService, { useClass: DumbUniFormulaService }]); } + + registerDependencies(this._injector, dependencies); + touchDependencies(this._injector, dependencies.map((d) => [d[0]])); } } diff --git a/packages-experimental/uni-sheets-ui/src/controllers/uni-sheets-ui.controller.tsx b/packages-experimental/uni-sheets-ui/src/controllers/uni-sheets-ui.controller.tsx index 93d0a939e5..ca2da57072 100644 --- a/packages-experimental/uni-sheets-ui/src/controllers/uni-sheets-ui.controller.tsx +++ b/packages-experimental/uni-sheets-ui/src/controllers/uni-sheets-ui.controller.tsx @@ -56,7 +56,6 @@ export class UniSheetsUIController extends SheetUIController { const uiController = this._uiPartsService; const injector = this._injector; - // this.disposeWithMe(uiController.registerComponent(BuiltInUIPart.HEADER, () => connectInjector(RenderSheetHeader, injector))); this.disposeWithMe(uiController.registerComponent(UniUIPart.OUTLINE, () => connectInjector(RenderOutline, injector))); this.disposeWithMe(uiController.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(RenderSheetContent, injector))); } @@ -91,6 +90,7 @@ function RenderOutline() { const univerInstanceService = useDependency(IUniverInstanceService); const focused = useObservable(univerInstanceService.focused$); const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), null, false, []); + if (!workbook || focused !== workbook?.getUnitId()) return null; return ( diff --git a/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/UniSheetBar.tsx b/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/UniSheetBar.tsx index 417215a3d2..cc1c14bdda 100644 --- a/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/UniSheetBar.tsx +++ b/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/UniSheetBar.tsx @@ -23,7 +23,6 @@ import { InsertSheetCommand, InsertSheetMutation, RemoveSheetMutation, SetTabCol import { useActiveWorkbook } from '@univerjs/sheets-ui'; import { useDependency } from '@univerjs/ui'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import styles from './index.module.less'; export function UniSheetBar() { const [sheetList, setSheetList] = useState([]); @@ -102,15 +101,15 @@ export function UniSheetBar() { }); return ( -
-
-
+
+
+
{sheetList.map((item, index) => (
handleSheetActiveChange(item.sheetId)} > @@ -126,8 +125,19 @@ export function UniSheetBar() {
-
diff --git a/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/index.module.less b/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/index.module.less deleted file mode 100644 index af461a7981..0000000000 --- a/packages-experimental/uni-sheets-ui/src/views/uni-sheet-bar/index.module.less +++ /dev/null @@ -1,80 +0,0 @@ -.uni-sheet-bar { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; - user-select: none; - - .sheet-tab { - overflow-y: auto; - scrollbar-width: thin; - - .sheet-items { - display: flex; - flex-direction: column; - gap: var(--margin-xxs); - font-size: var(--font-size-xs); - font-weight: 500; - - .sheet-item { - display: flex; - align-items: center; - height: 32px; - padding: 0 var(--margin-xs); - border-radius: var(--border-radius-lg); - - > span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 142px; - } - - &:hover { - background-color: rgb(var(--grey-100)); - cursor: pointer; - } - - &.active { - color: rgba(var(--hyacinth-500)); - background-color: rgb(var(--hyacinth-500), 0.07); - } - } - } - } - - .new-sheet-button { - position: relative; - height: 32px; - margin-top: 16px; - padding: 0 var(--margin-xs); - border-radius: var(--border-radius-lg); - color: rgba(var(--hyacinth-500)); - background-color: transparent; - border: 0; - display: flex; - align-items: center; - justify-content: center; - - &-icon { - width: 16px; - height: 16px; - margin-right: 5px; - } - - &:hover { - background-color: rgb(var(--grey-100)); - cursor: pointer; - } - - &::before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: -10px; - height: 1px; - background-color: #ecedef; - } - } -} diff --git a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx index d2efd9bafc..efecca5157 100644 --- a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx +++ b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx @@ -23,8 +23,6 @@ import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOper import { useDependency, useObservable } from '@univerjs/ui'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import styles from './index.module.less'; - /** * This components works as the root component of the left Sidebar of Slide. */ @@ -66,7 +64,6 @@ export function UniSlideSideBar() { return () => { subscriber?.unsubscribe(); }; - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -100,23 +97,45 @@ export function UniSlideSideBar() { }, [commandService, currentSlide]); return ( -
-
+
+
{slideList.map((item, index) => (
activatePage(item.id)} > - {index + 1} -
+ + {index + 1} + +
))}
-
diff --git a/packages-experimental/uni-slides-ui/src/views/index.module.less b/packages-experimental/uni-slides-ui/src/views/index.module.less deleted file mode 100644 index a2f4867fae..0000000000 --- a/packages-experimental/uni-slides-ui/src/views/index.module.less +++ /dev/null @@ -1,112 +0,0 @@ -.uni-slide-bar { - display: flex; - flex-direction: column; - height: 100%; - user-select: none; - - &-content { - overflow-y: auto; - scrollbar-width: thin; - - .uni-slide-bar-item { - box-sizing: border-box; - position: relative; - display: flex; - overflow: hidden; - margin: 15px 0; - width: 160px; - border-radius: 8px; - border: 1px solid #ecedef; - - span { - position: absolute; - width: 15px; - font-size: 12px; - left: 6px; - bottom: 6px; - width: 20px; - height: 20px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - overflow: hidden; - background: rgba(20, 34, 43, 0.4); - z-index: 10; - color: white; - } - - .uni-slide-bar-box { - position: relative; - width: 160px; - height: 90px; - } - - &-active { - border-color: rgb(var(--blue-500)); - } - - &:hover { - border-color: rgb(var(--blue-500)); - } - } - - &-header { - padding-top: var(--padding-lg); - display: flex; - justify-content: center; - - a { - width: 212px; - padding: var(--padding-xs) 0; - font-size: var(--font-size-sm); - background: rgb(var(--bg-color-secondary)); - text-align: center; - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-base); - display: block; - transition: all 0.25s; - cursor: pointer; - - &:hover { - background: rgb(var(--bg-color-hover)); - } - } - } - } - - .new-slide-button { - position: relative; - height: 32px; - margin-top: 16px; - padding: 0 var(--margin-xs); - border-radius: var(--border-radius-lg); - color: rgba(var(--hyacinth-500)); - background-color: transparent; - border: 0; - display: flex; - align-items: center; - justify-content: center; - - &-icon { - width: 16px; - height: 16px; - margin-right: 5px; - } - - &:hover { - background-color: rgb(var(--grey-100)); - cursor: pointer; - } - - &::before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: -10px; - height: 1px; - background-color: #ecedef; - } - } -} diff --git a/packages-experimental/uniui/src/global.css b/packages-experimental/uniui/src/global.css index 7c05d4ddc4..b484cfe56d 100644 --- a/packages-experimental/uniui/src/global.css +++ b/packages-experimental/uniui/src/global.css @@ -1,2 +1,8 @@ @tailwind components; @tailwind utilities; + +@layer utilities { + .scrollbar-gutter-auto { + scrollbar-gutter: auto; + } +} diff --git a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx index 3b4f699641..e12297ee1a 100644 --- a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx +++ b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx @@ -22,13 +22,20 @@ import { useReactFlow } from '@xyflow/react'; import React, { useCallback, useEffect, useLayoutEffect } from 'react'; import { IUnitGridService } from '../../services/unit-grid/unit-grid.service'; import { UniDiv } from '../uni-toolbar/UniFloatToolbar'; -import styles from './index.module.less'; export const UniControlButton = (props: { tooltips: string; children?: React.ReactElement; onClick: () => void; style?: React.CSSProperties }) => { const { children, onClick, style, tooltips } = props; return ( -
+
{children}
@@ -47,6 +54,8 @@ export enum UniControlItem { AI = 'AI', } +// The component on the bottom right corner of the screen, providing zoom in, zoom out, fit view, +// and AI button and other shared functionalities. export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: (key: UniControlItem) => void }) => { const unitGridService = useDependency(IUnitGridService); const { zoomIn, zoomOut, fitView, getNodes, setCenter, getZoom } = useReactFlow(); @@ -117,7 +126,14 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: }, [fitView]); return ( -
+
@@ -126,18 +142,38 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: + )} > - + {zoomPercent} % diff --git a/packages-experimental/uniui/src/views/uni-controls/index.module.less b/packages-experimental/uniui/src/views/uni-controls/index.module.less deleted file mode 100644 index e605dc0711..0000000000 --- a/packages-experimental/uniui/src/views/uni-controls/index.module.less +++ /dev/null @@ -1,234 +0,0 @@ -.uni-controls { - display: flex; - padding: 8px; - align-items: center; - gap: 12px; - border-radius: 10px; - border: 1px solid var(--, #ecedef); - background: #fff; - - box-shadow: 0px 2px 4px 0px rgba(30, 34, 43, 0.06); - width: fit-content; - - position: fixed; - right: 12px; - bottom: 12px; -} - -.uni-control-button { - display: flex; - padding: var(--radius-m, 6px); - align-items: center; - justify-content: center; - border-radius: 8px; - box-sizing: border-box; - width: 32px; - height: 32px; - - &:hover { - background: rgba(30, 34, 43, 0.05); - } -} - -@slider-bg: rgb(var(--text-color-secondary)); -@slider-width: 116px; -@slider-height: 2px; -@slider-radius: 15px; - -@slider-handle-size: 12px; - -@slider-value-width: 55px; -@slider-value-height: 28px; - -@slider-parts-hover-color: rgb(var(--border-color)); - -:export { - --slider-width: unit(@slider-width); - --slider-handle-size: unit(@slider-handle-size); -} - -.slider { - user-select: none; - display: flex; - gap: var(--margin-xxs); - align-items: center; - - &-disabled { - cursor: not-allowed; - - .slider { - &-rail { - background-color: rgb(var(--grey-300)); - } - - &-handle { - background-color: rgb(var(--grey-300)); - box-shadow: none; - - &:hover { - cursor: not-allowed; - background-color: rgb(var(--grey-300)); - } - } - - &-reset-point { - cursor: not-allowed; - } - - &-value { - &:hover { - cursor: not-allowed; - background-color: rgb(var(--grey-300)); - } - } - - &-value { - pointer-events: none; - color: rgb(var(--grey-300)); - - &:hover { - background-color: transparent; - } - } - } - } - - &-rail { - @padding: (@slider-handle-size / 2); - - position: relative; - - width: @slider-width; - height: @slider-height; - padding: 0 @padding; - - background-color: @slider-bg; - border-radius: @slider-radius; - } - - &-inner-rail { - position: relative; - height: @slider-height; - } - - &-handle { - cursor: pointer; - - position: absolute; - top: calc(50% - @slider-handle-size / 2); - transform: translateX(-50%); - - width: @slider-handle-size; - height: @slider-handle-size; - - background-color: rgb(var(--color-white)); - border-radius: 50%; - box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%); - - transition: background 0.2s; - - &:hover { - background-color: @slider-parts-hover-color; - box-shadow: none; - } - } - - &-reset-point { - cursor: pointer; - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - box-sizing: border-box; - width: @slider-height * 2; - height: @slider-height; - - background-color: rgb(var(--color-white)); - border-radius: 50%; - } - - &-value { - cursor: pointer; - - width: @slider-value-width; - height: @slider-value-height; - - font-size: var(--font-size-xs); - line-height: 2; - color: rgb(var(--text-color-secondary-darker)); - text-align: center; - - border-radius: var(--border-radius-base); - - transition: all 0.2s; - - text-decoration: none; - - &:hover { - background-color: @slider-parts-hover-color; - text-decoration: inherit; - color: inherit; - } - - &.dropdown-open { - background-color: @slider-parts-hover-color; - } - } - - &-shortcuts { - transform: translateX(-(@slider-value-width / 2)); - - display: grid; - gap: var(--margin-xxs); - align-items: center; - - box-sizing: border-box; - width: 128px; - padding: var(--padding-sm); - - font-size: var(--font-size-xs); - - background-color: rgb(var(--color-white)); - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-lg); - box-shadow: var(--box-shadow-lg); - } - - &-shortcut { - cursor: pointer; - - position: relative; - - box-sizing: border-box; - padding: var(--padding-xs) 0 var(--padding-xs) 36px; - - color: rgb(var(--text-color)); - - border-radius: var(--border-radius-base); - - transition: background 0.2s; - text-decoration: none; - - &:hover { - background-color: rgb(var(--bg-color-hover)); - color: inherit; - text-decoration: inherit; - } - } - - &-shortcut-icon { - position: absolute; - top: 0; - left: var(--padding-xs); - height: 100%; - color: rgb(var(--success-color)); - display: flex; - align-items: center; - } - - &-shortcut-active { - background-color: rgb(var(--bg-color-hover)); - } -} diff --git a/packages-experimental/uniui/src/views/uni-sidebar/UniSidebar.tsx b/packages-experimental/uniui/src/views/uni-sidebar/UniSidebar.tsx index ac24060d32..5370a8cddc 100644 --- a/packages-experimental/uniui/src/views/uni-sidebar/UniSidebar.tsx +++ b/packages-experimental/uniui/src/views/uni-sidebar/UniSidebar.tsx @@ -19,7 +19,6 @@ import { clsx } from '@univerjs/design'; import { CloseSingle } from '@univerjs/icons'; import { CustomLabel, ILeftSidebarService, ISidebarService, useDependency, useObservable } from '@univerjs/ui'; import React, { useEffect, useMemo, useRef } from 'react'; -import styles from './index.module.less'; export interface IUniSidebarProps { position: 'left' | 'right'; @@ -82,14 +81,8 @@ export function UniSidebar(props: IUniSidebarProps) { }; }, [sidebarService]); - const rootClassName = clsx(styles.uniSidebar, { - [styles.uniSidebarOpen]: options?.visible, - [styles.uniSidebarLeft]: position === 'left', - [styles.uniSidebarRight]: position === 'right', - }); - const width = useMemo(() => { - if (!options?.visible) return 0; + if (!options?.visible) return '0px'; if (typeof options.width === 'number') { return `${options.width}px`; @@ -108,21 +101,51 @@ export function UniSidebar(props: IUniSidebarProps) { options?.onClose?.(); } return ( -