mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
48e90c4998
Summary: - No longer convert data columns to formula by typing a leading "=". Instead, show a tooltip with a link to click if the conversion was intended. - No longer convert a formula column to data by deleting its formula. Leave the column empty instead. - Offer the option "Convert formula to data" in column menu for formulas. - Offer the option to "Clear column" - If a subset of rows is shown, offer "Clear values" and "Clear entire column". - Add logic to detect when a view shows a subset of all rows. - Factor out showTooltip() from showTransientTooltip(). - Add a bunch of test cases to cover various combinations (there are small variations in options depending on whether all rows are shown, on whether multiple columns are selected, and whether columns include data columns). Test Plan: Added a bunch of test cases. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2746
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import {ITooltipControl, showTooltip} from 'app/client/ui/tooltips';
|
|
import {colors, testId} from 'app/client/ui2018/cssVars';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
import {cssLink} from 'app/client/ui2018/links';
|
|
import {dom, styled} from 'grainjs';
|
|
|
|
export function showTooltipToCreateFormula(editorDom: HTMLElement, convert: () => void) {
|
|
function buildTooltip(ctl: ITooltipControl) {
|
|
return cssConvertTooltip(icon('Convert'),
|
|
cssLink('Convert column to formula',
|
|
dom.on('mousedown', (ev) => { ev.preventDefault(); convert(); }),
|
|
testId('editor-tooltip-convert'),
|
|
),
|
|
cssCloseButton(icon('CrossSmall'), dom.on('click', ctl.close)),
|
|
);
|
|
}
|
|
const offerCtl = showTooltip(editorDom, buildTooltip, {key: 'col-to-formula'});
|
|
|
|
dom.onDisposeElem(editorDom, offerCtl.close);
|
|
const lis = dom.onElem(editorDom, 'keydown', () => {
|
|
lis.dispose();
|
|
offerCtl.close();
|
|
});
|
|
}
|
|
|
|
const cssConvertTooltip = styled('div', `
|
|
display: flex;
|
|
align-items: center;
|
|
--icon-color: ${colors.lightGreen};
|
|
|
|
& > .${cssLink.className} {
|
|
margin-left: 8px;
|
|
}
|
|
`);
|
|
|
|
const cssCloseButton = styled('div', `
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
margin: -4px -4px -4px 8px;
|
|
--icon-color: white;
|
|
border-radius: 16px;
|
|
|
|
&:hover {
|
|
background-color: white;
|
|
--icon-color: black;
|
|
}
|
|
`);
|