mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
193d5360ad
Summary:
Diff fixes an annoying issue when the left panel would sometimes
auto-expand when the user is resizing the window. Alghouth it is quite
easy to reproduce the issue still would happen a bit randomly.
Here are what was done to fix it:
1) The most annoying manifestation of the issue happens with doc menu
page. Indeed the panel is not meant to be collapsing hence triggering
overlapping expansion messes UI a great deal. This was fix by
asserting that the panel was collapsible before triggering expansion
`if (left.hideOpener) { return; }`.
2) To prevent issue to happen also with doc page, we first test
whether the user is actually dragging using `ev1.buttons !== 0` and
also we've added a `isScreeResizingObs` observable. Although this
seems to have fixed the problem for me, other developers still
reports occurence of the issue on there machine but at a lesser
frequence. It is unknown what this solution does not fully work,
still situation seems acceptable now (most annoying part was 1st
item).
Diff also brings another small improvement when using Grist in a split
screen setup when Grist is on the right. Moving cursor back and forth
between the two windows would frequently leave the left panel
inadvertandly expanded. Diff added a fix to allow panel to collapse
when cursor leave window.
Test Plan: Tested manually as it is hard to test when selenium.
Reviewers: georgegevoian
Reviewed By: georgegevoian
Differential Revision: https://phab.getgrist.com/D3562
254 lines
9.6 KiB
TypeScript
254 lines
9.6 KiB
TypeScript
/**
|
|
* CSS Variables. To use in your web application, add `cssRootVars` to the class list for your app's
|
|
* root node, typically `<body>`.
|
|
*
|
|
* The fonts used attempt to default to system fonts as described here:
|
|
* https://css-tricks.com/snippets/css/system-font-stack/
|
|
*
|
|
*/
|
|
import {urlState} from 'app/client/models/gristUrlState';
|
|
import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
|
|
import {dom, makeTestId, Observable, styled, TestId} from 'grainjs';
|
|
import debounce = require('lodash/debounce');
|
|
import values = require('lodash/values');
|
|
|
|
const VAR_PREFIX = 'grist';
|
|
|
|
class CustomProp {
|
|
constructor(public name: string, public value: string) { }
|
|
|
|
public decl() {
|
|
return `--${VAR_PREFIX}-${this.name}: ${this.value};`;
|
|
}
|
|
|
|
public toString() {
|
|
return `var(--${VAR_PREFIX}-${this.name})`;
|
|
}
|
|
}
|
|
|
|
export const colors = {
|
|
lightGrey: new CustomProp('color-light-grey', '#F7F7F7'),
|
|
mediumGrey: new CustomProp('color-medium-grey', 'rgba(217,217,217,0.6)'),
|
|
mediumGreyOpaque: new CustomProp('color-medium-grey-opaque', '#E8E8E8'),
|
|
darkGrey: new CustomProp('color-dark-grey', '#D9D9D9'),
|
|
|
|
light: new CustomProp('color-light', '#FFFFFF'),
|
|
dark: new CustomProp('color-dark', '#262633'),
|
|
darkBg: new CustomProp('color-dark-bg', '#262633'),
|
|
slate: new CustomProp('color-slate', '#929299'),
|
|
|
|
lightGreen: new CustomProp('color-light-green', '#16B378'),
|
|
darkGreen: new CustomProp('color-dark-green', '#009058'),
|
|
darkerGreen: new CustomProp('color-darker-green', '#007548'),
|
|
lighterGreen: new CustomProp('color-lighter-green', '#b1ffe2'),
|
|
|
|
lighterBlue: new CustomProp('color-lighter-blue', '#87b2f9'),
|
|
lightBlue: new CustomProp('color-light-blue', '#3B82F6'),
|
|
orange: new CustomProp('color-orange', '#F9AE41'),
|
|
|
|
cursor: new CustomProp('color-cursor', '#16B378'), // cursor is lightGreen
|
|
selection: new CustomProp('color-selection', 'rgba(22,179,120,0.15)'),
|
|
selectionOpaque: new CustomProp('color-selection-opaque', '#DCF4EB'),
|
|
selectionDarkerOpaque: new CustomProp('color-selection-darker-opaque', '#d6eee5'),
|
|
|
|
inactiveCursor: new CustomProp('color-inactive-cursor', '#A2E1C9'),
|
|
|
|
hover: new CustomProp('color-hover', '#bfbfbf'),
|
|
error: new CustomProp('color-error', '#D0021B'),
|
|
warning: new CustomProp('color-warning', '#F9AE41'),
|
|
warningBg: new CustomProp('color-warning-bg', '#dd962c'),
|
|
backdrop: new CustomProp('color-backdrop', 'rgba(38,38,51,0.9)')
|
|
|
|
};
|
|
|
|
export const vars = {
|
|
/* Fonts */
|
|
fontFamily: new CustomProp('font-family', `-apple-system,BlinkMacSystemFont,Segoe UI,
|
|
Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`),
|
|
|
|
// This is more monospace and looks better for data that should often align (e.g. to have 00000
|
|
// take similar space to 11111). This is the main font for user data.
|
|
fontFamilyData: new CustomProp('font-family-data',
|
|
`Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`),
|
|
|
|
/* Font sizes */
|
|
xxsmallFontSize: new CustomProp('xx-font-size', '8px'),
|
|
xsmallFontSize: new CustomProp('x-small-font-size', '10px'),
|
|
smallFontSize: new CustomProp('small-font-size', '11px'),
|
|
mediumFontSize: new CustomProp('medium-font-size', '13px'),
|
|
introFontSize: new CustomProp('intro-font-size', '14px'), // feels friendlier
|
|
largeFontSize: new CustomProp('large-font-size', '16px'),
|
|
xlargeFontSize: new CustomProp('x-large-font-size', '18px'),
|
|
xxlargeFontSize: new CustomProp('xx-large-font-size', '20px'),
|
|
xxxlargeFontSize: new CustomProp('xxx-large-font-size', '22px'),
|
|
|
|
/* Controls size and space */
|
|
controlFontSize: new CustomProp('control-font-size', '12px'),
|
|
smallControlFontSize: new CustomProp('small-control-font-size', '10px'),
|
|
bigControlFontSize: new CustomProp('big-control-font-size', '13px'),
|
|
headerControlFontSize: new CustomProp('header-control-font-size', '22px'),
|
|
bigControlTextWeight: new CustomProp('big-text-weight', '500'),
|
|
headerControlTextWeight: new CustomProp('header-text-weight', '600'),
|
|
|
|
/* Labels */
|
|
labelTextSize: new CustomProp('label-text-size', 'medium'),
|
|
labelTextBg: new CustomProp('label-text-bg', '#FFFFFF'),
|
|
labelActiveBg: new CustomProp('label-active-bg', '#F0F0F0'),
|
|
|
|
controlMargin: new CustomProp('normal-margin', '2px'),
|
|
controlPadding: new CustomProp('normal-padding', '3px 5px'),
|
|
tightPadding: new CustomProp('tight-padding', '1px 2px'),
|
|
loosePadding: new CustomProp('loose-padding', '5px 15px'),
|
|
|
|
/* Control colors and borders */
|
|
primaryBg: new CustomProp('primary-fg', '#16B378'),
|
|
primaryBgHover: new CustomProp('primary-fg-hover', '#009058'),
|
|
primaryFg: new CustomProp('primary-bg', '#ffffff'),
|
|
|
|
controlBg: new CustomProp('control-bg', '#ffffff'),
|
|
controlFg: new CustomProp('control-fg', '#16B378'),
|
|
controlFgHover: new CustomProp('primary-fg-hover', '#009058'),
|
|
|
|
controlBorder: new CustomProp('control-border', '1px solid #11B683'),
|
|
controlBorderRadius: new CustomProp('border-radius', '4px'),
|
|
|
|
logoBg: new CustomProp('logo-bg', '#040404'),
|
|
logoSize: new CustomProp('logo-size', '22px 22px'),
|
|
toastBg: new CustomProp('toast-bg', '#040404'),
|
|
};
|
|
|
|
const cssColors = values(colors).map(v => v.decl()).join('\n');
|
|
const cssVars = values(vars).map(v => v.decl()).join('\n');
|
|
const cssFontParams = `
|
|
font-family: ${vars.fontFamily};
|
|
font-size: ${vars.mediumFontSize};
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
`;
|
|
|
|
// We set box-sizing globally to match bootstrap's setting of border-box, since we are integrating
|
|
// into an app which already has it set, and it's impossible to make things look consistently with
|
|
// AND without it. This duplicates bootstrap's setting.
|
|
const cssBorderBox = `
|
|
*, *:before, *:after {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
`;
|
|
|
|
// These styles duplicate bootstrap's global settings, which we rely on even on pages that don't
|
|
// have bootstrap.
|
|
const cssInputFonts = `
|
|
button, input, select, textarea {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
`;
|
|
|
|
// Font style classes used by style selector.
|
|
const cssFontStyles = `
|
|
.font-italic {
|
|
font-style: italic;
|
|
}
|
|
.font-bold {
|
|
font-weight: 800;
|
|
}
|
|
.font-underline {
|
|
text-decoration: underline;
|
|
}
|
|
.font-strikethrough {
|
|
text-decoration: line-through;
|
|
}
|
|
.font-strikethrough.font-underline {
|
|
text-decoration: line-through underline;
|
|
}
|
|
`;
|
|
|
|
const cssVarsOnly = styled('div', cssColors + cssVars);
|
|
const cssBodyVars = styled('div', cssFontParams + cssColors + cssVars + cssBorderBox + cssInputFonts + cssFontStyles);
|
|
|
|
const cssBody = styled('body', `
|
|
margin: 0;
|
|
height: 100%;
|
|
`);
|
|
|
|
const cssRoot = styled('html', `
|
|
height: 100%;
|
|
overflow: hidden;
|
|
`);
|
|
|
|
export const cssRootVars = cssBodyVars.className;
|
|
|
|
// Also make a globally available testId, with a simple "test-" prefix (i.e. in tests, query css
|
|
// class ".test-{name}". Ideally, we'd use noTestId() instead in production.
|
|
export const testId: TestId = makeTestId('test-');
|
|
|
|
// Min width for normal screen layout (in px). Note: <768px is bootstrap's definition of small
|
|
// screen (covers phones, including landscape, but not tablets).
|
|
const largeScreenWidth = 992;
|
|
const mediumScreenWidth = 768;
|
|
const smallScreenWidth = 576; // Anything below this is extra-small (e.g. portrait phones).
|
|
|
|
// Fractional width for max-query follows https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
|
|
export const mediaMedium = `(max-width: ${largeScreenWidth - 0.02}px)`;
|
|
export const mediaSmall = `(max-width: ${mediumScreenWidth - 0.02}px)`;
|
|
export const mediaNotSmall = `(min-width: ${mediumScreenWidth}px)`;
|
|
export const mediaXSmall = `(max-width: ${smallScreenWidth - 0.02}px)`;
|
|
|
|
export const mediaDeviceNotSmall = `(min-device-width: ${mediumScreenWidth}px)`;
|
|
|
|
export function isNarrowScreen() {
|
|
return window.innerWidth < mediumScreenWidth;
|
|
}
|
|
|
|
let _isNarrowScreenObs: Observable<boolean>|undefined;
|
|
|
|
// Returns a singleton observable for whether the screen is a small one.
|
|
export function isNarrowScreenObs(): Observable<boolean> {
|
|
if (!_isNarrowScreenObs) {
|
|
const obs = Observable.create<boolean>(null, isNarrowScreen());
|
|
window.addEventListener('resize', () => obs.set(isNarrowScreen()));
|
|
_isNarrowScreenObs = obs;
|
|
}
|
|
return _isNarrowScreenObs;
|
|
}
|
|
|
|
export const cssHideForNarrowScreen = styled('div', `
|
|
@media ${mediaSmall} {
|
|
& {
|
|
display: none !important;
|
|
}
|
|
}
|
|
`);
|
|
|
|
let _isScreenResizingObs: Observable<boolean>|undefined;
|
|
|
|
// Returns a singleton observable for whether user is currently resizing the window. (listen to
|
|
// `resize` events and uses a timer of 1000ms).
|
|
export function isScreenResizing(): Observable<boolean> {
|
|
if (!_isScreenResizingObs) {
|
|
const obs = Observable.create<boolean>(null, false);
|
|
const ping = debounce(() => obs.set(false), 1000);
|
|
window.addEventListener('resize', () => { obs.set(true); ping(); });
|
|
_isScreenResizingObs = obs;
|
|
}
|
|
return _isScreenResizingObs;
|
|
}
|
|
|
|
/**
|
|
* Attaches the global css properties to the document's root to them available in the page.
|
|
*/
|
|
export function attachCssRootVars(productFlavor: ProductFlavor, varsOnly: boolean = false) {
|
|
dom.update(document.documentElement, varsOnly ? dom.cls(cssVarsOnly.className) : dom.cls(cssRootVars));
|
|
document.documentElement.classList.add(cssRoot.className);
|
|
document.body.classList.add(cssBody.className);
|
|
const theme = getTheme(productFlavor);
|
|
if (theme.bodyClassName) {
|
|
document.body.classList.add(theme.bodyClassName);
|
|
}
|
|
const interfaceStyle = urlState().state.get().params?.style || 'full';
|
|
document.body.classList.add(`interface-${interfaceStyle}`);
|
|
}
|