opensource/univer
3
0
Fork 0
mirror of https://github.com/dream-num/univer.git synced 2026-09-24 15:32:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(*): update scrollbar styling and improve class management in UI components (#5291)

Browse Source 
Co-authored-by: GitHub Actions <actions@github.com>
This commit is contained in:
白熱
2025-05-28 21:04:34 +08:00
committed by GitHub
co-authored by GitHub Actions
parent 5396caef41
commit bc94fd2f65
47 changed files with 520 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/shared/package.json
+2 -2
View File
@@ -46,8 +46,8 @@
},
"devDependencies": {
"@types/fs-extra": "^11.0.4",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons-svg": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/icons-svg": "^0.4.4",
"@univerjs/protocol": "0.1.46"
}
}
e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 54 KiB

examples/package.json
+1 -1
View File
@@ -35,7 +35,7 @@
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/find-replace": "workspace:*",
"@univerjs/icons": "0.4.3",
"@univerjs/icons": "0.4.4",
"@univerjs/mockdata": "workspace:*",
"@univerjs/network": "workspace:*",
"@univerjs/rpc": "workspace:*",
packages-experimental/debugger/package.json
+1 -1
View File
@@ -61,7 +61,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/docs-drawing-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/mockdata": "workspace:*",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-drawing-ui": "workspace:*",
packages-experimental/uni-formula-ui/package.json
+1 -1
View File
@@ -71,7 +71,7 @@
"@univerjs/docs": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/rpc": "workspace:*",
"@univerjs/sheets-formula": "workspace:*",
"@univerjs/sheets-formula-ui": "workspace:*",
packages-experimental/uni-sheets-ui/package.json
+1 -1
View File
@@ -64,7 +64,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/docs": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-drawing-ui": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages-experimental/uni-slides-ui/package.json
+1 -1
View File
@@ -62,7 +62,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/slides-ui": "workspace:*",
"@univerjs/ui": "workspace:*",
"@univerjs/uniui": "workspace:*"
packages-experimental/uniui/package.json
+1 -1
View File
@@ -65,7 +65,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
"@univerjs/ui": "workspace:*",
packages/action-recorder/package.json
+1 -1
View File
@@ -68,7 +68,7 @@
"dependencies": {
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-filter": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/design/package.json
+1 -1
View File
@@ -76,7 +76,7 @@
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-tooltip": "^1.2.7",
"@rc-component/trigger": "^2.2.6",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/themes": "workspace:*",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
packages/design/src/components/dropdown-menu/DropdownMenu.tsx
+6 -1
View File
@@ -198,7 +198,12 @@ export function DropdownMenu(props: IDropdownMenuProps) {
<DropdownMenuTrigger asChild>
{children}
</DropdownMenuTrigger>
<DropdownMenuContent className="univer-text-sm" {...restProps} onWheel={(e) => e.stopPropagation()}>
<DropdownMenuContent
className="univer-text-sm"
collisionPadding={{ top: 12, bottom: 12 }}
onWheel={(e) => e.stopPropagation()}
{...restProps}
>
{items.map((item, index) => renderMenuItem(item, index))}
</DropdownMenuContent>
</DropdownMenuPrimitive>
packages/design/src/components/form-layout/FormLayout.tsx
+7 -9
View File
@@ -53,15 +53,13 @@ export const FormLayout = (props: IFormLayoutProps) => {
onClick={() => setCollapsed(!collapsed)}
>
{label}
{collapsable
? (
<MoreUpIcon
className={clsx('univer-ml-1 univer-transition-transform', {
'univer-rotate-180': collapsed,
})}
/>
)
: null}
{collapsable && (
<MoreUpIcon
className={clsx('univer-ml-1 univer-transition-transform', {
'univer-rotate-180': collapsed,
})}
/>
)}
</div>
)}
{collapsed && collapsable
packages/docs-hyper-link-ui/package.json
+1 -1
View File
@@ -72,7 +72,7 @@
"@univerjs/docs-hyper-link": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/ui": "workspace:*"
},
"devDependencies": {
packages/docs-quick-insert-ui/package.json
+1 -1
View File
@@ -75,7 +75,7 @@
"@univerjs/drawing": "workspace:*",
"@univerjs/drawing-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/ui": "workspace:*"
},
"devDependencies": {
packages/docs-quick-insert-ui/src/views/QuickInsertPopup.tsx
+7 -3
View File
@@ -16,7 +16,7 @@
import type { DocPopupMenu, IDocPopupMenuItem } from '../services/doc-quick-insert-popup.service';
import { CommandType, Direction, DisposableCollection, generateRandomId, ICommandService, LocaleService, toDisposable } from '@univerjs/core';
import { clsx, Menu, MenuItem, MenuItemGroup, Tooltip } from '@univerjs/design';
import { clsx, Menu, MenuItem, MenuItemGroup, scrollbarClassName, Tooltip } from '@univerjs/design';
import { ComponentManager, IShortcutService, KeyCode, useDependency, useObservable } from '@univerjs/ui';
import { useEffect, useMemo, useRef, useState } from 'react';
import { CloseQuickInsertPopupOperation } from '../commands/operations/quick-insert-popup.operation';
@@ -280,10 +280,14 @@ export const QuickInsertPopup = () => {
const Placeholder = currentPopup?.popup.Placeholder || componentManager.get(QuickInsertPlaceholder.componentKey);
return (
<div className={clsx('univer-mt-2')}>
<div className="univer-mt-2">
{hasMenus
? (
<Menu wrapperClass="univer-max-h-[360px] univer-w-[220px] univer-overflow-y-auto univer-overflow-x-hidden">
<Menu
wrapperClass={clsx(`
univer-max-h-[360px] univer-w-[220px] univer-overflow-y-auto univer-overflow-x-hidden
`, scrollbarClassName)}
>
{renderMenus(filteredMenus)}
</Menu>
)
packages/docs-thread-comment-ui/package.json
+1 -1
View File
@@ -64,7 +64,7 @@
"@univerjs/docs": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/thread-comment": "workspace:*",
"@univerjs/thread-comment-ui": "workspace:*",
"@univerjs/ui": "workspace:*"
packages/docs-ui/package.json
+1 -1
View File
@@ -84,7 +84,7 @@
"@univerjs/docs": "workspace:*",
"@univerjs/drawing": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/ui": "workspace:*"
},
"devDependencies": {
packages/drawing-ui/package.json
+1 -1
View File
@@ -70,7 +70,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/drawing": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/ui": "workspace:*"
},
"devDependencies": {
packages/find-replace/package.json
+1 -1
View File
@@ -71,7 +71,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/ui": "workspace:*"
},
"devDependencies": {
packages/sheets-conditional-formatting-ui/package.json
+1 -1
View File
@@ -72,7 +72,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-conditional-formatting": "workspace:*",
"@univerjs/sheets-formula-ui": "workspace:*",
packages/sheets-conditional-formatting/package.json
+1 -1
View File
@@ -80,7 +80,7 @@
},
"devDependencies": {
"@univerjs-infra/shared": "workspace:*",
"@univerjs/icons-svg": "^0.4.3",
"@univerjs/icons-svg": "^0.4.4",
"rxjs": "^7.8.2",
"typescript": "^5.8.3",
"vite": "^6.3.5",
packages/sheets-crosshair-highlight/package.json
+1 -1
View File
@@ -80,7 +80,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
"@univerjs/ui": "workspace:*"
packages/sheets-data-validation-ui/package.json
+1 -1
View File
@@ -75,7 +75,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-data-validation": "workspace:*",
"@univerjs/sheets-formula-ui": "workspace:*",
packages/sheets-filter-ui/package.json
+1 -1
View File
@@ -69,7 +69,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/rpc": "workspace:*",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-filter": "workspace:*",
packages/sheets-formula-ui/package.json
+1 -1
View File
@@ -84,7 +84,7 @@
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-formula": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/sheets-formula-ui/src/views/formula-editor/help-function/HelpFunction.tsx
+5 -4
View File
@@ -17,7 +17,7 @@
import type { Editor } from '@univerjs/docs-ui';
import type { IFunctionParam } from '@univerjs/engine-formula';
import { LocaleService } from '@univerjs/core';
import { borderClassName, borderTopClassName, clsx } from '@univerjs/design';
import { borderClassName, borderTopClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { CloseIcon, MoreIcon } from '@univerjs/icons';
import { IEditorBridgeService } from '@univerjs/sheets-ui';
import { RectPopup, useDependency, useEvent, useObservable } from '@univerjs/ui';
@@ -153,6 +153,7 @@ export function HelpFunction(props: IHelpFunctionProps) {
univer-items-center univer-justify-center univer-rounded univer-bg-transparent
univer-p-0 univer-text-xs univer-text-gray-500 univer-outline-none
univer-transition-colors
dark:hover:!univer-bg-gray-600
hover:univer-bg-gray-200
`}
style={{ transform: contentVisible ? 'rotateZ(-90deg)' : 'rotateZ(90deg)' }}
@@ -166,7 +167,7 @@ export function HelpFunction(props: IHelpFunctionProps) {
univer-items-center univer-justify-center univer-rounded univer-bg-transparent
univer-p-0 univer-text-xs univer-text-gray-600 univer-outline-none
univer-transition-colors
dark:!univer-text-gray-200
dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-600
hover:univer-bg-gray-300
`}
onClick={onClose}
@@ -176,10 +177,10 @@ export function HelpFunction(props: IHelpFunctionProps) {
</div>
</div>
<div
className={`
className={clsx(`
univer-box-border univer-max-h-[350px] univer-overflow-y-auto univer-px-4 univer-pb-3
univer-pt-0
`}
`, scrollbarClassName)}
style={{
height: contentVisible ? 'unset' : 0,
padding: contentVisible ? 'revert-layer' : 0,
packages/sheets-formula-ui/src/views/more-functions/MoreFunctions.tsx
+5 -4
View File
@@ -63,12 +63,13 @@ export function MoreFunctions() {
}
return (
<div className="univer-flex univer-h-full univer-flex-col univer-justify-between univer-leading-5">
<div
data-u-comp="sheets-formula-functions-panel"
className="univer-flex univer-h-full univer-flex-col univer-justify-between univer-py-2"
>
{selectFunction && <SelectFunction onChange={setFunctionInfo} />}
{inputParams && <InputParams functionInfo={functionInfo} onChange={() => {}} />}
<div
className="univer-flex univer-justify-end"
>
<div className="univer-flex univer-justify-end">
{/* TODO@Dushusir: open input params after range selector refactor */}
{inputParams && (
<Button
packages/sheets-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx
+5 -4
View File
@@ -15,6 +15,7 @@
*/
import type { ReactElement } from 'react';
import { clsx } from '@univerjs/design';
interface IParamsProps {
className?: string;
@@ -28,16 +29,16 @@ export function FunctionParams(props: IParamsProps) {
return (
<div className="univer-mb-2 univer-text-xs">
<div
className={`
className={clsx(`
univer-mb-2 univer-font-medium univer-text-gray-500
${className}
`}
dark:!univer-text-gray-300
`, className)}
>
{title}
</div>
<div
className={`
univer-text-gray-900
univer-break-all univer-text-gray-900
dark:!univer-text-white
`}
>
packages/sheets-formula-ui/src/views/more-functions/input-params/InputParams.tsx
+2 -2
View File
@@ -15,7 +15,7 @@
*/
import type { IFunctionInfo, IFunctionParam } from '@univerjs/engine-formula';
import { borderLeftClassName, clsx } from '@univerjs/design';
import { borderLeftClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { useState } from 'react';
import { FunctionHelp } from '../function-help/FunctionHelp';
import { FunctionParams } from '../function-params/FunctionParams';
@@ -53,7 +53,7 @@ export function InputParams(props: IInputParamsProps) {
return (
<div>
<div className="univer-h-[364px] univer-overflow-y-auto">
<div className={clsx('univer-h-[364px] univer-overflow-y-auto', scrollbarClassName)}>
{functionParameter.map((item: IFunctionParam, i: number) => (
<div key={i}>
<div className="univer-text-sm">{item.name}</div>
packages/sheets-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx
+40 -38
View File
@@ -19,7 +19,7 @@ import type { ISearchItem } from '@univerjs/sheets-formula';
import type { ISidebarMethodOptions } from '@univerjs/ui';
import type { KeyboardEvent } from 'react';
import { LocaleService } from '@univerjs/core';
import { borderClassName, clsx, Input, Select } from '@univerjs/design';
import { borderClassName, clsx, Input, scrollbarClassName, Select } from '@univerjs/design';
import { FunctionType } from '@univerjs/engine-formula';
import { CheckMarkIcon } from '@univerjs/icons';
import { IDescriptionService } from '@univerjs/sheets-formula';
@@ -35,6 +35,7 @@ export interface ISelectFunctionProps {
export function SelectFunction(props: ISelectFunctionProps) {
const { onChange } = props;
const allTypeValue = '-1';
const [searchText, setSearchText] = useState<string>('');
const [selectList, setSelectList] = useState<ISearchItem[]>([]);
@@ -148,7 +149,7 @@ export function SelectFunction(props: ISelectFunctionProps) {
return (
<div>
<div className="univer-flex univer-items-center univer-justify-between univer-gap-[10%]">
<div className="univer-flex univer-items-center univer-justify-between univer-gap-2">
<Select value={typeSelected} options={options} onChange={handleSelectChange} />
<Input
@@ -161,44 +162,45 @@ export function SelectFunction(props: ISelectFunctionProps) {
/>
</div>
<ul
className={clsx(`
univer-mx-0 univer-mb-0 univer-mt-2 univer-box-border univer-max-h-[364px] univer-w-full
univer-select-none univer-list-none univer-overflow-y-auto univer-rounded univer-p-3
univer-outline-none
`, borderClassName)}
onKeyDown={handleSelectListKeyDown}
tabIndex={-1}
>
{selectList.map(({ name }, index) => (
<li
key={index}
className={clsx(`
univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1
univer-text-sm univer-text-gray-900 univer-transition-colors
dark:!univer-text-white
`, {
'univer-bg-gray-200': active === index,
})}
onMouseEnter={() => handleLiMouseEnter(index)}
onMouseLeave={handleLiMouseLeave}
onClick={() => setCurrentFunctionInfo(index)}
>
{nameSelected === index && (
<CheckMarkIcon
className={`
univer-absolute univer-left-1.5 univer-top-1/2 univer-inline-flex
-univer-translate-y-1/2 univer-text-base univer-text-primary-600
`}
/>
)}
<span className="univer-block">{highlightSearchText(name)}</span>
</li>
))}
</ul>
{selectList.length > 0 && (
<ul
className={clsx(`
univer-m-0 univer-mt-2 univer-box-border univer-max-h-72 univer-w-full univer-select-none
univer-list-none univer-overflow-y-auto univer-rounded univer-p-3 univer-outline-none
`, borderClassName, scrollbarClassName)}
onKeyDown={handleSelectListKeyDown}
tabIndex={-1}
>
{selectList.map(({ name }, index) => (
<li
key={index}
className={clsx(`
univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7
univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors
dark:!univer-text-white
`, {
'univer-bg-gray-200 dark:!univer-bg-gray-600': active === index,
})}
onMouseEnter={() => handleLiMouseEnter(index)}
onMouseLeave={handleLiMouseLeave}
onClick={() => setCurrentFunctionInfo(index)}
>
{nameSelected === index && (
<CheckMarkIcon
className={`
univer-absolute univer-left-1.5 univer-top-1/2 univer-inline-flex
-univer-translate-y-1/2 univer-text-base univer-text-primary-600
`}
/>
)}
<span className="univer-block">{highlightSearchText(name)}</span>
</li>
))}
</ul>
)}
{functionInfo && (
<div className="univer-mx-0 univer-my-2 univer-max-h-[307px] univer-overflow-y-auto">
<div className={clsx('univer-mx-0 univer-my-2 univer-max-h-80 univer-overflow-y-auto', scrollbarClassName)}>
<FunctionParams title={functionInfo.functionName} value={functionInfo.description} />
<FunctionParams
packages/sheets-hyper-link-ui/package.json
+1 -1
View File
@@ -85,7 +85,7 @@
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-data-validation": "workspace:*",
"@univerjs/sheets-formula-ui": "workspace:*",
packages/sheets-note-ui/package.json
+1 -1
View File
@@ -66,7 +66,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-note": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/sheets-numfmt-ui/package.json
+1 -1
View File
@@ -72,7 +72,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/engine-numfmt": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-numfmt": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/sheets-numfmt-ui/src/views/components/index.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ import type { ISelectProps } from '@univerjs/design';
import type { FC } from 'react';
import type { IBusinessComponentProps } from './interface';
import { LocaleService } from '@univerjs/core';
import { Button, Select } from '@univerjs/design';
import { Button, clsx, scrollbarClassName, Select } from '@univerjs/design';
import { getCurrencyType } from '@univerjs/sheets-numfmt';
import { useDependency } from '@univerjs/ui';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -111,9 +111,9 @@ export const SheetNumfmtPanel: FC<ISheetNumfmtPanelProps> = (props) => {
return (
<div
className={`
className={clsx(`
univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5
`}
`, scrollbarClassName)}
>
<div>
<div className="univer-mt-3.5 univer-text-sm univer-text-gray-400">{t('sheet.numfmt.numfmtType')}</div>
packages/sheets-sort-ui/package.json
+1 -1
View File
@@ -69,7 +69,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-sort": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/sheets-sort-ui/src/views/CustomSortPanel.tsx
+6 -8
View File
@@ -18,7 +18,7 @@ import type { IRange, Nullable } from '@univerjs/core';
import type { IOrderRule } from '@univerjs/sheets-sort';
import type { ICustomSortState } from '../services/sheets-sort-ui.service';
import { LocaleService, LocaleType, throttle } from '@univerjs/core';
import { Button, Checkbox, DraggableList, Dropdown, Radio, RadioGroup } from '@univerjs/design';
import { Button, Checkbox, clsx, DraggableList, Dropdown, Radio, RadioGroup, scrollbarClassName } from '@univerjs/design';
import { CheckMarkIcon, DeleteEmptyIcon, IncreaseIcon, MoreDownIcon, SequenceIcon } from '@univerjs/icons';
import { SheetsSortService, SortType } from '@univerjs/sheets-sort';
import { useDependency, useObservable } from '@univerjs/ui';
@@ -145,12 +145,12 @@ function CustomSortPanelImpl({ state }: { state: ICustomSortState }) {
</div>
<div
className="univer-max-h-[310px] univer-overflow-y-auto univer-overflow-x-hidden"
ref={listEndRef}
className={clsx('univer-max-h-[310px] univer-overflow-y-auto univer-overflow-x-hidden', scrollbarClassName)}
onScroll={(e) => {
const position = e.currentTarget.scrollTop;
setScrollPosition(position);
}}
ref={listEndRef}
>
<DraggableList
list={dragList}
@@ -242,11 +242,11 @@ export function SortOptionItem(props: ISortOptionItemProps) {
align="start"
overlay={(
<ul
className={`
className={clsx(`
univer-my-0 univer-box-border univer-grid univer-max-h-[310px] univer-items-center
univer-gap-1 univer-overflow-y-auto univer-overflow-x-hidden univer-rounded-lg
univer-border univer-bg-white univer-p-1 univer-text-base univer-shadow-lg
`}
`, scrollbarClassName)}
>
{availableMenu.map((menuItem) => (
<li
@@ -260,9 +260,7 @@ export function SortOptionItem(props: ISortOptionItemProps) {
hover:univer-bg-gray-100
`}
>
<span
className="univer-max-w-[220px] univer-truncate"
>
<span className="univer-max-w-[220px] univer-truncate">
{menuItem.label}
</span>
<span>
packages/sheets-table-ui/package.json
+1 -1
View File
@@ -75,7 +75,7 @@
"@univerjs/design": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-formula-ui": "workspace:*",
"@univerjs/sheets-sort": "workspace:*",
packages/sheets-thread-comment-ui/package.json
+1 -1
View File
@@ -69,7 +69,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-thread-comment": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
packages/sheets-ui/package.json
+1 -1
View File
@@ -86,7 +86,7 @@
"@univerjs/engine-formula": "workspace:*",
"@univerjs/engine-numfmt": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/protocol": "0.1.46",
"@univerjs/sheets": "workspace:*",
"@univerjs/telemetry": "workspace:*",
packages/sheets-ui/src/views/defined-name/DefinedNameContainer.tsx
+31 -30
View File
@@ -18,9 +18,9 @@ import type { Nullable, Workbook } from '@univerjs/core';
import type { IDefinedNamesServiceParam, ISetDefinedNameMutationParam } from '@univerjs/engine-formula';
import { ICommandService, IUniverInstanceService, LocaleService, Tools, UniverInstanceType } from '@univerjs/core';
import { Button, clsx, Confirm, Tooltip } from '@univerjs/design';
import { Button, clsx, Confirm, scrollbarClassName, Tooltip } from '@univerjs/design';
import { IDefinedNamesService, serializeRangeWithSheet } from '@univerjs/engine-formula';
import { CheckMarkIcon, DeleteIcon, IncreaseIcon } from '@univerjs/icons';
import { DeleteIcon, IncreaseIcon, PenIcon } from '@univerjs/icons';
import {
InsertDefinedNameCommand,
RemoveDefinedNameCommand,
@@ -179,7 +179,7 @@ export const DefinedNameContainer = () => {
data-u-comp="defined-name-container"
className="univer-relative univer-box-border univer-w-full"
>
<div className="univer-w-full univer-overflow-hidden univer-overflow-y-auto">
<div className={clsx('univer-w-full univer-overflow-hidden univer-overflow-y-auto', scrollbarClassName)}>
<div key="insertDefinedName" className="univer-mb-4">
<Button
className={clsx(
@@ -215,16 +215,15 @@ export const DefinedNameContainer = () => {
`}
>
<div
className={clsx(`
univer-group univer-relative univer-flex univer-cursor-default univer-select-none
univer-items-center univer-justify-between univer-rounded-md univer-p-2
dark:hover:!univer-bg-gray-700
hover:univer-bg-gray-50
`, {
'univer-hidden': definedName.id === editorKey,
})}
onClick={() => { focusDefinedName(definedName); }}
className={clsx(
`
univer-relative univer-flex univer-cursor-default univer-select-none
univer-items-center univer-justify-between univer-rounded-md univer-p-2
dark:hover:!univer-bg-gray-700
hover:univer-bg-gray-50
`,
{ 'univer-hidden': definedName.id === editorKey }
)}
>
<div title={definedName.comment}>
<div
@@ -235,9 +234,7 @@ export const DefinedNameContainer = () => {
`}
>
{definedName.name}
<span
className="univer-text-xxs univer-ml-1 univer-text-gray-400"
>
<span className="univer-text-xxs univer-ml-1 univer-text-gray-400">
{(definedName.localSheetId === SCOPE_WORKBOOK_VALUE_DEFINED_NAME || definedName.localSheetId == null) ? '' : getSheetNameBySheetId(definedName.localSheetId)}
</span>
</div>
@@ -251,30 +248,34 @@ export const DefinedNameContainer = () => {
</div>
</div>
<Tooltip title={localeService.t('definedName.updateButton')} placement="top">
<div
<a
className={`
univer-absolute univer-text-xs univer-text-primary univer-right-[60px]
univer-top-5 univer-hidden -univer-translate-y-1/2 univer-cursor-pointer
univer-rounded univer-p-1
group-hover:univer-block
hover:univer-bg-hyacinth-50
univer-absolute univer-right-[60px] univer-top-1/2 univer-hidden
-univer-translate-y-1/2 univer-cursor-pointer univer-items-center
univer-justify-center univer-rounded univer-p-1 univer-text-xs
univer-text-primary-600
dark:hover:!univer-bg-gray-600
group-hover:univer-flex
hover:univer-bg-gray-100
`}
onClick={(e) => {
e.stopPropagation();
closeInsertOpenKeyEditor(definedName.id);
}}
>
<CheckMarkIcon />
</div>
<PenIcon />
</a>
</Tooltip>
<Tooltip title={localeService.t('definedName.deleteButton')} placement="top">
<div
<a
className={`
univer-absolute univer-text-xs univer-text-error univer-right-5 univer-top-5
univer-hidden -univer-translate-y-1/2 univer-cursor-pointer univer-rounded
univer-p-1
group-hover:univer-block
hover:univer-bg-hyacinth-50
univer-absolute univer-text-xs univer-text-error univer-right-5 univer-top-1/2
univer-hidden -univer-translate-y-1/2 univer-cursor-pointer
univer-items-center univer-justify-center univer-rounded univer-p-1
univer-text-red-600
dark:hover:!univer-bg-gray-600
group-hover:univer-flex
hover:univer-bg-gray-100
`}
onClick={(e) => {
e.stopPropagation();
@@ -282,7 +283,7 @@ export const DefinedNameContainer = () => {
}}
>
<DeleteIcon />
</div>
</a>
</Tooltip>
</div>
packages/sheets-ui/src/views/permission/user-dialog/index.tsx
+18 -22
View File
@@ -16,7 +16,7 @@
import type { ICollaborator } from '@univerjs/protocol';
import { LocaleService } from '@univerjs/core';
import { Avatar, Button, Input } from '@univerjs/design';
import { Avatar, Button, clsx, Input, scrollbarClassName } from '@univerjs/design';
import { CheckMarkIcon } from '@univerjs/icons';
import { UnitRole } from '@univerjs/protocol';
import { IDialogService, useDependency, useObservable } from '@univerjs/ui';
@@ -57,28 +57,24 @@ export const SheetPermissionUserDialog = () => {
onChange={(v) => setInputValue(v)}
/>
</div>
<div className="univer-h-60 univer-overflow-y-auto">
<div className={clsx('univer-h-60 univer-overflow-y-auto', scrollbarClassName)}>
{searchUserList?.length > 0
? (
<>
{searchUserList?.map((item) => {
return (
<div
key={item.subject?.userID}
className={`
univer-my-2 univer-flex univer-items-center univer-rounded-md
hover:univer-bg-gray-50
`}
onClick={() => handleChangeUser(item)}
>
<Avatar src={item.subject?.avatar} size={24} />
<div className="univer-ml-1.5 univer-flex-1">{item.subject?.name}</div>
{selectUserInfo?.findIndex((v) => v.subject?.userID === item.subject?.userID) !== -1 && (<div><CheckMarkIcon /></div>)}
</div>
);
})}
</>
)
? searchUserList?.map((item) => {
return (
<div
key={item.subject?.userID}
className={`
univer-my-2 univer-flex univer-items-center univer-rounded-md
hover:univer-bg-gray-50
`}
onClick={() => handleChangeUser(item)}
>
<Avatar src={item.subject?.avatar} size={24} />
<div className="univer-ml-1.5 univer-flex-1">{item.subject?.name}</div>
{selectUserInfo?.findIndex((v) => v.subject?.userID === item.subject?.userID) !== -1 && (<div><CheckMarkIcon /></div>)}
</div>
);
})
: (
<div className="univer-flex univer-h-full univer-flex-col univer-items-center">
<img
packages/sheets-zen-editor/package.json
+1 -1
View File
@@ -84,7 +84,7 @@
"@univerjs/docs": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/sheets": "workspace:*",
"@univerjs/sheets-ui": "workspace:*",
"@univerjs/ui": "workspace:*"
packages/slides-ui/package.json
+1 -1
View File
@@ -74,7 +74,7 @@
"@univerjs/docs-ui": "workspace:*",
"@univerjs/drawing": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/slides": "workspace:*",
"@univerjs/ui": "workspace:*"
},
packages/thread-comment-ui/package.json
+1 -1
View File
@@ -69,7 +69,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@univerjs/thread-comment": "workspace:*",
"@univerjs/ui": "workspace:*"
},
packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ import type { IAddCommentCommandParams, IThreadComment, IUpdateCommentCommandPar
import type { IUniverUIConfig } from '@univerjs/ui';
import type { IThreadCommentEditorInstance } from '../thread-comment-editor';
import { generateRandomId, ICommandService, LocaleService, UserManagerService } from '@univerjs/core';
import { borderClassName, clsx, Dropdown, Tooltip } from '@univerjs/design';
import { borderClassName, clsx, Dropdown, scrollbarClassName, Tooltip } from '@univerjs/design';
import { DeleteIcon, MoreHorizontalIcon, ReplyToCommentIcon, ResolvedIcon, SolveIcon } from '@univerjs/icons';
import {
AddCommentCommand,
@@ -447,7 +447,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
</div>
<div
ref={scroller}
className="univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden"
className={clsx('univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden', scrollbarClassName)}
>
{renderComments.map(
(item) => (
packages/ui/package.json
+1 -1
View File
@@ -83,7 +83,7 @@
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/engine-render": "workspace:*",
"@univerjs/icons": "^0.4.3",
"@univerjs/icons": "^0.4.4",
"@wendellhu/redi": "0.18.0",
"localforage": "^1.10.0"
},
pnpm-lock.yaml
Generated
+350 -243
View File
File diff suppressed because it is too large Load Diff