(core) Adding font options to the style picker

Summary:
Redesigning color picker:
- Single color palette (no light/dark switch)
- Ability to remove color (new empty button)

New font options in the color picker.
Font options are available on:
- Default cell style
- Conditional rules styles
- Choice/ChoiceList editor and token field
- Filters for Choice/ChoiceList columns

Design document:
https://www.figma.com/file/bRTsb47VIOVBfJPj0qF3C9/Grist-Updates?node-id=415%3A8135

Test Plan: new and updated tests

Reviewers: georgegevoian, alexmojaki

Reviewed By: georgegevoian, alexmojaki

Subscribers: alexmojaki

Differential Revision: https://phab.getgrist.com/D3335
This commit is contained in:
Jarosław Sadziński
2022-04-07 16:58:16 +02:00
parent 98ac2f7e5b
commit 34708cd348
28 changed files with 711 additions and 270 deletions

View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916668">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(0,-291.70832)">
<path
style="fill:none;stroke:#000000;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 0.03262263,291.72225 5.23003227,5.2769" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 560 B

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<path d="m 3.1950988,1.8354199 h 5.6903818 c 0.7545952,0 1.4782724,0.2997567 2.0118534,0.8333375 0.533581,0.5335808 0.833337,1.2572582 0.833337,2.0118535 0,0.7545952 -0.299756,1.4782727 -0.833337,2.0118535 C 10.363753,7.2260451 9.6400758,7.5258018 8.8854806,7.5258018 H 5.0918927" id="path3414" style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#030000;stroke-width:1.26452935;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
<path d="m 5.0918927,7.5258018 h 5.2161833 c 0.880352,0 1.724653,0.3497182 2.347169,0.9722207 0.622502,0.6225152 0.97222,1.4668161 0.97222,2.3471685 v 0 c 0,0.880353 -0.349718,1.724654 -0.97222,2.347219 -0.622516,0.622402 -1.466817,0.97217 -2.347169,0.97217 H 3.1950988" id="path3416" style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#030000;stroke-width:1.26452935;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
<path d="M 5.0918927,1.8354199 V 14.16458" id="path3418" style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#030000;stroke-width:1.26452935;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<defs id="defs5379">
<clipPath id="clip0_635_11941">
<rect style="fill:#ffffff" y="0" x="0" width="12" height="12" id="rect4748" />
</clipPath>
<clipPath id="clip0_635_11917">
<rect style="fill:#ffffff" y="0" x="0" width="12" height="12" id="rect6069" />
</clipPath>
</defs>
<g transform="matrix(1.1355932,0,0,1.1355932,0.98305088,1.3898305)" clip-path="url(#clip0_635_11917)" id="g6067" style="fill-rule:evenodd;fill:none">
<path style="stroke:#000000;stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;fill:none;stroke-opacity:1" d="m 4.875,0.375 h 4.5" id="path6061" />
<path style="stroke:#060000;stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;fill:none;stroke-opacity:1" d="m 2.625,11.625 h 4.5" id="path6063" />
<path style="stroke:#000000;stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;fill:none;stroke-opacity:0.99024391" d="m 7.125,0.375 -2.25,11.25" id="path6065" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<defs id="defs2753" />
<path d="M 1.8056585,3.397172 V 1.7357431 H 14.194342 V 3.397172" id="path2655" style="fill:none;fill-rule:evenodd;stroke:#929299;stroke-width:1.1431762;stroke-linecap:round;stroke-linejoin:round" />
<path d="M 7.9999999,10.042887 V 14.19646" id="path2657" style="stroke:#929299;stroke-width:1.1431762;stroke-linecap:round;stroke-linejoin:round" />
<path d="M 7.9999999,1.7357431 V 7.550744" id="path2659" style="fill:none;fill-rule:evenodd;stroke:#929299;stroke-width:1.1431762;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path d="M 5.3452822,14.19646 H 10.654718" id="path2661" style="stroke:#929299;stroke-width:1.1431762;stroke-linecap:round;stroke-linejoin:round" />
<path d="M 1.8056585,7.550744 H 14.194342" id="path2663" style="stroke:#929299;stroke-width:1.1431762;stroke-linecap:round;stroke-linejoin:round" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="16px"
height="16px"
viewBox="0 0 16 16"
version="1.1">
<defs
id="defs5379">
<clipPath
id="clip0_635_11941">
<rect
style="fill:#ffffff"
y="0"
x="0"
width="12"
height="12"
id="rect4748" />
</clipPath>
</defs>
<g
transform="matrix(1.1429539,0,0,1.1429539,1.1422766,0.72137666)"
clip-path="url(#clip0_635_11941)"
id="g4746"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-opacity:1">
<path
d="m 0.375,11.625 h 11.25"
id="path4738"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
<path
d="M 9.375,1.125 V 6 C 9.375,6.89511 9.01942,7.75355 8.38649,8.38649 7.75355,9.01942 6.89511,9.375 6,9.375 v 0 C 5.10489,9.375 4.24645,9.01942 3.61351,8.38649 2.98058,7.75355 2.625,6.89511 2.625,6 V 1.125"
id="path4740"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
<path
d="m 1.125,1.125 h 3"
id="path4742"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
<path
d="m 7.875,1.125 h 3"
id="path4744"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB