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 28, 2024
1 parent 55d4a61 commit 871fd06
Show file tree
Hide file tree
Showing 10 changed files with 302 additions and 5,496 deletions.
2 changes: 1 addition & 1 deletion packages/sheets-conditional-format/src/base/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const createDefaultRule = () => ({
cfId: undefined as unknown as string,
ranges: [],
stopIfTrue: false,
rule: { type: CFRuleType.highlightCell, subType: CFSubRuleType.text, operator: CFTextOperator.notContainsBlanks } as ITextHighlightCell,
rule: { type: CFRuleType.highlightCell, subType: CFSubRuleType.text, operator: CFTextOperator.containsText } as ITextHighlightCell,
} as IConditionFormatRule);

export const createDefaultValue = (subType: CFSubRuleType, operator: CFTextOperator | CFNumberOperator | CFTimePeriodOperator) => {
Expand Down
4 changes: 4 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 @@ -25,17 +25,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
42 changes: 21 additions & 21 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 All @@ -136,39 +135,40 @@ const getOperatorOptions = (type: CFSubRuleType.duplicateValues | CFSubRuleType.
switch (type) {
case CFSubRuleType.text:{
return [
createOptionItem(CFTextOperator.notContainsText, localeService),
createOptionItem(CFTextOperator.containsText, localeService),
createOptionItem(CFTextOperator.equal, localeService),
createOptionItem(CFTextOperator.notEqual, localeService),
createOptionItem(CFTextOperator.notContainsText, localeService),
createOptionItem(CFTextOperator.beginsWith, localeService),
createOptionItem(CFTextOperator.endsWith, localeService),
createOptionItem(CFTextOperator.equal, localeService),
createOptionItem(CFTextOperator.notEqual, localeService),
createOptionItem(CFTextOperator.containsBlanks, localeService),
createOptionItem(CFTextOperator.notContainsBlanks, localeService)];
}
case CFSubRuleType.number:{
return [
createOptionItem(CFNumberOperator.between, localeService),
createOptionItem(CFNumberOperator.notBetween, localeService),
createOptionItem(CFNumberOperator.equal, localeService),
createOptionItem(CFNumberOperator.notEqual, localeService),
createOptionItem(CFNumberOperator.greaterThan, localeService),
createOptionItem(CFNumberOperator.lessThan, localeService),
createOptionItem(CFNumberOperator.greaterThanOrEqual, localeService),
createOptionItem(CFNumberOperator.lessThan, localeService),
createOptionItem(CFNumberOperator.lessThanOrEqual, localeService),
createOptionItem(CFNumberOperator.equal, localeService),
createOptionItem(CFNumberOperator.notEqual, localeService),
createOptionItem(CFNumberOperator.between, localeService),
createOptionItem(CFNumberOperator.notBetween, localeService),

];
}
case CFSubRuleType.timePeriod:{
return [createOptionItem(CFTimePeriodOperator.last7Days, localeService),
createOptionItem(CFTimePeriodOperator.lastMonth, localeService),
return [
createOptionItem(CFTimePeriodOperator.yesterday, localeService),
createOptionItem(CFTimePeriodOperator.today, localeService),
createOptionItem(CFTimePeriodOperator.tomorrow, localeService),
createOptionItem(CFTimePeriodOperator.last7Days, localeService),
createOptionItem(CFTimePeriodOperator.lastWeek, localeService),
createOptionItem(CFTimePeriodOperator.nextMonth, localeService),
createOptionItem(CFTimePeriodOperator.thisWeek, localeService),
createOptionItem(CFTimePeriodOperator.nextWeek, localeService),
createOptionItem(CFTimePeriodOperator.lastMonth, localeService),
createOptionItem(CFTimePeriodOperator.thisMonth, localeService),
createOptionItem(CFTimePeriodOperator.thisWeek, localeService),
createOptionItem(CFTimePeriodOperator.tomorrow, localeService),
createOptionItem(CFTimePeriodOperator.yesterday, localeService),
createOptionItem(CFTimePeriodOperator.today, localeService)];
createOptionItem(CFTimePeriodOperator.nextMonth, localeService),
];
}
}
};
Expand Down Expand Up @@ -216,7 +216,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));
}
Loading

0 comments on commit 871fd06

Please sign in to comment.