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

More mobile tweaks (#790)

Browse source 
* Disable text selection

* Set content-editable=plaintext-only to disable Touch Bar formatting buttons

* Enlarge resize handle tap targets for pen/touch

* Make the lock button a button in mobile mode

* Use icons instead of Unicode characters; add an alternate toolbar for creating multipoint lines

* Allow buttons to hide themselves

* Fix heuristic for showing shape actions

* Refactor icons

* Fix label for edit button

* Switch edit button icon

* Remove lock button on mobile

* Add language selector on mobile

* Fix showing edit button on mobile

* Fix showing edit button on mobile, part 2

* Fix handle touch regions

* Fix scroll-back button position

* Allow using the text tool on a text object to start editing it

* Fix deletion of last point in line
This commit is contained in:
Jed Fox 2020-02-21 14:34:18 -05:00 • committed by GitHub
parent 949c3841ea
commit 0fd3fb4b5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 272 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/styles.scss
View file

@ -6,6 +6,11 @@ body {
font-family: var(--ui-font);
color: var(--text-color-primary);
-webkit-text-size-adjust: 100%;
user-select: none;
}
[contenteditable] {
user-select: auto;
cursor: text;
}
canvas {
@ -139,11 +144,19 @@ button,
}
}
.App-toolbar,
.App-mobile-menu {
--spacing: 0.5rem;
--padding: calc(4 * var(--space-factor));
padding: var(--padding);
padding-left: #{"max(var(--padding), env(safe-area-inset-left))"};
padding-right: #{"max(var(--padding), env(safe-area-inset-right))"};
background: #fcfcfc;
border-top: 1px solid #ccc;
box-sizing: border-box;
}
.App-toolbar {
padding: var(--spacing);
padding-bottom: #{"max(var(--spacing), env(safe-area-inset-bottom))"};
padding-left: #{"max(var(--spacing), env(safe-area-inset-left))"};
padding-right: #{"max(var(--spacing), env(safe-area-inset-right))"};
padding-bottom: #{"max(var(--padding), env(safe-area-inset-bottom))"};
width: 100%;
box-sizing: border-box;
overflow: auto;
@ -155,14 +168,8 @@ button,
align-items: center;
justify-content: space-between;
}
.App-toolbar,
.App-mobile-menu {
--spacing: 0.5rem;
background: #fcfcfc;
border-top: 1px solid #ccc;
}
.App-mobile-menu {
--bottom: calc(3rem - 1px + max(var(--spacing), env(safe-area-inset-bottom)));
--bottom: calc(3rem - 1px + max(var(--padding), env(safe-area-inset-bottom)));
display: grid;
position: fixed;
width: 100%;
@ -174,10 +181,6 @@ button,
.App-mobile-menu .App-mobile-menu-scroller {
background: #fcfcfc;
box-shadow: none;
--padding: calc(4 * var(--space-factor));
padding: var(--padding);
padding-left: #{"max(var(--padding), env(safe-area-inset-left))"};
padding-right: #{"max(var(--padding), env(safe-area-inset-right))"};
}
.App-menu {
@ -288,12 +291,7 @@ button,
}
.dropdown-select {
position: absolute;
margin-bottom: 0.5em;
margin-right: 0.5em;
height: 1.5rem;
right: 0;
bottom: 0;
padding: 0 1.5rem 0 0.5rem;
background-color: #e9ecef;
border-radius: var(--space-factor);
@ -317,10 +315,14 @@ button,
&:active {
background-color: #ced4da;
}
&.dropdown-select--floating {
position: absolute;
margin-bottom: 0.5em;
margin-right: 0.5em;
}
}
.language-select {
@extend .dropdown-select;
.dropdown-select__language.dropdown-select--floating {
right: 0;
bottom: 0;
}
@ -351,7 +353,7 @@ button,
.scroll-back-to-content {
position: fixed;
left: 50%;
bottom: 20px;
bottom: 30px;
transform: translateX(-50%);
padding: 10px 20px;
}
@ -361,7 +363,7 @@ button,
display: none;
}
.scroll-back-to-content {
bottom: 70px;
bottom: calc(70px + env(safe-area-inset-bottom));
bottom: 80px;
bottom: calc(80px + env(safe-area-inset-bottom));
}
}