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

Better styles

Browse source
This commit is contained in:
Jared Palmer 2020-01-05 12:21:28 -08:00
parent 8525480ad4
commit 8d9ffb2f8a
2 changed files with 82 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/index.tsx
View file

@ -817,7 +817,7 @@ function restore(
type AppState = { type AppState = {
draggingElement: ExcalidrawElement | null; draggingElement: ExcalidrawElement | null;
resizingElement: ExcalidrawElement | null; resizingElement: ExcalidrawElement | null;
currentColorPicker: "Background" | null; currentColorPicker: "Background" | "ShapeStroke" | "ShapeBackground" | null;
elementType: string; elementType: string;
exportBackground: boolean; exportBackground: boolean;
currentItemStrokeColor: string; currentItemStrokeColor: string;
@ -1155,9 +1155,8 @@ class App extends React.Component<{}, AppState> {
</div> </div>
<h4>Colors</h4> <h4>Colors</h4>
<div className="panelColumn"> <div className="panelColumn">
<h5>Canvas Background</h5>
<div> <div>
<h5>Background</h5>
<button <button
className="swatch" className="swatch"
style={{ style={{
@ -1195,26 +1194,84 @@ class App extends React.Component<{}, AppState> {
} }
/> />
</div> </div>
<label> <h5>Shape Stroke</h5>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.currentItemStrokeColor
}}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === "ShapeStroke"
? null
: "ShapeStroke"
}))
}
></button>
{this.state.currentColorPicker === "ShapeStroke" ? (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
></div>
<SketchPicker
color={this.state.currentItemStrokeColor}
onChange={color => {
this.setState({ currentItemStrokeColor: color.hex });
}}
/>
</div>
) : null}
<input <input
type="color" type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor} value={this.state.currentItemStrokeColor}
onChange={e => { onChange={e => {
this.setState({ currentItemStrokeColor: e.target.value }); this.setState({ currentItemStrokeColor: e.target.value });
}} }}
/> />
Shape Stroke </div>
</label> <h5>Shape Background</h5>
<label> <div>
<input <button
type="color" className="swatch"
value={this.state.currentItemBackgroundColor} style={{
onChange={e => { backgroundColor: this.state.currentItemBackgroundColor
this.setState({ currentItemBackgroundColor: e.target.value }); }}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === "ShapeBackground"
? null
: "ShapeBackground"
}))
}
></button>
{this.state.currentColorPicker === "ShapeBackground" ? (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
></div>
<SketchPicker
color={this.state.currentItemBackgroundColor}
onChange={color => {
this.setState({ currentItemBackgroundColor: color.hex });
}} }}
/> />
Shape Background </div>
</label> ) : null}
<input
type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor}
onChange={e => {
this.setState({ currentItemStrokeColor: e.target.value });
}}
/>
</div>
</div> </div>
<h4>Canvas</h4> <h4>Canvas</h4>
<div className="panelColumn"> <div className="panelColumn">

15
src/styles.scss
View file

@ -43,8 +43,14 @@ body {
flex-direction: column; flex-direction: column;
h5 { h5 {
margin-top: 0px; margin-top: 4px;
margin-bottom: 8px; margin-bottom: 4px;
font-size: 12px;
color: #333;
}
h5:first-of-type {
margin-top: 0;
} }
} }
} }
@ -155,12 +161,15 @@ button {
.swatch { .swatch {
height: 24px; height: 24px;
width: 24px; width: 24px;
display: inline;
margin-right: 4px; margin-right: 4px;
} }
.swatch-input { .swatch-input {
font-size: 16px; font-size: 16px;
display: inline;
width: 100px;
border-radius: 2px; border-radius: 2px;
padding: 2px; padding: 2px 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
} }