Skip to content

Commit

Permalink
feat(editor): style and placeholder (#1571)
Browse files Browse the repository at this point in the history 
* fix(editor): style

* fix(editor): placeholder gray
  • Loading branch information
@DR-Univer
DR-Univer authored and yuanbin committed Mar 19, 2024
1 parent 6e9d030 commit 7c99510
Show file tree
Hide file tree
Showing 8 changed files with 161 additions and 49 deletions.
14 changes: 7 additions & 7 deletions examples/src/plugins/debugger/views/test-editor/TestTextEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,19 @@ export const TestEditorContainer = () => {
<div
style={containerStyle}
>
<TextEditor id="test-editor-1" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} style={editorStyle} canvasStyle={{ fontSize: 10 }} value="I found one cent on the roadside." />
<TextEditor id="test-editor-1" placeholder="please input value" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} style={editorStyle} canvasStyle={{ fontSize: 10 }} value="I found one cent on the roadside." />
<br></br>
<TextEditor id="test-editor-2" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} onlyInputFormula={true} style={editorStyle} canvasStyle={{ fontSize: 10 }} />
<TextEditor id="test-editor-2" placeholder="please input value" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} onlyInputFormula={true} style={editorStyle} canvasStyle={{ fontSize: 10 }} />
<br></br>
<TextEditor id="test-editor-3" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} onlyInputRange={true} style={editorStyle} canvasStyle={{ fontSize: 10 }} />
<TextEditor id="test-editor-3" placeholder="please input value" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} onlyInputRange={true} style={editorStyle} canvasStyle={{ fontSize: 10 }} />
<br></br>
<TextEditor id="test-editor-4" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} isSingle={false} onlyInputContent={true} style={{ ...editorStyle, height: '140px' }} canvasStyle={{ fontSize: 14 }} />
<TextEditor id="test-editor-4" placeholder="please input value" openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} isReadonly={readonly} isSingle={false} onlyInputContent={true} style={{ ...editorStyle, height: '140px' }} canvasStyle={{ fontSize: 14 }} />
<br></br>
<RangeSelector id="test-rangeSelector-1" openForSheetUnitId={unitId} isReadonly={readonly} openForSheetSubUnitId={sheetId} />
<RangeSelector placeholder="please input value" id="test-rangeSelector-1" width={280} openForSheetUnitId={unitId} isReadonly={readonly} openForSheetSubUnitId={sheetId} />
<br></br>
<RangeSelector value="I am a wolf man" id="test-rangeSelector-2" isSingleChoice={true} isReadonly={readonly} openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} />
<RangeSelector placeholder="please input value" value="I am a wolf man" id="test-rangeSelector-2" isSingleChoice={true} isReadonly={readonly} openForSheetUnitId={unitId} openForSheetSubUnitId={sheetId} />
<br></br>
<Input allowClear />
<Input placeholder="please input value" allowClear />
<br></br>
<button onClick={() => setReadonly(!readonly)}>{readonly === true ? 'enable' : 'disable'}</button>
</div>
Expand Down
29 changes: 25 additions & 4 deletions packages/ui/src/components/editor/TextEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const excludeProps = new Set([
'onChange',
'onActive',
'onValid',
'placeholder',
]);

export interface ITextEditorProps {
Expand Down Expand Up @@ -78,6 +79,7 @@ export interface ITextEditorProps {

onValid?: (state: boolean) => void; // Editor input value validation, currently effective only under onlyRange and onlyFormula conditions.

placeholder?: string; // Placeholder text.
}

/**
Expand Down Expand Up @@ -109,6 +111,8 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
onActive,

onValid,

placeholder = '',
} = props;

const editorService = useDependency(IEditorService);
Expand Down Expand Up @@ -232,6 +236,19 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
editorService.setValue(value, id);
}, [value]);

function hasValue() {
const value = editorService.getValue(id);
if (value == null) {
return false;
}

if (value === '') {
return false;
}

return true;
}

const propsNew = Object.fromEntries(
Object.entries(props).filter(([key]) => !excludeProps.has(key))
);
Expand All @@ -243,17 +260,21 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC

let borderStyle = '';

if (active && props.className == null) {
if (validationVisible) {
if (props.className == null) {
if (isReadonly) {
borderStyle = ` ${styles.textEditorContainerDisabled}`;
} else if (validationVisible) {
borderStyle = ` ${styles.textEditorContainerError}`;
} else {
} else if (active) {
borderStyle = ` ${styles.textEditorContainerActive}`;
}
}

return (
<>
<div {...propsNew} className={className + borderStyle} ref={editorRef}></div>
<div {...propsNew} className={className + borderStyle} ref={editorRef}>
<div style={{ display: hasValue() ? 'none' : 'unset' }} className={styles.textEditorContainerPlaceholder}>{placeholder}</div>
</div>
<Popup visible={validationVisible} offset={validationOffset}>
<div className={styles.textEditorValidationError}>{validationContent}</div>
</Popup>
Expand Down
44 changes: 33 additions & 11 deletions packages/ui/src/components/editor/index.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,45 @@
border-radius: var(--border-radius-base);

&:hover {
border: 1px solid rgb(var(--primary-color));
border: 1px solid rgb(var(--hyacinth-500));
}

&:active {
border: 1px solid rgb(var(--primary-color));
border: 1px solid rgb(var(--hyacinth-500));
}
}

.text-editor-container-active {
border: 1px solid rgb(var(--primary-color));
}
&-active {
border: 1px solid rgb(var(--hyacinth-500));

.text-editor-container-error {
border: 1px solid rgb(var(--error-color));
&:hover {
border: 1px solid rgb(var(--hyacinth-500));
}
}

&:hover {
border: 1px solid rgb(var(--error-color));
&-error {
border: 1px solid rgb(var(--red-400));

&:hover {
border: 1px solid rgb(var(--red-400));
}
}

&-disabled {
border-color: rgb(var(--grey-100));

&:hover {
border-color: rgb(var(--grey-100));
}
}

&-placeholder {
position: absolute;
top: 49%;
left: 5px;
transform: translateY(-50%);
color: rgb(var(--grey-400));
font-size: var(--font-size-xs);
pointer-events: none;
}
}

Expand All @@ -37,5 +59,5 @@
// padding: 2px 3px;

font-size: @font-size-xxxs;
color: rgb(var(--error-color));
color: rgb(var(--red-400));
}
40 changes: 29 additions & 11 deletions packages/ui/src/components/range-selector/RangeSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import type { IUnitRange, Nullable } from '@univerjs/core';
import { IUniverInstanceService, LocaleService } from '@univerjs/core';
import { Button, Dialog, Input, Tooltip } from '@univerjs/design';
import { CloseSingle, DeleteSingle, SelectRangeSingle } from '@univerjs/icons';
import { CloseSingle, DeleteSingle, IncreaseSingle, SelectRangeSingle } from '@univerjs/icons';
import { useDependency } from '@wendellhu/redi/react-bindings';
import React, { useEffect, useRef, useState } from 'react';

Expand All @@ -37,10 +37,13 @@ export interface IRangeSelectorProps {
isReadonly?: boolean; // Set the selector to read-only state.
openForSheetUnitId?: Nullable<string>; // Configuring which workbook the selector defaults to opening in determines whether the ref includes a [unitId] prefix.
openForSheetSubUnitId?: Nullable<string>; // Configuring the default worksheet where the selector opens determines whether the ref includes a [unitId]sheet1 prefix.
width?: number; // The width of the selector.
size?: 'mini' | 'small' | 'middle' | 'large'; // The size of the selector.
placeholder?: string; // Placeholder text.
}

export function RangeSelector(props: IRangeSelectorProps) {
const { onChange, id, value = '', onActive, onValid, isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId, isReadonly = false } = props;
const { onChange, id, value = '', width = 220, placeholder = '', size = 'middle', onActive, onValid, isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId, isReadonly = false } = props;

const [rangeDataList, setRangeDataList] = useState<string[]>(['']);

Expand Down Expand Up @@ -264,16 +267,28 @@ export function RangeSelector(props: IRangeSelectorProps) {
}

let sClassName = styles.rangeSelector;
if (!valid) {

if (isReadonly) {
sClassName = `${styles.rangeSelector} ${styles.rangeSelectorDisabled}`;
} else if (!valid) {
sClassName = `${styles.rangeSelector} ${styles.rangeSelectorError}`;
} else if (active) {
sClassName = `${styles.rangeSelector} ${styles.rangeSelectorActive}`;
}

let height = 32;
if (size === 'mini') {
height = 24;
} else if (size === 'small') {
height = 28;
} else if (size === 'large') {
height = 36;
}

return (
<>
<div className={sClassName} ref={selectorRef}>
<TextEditor value={value} isReadonly={isReadonly} isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onEditorValid} onActive={onEditorActive} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
<div className={sClassName} ref={selectorRef} style={{ width, height }}>
<TextEditor placeholder={placeholder} value={value} isReadonly={isReadonly} isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onEditorValid} onActive={onEditorActive} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
<Tooltip title={localeService.t('rangeSelector.buttonTooltip')} placement="bottom">
<button className={styles.rangeSelectorIcon} onClick={handleOpenModal}>
<SelectRangeSingle />
Expand All @@ -282,15 +297,15 @@ export function RangeSelector(props: IRangeSelectorProps) {
</div>

<Dialog
width="300px"
width="328px"
visible={selectorVisible}
title={localeService.t('rangeSelector.title')}
draggable
closeIcon={<CloseSingle />}
footer={(
<footer>
<Button size="small" onClick={handleCloseModal}>{localeService.t('rangeSelector.cancel')}</Button>
<Button style={{ marginLeft: 10 }} size="small" onClick={handleConform} type="primary">{localeService.t('rangeSelector.confirm')}</Button>
<Button onClick={handleCloseModal}>{localeService.t('rangeSelector.cancel')}</Button>
<Button style={{ marginLeft: 10 }} onClick={handleConform} type="primary">{localeService.t('rangeSelector.confirm')}</Button>
</footer>
)}
onClose={handleCloseModal}
Expand All @@ -299,8 +314,8 @@ export function RangeSelector(props: IRangeSelectorProps) {
<div className={styles.rangeSelectorModal}>
{rangeDataList.map((item, index) => (
<div key={index} className={styles.rangeSelectorModalContainer}>
<div style={{ display: rangeDataList.length === 1 ? '220px' : '200px' }} className={styles.rangeSelectorModalContainerInput}>
<Input key={`input${index}`} onClick={() => setCurrentInputIndex(index)} size="small" value={item} onChange={(value) => changeItem(index, value)} />
<div style={{ width: rangeDataList.length === 1 ? '280px' : '252px' }} className={styles.rangeSelectorModalContainerInput}>
<Input className={currentInputIndex === index ? styles.rangeSelectorModalContainerInputActive : ((rangeDataList.length - 1 === index && currentInputIndex === -1) ? styles.rangeSelectorModalContainerInputActive : '')} placeholder={localeService.t('rangeSelector.placeHolder')} affixWrapperStyle={{ width: '100%' }} key={`input${index}`} onClick={() => setCurrentInputIndex(index)} value={item} onChange={(value) => changeItem(index, value)} />
</div>
<div style={{ display: rangeDataList.length === 1 ? 'none' : 'inline-block' }} className={styles.rangeSelectorModalContainerButton}>
<DeleteSingle onClick={() => removeItem(index)} />
Expand All @@ -309,7 +324,10 @@ export function RangeSelector(props: IRangeSelectorProps) {
))}

<div style={{ display: isSingleChoice ? 'none' : 'unset' }} className={styles.rangeSelectorModalAdd}>
<Button size="small" onClick={handleAddRange}>{localeService.t('rangeSelector.addAnotherRange')}</Button>
<Button type="link" size="small" onClick={handleAddRange} className={styles.rangeSelectorModalAddButton}>
<IncreaseSingle />
<span>{localeService.t('rangeSelector.addAnotherRange')}</span>
</Button>
</div>
</div>

Expand Down
59 changes: 47 additions & 12 deletions packages/ui/src/components/range-selector/index.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@padding-top-bottom: 6px;
@height: 32px;
@width: 218px;
@width: 220px;
@icon-size: 24px;

.range-selector {
Expand Down Expand Up @@ -59,19 +59,39 @@
}
}

&:hover {
border-color: rgb(var(--hyacinth-500));
}

&-active {
border-color: rgb(var(--primary-color));
border-color: rgb(var(--hyacinth-500));

.range-selector-icon {
color: rgb(var(--primary-color));
color: rgb(var(--hyacinth-500));
}
}

&-error {
border-color: rgb(var(--error-color));
border-color: rgb(var(--red-400));

.range-selector-icon {
color: rgb(var(--error-color));
color: rgb(var(--red-400));
}

&:hover {
border-color: rgb(var(--red-400));
}
}

&-disabled {
border-color: rgb(var(--grey-100));

.range-selector-icon {
color: rgb(var(--grey-100));
}

&:hover {
border-color: rgb(var(--grey-100));
}
}
}
Expand All @@ -81,8 +101,6 @@

max-height: 500px;

width: 260px;

overflow: hidden;

overflow-y: auto;
Expand All @@ -92,29 +110,46 @@
flex-direction: row;
// justify-content: center;
align-items: center;
width: 230px;

margin-bottom: 10px;

&-input {
display: inline-block;
width: 200px;
width: 280px;

&-active {
border-color: rgb(var(--hyacinth-500));
}
}

&-button {
display: inline-block;
text-align: center;
width: 30px;
width: 28px;

&:hover {
cursor: pointer;
color: rgb(var(--primary-color));
color: rgb(var(--hyacinth-500));
}
}
}

&--add {
&-add {
position: relative;
width: 300px;
margin-top: 5px;
text-align: left;
color: rgb(var(--hyacinth-500));
font-size: var(--font-size-xs);
&-button {
display: flex;
align-items: center;
justify-content: center;

&:hover {
cursor: pointer;
background-color: rgb(var(--hyacinth-500), 0.05);
}
}
}
}
3 changes: 2 additions & 1 deletion packages/ui/src/locale/en-US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,9 @@ const locale: typeof zhCN = {
},
rangeSelector: {
title: 'Select a data range',
addAnotherRange: 'Add another range',
addAnotherRange: 'Add range',
buttonTooltip: 'Select data range',
placeHolder: 'Select range or enter.',
confirm: 'Confirm',
cancel: 'Cancel',
},
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/locale/zh-CN.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,9 @@ const locale = {
},
rangeSelector: {
title: '选择一个数据范围',
addAnotherRange: '添加新范围',
addAnotherRange: '添加范围',
buttonTooltip: '选择数据范围',
placeHolder: '框选范围或输入',
confirm: '确认',
cancel: '取消',
},
Expand Down
Loading

0 comments on commit 7c99510

Please sign in to comment.