smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove duplicated options

Browse source
This commit is contained in:
Paulo Menezes 2020-01-05 20:18:32 -03:00
parent e3a450b021
commit 3fe4ccd10e
1 changed files with 33 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/index.tsx
View file

@ -1346,7 +1346,7 @@ class App extends React.Component<{}, AppState> {
private updateProjectName(name: string): void { private updateProjectName(name: string): void {
this.setState({ name }); this.setState({ name });
} }
private changeProperty = (callback: (element: ExcalidrawElement) => void) => { private changeProperty = (callback: (element: ExcalidrawElement) => void) => {
elements.forEach(element => { elements.forEach(element => {
if (element.isSelected) { if (element.isSelected) {
@ -1563,13 +1563,15 @@ class App extends React.Component<{}, AppState> {
<> <>
<> <>
<h4>Colors</h4> <h4>Colors</h4>
<div className='panelColumn'> <div className="panelColumn">
<h5>Shape Stroke Color</h5> <h5>Shape Stroke Color</h5>
<div> <div>
<button <button
className="swatch" className="swatch"
style={{ style={{
backgroundColor: getSelectedStrokeColor() || this.state.currentItemStrokeColor backgroundColor:
getSelectedStrokeColor() ||
this.state.currentItemStrokeColor
}} }}
onClick={() => onClick={() =>
this.setState(s => ({ this.setState(s => ({
@ -1580,11 +1582,14 @@ class App extends React.Component<{}, AppState> {
})) }))
} }
/> />
{this.state.currentColorPicker === ColorPicker.SHAPE_STROKE && ( {this.state.currentColorPicker ===
ColorPicker.SHAPE_STROKE && (
<div className="popover"> <div className="popover">
<div <div
className="cover" className="cover"
onClick={() => this.setState({ currentColorPicker: null })} onClick={() =>
this.setState({ currentColorPicker: null })
}
/> />
<SketchPicker <SketchPicker
color={this.state.currentItemStrokeColor} color={this.state.currentItemStrokeColor}
@ -1595,25 +1600,31 @@ class App extends React.Component<{}, AppState> {
<input <input
type="text" type="text"
className="swatch-input" className="swatch-input"
value={getSelectedStrokeColor() || this.state.currentItemStrokeColor} value={
getSelectedStrokeColor() ||
this.state.currentItemStrokeColor
}
onChange={e => this.changeSrokeColor(e.target.value)} onChange={e => this.changeSrokeColor(e.target.value)}
/> />
</div> </div>
</div> </div>
{someElementIsSelectedIsRectangleOrEllipse() && ( {someElementIsSelectedIsRectangleOrEllipse() && (
<div className='panelColumn'> <div className="panelColumn">
<h5>Shape Background Color</h5> <h5>Shape Background Color</h5>
<div> <div>
<button <button
className="swatch" className="swatch"
style={{ style={{
backgroundColor: getSelectedBackgroundColor() || this.state.currentItemBackgroundColor backgroundColor:
getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor
}} }}
onClick={() => onClick={() =>
this.setState(s => ({ this.setState(s => ({
currentColorPicker: currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_BACKGROUND s.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND
? null ? null
: ColorPicker.SHAPE_BACKGROUND : ColorPicker.SHAPE_BACKGROUND
})) }))
@ -1624,35 +1635,34 @@ class App extends React.Component<{}, AppState> {
<div className="popover"> <div className="popover">
<div <div
className="cover" className="cover"
onClick={() => this.setState({ currentColorPicker: null })} onClick={() =>
this.setState({ currentColorPicker: null })
}
/> />
<SketchPicker <SketchPicker
color={this.state.currentItemBackgroundColor} color={this.state.currentItemBackgroundColor}
onChange={color => this.changeBackgroundColor(color.hex)} onChange={color =>
this.changeBackgroundColor(color.hex)
}
/> />
</div> </div>
) : null} ) : null}
<input <input
type="text" type="text"
className="swatch-input" className="swatch-input"
value={getSelectedBackgroundColor() || value={
this.state.currentItemBackgroundColor} getSelectedBackgroundColor() ||
onChange={e => this.changeBackgroundColor(e.target.value)} this.state.currentItemBackgroundColor
}
onChange={e =>
this.changeBackgroundColor(e.target.value)
}
/> />
</div> </div>
</div> </div>
)} )}
</> </>
<h4>Shape options</h4>
<div className="panelColumn">
<button onClick={this.deleteSelectedElements}>Delete</button>
<button onClick={this.moveOneRight}>Bring forward</button>
<button onClick={this.moveAllRight}>Bring to front</button>
<button onClick={this.moveOneLeft}>Send backward</button>
<button onClick={this.moveAllLeft}>Send to back</button>
</div>
{someElementIsSelectedIsRectangleOrEllipse() && ( {someElementIsSelectedIsRectangleOrEllipse() && (
<> <>
<h4>Fill</h4> <h4>Fill</h4>