mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
7284644313
Summary: - Add custom handling for dblclick on mobile, to allow focusing editor. - In place of Clipboard.js, use a FocusLayer with document.body as the default focus element. - Set maximum-scale on iOS viewport to prevent auto-zoom. - Reposition the editor on window resize when editing a cell, which is a normal occurrence on Android when virtual keyboard is shown. - Add Save/Cancel icon-buttons next to cell editor on mobile. Test Plan: Tested manually on Safari / FF on iPhone, and on Chrome on Android emulator. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2721
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import {isDesktop} from 'app/client/lib/browserInfo';
|
|
import {colors} from 'app/client/ui2018/cssVars';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
import {IEditorCommandGroup} from 'app/client/widgets/NewBaseEditor';
|
|
import {dom, styled} from 'grainjs';
|
|
|
|
/**
|
|
* Creates Save/Cancel icon buttons to show next to the cell editor.
|
|
*/
|
|
export function createMobileButtons(commands: IEditorCommandGroup) {
|
|
// TODO A better check may be to detect a physical keyboard or touch support.
|
|
return isDesktop() ? null : [
|
|
cssCancelBtn(cssIconWrap(cssFinishIcon('CrossSmall')), dom.on('click', commands.fieldEditCancel)),
|
|
cssSaveBtn(cssIconWrap(cssFinishIcon('Tick')), dom.on('click', commands.fieldEditSaveHere)),
|
|
];
|
|
}
|
|
|
|
export function getButtonMargins() {
|
|
return isDesktop() ? undefined : {left: 20, right: 20, top: 0, bottom: 0};
|
|
}
|
|
|
|
const cssFinishBtn = styled('div', `
|
|
height: 40px;
|
|
width: 40px;
|
|
padding: 8px;
|
|
position: absolute;
|
|
top: -8px;
|
|
--icon-color: white;
|
|
`);
|
|
|
|
const cssCancelBtn = styled(cssFinishBtn, `
|
|
--icon-background-color: ${colors.error};
|
|
left: -40px;
|
|
`);
|
|
|
|
const cssSaveBtn = styled(cssFinishBtn, `
|
|
--icon-background-color: ${colors.lightGreen};
|
|
right: -40px;
|
|
`);
|
|
|
|
const cssIconWrap = styled('div', `
|
|
border-radius: 20px;
|
|
background-color: var(--icon-background-color);
|
|
height: 24px;
|
|
width: 24px;
|
|
`);
|
|
|
|
const cssFinishIcon = styled(icon, `
|
|
height: 24px;
|
|
width: 24px;
|
|
`);
|