sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No named colors and lowercase hex (#395)

Browse Source 
* No named colors and lowercase hex

* consistent
This commit is contained in:
Lipis 2020-01-16 20:16:08 +02:00 committed by Christopher Chedeau
parent 1ae3c64860
commit 8154ccd907
7 changed files with 57 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -53,12 +53,12 @@
class="octo-arm" class="octo-arm"
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
style="transform-origin: 130px 106px" style="transform-origin: 130px 106px"
fill="white" fill="#fff"
/> />
<path <path
class="octo-body" class="octo-body"
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
fill="white" fill="#fff"
/> />
</a> </a>
</svg> </svg>

84
src/components/ColorPicker.tsx
View File

@ -108,56 +108,56 @@ export function ColorPicker({
const colors = { const colors = {
// Shade 0 // Shade 0
canvasBackground: [ canvasBackground: [
"#FFFFFF", "#ffffff",
"#F8F9FA", "#f8f9fa",
"#F1F3F5", "#f1f3f5",
"#FFF5F5", "#fff5f5",
"#FFF0F6", "#fff0f6",
"#F8F0FC", "#f8f0fc",
"#F3F0FF", "#f3f0ff",
"#EDF2FF", "#edf2ff",
"#E7F5FF", "#e7f5ff",
"#E3FAFC", "#e3fafc",
"#E6FCF5", "#e6fcf5",
"#EBFBEE", "#ebfbee",
"#F4FCE3", "#f4fce3",
"#FFF9DB", "#fff9db",
"#FFF4E6" "#fff4e6"
], ],
// Shade 6 // Shade 6
elementBackground: [ elementBackground: [
"transparent", "transparent",
"#CED4DA", "#ced4da",
"#868E96", "#868e96",
"#FA5252", "#fa5252",
"#E64980", "#e64980",
"#BE4BDB", "#be4bdb",
"#7950F2", "#7950f2",
"#4C6EF5", "#4c6ef5",
"#228BE6", "#228be6",
"#15AABF", "#15aabf",
"#12B886", "#12b886",
"#40C057", "#40c057",
"#82C91E", "#82c91e",
"#FAB005", "#fab005",
"#FD7E14" "#fd7e14"
], ],
// Shade 9 // Shade 9
elementStroke: [ elementStroke: [
"#000000", "#000000",
"#343A40", "#343a40",
"#495057", "#495057",
"#C92A2A", "#c92a2a",
"#A61E4D", "#a61e4d",
"#862E9C", "#862e9c",
"#5F3DC4", "#5f3dc4",
"#364FC7", "#364fc7",
"#1864AB", "#1864ab",
"#0B7285", "#0b7285",
"#087F5B", "#087f5b",
"#2B8A3E", "#2b8a3e",
"#5C940D", "#5c940d",
"#E67700", "#e67700",
"#D9480F" "#d9480f"
] ]
}; };

2
src/components/ContextMenu.css
View File

@ -27,7 +27,7 @@
} }
.context-menu-option:hover { .context-menu-option:hover {
color: white; color: #fff;
background-color: #4e95f5; background-color: #4e95f5;
} }

4
src/index.tsx
View File

@ -440,7 +440,9 @@ export class App extends React.Component<{}, AppState> {
icon={icon} icon={icon}
checked={this.state.elementType === value} checked={this.state.elementType === value}
name="editor-current-shape" name="editor-current-shape"
title={`${capitalizeString(value)} — ${capitalizeString(value)[0]}, ${index + 1}`} title={`${capitalizeString(value)} — ${
capitalizeString(value)[0]
}, ${index + 1}`}
onChange={() => { onChange={() => {
this.setState({ elementType: value }); this.setState({ elementType: value });
elements = clearSelection(elements); elements = clearSelection(elements);

17
src/shapes.tsx
View File

@ -60,14 +60,7 @@ export const SHAPES = [
icon: ( icon: (
// custom // custom
<svg viewBox="0 0 6 6"> <svg viewBox="0 0 6 6">
<line <line x1="0" y1="3" x2="6" y2="3" stroke="#000" strokeLinecap="round" />
x1="0"
y1="3"
x2="6"
y2="3"
stroke="black"
strokeLinecap="round"
/>
</svg> </svg>
), ),
value: "line" value: "line"
@ -75,13 +68,15 @@ export const SHAPES = [
]; ];
export const shapesShortcutKeys = SHAPES.map((shape, index) => [ export const shapesShortcutKeys = SHAPES.map((shape, index) => [
shape.value[0], (index + 1).toString()] shape.value[0],
).flat(1); (index + 1).toString()
]).flat(1);
export function findShapeByKey(key: string) { export function findShapeByKey(key: string) {
const defaultElement = "selection"; const defaultElement = "selection";
return SHAPES.reduce((element, shape, index) => { return SHAPES.reduce((element, shape, index) => {
if (shape.value[0] !== key && key !== (index + 1).toString()) return element; if (shape.value[0] !== key && key !== (index + 1).toString())
return element;
return shape.value; return shape.value;
}, defaultElement); }, defaultElement);

4
src/styles.scss
View File

@ -54,7 +54,7 @@ body {
input:focus { input:focus {
outline: transparent; outline: transparent;
box-shadow: 0 0 0 2px steelblue; box-shadow: 0 0 0 2px #4682b4;
} }
button { button {
@ -66,7 +66,7 @@ button {
outline: transparent; outline: transparent;
&:focus { &:focus {
box-shadow: 0 0 0 2px steelblue; box-shadow: 0 0 0 2px #4682b4;
} }
&:hover { &:hover {

6
src/theme.css
View File

@ -1,11 +1,7 @@
:root { :root {
--text-color-primary: #333; --text-color-primary: #333;
--bg-color-main: #fff;
--bg-color-main: white;
--shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15); --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
--border-radius-m: 4px; --border-radius-m: 4px;
--space-factor: 4px; --space-factor: 4px;
} }