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

Undo/Redo buttons, refactor menu toggles (#793)

Browse source 
* Make Undo & Redo and the menu buttons into actions; add undo/redo buttons

* Create variables for the ToolIcon colors

* Darken the menu buttons when they’re active

* Put the more intensive test in `perform`

* Fix & restyle hint viewer

* Add pinch zoom for macOS Safari

* Chrome/Firefox trackpad pinch zoom

* openedMenu → openMenu

* needsShapeEditor.ts → showSelectedShapeActions.ts

* Call showSelectedShapeActions
This commit is contained in:
Jed Fox 2020-03-01 14:39:03 -05:00 • committed by GitHub
parent 0ee33fe341
commit 8e0206cc1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 271 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/ToolIcon.scss
View file

@ -1,10 +1,17 @@
:root {
--button-gray-1: #e9ecef;
--button-gray-2: #ced4da;
--button-gray-3: #adb5bd;
--button-blue: #a5d8ff;
}
.ToolIcon {
display: inline-flex;
align-items: center;
position: relative;
font-family: Cascadia;
cursor: pointer;
background-color: #e9ecef;
background-color: var(--button-gray-1);
-webkit-tap-highlight-color: transparent;
}
@ -41,13 +48,19 @@
font-size: inherit;
&:hover {
background-color: #e9ecef;
background-color: var(--button-gray-1);
}
&:active {
background-color: #ced4da;
background-color: var(--button-gray-2);
}
&:focus {
box-shadow: 0 0 0 2px #a5d8ff;
box-shadow: 0 0 0 2px var(--button-blue);
}
&.ToolIcon--selected {
background-color: var(--button-gray-2);
&:active {
background-color: var(--button-gray-3);
}
}
}
@ -57,17 +70,14 @@
opacity: 0;
pointer-events: none;
&:hover + .ToolIcon__icon {
background-color: #e9ecef;
}
&:checked + .ToolIcon__icon {
background-color: #ced4da;
background-color: var(--button-gray-2);
}
&:focus + .ToolIcon__icon {
box-shadow: 0 0 0 2px #a5d8ff;
box-shadow: 0 0 0 2px var(--button-blue);
}
&:active + .ToolIcon__icon {
background-color: #adb5bd;
background-color: var(--button-gray-3);
}
}
@ -105,7 +115,7 @@
bottom: 2px;
right: 3px;
font-size: 0.5em;
color: #adb5bd; // OC GRAY 5
color: var(--button-gray-3); // OC GRAY 5
font-family: var(--ui-font);
user-select: none;
}