mirror of
https://github.com/dream-num/univer.git
synced 2026-09-01 04:45:14 +08:00
feat(base-ui): make adjustments to global styling (#286)
This commit is contained in:
白熱
+8
-1
@@ -1,6 +1,10 @@
|
||||
import path from 'node:path';
|
||||
|
||||
import cleanPlugin from 'esbuild-plugin-clean';
|
||||
import stylePlugin from 'esbuild-style-plugin';
|
||||
|
||||
const nodeModules = path.resolve(process.cwd(), './node_modules');
|
||||
|
||||
/** @type {import('esbuild').BuildOptions} */
|
||||
export default {
|
||||
bundle: true,
|
||||
@@ -17,7 +21,10 @@ export default {
|
||||
generateScopedName: 'univer-[local]',
|
||||
},
|
||||
renderOptions: {
|
||||
lessOptions: { rewriteUrls: 'all' },
|
||||
lessOptions: {
|
||||
rewriteUrls: 'all',
|
||||
paths: [nodeModules],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import path from 'node:path';
|
||||
|
||||
import esbuild from 'esbuild';
|
||||
import cleanPlugin from 'esbuild-plugin-clean';
|
||||
import copyPlugin from 'esbuild-plugin-copy';
|
||||
import stylePlugin from 'esbuild-style-plugin';
|
||||
import minimist from 'minimist';
|
||||
|
||||
const nodeModules = path.resolve(process.cwd(), './node_modules');
|
||||
|
||||
const args = minimist(process.argv.slice(2));
|
||||
|
||||
const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
generateScopedName: 'univer-[local]',
|
||||
},
|
||||
renderOptions: {
|
||||
lessOptions: { rewriteUrls: 'all' },
|
||||
lessOptions: {
|
||||
rewriteUrls: 'all',
|
||||
paths: [nodeModules],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import path from 'node:path';
|
||||
|
||||
import esbuild from 'esbuild';
|
||||
import cleanPlugin from 'esbuild-plugin-clean';
|
||||
import copyPlugin from 'esbuild-plugin-copy';
|
||||
import stylePlugin from 'esbuild-style-plugin';
|
||||
import minimist from 'minimist';
|
||||
|
||||
const nodeModules = path.resolve(process.cwd(), './node_modules');
|
||||
|
||||
const args = minimist(process.argv.slice(2));
|
||||
|
||||
const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
generateScopedName: 'univer-[local]',
|
||||
},
|
||||
renderOptions: {
|
||||
lessOptions: { rewriteUrls: 'all' },
|
||||
lessOptions: {
|
||||
rewriteUrls: 'all',
|
||||
paths: [nodeModules],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import path from 'node:path';
|
||||
|
||||
import esbuild from 'esbuild';
|
||||
import cleanPlugin from 'esbuild-plugin-clean';
|
||||
import copyPlugin from 'esbuild-plugin-copy';
|
||||
import stylePlugin from 'esbuild-style-plugin';
|
||||
import minimist from 'minimist';
|
||||
|
||||
const nodeModules = path.resolve(process.cwd(), './node_modules');
|
||||
|
||||
const args = minimist(process.argv.slice(2));
|
||||
|
||||
const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
|
||||
generateScopedName: 'univer-[local]',
|
||||
},
|
||||
renderOptions: {
|
||||
lessOptions: { rewriteUrls: 'all' },
|
||||
lessOptions: {
|
||||
rewriteUrls: 'all',
|
||||
paths: [nodeModules],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
|
||||
&-text {
|
||||
.btn-text();
|
||||
line-height: 1;
|
||||
|
||||
&-active {
|
||||
color: var(--text-color);
|
||||
background: #eee;
|
||||
|
||||
@@ -54,21 +54,15 @@
|
||||
}
|
||||
|
||||
.btn-text() {
|
||||
.button-color(var(--text-color), transparent, transparent);
|
||||
line-height: 2;
|
||||
.button-color(@text-color, transparent, transparent);
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
background: #eee;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--text-color);
|
||||
background: #eee;
|
||||
color: @text-color;
|
||||
background: @border-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
.button-disabled(var(--disabled-color); transparent; transparent);
|
||||
@@ -105,7 +99,7 @@
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.button-size(24px, 7px, @font-size-sm, @border-radius-base)
|
||||
.button-size(28px, 7px, @font-size-sm, @border-radius-base)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,7 +129,7 @@
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
.button-size(24px, (30px / 2), @font-size-sm, 24px);
|
||||
.button-size(28px, (30px / 2), @font-size-sm, 28px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +146,7 @@
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
min-width: 24px;
|
||||
min-width: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
@import '../../Basics/CSS/Skin/default.module.less';
|
||||
|
||||
@slider-bg: @text-color-secondary;
|
||||
@slider-width: 144px;
|
||||
@slider-width: 116px;
|
||||
@slider-height: 4px;
|
||||
@slider-radius: 15px;
|
||||
|
||||
@slider-handle-size: 20px;
|
||||
@slider-handle-size: 12px;
|
||||
|
||||
@slider-value-width: 55px;
|
||||
@slider-value-height: 28px;
|
||||
|
||||
@@ -18,7 +18,6 @@ export const Tooltip = (props: ITooltipProps) => {
|
||||
overlay={<div className={styles.tooltipContent}>{typeof title === 'function' ? title() : title}</div>}
|
||||
builtinPlacements={placements}
|
||||
placement={placement}
|
||||
mouseLeaveDelay={0.1}
|
||||
mouseEnterDelay={0.2}
|
||||
showArrow
|
||||
destroyTooltipOnHide
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
.layout-container {
|
||||
// theme
|
||||
background-color: var(--bg);
|
||||
color: var(--text-color);
|
||||
background-color: @bg-color;
|
||||
color: @text-color;
|
||||
height: 100%;
|
||||
|
||||
.content-container-horizontal {
|
||||
display: flex;
|
||||
min-height: 14em;
|
||||
position: relative;
|
||||
min-height: 14em;
|
||||
display: flex;
|
||||
|
||||
.content-inner-left-container {
|
||||
// position: relative;
|
||||
@@ -30,6 +30,7 @@
|
||||
|
||||
.content-inner-right-container {
|
||||
width: 50%;
|
||||
background-color: @bg-color-secondary;
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { Container } from '../Components/Container/Container';
|
||||
import { IWorkbenchOptions } from '../controllers/ui/ui.controller';
|
||||
import style from './app.module.less';
|
||||
import { ContextMenu } from './components/contextmenu/contextmenu';
|
||||
import { Toolbar } from './components/toolbar/toolbar';
|
||||
import { DocBars } from './components/DocBars';
|
||||
|
||||
export interface IUniverAppProps extends IWorkbenchOptions {
|
||||
footerComponents?: Set<() => ComponentType>;
|
||||
@@ -95,7 +95,7 @@ export function App(props: IUniverAppProps) {
|
||||
<Layout className={style.mainContent} style={{ position: 'relative' }}>
|
||||
{/* header */}
|
||||
<Header style={{ display: props.header ? 'block' : 'none' }}>
|
||||
{props.toolbar && <Toolbar></Toolbar>}
|
||||
{props.toolbar && <DocBars />}
|
||||
</Header>
|
||||
{/* content */}
|
||||
<Layout>
|
||||
@@ -123,7 +123,7 @@ export function App(props: IUniverAppProps) {
|
||||
</Content>
|
||||
</Layout>
|
||||
{/* footer */}
|
||||
<Footer style={{ display: props.footer ? 'flex' : 'none' }}>
|
||||
<Footer style={{ display: props.footer ? 'block' : 'none' }}>
|
||||
{footerComponents &&
|
||||
Array.from(footerComponents.values()).map((component, index) =>
|
||||
React.createElement(component(), { key: `${index}` })
|
||||
|
||||
+3
-3
@@ -45,10 +45,10 @@ export function ToolbarButton(props: IBaseToolbarButtonProps) {
|
||||
};
|
||||
|
||||
const _className = joinClassNames(
|
||||
styles.btn,
|
||||
`${styles.btn}-text`,
|
||||
styles.toolbarBtn,
|
||||
`${styles.toolbarBtn}-text`,
|
||||
{
|
||||
[`${styles.btn}-text-active`]: active,
|
||||
[`${styles.toolbarBtn}-text-active`]: active,
|
||||
},
|
||||
className
|
||||
);
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
@import '../../../../Components/Button/Style/mixin.less';
|
||||
|
||||
.btn {
|
||||
.toolbar-btn {
|
||||
line-height: @line-height-base;
|
||||
.btn();
|
||||
.btn-default();
|
||||
@@ -12,13 +12,13 @@
|
||||
&-text {
|
||||
.button-color(var(--text-color), transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
background-color: var(--grey-100);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
// &:active {
|
||||
// color: var(--text-color);
|
||||
// background: #eee;
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import { AppContext } from '../../../Common/AppContext';
|
||||
import { IDisplayMenuItem, IMenuItem, MenuPosition } from '../../../services/menu/menu';
|
||||
import { IMenuService } from '../../../services/menu/menu.service';
|
||||
import styles from './index.module.less';
|
||||
import { ToolbarItem } from './ToolbarItem';
|
||||
|
||||
export function DocBars() {
|
||||
const context = useContext(AppContext);
|
||||
|
||||
const [menuItems, setMenuItems] = useState<Array<IDisplayMenuItem<IMenuItem>>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// this.props.getComponent?.(this); // pass the UI to the controller, which is not good...
|
||||
|
||||
const menuService = context.injector!.get(IMenuService);
|
||||
const update = () => {
|
||||
setMenuItems(menuService.getMenuItems(MenuPosition.TOOLBAR));
|
||||
};
|
||||
|
||||
// TODO: dispose
|
||||
menuService.menuChanged$.subscribe(() => update());
|
||||
update();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className={styles.docBars}>
|
||||
<div className={styles.menubar}>{/* TODO: Start */}</div>
|
||||
<div className={`${styles.toolbarWarp} ${styles.toolbar}`}>
|
||||
{menuItems.map((item) => (
|
||||
<ToolbarItem key={item.id} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -14,7 +14,7 @@ import {
|
||||
IValueOption,
|
||||
MenuItemType,
|
||||
} from '../../../services/menu/menu';
|
||||
import { ToolbarButton } from './button/toolbar-button';
|
||||
import { ToolbarButton } from './Button/ToolbarButton';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface IToolbarItemStatus {
|
||||
@@ -0,0 +1,143 @@
|
||||
@import '../../../Basics/CSS/Skin/default.module.less';
|
||||
|
||||
.doc-bars {
|
||||
box-sizing: border-box;
|
||||
|
||||
.menubar {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
font-size: var(--font-size);
|
||||
background-color: @bg-color-secondary;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.single-button {
|
||||
&.more-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.more-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
color: var(--text-color);
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
height: 26px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
|
||||
&.select-button:hover {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.cols-menu {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.select-label-string {
|
||||
.drop-content {
|
||||
> div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-double-string {
|
||||
.drop-content {
|
||||
> div {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-color-picker-parent {
|
||||
.select-item-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-color-picker {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.select-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-picker-outer {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-line-bold-parent {
|
||||
.select-item-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.select-single {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
.select-double {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 4px; // FIXME Set the BIUS buttons, the target is 26 * 26, padding 4px, but only 27.6 * 26 can be obtained
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 26px;
|
||||
font-size: 18px;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
span[role='img'].univericon-nextIcon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
span[role='img'] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button() {
|
||||
padding: 0px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { DocBars } from './DocBars';
|
||||
@@ -1,26 +0,0 @@
|
||||
type BarProps = {
|
||||
list: Array<Record<string, string>>;
|
||||
img: string;
|
||||
onClick?: (item: {}, index: number) => void;
|
||||
};
|
||||
|
||||
export const DataBar = (props: BarProps) => {
|
||||
const { list, img, onClick } = props;
|
||||
const background = `url(${img}) no-repeat`;
|
||||
|
||||
const handleClick = (item: {}, index: number) => {
|
||||
onClick?.call(this, item, index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
{list.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => handleClick(item, index)}
|
||||
style={{ width: '28px', height: '26px', background, backgroundPosition: `${item.x} ${item.y}` }}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,312 +0,0 @@
|
||||
@import '../../../Basics/CSS/Skin/default.module.less';
|
||||
|
||||
.universheet-wa-editor.toolbar {
|
||||
height: 32px;
|
||||
background: var(--bg);
|
||||
position: relative;
|
||||
padding: 5px 0 3px 15px;
|
||||
border-bottom: 1px solid var(--bg);
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
box-sizing: initial;
|
||||
|
||||
span[role='img'] {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span[role='img'].univericon-nextIcon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
span[role='img'].univericon-rightIcon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.universheet-toolbar-left-skin {
|
||||
width: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.universheet-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.universheet-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.universheet-toolbar-button,
|
||||
.universheet-toolbar-menu-button {
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
.toolbar-button();
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.universheet-toolbar-button-outer-box,
|
||||
.universheet-toolbar-menu-button-outer-box {
|
||||
.outer-inner-box();
|
||||
}
|
||||
|
||||
.universheet-toolbar-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.universheet-toolbar-button-inner-box,
|
||||
.universheet-toolbar-menu-button-inner-box {
|
||||
padding: 0 2px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
height: 26px;
|
||||
min-width: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.universheet-toolbar-menu-button-caption {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 1px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.universheet-toolbar-menu-button-text {
|
||||
width: 55px !important;
|
||||
}
|
||||
|
||||
.universheet-toolbar-separator {
|
||||
line-height: normal;
|
||||
list-style: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
vertical-align: top;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
margin: 5px 1px;
|
||||
}
|
||||
|
||||
.universheet-toolbar-combo-button {
|
||||
font-weight: 700;
|
||||
vertical-align: inherit;
|
||||
margin: 0 1px;
|
||||
.toolbar-button();
|
||||
}
|
||||
|
||||
.universheet-toolbar-combo-button-inner-box,
|
||||
.universheet-toolbar-combo-button-outer-box {
|
||||
.outer-inner-box();
|
||||
}
|
||||
|
||||
.universheet-toolbar-zoom-combobox .universheet-toolbar-combo-button-caption {
|
||||
width: 36px !important;
|
||||
}
|
||||
|
||||
.universheet-toolbar-combo-button-caption {
|
||||
padding: 0;
|
||||
margin: 0 0 0 -3px;
|
||||
}
|
||||
|
||||
.universheet-toolbar-textinput {
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top: 1px solid silver;
|
||||
font-size: 13px;
|
||||
height: 25px;
|
||||
padding: 1px 0 1px 8px;
|
||||
}
|
||||
|
||||
.universheet-toolbar-combo-button-input {
|
||||
background: 0 0;
|
||||
border: 1px solid transparent !important;
|
||||
color: var(--text-color);
|
||||
font-family: Arial, sans-serif !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 700 !important;
|
||||
height: 20px !important;
|
||||
overflow: hidden !important;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
height: 22px !important;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.universheet-cols-menu {
|
||||
.menu-button();
|
||||
width: 252px;
|
||||
left: 0;
|
||||
top: 26px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.universheet-cols-menu .universheet-cols-menuitem-hover,
|
||||
.universheet-cols-menu .universheet-cols-menuitem:hover {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.universheet-cols-menu .universheet-cols-menuitem {
|
||||
position: relative;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 1px 6em 1px 20px;
|
||||
white-space: nowrap;
|
||||
padding-left: 8px;
|
||||
vertical-align: middle;
|
||||
padding-right: 24px;
|
||||
user-select: none;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.universheet-submenu-arrow {
|
||||
-webkit-transition: all 218ms;
|
||||
-moz-transition: all 218ms;
|
||||
-o-transition: all 218ms;
|
||||
transition: all 218ms;
|
||||
font-size: 12px;
|
||||
left: auto;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding-right: 0;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
opacity: 0.5;
|
||||
color: #000;
|
||||
user-select: none;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.universheet-toolbar-dblbutton {
|
||||
.universheet-toolbar-next-button {
|
||||
border-left: 1px solid transparent;
|
||||
position: relative;
|
||||
|
||||
.universheet-next-menu {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
box-shadow: @box-shadow-base;
|
||||
font-size: 12px;
|
||||
width: fit-content;
|
||||
|
||||
.univer-menu-item > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px 0 0;
|
||||
|
||||
.universheet-next-menu-icon {
|
||||
width: 25px;
|
||||
|
||||
& ~ div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.universheet-color-bottom {
|
||||
width: 10px;
|
||||
margin: 0 auto;
|
||||
outline: 2px solid;
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
button.univer-btn {
|
||||
min-width: 15px;
|
||||
|
||||
&:active {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
:hover .universheet-toolbar-next-button {
|
||||
border-left: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重复样式
|
||||
.outer-inner-box() {
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toolbar-button() {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: 0;
|
||||
border: 1px solid transparent;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.menu-button() {
|
||||
border-radius: 0;
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
||||
transition: opacity 218ms;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 6px 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
@import '../../../Basics/CSS/Skin/default.module.less';
|
||||
|
||||
.toolbar-warp {
|
||||
max-height: fit-content;
|
||||
width: 100%;
|
||||
overflow: unset;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--font-size);
|
||||
background-color: var(--bg);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
|
||||
.single-button {
|
||||
&.more-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.more-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
max-width: 100%;
|
||||
color: var(--text-color);
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>div {
|
||||
height: 26px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
|
||||
&.select-button:hover {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.cols-menu {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.select-label-string {
|
||||
.drop-content {
|
||||
>div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-double-string {
|
||||
.drop-content {
|
||||
>div {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-color-picker-parent {
|
||||
.select-item-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-color-picker {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.select-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-picker-outer {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-line-bold-parent {
|
||||
.select-item-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.select-single {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
.select-double {
|
||||
// height: 26px;
|
||||
// line-height: 26px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 4px; // FIXME Set the BIUS buttons, the target is 26 * 26, padding 4px, but only 27.6 * 26 can be obtained
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 26px;
|
||||
font-size: 18px;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
span[role='img'].univericon-nextIcon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
span[role="img"] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.more-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.button();
|
||||
|
||||
&.more-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.more-tool {
|
||||
// height: 40px;
|
||||
// display: none;
|
||||
// align-items: center;
|
||||
padding: 0 10px;
|
||||
background-color: var(--bg);
|
||||
box-shadow: @box-shadow-base;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
top: 40px;
|
||||
z-index: 2;
|
||||
|
||||
&.more-show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button {
|
||||
.button();
|
||||
}
|
||||
}
|
||||
|
||||
.button() {
|
||||
padding: 0px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import { Component, createRef } from 'react';
|
||||
|
||||
import { BaseComponentProps } from '../../../BaseComponent';
|
||||
import { AppContext } from '../../../Common/AppContext';
|
||||
import { Container } from '../../../Components/Container/Container';
|
||||
import { IDisplayMenuItem, IMenuItem, MenuPosition } from '../../../services/menu/menu';
|
||||
import { IMenuService } from '../../../services/menu/menu.service';
|
||||
import styles from './index.module.less';
|
||||
import { ToolbarItem } from './toolbar-item';
|
||||
|
||||
interface IToolbarState {
|
||||
menuItems: Array<IDisplayMenuItem<IMenuItem>>;
|
||||
}
|
||||
|
||||
interface IToolbarProps extends BaseComponentProps {
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export class Toolbar extends Component<IToolbarProps, IToolbarState> {
|
||||
static override contextType = AppContext;
|
||||
|
||||
declare context: React.ContextType<typeof AppContext>;
|
||||
|
||||
toolbarRef = createRef<HTMLDivElement>();
|
||||
|
||||
moreBtnRef = createRef();
|
||||
|
||||
moreToolRef = createRef();
|
||||
|
||||
clientWidth = 0;
|
||||
|
||||
constructor(props: IToolbarProps) {
|
||||
super(props);
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.state = {
|
||||
menuItems: [],
|
||||
};
|
||||
}
|
||||
|
||||
override componentDidMount() {
|
||||
this.props.getComponent?.(this); // pass the UI to the controller, which is not good...
|
||||
|
||||
const menuService = this.context.injector!.get(IMenuService);
|
||||
const update = () => {
|
||||
this.setState({
|
||||
menuItems: menuService.getMenuItems(MenuPosition.TOOLBAR),
|
||||
});
|
||||
};
|
||||
|
||||
// TODO: dispose
|
||||
menuService.menuChanged$.subscribe(() => update());
|
||||
update();
|
||||
}
|
||||
|
||||
override render() {
|
||||
const { menuItems } = this.state;
|
||||
|
||||
return (
|
||||
<Container style={{ position: 'relative' }}>
|
||||
<div className={`${styles.toolbarWarp} ${styles.toolbar}`} ref={this.toolbarRef}>
|
||||
{menuItems.map((item) => (
|
||||
<ToolbarItem key={item.id} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
import { Button, Icon } from '@univerjs/base-ui';
|
||||
|
||||
import styles from './index.module.less';
|
||||
import { ZoomSlider } from './zoom-slider';
|
||||
|
||||
@@ -11,9 +9,6 @@ interface ICountBarProps {
|
||||
export function CountBar(props: ICountBarProps) {
|
||||
return (
|
||||
<section className={styles.countBar}>
|
||||
<Button>
|
||||
<Icon.Sheet.RegularIcon />
|
||||
</Button>
|
||||
<ZoomSlider />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { BaseComponentProps } from '@univerjs/base-ui';
|
||||
|
||||
import { ISheetUIPluginConfig } from '../../Basics';
|
||||
import { CountBar } from '../CountBar';
|
||||
import { SheetBar } from '../SheetBar';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface BaseSheetContainerProps extends BaseComponentProps {
|
||||
export interface BaseSheetContainerProps {
|
||||
config: ISheetUIPluginConfig;
|
||||
changeLocale: (locale: string) => void;
|
||||
methods?: any;
|
||||
@@ -12,9 +11,9 @@ export interface BaseSheetContainerProps extends BaseComponentProps {
|
||||
|
||||
export function RenderSheetFooter() {
|
||||
return (
|
||||
<>
|
||||
<section className={styles.sheetContainer}>
|
||||
<SheetBar />
|
||||
<CountBar />
|
||||
</>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,77 +1,11 @@
|
||||
.layout-container {
|
||||
// theme
|
||||
background-color: var(--bg);
|
||||
color: var(--text-color);
|
||||
height: 100%;
|
||||
@import '@univerjs/base-ui/src/Basics/CSS/Skin/default.module.less';
|
||||
|
||||
.content-container-horizontal {
|
||||
display: flex;
|
||||
min-height: 14em;
|
||||
position: relative;
|
||||
|
||||
.content-inner-left-container {
|
||||
// position: relative;
|
||||
width: 50%;
|
||||
padding-right: 10px;
|
||||
flex: none;
|
||||
|
||||
.hover-cursor {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
background: gray;
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner-right-container {
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 14em;
|
||||
position: relative;
|
||||
|
||||
.content-inner-left-container {
|
||||
// position: relative;
|
||||
height: 50%;
|
||||
padding-bottom: 10px;
|
||||
flex: none;
|
||||
|
||||
.hover-cursor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background: gray;
|
||||
cursor: n-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner-right-container {
|
||||
height: 50%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.outer-right-container {
|
||||
// position: relative;
|
||||
flex: 0 0 280px;
|
||||
> div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sheet-container {
|
||||
height: 40px;
|
||||
padding: 0 @padding-lg;
|
||||
border-top: 1px solid @border-color;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user