mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Brings the new color select.
Summary: Component is implemented as a grainjs ui component and can be tested using `yarn serve-projects`. This diff does not bring color select to Grist just yet. Follow up: - Make it possible to set a custom color by typing hex value directly in. - Disable the button while save call is pending. Test Plan: - Adds a project test Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2733
This commit is contained in:
Cyprien P
parent
6af811f7ab
commit
e7c4686536
68
app/client/ui2018/ColorPalette.ts
Normal file
68
app/client/ui2018/ColorPalette.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
/*
|
||||||
|
* The palettes were inspired by comparisons of a handful of popular services.
|
||||||
|
*/
|
||||||
|
export const lighter = [
|
||||||
|
"#FFFFFF",
|
||||||
|
"#DCDCDC",
|
||||||
|
"#B4B4B4",
|
||||||
|
"#FECBCC",
|
||||||
|
"#FD8182",
|
||||||
|
"#FC363B",
|
||||||
|
"#F3E1D2",
|
||||||
|
"#D6A77F",
|
||||||
|
"#C37739",
|
||||||
|
"#FEE7C3",
|
||||||
|
"#FECC81",
|
||||||
|
"#FDA630",
|
||||||
|
"#FFFACD",
|
||||||
|
"#FEF47A",
|
||||||
|
"#FEEB36",
|
||||||
|
"#E1FEDE",
|
||||||
|
"#98FD90",
|
||||||
|
"#35FD31",
|
||||||
|
"#CCFEFE",
|
||||||
|
"#8AFCFE",
|
||||||
|
"#2EF8FE",
|
||||||
|
"#D3E7FE",
|
||||||
|
"#75B5FC",
|
||||||
|
"#2486FB",
|
||||||
|
"#E8D0FE",
|
||||||
|
"#BC77FC",
|
||||||
|
"#9633FB",
|
||||||
|
"#FED6FB",
|
||||||
|
"#FD79F4",
|
||||||
|
"#FC2AED"
|
||||||
|
];
|
||||||
|
|
||||||
|
export const darker = [
|
||||||
|
"#888888",
|
||||||
|
"#414141",
|
||||||
|
"#000000",
|
||||||
|
"#E00A17",
|
||||||
|
"#B60610",
|
||||||
|
"#740206",
|
||||||
|
"#AA632B",
|
||||||
|
"#824617",
|
||||||
|
"#653008",
|
||||||
|
"#FD9D28",
|
||||||
|
"#E38D22",
|
||||||
|
"#B36F19",
|
||||||
|
"#E8D62F",
|
||||||
|
"#C0B225",
|
||||||
|
"#928619",
|
||||||
|
"#2AE028",
|
||||||
|
"#1FAA1C",
|
||||||
|
"#126E0E",
|
||||||
|
"#24D6DB",
|
||||||
|
"#189DA1",
|
||||||
|
"#0C686A",
|
||||||
|
"#157AFB",
|
||||||
|
"#0F64CF",
|
||||||
|
"#084794",
|
||||||
|
"#8725FB",
|
||||||
|
"#6318B8",
|
||||||
|
"#460D81",
|
||||||
|
"#E621D7",
|
||||||
|
"#B818AC",
|
||||||
|
"#760C6E"
|
||||||
|
];
|
||||||
321
app/client/ui2018/ColorSelect.ts
Normal file
321
app/client/ui2018/ColorSelect.ts
Normal file
@ -0,0 +1,321 @@
|
|||||||
|
import { darker, lighter } from "app/client/ui2018/ColorPalette";
|
||||||
|
import { colors, testId, vars } from 'app/client/ui2018/cssVars';
|
||||||
|
import { icon } from "app/client/ui2018/icons";
|
||||||
|
import { Computed, Disposable, dom, DomArg, Observable, onKeyDown, styled } from "grainjs";
|
||||||
|
import { IOpenController, setPopupToCreateDom } from "popweasel";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* colorSelect allows to select color for both fill and text cell color. It allows for fast
|
||||||
|
* selection thanks to two color palette, `lighter` and `darker`, and also to pick custom color with
|
||||||
|
* native color picker. Pressing Escape reverts to the saved value. Caller is expected to handle
|
||||||
|
* logging of onSave() callback rejection. In case of rejection, values are reverted to their saved one.
|
||||||
|
*/
|
||||||
|
export function colorSelect(textColor: Observable<string>, fillColor: Observable<string>,
|
||||||
|
onSave: () => Promise<void>): Element {
|
||||||
|
const selectBtn = cssSelectBtn(
|
||||||
|
cssContent(
|
||||||
|
cssButtonIcon(
|
||||||
|
'T',
|
||||||
|
dom.style('color', textColor),
|
||||||
|
dom.style('background-color', fillColor),
|
||||||
|
cssLightBorder.cls(''),
|
||||||
|
testId('btn-icon'),
|
||||||
|
),
|
||||||
|
'Cell Color',
|
||||||
|
),
|
||||||
|
icon('Dropdown'),
|
||||||
|
testId('color-select'),
|
||||||
|
);
|
||||||
|
|
||||||
|
const domCreator = (ctl: IOpenController) => buildColorPicker(ctl, textColor, fillColor, onSave);
|
||||||
|
setPopupToCreateDom(selectBtn, domCreator, {
|
||||||
|
trigger: ['click'],
|
||||||
|
placement: 'bottom-end',
|
||||||
|
});
|
||||||
|
|
||||||
|
return selectBtn;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildColorPicker(ctl: IOpenController, textColor: Observable<string>, fillColor: Observable<string>,
|
||||||
|
onSave: () => Promise<void>): Element {
|
||||||
|
const textColorModel = PickerModel.create(null, textColor);
|
||||||
|
const fillColorModel = PickerModel.create(null, fillColor);
|
||||||
|
|
||||||
|
function revert() {
|
||||||
|
textColorModel.revert();
|
||||||
|
fillColorModel.revert();
|
||||||
|
ctl.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctl.onDispose(async () => {
|
||||||
|
if (textColorModel.needsSaving() || fillColorModel.needsSaving()) {
|
||||||
|
try {
|
||||||
|
// TODO: disable the trigger btn while saving
|
||||||
|
await onSave();
|
||||||
|
} catch (e) {
|
||||||
|
/* Does no logging: onSave() callback is expected to handle their reporting */
|
||||||
|
textColorModel.revert();
|
||||||
|
fillColorModel.revert();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textColorModel.dispose();
|
||||||
|
fillColorModel.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
const colorSquare = (...args: DomArg[]) => cssColorSquare(
|
||||||
|
...args,
|
||||||
|
dom.style('color', textColor),
|
||||||
|
dom.style('background-color', fillColor),
|
||||||
|
cssLightBorder.cls(''),
|
||||||
|
);
|
||||||
|
|
||||||
|
return cssContainer(
|
||||||
|
dom.create(PickerComponent, fillColorModel, {
|
||||||
|
colorSquare: colorSquare(),
|
||||||
|
title: 'Fill',
|
||||||
|
defaultMode: 'lighter'
|
||||||
|
}),
|
||||||
|
cssVSpacer(),
|
||||||
|
dom.create(PickerComponent, textColorModel, {
|
||||||
|
colorSquare: colorSquare('T'),
|
||||||
|
title: 'Text',
|
||||||
|
defaultMode: 'darker'
|
||||||
|
}),
|
||||||
|
|
||||||
|
// gives focus and binds keydown events
|
||||||
|
(elem: any) => {setTimeout(() => elem.focus(), 0); },
|
||||||
|
onKeyDown({
|
||||||
|
Escape: () => { revert(); },
|
||||||
|
Enter: () => { ctl.close(); },
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PickerComponentOptions {
|
||||||
|
colorSquare: Element;
|
||||||
|
title: string;
|
||||||
|
defaultMode: 'darker'|'lighter';
|
||||||
|
}
|
||||||
|
|
||||||
|
// PickerModel is a helper model that helps keep track of the server value for an observable that
|
||||||
|
// needs to be changed locally without saving. To use, you must call `model.setValue(...)` instead
|
||||||
|
// of `obs.set(...)`. Then it offers `model.needsSaving()` that tells you whether current value
|
||||||
|
// needs saving, and `model.revert()` that reverts obs to the its server value.
|
||||||
|
class PickerModel extends Disposable {
|
||||||
|
private _serverValue = this.obs.get();
|
||||||
|
private _localChange: boolean = false;
|
||||||
|
constructor(public obs: Observable<string>) {
|
||||||
|
super();
|
||||||
|
this.autoDispose(this.obs.addListener((val) => {
|
||||||
|
if (this._localChange) { return; }
|
||||||
|
this._serverValue = val;
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the value picked by the user
|
||||||
|
public setValue(val: string) {
|
||||||
|
this._localChange = true;
|
||||||
|
this.obs.set(val);
|
||||||
|
this._localChange = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Revert obs to its server value
|
||||||
|
public revert() {
|
||||||
|
this.obs.set(this._serverValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Is current value different from the server value?
|
||||||
|
public needsSaving() {
|
||||||
|
return this.obs.get() !== this._serverValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PickerComponent extends Disposable {
|
||||||
|
|
||||||
|
private _color = Computed.create(this, this._model.obs, (use, val) => val.toUpperCase());
|
||||||
|
private _mode = Observable.create<'darker'|'lighter'>(this, this._guessMode());
|
||||||
|
|
||||||
|
constructor(private _model: PickerModel, private _options: PickerComponentOptions) {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
public buildDom() {
|
||||||
|
const title = this._options.title;
|
||||||
|
return [
|
||||||
|
cssHeaderRow(
|
||||||
|
cssColorPreview(
|
||||||
|
dom.update(
|
||||||
|
this._options.colorSquare,
|
||||||
|
cssColorInput(
|
||||||
|
{type: 'color'},
|
||||||
|
dom.attr('value', this._color),
|
||||||
|
dom.on('input', (ev, elem) => this._setValue(elem.value)),
|
||||||
|
testId(`${title}-input`),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// TODO: make it possible to type in hex value.
|
||||||
|
cssHexBox(
|
||||||
|
dom.attr('value', (use) => use(this._color || '#000000')),
|
||||||
|
{readonly: true},
|
||||||
|
dom.on('click', (ev, e) => e.select()),
|
||||||
|
testId(`${title}-hex`),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
title,
|
||||||
|
cssBrickToggle(
|
||||||
|
cssBrick(
|
||||||
|
cssBrick.cls('-selected', (use) => use(this._mode) === 'darker'),
|
||||||
|
dom.on('click', () => this._mode.set('darker')),
|
||||||
|
testId(`${title}-darker-brick`),
|
||||||
|
),
|
||||||
|
cssBrick(
|
||||||
|
cssBrick.cls('-lighter'),
|
||||||
|
cssBrick.cls('-selected', (use) => use(this._mode) === 'lighter'),
|
||||||
|
dom.on('click', () => this._mode.set('lighter')),
|
||||||
|
testId(`${title}-lighter-brick`),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
cssPalette(
|
||||||
|
dom.domComputed(this._mode, (mode) => (mode === 'lighter' ? lighter : darker).map(color => (
|
||||||
|
cssColorSquare(
|
||||||
|
dom.style('background-color', color),
|
||||||
|
cssLightBorder.cls('', (use) => use(this._mode) === 'lighter'),
|
||||||
|
cssColorSquare.cls('-selected', (use) => use(this._color) === color),
|
||||||
|
dom.style('outline-color', (use) => use(this._mode) === 'lighter' ? '' : color),
|
||||||
|
dom.on('click', () => this._setValue(color)),
|
||||||
|
testId(`color-${color}`),
|
||||||
|
)
|
||||||
|
))),
|
||||||
|
testId(`${title}-palette`),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setValue(val: string) {
|
||||||
|
this._model.setValue(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _guessMode(): 'darker'|'lighter' {
|
||||||
|
if (lighter.indexOf(this._color.get()) > -1) {
|
||||||
|
return 'lighter';
|
||||||
|
}
|
||||||
|
if (darker.indexOf(this._color.get()) > -1) {
|
||||||
|
return 'darker';
|
||||||
|
}
|
||||||
|
return this._options.defaultMode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cssColorInput = styled('input', `
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssBrickToggle = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssBrick = styled('div', `
|
||||||
|
height: 20px;
|
||||||
|
width: 34px;
|
||||||
|
background-color: #414141;
|
||||||
|
box-shadow: inset 0 0 0 2px #FFFFFF;
|
||||||
|
&-selected {
|
||||||
|
border: 1px solid #414141;
|
||||||
|
box-shadow: inset 0 0 0 1px #FFFFFF;
|
||||||
|
}
|
||||||
|
&-lighter {
|
||||||
|
background-color: #DCDCDC;
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssColorPreview = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssHeaderRow = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
|
||||||
|
const cssPalette = styled('div', `
|
||||||
|
width: 236px;
|
||||||
|
height: 68px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: space-between;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssVSpacer = styled('div', `
|
||||||
|
height: 12px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssContainer = styled('div', `
|
||||||
|
padding: 18px 16px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 2px 16px 0 rgba(38,38,51,0.6);
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssContent = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssHexBox = styled('input', `
|
||||||
|
border: 1px solid #D9D9D9;
|
||||||
|
border-left: none;
|
||||||
|
font-size: ${vars.smallFontSize};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: ${colors.slate};
|
||||||
|
width: 56px;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 3px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssLightBorder = styled('div', `
|
||||||
|
border: 1px solid #D9D9D9;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssColorSquare = styled('div', `
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
&-selected {
|
||||||
|
outline: 1px solid #D9D9D9;
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssButtonIcon = styled(cssColorSquare, `
|
||||||
|
margin-right: 6px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssSelectBtn = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #D9D9D9;
|
||||||
|
padding: 5px 9px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
`);
|
||||||
Loading…
Reference in New Issue
Block a user