Font scaling settings and slider #4424

JorikSchellekens · 2020-04-16T10:20:39Z

~~Requires element-hq/element-web#13199~~
Requires element-hq/element-web#13352
Fixes element-hq/element-web#3160

Test it out: https://riots.im/adhoc/resize-mania4/
This implements two related things:

It migrates the theme settings to a style tab
It implements a font control system in the style tab which is hidden behind labs

Font size 18

Font size 14

turt2live

Overall the actual change looks good, just some comments on the project structure.

res/css/structures/_TagPanel.scss

src/components/structures/FontSlider.js

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js

src/settings/Settings.js

src/theme.js

res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss

nadonomy · 2020-04-22T09:31:26Z

Hey @JorikSchellekens, on:

Use only one of the input methods

Use both methods but have only one available at a time according to a toggle

Use both methods which mutually update each other as displayed in the screenshots

Let's stick to the designs, as per (2), where:

The stepper isn't labelled with numbers
There's a toggle to enable custom input
When custom input is enabled, the stepper enters a disabled state

This was a hard pill to swallow

This fix isn't perfect. Currently the scroll view is slightly smaller than the list of rooms. I think it has something to do with the how the heigh is calculate in js, considering it has some assumptions about the height of each bar and the padding. However room items are the only things which change with respect to the root value. Therefore the item list is actually taller than the computed pixel value of the list converted to rems. I'll look into it.

turt2live

largely seems fine from a code perspective - just picking out the style/lint things at this point.

turt2live · 2020-05-04T18:00:47Z

res/themes/light/css/_light.scss

+$Slider-selection-color: $accent-color;
+$Slider-background-color: #c1c9d6;


we generally prefer all-lowercase variables

Ah, just spotted these change requests. Would it be worth adding this to the linter?

yes. We should add a lot of stuff to the linter :D

src/FontWatcher.js

src/components/views/elements/Slider.tsx

src/settings/Settings.js

nadonomy · 2020-05-06T10:38:41Z

Test if first clicks on the slider are more performant without animations
R&D letting browsers know text sizes could change in advance to avoid poor performance on first clicks (worth pairing on with Bruno)
Nad & Rok to look again at interactions between slider & custom— switching between the 2 feels strange, clicking on the slider steps is hard, font size values are abstract (consider using 100% as default and letting users input relative to that), solve slider not scaling
Nad to get better clarity on values (up to 20px is safe)
Nad to dogfood + make a list of obviously broken stuff

JorikSchellekens · 2020-05-06T16:26:58Z

Thanks @turt2live for the lints. They should all be cleaned up now. Wondering if we can add lowercase css variables to the linter

turt2live · 2020-05-07T16:23:57Z

@JorikSchellekens this has conflicts and doesn't look like the last review was actually resolved? (no pushed commits)

JorikSchellekens · 2020-05-07T16:56:46Z

Woops sorry @turt2live , pushed them now

into joriks/font-scaling-slider

JorikSchellekens · 2020-05-13T14:25:50Z

Definitely seems like a smoother experience without the animations. The screen jump as a result of font size change isn't overly disturbing

JorikSchellekens · 2020-05-13T14:48:07Z

I'm not getting poor performance, and without the animations I think it's no longer a problem.

- also fiddles the font size numbers

turt2live

Otherwise lgtm - thanks!

Apologies for the delays on these reviews :(

src/settings/Settings.js

into joriks/font-scaling-slider

JorikSchellekens · 2020-05-20T13:48:35Z

We decided to have the slider reactivate itself if it was disabled and it was clicked on. However, with the way the settingtoggle currently works that's a little awkward to do. I'll have a look at clean way of doing this when experimenting with checkboxes under the new appearance tab.

turt2live

otherwise lgtm, assuming the tests can be made to pass

src/FontWatcher.js

JorikSchellekens requested review from nadonomy and a team April 16, 2020 10:20

JorikSchellekens mentioned this pull request Apr 16, 2020

Add font scaling labs setting. element-hq/element-web#13199

Merged

t3chguy mentioned this pull request Apr 16, 2020

make it possible to change font size element-hq/element-web#3160

Closed

turt2live requested review from turt2live and removed request for a team April 17, 2020 20:54

turt2live suggested changes Apr 17, 2020

View reviewed changes

JorikSchellekens force-pushed the joriks/font-scaling-slider branch 2 times, most recently from 075b47f to dc57590 Compare April 22, 2020 09:24

JorikSchellekens added 20 commits April 23, 2020 10:45

Fix event tiles to smoothly resize with font.

f10d9e4

Fix pills.

1ff0f34

This was a hard pill to swallow

Scale room tile heights.

27b1ce8

Scale read receipt images

f54ca21

Fix avatar alignment for room state events

d12ed33

Use a function to convert to rem.

05d11fe

Fix read receipt horizontal spacing at scale

c6bc0c7

Fix room header vertical alignment

f29717e

Resize toggle switches with font

cc601e1

Fix settings when scaling up

0182128

lint

5caec2a

Room memebers avatars scale

a587210

Commuity seleciton bar vertical alignment scale fix

e49c041

FIx lanugage selection alignment at scale.

121b53f

Fix test

3966e45

lint test

2d2b398

Fix community line height

c2a2908

Use rem instead of em.

c921859

Use font-variable instead of rem

07853f4

JorikSchellekens mentioned this pull request Apr 30, 2020

IRC ui layout #4531

Merged

turt2live suggested changes May 4, 2020

View reviewed changes

Some lints

bab7d5f

JorikSchellekens requested a review from turt2live May 7, 2020 12:22

JorikSchellekens added 2 commits May 7, 2020 18:01

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk

33a5b51

into joriks/font-scaling-slider

Remove all animations

328bb7b

JorikSchellekens added 2 commits May 13, 2020 15:26

fix code regeression

fea2199

Set font range

20ec900

JorikSchellekens added 2 commits May 13, 2020 22:24

FIx roomsublist heights.

fc6e522

- also fiddles the font size numbers

fix chevron

03e090f

turt2live approved these changes May 19, 2020

View reviewed changes

src/settings/Settings.js Outdated Show resolved Hide resolved

turt2live reviewed May 19, 2020

View reviewed changes

src/settings/Settings.js Outdated Show resolved Hide resolved

JorikSchellekens added 4 commits May 20, 2020 13:07

Slider is more responsive

3e30df1

Remove min and max font setting

55e72dd

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk

6d9d4ee

into joriks/font-scaling-slider

Fixes, lints and i18n

82b7619

lint

4e9a139

turt2live approved these changes May 20, 2020

View reviewed changes

src/FontWatcher.js Outdated Show resolved Hide resolved

JorikSchellekens added 2 commits May 20, 2020 15:09

fix test

adec5a4

CONSTANT_CASING

50a4440

JorikSchellekens merged commit d95d019 into matrix-org:develop May 20, 2020

This comment has been minimized.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font scaling settings and slider #4424

Font scaling settings and slider #4424

JorikSchellekens commented Apr 16, 2020 •

edited

Loading

turt2live left a comment

nadonomy commented Apr 22, 2020 •

edited

Loading

turt2live left a comment

turt2live May 4, 2020

JorikSchellekens May 6, 2020 •

edited

Loading

turt2live May 6, 2020

nadonomy commented May 6, 2020 •

edited by JorikSchellekens

Loading

JorikSchellekens commented May 6, 2020

turt2live commented May 7, 2020

JorikSchellekens commented May 7, 2020

JorikSchellekens commented May 13, 2020 •

edited

Loading

JorikSchellekens commented May 13, 2020

turt2live left a comment

JorikSchellekens commented May 20, 2020

turt2live left a comment

This comment has been minimized.

This comment has been minimized.

		$Slider-selection-color: $accent-color;
		$Slider-background-color: #c1c9d6;

Font scaling settings and slider #4424

Font scaling settings and slider #4424

Conversation

JorikSchellekens commented Apr 16, 2020 • edited Loading

turt2live left a comment

Choose a reason for hiding this comment

nadonomy commented Apr 22, 2020 • edited Loading

turt2live left a comment

Choose a reason for hiding this comment

turt2live May 4, 2020

Choose a reason for hiding this comment

JorikSchellekens May 6, 2020 • edited Loading

Choose a reason for hiding this comment

turt2live May 6, 2020

Choose a reason for hiding this comment

nadonomy commented May 6, 2020 • edited by JorikSchellekens Loading

JorikSchellekens commented May 6, 2020

turt2live commented May 7, 2020

JorikSchellekens commented May 7, 2020

JorikSchellekens commented May 13, 2020 • edited Loading

JorikSchellekens commented May 13, 2020

turt2live left a comment

Choose a reason for hiding this comment

JorikSchellekens commented May 20, 2020

turt2live left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

JorikSchellekens commented Apr 16, 2020 •

edited

Loading

nadonomy commented Apr 22, 2020 •

edited

Loading

JorikSchellekens May 6, 2020 •

edited

Loading

nadonomy commented May 6, 2020 •

edited by JorikSchellekens

Loading

JorikSchellekens commented May 13, 2020 •

edited

Loading