Skip to content

Commit

Permalink
style(cf): ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gggpound
Gggpound committed Mar 27, 2024
1 parent 3bf6d93 commit 81abc8b
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 45 deletions.
5 changes: 5 additions & 0 deletions packages/sheets-conditional-format/src/components/panel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
*/

import React, { useState } from 'react';
import {} from '@univerjs/core';
import type { IConditionFormatRule } from '../../models/type';
import styles from './index.module.less';
import { RuleList } from './rule-list';
Expand All @@ -25,17 +26,21 @@ interface IConditionFormatPanelProps { rule?: IConditionFormatRule };
export const ConditionFormatPanel = (props: IConditionFormatPanelProps) => {
const [currentEditRule, currentEditRuleSet] = useState<IConditionFormatRule | undefined>(props.rule);
const [isShowRuleEditor, isShowRuleEditorSet] = useState(!!props.rule);

const createCfRule = () => {
isShowRuleEditorSet(true);
};

const handleCancel = () => {
isShowRuleEditorSet(false);
currentEditRuleSet(undefined);
};

const handleRuleClick = (rule: IConditionFormatRule) => {
currentEditRuleSet(rule);
isShowRuleEditorSet(true);
};

return (
<div className={styles.conditionalFormatWrap}>
{isShowRuleEditor
Expand Down
9 changes: 4 additions & 5 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/highlightCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,7 @@ const HighlightCellInput = (props: { type: IResult['subType'] | CFSubRuleType.du
};
return (
<div className={`${stylesBase.mTSm}`}>
<InputNumber className={styles.width100} value={inputNumberValue} onChange={_onChange} />

<InputNumber min={Number.MIN_SAFE_INTEGER} max={Number.MAX_SAFE_INTEGER} className={styles.width100} value={inputNumberValue} onChange={_onChange} />
</div>
);
}
Expand All @@ -123,8 +122,8 @@ const HighlightCellInput = (props: { type: IResult['subType'] | CFSubRuleType.du
};
return (
<div className={`${stylesBase.mTSm} ${stylesBase.labelContainer} `}>
<InputNumber value={inputNumberMin} onChange={onChangeMin} />
<InputNumber className={`${stylesBase.mLSm}`} value={inputNumberMax} onChange={onChangeMax} />
<InputNumber min={Number.MIN_SAFE_INTEGER} max={Number.MAX_SAFE_INTEGER} value={inputNumberMin} onChange={onChangeMin} />
<InputNumber min={Number.MIN_SAFE_INTEGER} max={Number.MAX_SAFE_INTEGER} className={`${stylesBase.mLSm}`} value={inputNumberMax} onChange={onChangeMax} />
</div>
);
}
Expand Down Expand Up @@ -216,7 +215,7 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps<any, ITextHigh
if (!rule) {
return defaultV;
}
const v = createDefaultValue(rule.subType, rule.operator);
const v = (rule as ITextHighlightCell | INumberHighlightCell).value ?? createDefaultValue(rule.subType, rule.operator);
return v;
});

Expand Down
74 changes: 52 additions & 22 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/index.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,48 +94,78 @@
.item-content {
display: flex;
flex-wrap: wrap;
}
.item {
display: flex;
align-items: center;
justify-content: start;
width: 50%;
border-radius: var(--border-radius-base);
&:hover {
background-color: rgb(var(--bg-color-hover));
.item-wrap {
display: flex;
align-items: center;
justify-content: start;
width: 50%;
margin-bottom: 4px;
.item {
border-radius: var(--border-radius-base);
cursor: pointer;
:not(:first-child).icon {
margin-left: 8px;
}

&:hover {
background-color: rgb(var(--bg-color-hover));
}
}
:not(:first-child).icon {
margin-left: 8px;
}
}
}

.icon {
width: 20px;
height: 20px;
}
}
.icon-item-list {
padding: var(--padding-base);
.icon-item-list-wrap {
padding: var(--padding-base) 4px var(--padding-base) var(--padding-base);
font-size: var(--font-size-xs);
background-color: rgb(var(--bg-color-secondary));
border: 1px solid rgb(var(--border-color));
border-radius: var(--border-radius-lg);
outline: none;
box-shadow: var(--box-shadow-base);
display: flex;
width: 100px;
flex-wrap: wrap;
.item {
.none {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-base);
&:hover {
background-color: rgb(var(--bg-color-hover));
margin-bottom: 10px;
cursor: pointer;
padding-left: 4px;
span {
margin-left: 8px;
}
}

.icon {
width: 20px;
height: 20px;
.icon-item-list {
display: flex;
width: 252px;
flex-wrap: wrap;
.item {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-base);
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;

&:hover {
background-color: rgb(var(--bg-color-hover));
}
}

.icon {
width: 20px;
height: 20px;
}
}
}

.width100 {
width: 100%;
}
Expand Down
24 changes: 21 additions & 3 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@
* limitations under the License.
*/

import React, { useMemo, useRef, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import type { IRange, IUnitRange } from '@univerjs/core';
import { ICommandService, InterceptorManager, IUniverInstanceService, LocaleService } from '@univerjs/core';
import { useDependency } from '@wendellhu/redi/react-bindings';
import { serializeRange } from '@univerjs/engine-formula';
import { Button, Select } from '@univerjs/design';

import { RangeSelector } from '@univerjs/ui';
import { SelectionManagerService } from '@univerjs/sheets';
import type { IRemoveSheetMutationParams } from '@univerjs/sheets';
import { RemoveSheetMutation, SelectionManagerService, SetWorksheetActiveOperation } from '@univerjs/sheets';
import type { IConditionFormatRule } from '../../../models/type';
import { ConditionalFormatRuleModel } from '../../../models/conditional-format-rule-model';
import { CFRuleType, CFSubRuleType, SHEET_CONDITION_FORMAT_PLUGIN } from '../../../base/const';
Expand Down Expand Up @@ -56,7 +57,6 @@ export const RuleEdit = (props: IRuleEditProps) => {
const univerInstanceService = useDependency(IUniverInstanceService);
const conditionalFormatRuleModel = useDependency(ConditionalFormatRuleModel);
const selectionManagerService = useDependency(SelectionManagerService);

const unitId = getUnitId(univerInstanceService);
const subUnitId = getSubUnitId(univerInstanceService);

Expand Down Expand Up @@ -154,6 +154,24 @@ export const RuleEdit = (props: IRuleEditProps) => {
}
}, [ruleType]);

useEffect(() => {
// If the child table which the rule being edited is deleted, exit edit mode
if (props.rule?.cfId !== undefined) {
const disposable = commandService.onCommandExecuted((commandInfo) => {
if (commandInfo.id === RemoveSheetMutation.id) {
const params = commandInfo.params as IRemoveSheetMutationParams;
if (params.subUnitId === subUnitId && params.unitId === unitId) {
props.onCancel();
}
}
if (commandInfo.id === SetWorksheetActiveOperation.id) {
props.onCancel();
}
});
return () => disposable.dispose();
}
}, [props.rule?.cfId]);

const onStyleChange = (config: unknown) => {
result.current = config as Parameters<IStyleEditorProps['onChange']>;
};
Expand Down
29 changes: 29 additions & 0 deletions packages/sheets-conditional-format/src/components/panel/rule-list/index.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@
.select {
color: rgb(var(--text-color));
width: 126px;
.select-selector {
border: none;
padding: 0;
}
.select-selection-item {
top: -2px;
left: 4px;
}
.select-selection-search-input {
cursor: pointer;
}
}
.btn-list {
font-size: 16px;
Expand All @@ -30,6 +41,13 @@
background: rgb(var(--grey-300));
}
}
.disabled {
color: rgb(var(--grey-500));
display: flex;
align-items: center;
border-radius: 4px 4px 4px 4px;
padding: 4px;
}
}
}
.rule-item {
Expand Down Expand Up @@ -60,6 +78,9 @@
&:hover {
background-color: rgb(var(--grey-100));
}
&.active {
background-color: rgb(var(--grey-100));
}
.draggableHandle {
display: none;
position: absolute;
Expand Down Expand Up @@ -96,6 +117,11 @@
background-color: rgb(var(--grey-300));
}
}
& .active {
display: flex;
align-items: center;
justify-content: center;
}
}
.grid-layout-wrap {
width: calc(100% - 2 * var(--padding-sm) + 2 * var(--padding-xl));
Expand All @@ -106,3 +132,6 @@
}
}
}
:global .react-grid-item.react-grid-placeholder {
background: rgb(var(--grey-300));
}
45 changes: 32 additions & 13 deletions packages/sheets-conditional-format/src/components/panel/rule-list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { useDependency } from '@wendellhu/redi/react-bindings';
import { ICommandService, IUniverInstanceService, LocaleService, Rectangle } from '@univerjs/core';
import { SelectionManagerService, SetSelectionsOperation, SetWorksheetActiveOperation } from '@univerjs/sheets';
import { serializeRange } from '@univerjs/engine-formula';
import { DeleteSingle, IncreaseSingle, MoreFunctionSingle } from '@univerjs/icons';
import { DeleteSingle, IncreaseSingle, SequenceSingle } from '@univerjs/icons';
import GridLayout from 'react-grid-layout';
import { debounceTime, Observable } from 'rxjs';
import { AddConditionalRuleMutation } from '../../../commands/mutations/add-conditional-rule.mutation';
Expand Down Expand Up @@ -122,6 +122,7 @@ export const RuleList = (props: IRuleListProps) => {
const subUnitId = worksheet.getSheetId();
const [selectValue, selectValueSet] = useState('2');
const [fetchRuleListId, fetchRuleListIdSet] = useState(0);
const [draggingId, draggingIdSet] = useState<number>(-1);
const [layoutWidth, layoutWidthSet] = useState(defaultWidth);
const layoutContainerRef = useRef<HTMLDivElement>(null);
const selectOption = [
Expand Down Expand Up @@ -240,7 +241,12 @@ export const RuleList = (props: IRuleListProps) => {
commandService.executeCommand(DeleteCfCommand.id, { unitId, subUnitId, cfId: rule.cfId } as IDeleteCfCommandParams);
};

const handleDragStart = (_layout: unknown, from: { y: number }) => {
draggingIdSet(from.y);
};

const handleDragStop = (_layout: unknown, from: { y: number }, to: { y: number }) => {
draggingIdSet(-1);
const unitId = univerInstanceService.getCurrentUniverSheetInstance().getUnitId();
const subUnitId = univerInstanceService.getCurrentUniverSheetInstance().getActiveSheet().getSheetId();
const getSaveIndex = (index: number) => {
Expand All @@ -251,10 +257,11 @@ export const RuleList = (props: IRuleListProps) => {
const targetCfId = ruleList[getSaveIndex(to.y)].cfId;
commandService.executeCommand(moveCfCommand.id, { unitId, subUnitId, cfId, targetCfId } as IMoveCfCommand);
};
const layout = ruleList.map((rule, index) => ({ i: rule.cfId, x: 0, w: 12, y: index, h: 1, isResizable: false }));

const handleCreate = () => {
props.onCreate();
};

const handleClear = () => {
if (selectValue === '2') {
commandService.executeCommand(ClearWorksheetCfCommand.id);
Expand All @@ -265,6 +272,9 @@ export const RuleList = (props: IRuleListProps) => {
});
}
};

const layout = ruleList.map((rule, index) => ({ i: rule.cfId, x: 0, w: 12, y: index, h: 1, isResizable: false }));

return (
<div className={styles.cfRuleList}>
<div className={styles.ruleSelector}>
Expand All @@ -280,11 +290,19 @@ export const RuleList = (props: IRuleListProps) => {
<IncreaseSingle />
</div>
</Tooltip>
<Tooltip title={localeService.t('sheet.cf.panel.clear')} placement="bottom">
<div className={`${styles.gap} ${styles.icon}`} onClick={handleClear}>
<DeleteSingle />
</div>
</Tooltip>
{ruleList.length
? (
<Tooltip title={localeService.t('sheet.cf.panel.clear')} placement="bottom">
<div className={`${styles.gap} ${styles.icon}`} onClick={handleClear}>
<DeleteSingle />
</div>
</Tooltip>
)
: (
<div className={`${styles.gap} ${styles.disabled}`}>
<DeleteSingle />
</div>
)}

</div>

Expand All @@ -294,30 +312,31 @@ export const RuleList = (props: IRuleListProps) => {
? (
<GridLayout
onDragStop={handleDragStop}
onDragStart={handleDragStart}
layout={layout}
cols={12}
rowHeight={42}
rowHeight={60}
width={layoutWidth}
margin={[0, 10]}
draggableHandle=".draggableHandle"
>
{ ruleList.map((rule) => {
{ ruleList.map((rule, index) => {
return (
<div key={`${rule.cfId}`} className={styles.reactGridItem}>
<div className={styles.ruleItem} onClick={() => onClick(rule)}>
<div key={`${rule.cfId}`}>
<div className={`${styles.ruleItem} ${draggingId === index ? styles.active : ''}`} onClick={() => onClick(rule)}>
<div
className={`${styles.draggableHandle} draggableHandle`}
onClick={(e) => e.stopPropagation()}
>
<MoreFunctionSingle />
<SequenceSingle />
</div>
<div className={styles.ruleDescribe}>
<div className={styles.ruleType}>{getRuleDescribe(rule, localeService)}</div>
<div className={styles.ruleRange}>{rule.ranges.map((range) => serializeRange(range)).join(',')}</div>
</div>
<div className={styles.preview}><Preview rule={rule.rule} /></div>
<div
className={styles.deleteItem}
className={`${styles.deleteItem} ${draggingId === index ? styles.active : ''}`}
onClick={(e) => {
e.stopPropagation();
handleDelete(rule);
Expand Down
Loading

0 comments on commit 81abc8b

Please sign in to comment.