More mobile tweaks (#790)

* 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

View file

@ -5,7 +5,7 @@ import { isInvisiblySmallElement } from "../element";
import { resetCursor } from "../utils";
import React from "react";
import { ToolButton } from "../components/ToolButton";
import { save } from "../components/icons";
import { done } from "../components/icons";
import { t } from "../i18n";
export const actionFinalize: Action = {
@ -16,10 +16,13 @@ export const actionFinalize: Action = {
window.document.activeElement.blur();
}
if (appState.multiElement) {
appState.multiElement.points = appState.multiElement.points.slice(
0,
appState.multiElement.points.length - 1,
);
// pen and mouse have hover
if (appState.lastPointerDownWith !== "touch") {
appState.multiElement.points = appState.multiElement.points.slice(
0,
appState.multiElement.points.length - 1,
);
}
if (isInvisiblySmallElement(appState.multiElement)) {
newElements = newElements.slice(0, -1);
}
@ -50,12 +53,12 @@ export const actionFinalize: Action = {
PanelComponent: ({ appState, updateData }) => (
<div
style={{
visibility: appState.multiElement !== null ? "visible" : "hidden",
visibility: appState.multiElement != null ? "visible" : "hidden",
}}
>
<ToolButton
type="button"
icon={save}
icon={done}
title={t("buttons.done")}
aria-label={t("buttons.done")}
onClick={() => updateData(null)}