mirror of
https://github.com/gristlabs/grist-core.git
synced 2026-03-02 04:09:24 +00:00
(core) Add behavioral and coaching call popups
Summary: Adds a new category of popups that are shown dynamically when certain parts of the UI are first rendered, and a free coaching call popup that's shown to users on their site home page. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D3706
This commit is contained in:
George Gevoian
@@ -2,11 +2,14 @@ import * as commands from 'app/client/components/commands';
|
||||
import {GristDoc} from 'app/client/components/GristDoc';
|
||||
import {FocusLayer} from 'app/client/lib/FocusLayer';
|
||||
import {reportSuccess} from 'app/client/models/errors';
|
||||
import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
|
||||
import {basicButton, bigPrimaryButton, primaryButton} from 'app/client/ui2018/buttons';
|
||||
import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
|
||||
import {testId, theme} from 'app/client/ui2018/cssVars';
|
||||
import {modalTooltip} from 'app/client/ui2018/modals';
|
||||
import {dom, DomContents, observable, styled} from 'grainjs';
|
||||
import {testId, theme, vars} from 'app/client/ui2018/cssVars';
|
||||
import {icon} from 'app/client/ui2018/icons';
|
||||
import {cssModalTooltip, modalTooltip} from 'app/client/ui2018/modals';
|
||||
import {dom, DomContents, keyframes, observable, styled, svg} from 'grainjs';
|
||||
import {IPopupOptions} from 'popweasel';
|
||||
import merge = require('lodash/merge');
|
||||
|
||||
/**
|
||||
* This is a file for all custom and pre-configured popups, modals, toasts and tooltips, used
|
||||
@@ -131,6 +134,163 @@ export function reportUndo(
|
||||
}
|
||||
}
|
||||
|
||||
export interface ShowBehavioralPromptOptions {
|
||||
onClose: (dontShowTips: boolean) => void;
|
||||
/** Defaults to false. */
|
||||
hideArrow?: boolean;
|
||||
popupOptions?: IPopupOptions;
|
||||
}
|
||||
|
||||
export function showBehavioralPrompt(
|
||||
refElement: Element,
|
||||
title: string,
|
||||
content: DomContents,
|
||||
options: ShowBehavioralPromptOptions
|
||||
) {
|
||||
const {onClose, hideArrow, popupOptions} = options;
|
||||
const arrow = hideArrow ? null : buildArrow();
|
||||
const dontShowTips = observable(false);
|
||||
const tooltip = modalTooltip(refElement,
|
||||
(ctl) => [
|
||||
cssBehavioralPromptModal.cls(''),
|
||||
arrow,
|
||||
cssBehavioralPromptContainer(
|
||||
dom.autoDispose(dontShowTips),
|
||||
testId('behavioral-prompt'),
|
||||
elem => { FocusLayer.create(ctl, {defaultFocusElem: elem, pauseMousetrap: true}); },
|
||||
dom.onKeyDown({
|
||||
Escape: () => ctl.close(),
|
||||
Enter: () => { onClose(dontShowTips.get()); ctl.close(); },
|
||||
}),
|
||||
cssBehavioralPromptHeader(
|
||||
cssHeaderIconAndText(
|
||||
icon('Idea'),
|
||||
cssHeaderText('TIP'),
|
||||
),
|
||||
),
|
||||
cssBehavioralPromptBody(
|
||||
cssBehavioralPromptTitle(title, testId('behavioral-prompt-title')),
|
||||
content,
|
||||
cssButtons(
|
||||
dom.style('margin-top', '12px'),
|
||||
dom.style('justify-content', 'space-between'),
|
||||
dom.style('align-items', 'center'),
|
||||
dom('div',
|
||||
cssSkipTipsCheckbox(dontShowTips,
|
||||
cssSkipTipsCheckboxLabel("Don't show tips"),
|
||||
testId('behavioral-prompt-dont-show-tips')
|
||||
),
|
||||
),
|
||||
cssDismissPromptButton('Got it', testId('behavioral-prompt-dismiss'),
|
||||
dom.on('click', () => { onClose(dontShowTips.get()); ctl.close(); })
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
merge(popupOptions, {
|
||||
modifiers: {
|
||||
...(arrow ? {arrow: {element: arrow}}: {}),
|
||||
offset: {
|
||||
offset: '0,12',
|
||||
},
|
||||
}
|
||||
})
|
||||
);
|
||||
dom.onDisposeElem(refElement, () => {
|
||||
if (!tooltip.isDisposed()) {
|
||||
tooltip.close();
|
||||
}
|
||||
});
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
function buildArrow() {
|
||||
return cssArrowContainer(
|
||||
svg('svg',
|
||||
{style: 'width: 13px; height: 18px;'},
|
||||
svg('path', {'d': 'M 0 0 h 13 v 18 Z'}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function sideSelectorChunk(side: 'top'|'bottom'|'left'|'right') {
|
||||
return `.${cssModalTooltip.className}[x-placement^=${side}]`;
|
||||
}
|
||||
|
||||
function fadeInFromSide(side: 'top'|'bottom'|'left'|'right') {
|
||||
let startPosition: string;
|
||||
switch(side) {
|
||||
case 'top': {
|
||||
startPosition = '0px -25px';
|
||||
break;
|
||||
}
|
||||
case 'bottom': {
|
||||
startPosition = '0px 25px';
|
||||
break;
|
||||
}
|
||||
case'left': {
|
||||
startPosition = '-25px 0px';
|
||||
break;
|
||||
}
|
||||
case 'right': {
|
||||
startPosition = '25px 0px';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return keyframes(`
|
||||
from {translate: ${startPosition}; opacity: 0;}
|
||||
to {translate: 0px 0px; opacity: 1;}
|
||||
`);
|
||||
}
|
||||
|
||||
const HEADER_HEIGHT_PX = 30;
|
||||
|
||||
const cssArrowContainer = styled('div', `
|
||||
position: absolute;
|
||||
|
||||
& path {
|
||||
stroke: ${theme.popupBg};
|
||||
stroke-width: 2px;
|
||||
fill: ${theme.popupBg};
|
||||
}
|
||||
|
||||
${sideSelectorChunk('bottom')} > & path {
|
||||
stroke: ${theme.controlPrimaryBg};
|
||||
fill: ${theme.controlPrimaryBg};
|
||||
}
|
||||
|
||||
${sideSelectorChunk('top')} > & {
|
||||
bottom: -17px;
|
||||
}
|
||||
|
||||
${sideSelectorChunk('bottom')} > & {
|
||||
top: -14px;
|
||||
}
|
||||
|
||||
${sideSelectorChunk('right')} > & {
|
||||
left: -12px;
|
||||
margin: ${HEADER_HEIGHT_PX}px 0px ${HEADER_HEIGHT_PX}px 0px;
|
||||
}
|
||||
|
||||
${sideSelectorChunk('left')} > & {
|
||||
right: -12px;
|
||||
margin: ${HEADER_HEIGHT_PX}px 0px ${HEADER_HEIGHT_PX}px 0px;
|
||||
}
|
||||
|
||||
${sideSelectorChunk('top')} svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
${sideSelectorChunk('bottom')} svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
${sideSelectorChunk('left')} svg {
|
||||
transform: scalex(-1);
|
||||
}
|
||||
`);
|
||||
|
||||
const cssTheme = styled('div', `
|
||||
color: ${theme.text};
|
||||
`);
|
||||
@@ -147,3 +307,86 @@ const cssContainer = styled(cssTheme, `
|
||||
const cssWideContainer = styled(cssTheme, `
|
||||
max-width: 340px;
|
||||
`);
|
||||
|
||||
const cssFadeInFromTop = fadeInFromSide('top');
|
||||
|
||||
const cssFadeInFromBottom = fadeInFromSide('bottom');
|
||||
|
||||
const cssFadeInFromLeft = fadeInFromSide('left');
|
||||
|
||||
const cssFadeInFromRight = fadeInFromSide('right');
|
||||
|
||||
const cssBehavioralPromptModal = styled('div', `
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 400px;
|
||||
border-radius: 4px;
|
||||
|
||||
animation-duration: 0.4s;
|
||||
position: relative;
|
||||
|
||||
&[x-placement^=top] {
|
||||
animation-name: ${cssFadeInFromTop};
|
||||
}
|
||||
|
||||
&[x-placement^=bottom] {
|
||||
animation-name: ${cssFadeInFromBottom};
|
||||
}
|
||||
|
||||
&[x-placement^=left] {
|
||||
animation-name: ${cssFadeInFromLeft};
|
||||
}
|
||||
|
||||
&[x-placement^=right] {
|
||||
animation-name: ${cssFadeInFromRight};
|
||||
}
|
||||
`);
|
||||
|
||||
const cssBehavioralPromptContainer = styled(cssTheme, `
|
||||
line-height: 18px;
|
||||
`);
|
||||
|
||||
const cssBehavioralPromptHeader = styled('div', `
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: ${theme.controlPrimaryBg};
|
||||
color: ${theme.controlPrimaryFg};
|
||||
--icon-color: ${theme.controlPrimaryFg};
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
line-height: ${HEADER_HEIGHT_PX}px;
|
||||
`);
|
||||
|
||||
const cssBehavioralPromptBody = styled('div', `
|
||||
padding: 16px;
|
||||
`);
|
||||
|
||||
const cssHeaderIconAndText = styled('div', `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
`);
|
||||
|
||||
const cssHeaderText = styled('div', `
|
||||
font-weight: 600;
|
||||
`);
|
||||
|
||||
const cssDismissPromptButton = styled(bigPrimaryButton, `
|
||||
margin-right: 8px;
|
||||
`);
|
||||
|
||||
const cssBehavioralPromptTitle = styled('div', `
|
||||
font-size: ${vars.xxxlargeFontSize};
|
||||
font-weight: ${vars.headerControlTextWeight};
|
||||
color: ${theme.text};
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 32px;
|
||||
`);
|
||||
|
||||
const cssSkipTipsCheckbox = styled(labeledSquareCheckbox, `
|
||||
line-height: normal;
|
||||
`);
|
||||
|
||||
|
||||
const cssSkipTipsCheckboxLabel = styled('span', `
|
||||
color: ${theme.lightText};
|
||||
`);
|
||||
|
||||
Reference in New Issue
Block a user