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

83
src/index.tsx
View file

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

15
src/styles.scss
View file

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