Zoom/scale setting #1651

monokh · 2017-12-05T23:10:03Z

Work towards an interface scale setting.

Signed-off-by: Mohammad Nokhbatolfoghahai [email protected]

TODO:

Add interface scale setting
Add font scale setting
Only change setting value on slider drop (can be fixed using onMouseUp)
Some branding on the slider (probably input-range-scss )

t3chguy · 2017-12-06T19:58:00Z

src/components/structures/UserSettings.js

+            this.setState({
+                interfaceScale: newInterfaceScale,
+            });
+            PlatformPeg.get().reload();


Changing scale yielding a full reload is really bad UX :(

Yes. Just a copy from language setting to start with. What would you prefer happen? Options:

Note that zoom will apply after a restart of the app

Zoom as the setting is changed - might be buggy because of scaling happening while the user is touching controls

Zoom with a delay?

If 2 is preferable, is there a way in this sdk to watch a state change (scale changing) on the root element? Maybe SettingsManager has a watch function? Or is the only way to bubble up the change through the component tree?

you could use the dispatcher to send a zoom_change event that LoggedInView/MatrixChat listens on and acts on when you save the setting

monokh · 2017-12-08T18:15:40Z

@t3chguy let me know what you think. Not quite sure what to do about translations.

monokh · 2017-12-18T20:35:21Z

@t3chguy Any chance you could have another peek at this one? Let me know if it's not required anymore or you'd like to see something different. Thanks 🙂

t3chguy · 2017-12-18T20:41:11Z

I'll take a look at it tomorrow

t3chguy · 2017-12-18T20:50:49Z

src/components/views/elements/InterfaceScaleSlider.js

+    }
+}
+
+InterfaceScaleSlider.propTypes = {


this can be moved into the body of the class as

static propTypes = { ... };

t3chguy · 2017-12-18T20:55:17Z

src/components/views/elements/InterfaceScaleSlider.js

+        this._onValueChange = this._onValueChange.bind(this);
+    }
+
+    componentWillMount() {


no point having an empty willMount

Sorry about the goofs 🙂 updated those now

t3chguy · 2017-12-18T20:56:07Z

src/components/views/elements/InterfaceScaleSlider.js

+    }
+
+    render() {
+        const interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true);


t3chguy · 2017-12-18T21:09:40Z

src/components/views/elements/InterfaceScaleSlider.js

@@ -0,0 +1,50 @@
+/*
+Copyright 2017 Marcel Radzio (MTRNord)
+Copyright 2017 Vector Creations Ltd.


^^ this needs fixing

What should this be changed to? This was a copy from another component. Should I be putting it under my own name?

Yup, unless someone else wrote it :P

done 😃 hope my name is not taking too much space in the repo

t3chguy · 2017-12-18T21:10:22Z

src/components/views/elements/InterfaceScaleSlider.js

+
+export default class InterfaceScaleSlider extends React.Component {
+    propTypes = {
+        className: React.PropTypes.string,


plz use import PropTypes from 'prop-types' and then replace React.PropTypes with PropTypes

t3chguy · 2017-12-18T21:14:26Z

Then you also need to sign-off, described here: https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst

t3chguy · 2017-12-18T21:44:27Z

will test and throw at toml to play with tomorrow :)

monokh · 2017-12-18T21:48:32Z

@t3chguy great 😃 . There are various methods for the UI as seen in the screenshots in element-hq/element-web#3160. The slider seemed more flexible but other ones may work as well. Feel free to let me know if you think another method is more appropriate.

t3chguy · 2017-12-18T21:56:35Z

My personal fav UI for this is

monokh · 2017-12-19T01:07:26Z

@t3chguy cool. Well it is a slider but it isn't that fancy 😄 I can see tomorrow what could be added to make it a bit more appealing.

t3chguy · 2017-12-19T10:27:24Z

src/components/views/elements/InterfaceScaleSlider.js

+
+
+export default class InterfaceScaleSlider extends React.Component {
+    propTypes = {


missing word static

should be static propTypes

t3chguy · 2017-12-19T19:38:33Z

I showed it to @lampholder - I think he had a few comments about it

monokh · 2017-12-19T20:04:55Z

@t3chguy Happy to hear 🙂
I've been trying to make it a bit more "fancy" in the meantime:

Although styles that work cross browser consistently for input ranges are tricky.
There is the option of using a sass module: https://github.com/darlanrod/input-range-scss
I imagine though that you have enough dependencies. Maybe you would like to keep the native input range with some minimal styling?

monokh · 2017-12-19T21:02:39Z

On possibly using a library for the slider itself, react-rangeslider and rc-slider seem pretty decent. Styles customisable + labels like discord has.

lampholder · 2017-12-20T11:26:34Z

My thoughts so far:

At maximum zoom in:

This is pretty reasonable for users who need font size/UX elements to be as large as possible
By being a zoom-based solution, it increases the width of the room list, which is good for users with vision difficulties still having a usable UX

At maximum zoom out:

This leaves a lot of unnecessary whitespace (because our CSS makes some unhelpful assumptions)
Being a zoom-based solution, it decreases the width of the room list, which is perhaps bad for users who want more information (longer room names) visible on the screen

Also, it doesn't seem like the setting is being persisted beyond the user logging out/in.

The challenge is that the optimal UI-scalaing feature needs to meet two use cases, with different objectives.

For some people with vision difficulties, we want to scale up the text and the UI together
For people who want more information density, we want to scale down the text size (but largely leave the UI the same size)

So I can see why Discord adopted the independent chat text scaling slider.

More thoughts to come (but wanted to show that I am actively considering this issue right now 😄 )

lampholder · 2017-12-20T11:33:31Z

Okay, in terms of what needs to be done to deliver the optimal UX/text scaling solution (which is separate to the question of what needs to be done in order to claim the bounty, which I'll consider afterwards), I think we need:

an option to scale chat text indepently of the overall browser zoom level
css that better handles zoom (specifically not leaving acres of white space on zooming out)
both of those settings to persist beyond the current session
zoom settings to be applied immediately (it feels very odd that it takes several seconds for the zoom to apply)
a prettier slider 😛

monokh · 2017-12-21T00:46:39Z

Thanks for the input @lampholder

I'm with you on the need for a separate font size scaling slider.

css that better handles zoom (specifically not leaving acres of white space on zooming out)

👍 agreed, jumped out at me too.

both of those settings to persist beyond the current session

This should be working but might be persisted at the wrong level - I will double check this.

zoom settings to be applied immediately (it feels very odd that it takes several seconds for the zoom to apply)

This is to prevent the zoom control falling out of the users view while they are scrolling it but it can also be solved be applying the zoom after the user has confirmed a selection so will change it to this.

a prettier slider

Styled sliders are a tricky thing cross browser. This would come with the consequence of a new react component dependency and/or substantial new code. Are you happy with this? Any preferences?

I'm happy to continue to contribute to this regardless of what would be in scope for the bounty
🙂

lampholder · 2018-01-02T22:22:16Z

Hi @monokh - hope you had a good break/new year :)

Thanks for you ongoing patience with this!

Responding to your points:

I'm with you on the need for a separate font size scaling slider.

Excellent :)

css that better handles zoom (specifically not leaving acres of white space on zooming out)

👍 agreed, jumped out at me too.

I think we should solve this as a totally separate issue (you're more than welcome to resolve it, but I think it's beyond the scope of this original bounty). Actually, it is a totally separate issue; here: element-hq/element-web#4805. There's already some CSS kicking around for this (wrapped up even in a neat userscript/userstyle in the discussion on element-hq/element-web#1371).

both of those settings to persist beyond the current session

This should be working but might be persisted at the wrong level - I will double check this.

This might be me being a crank - it looks like the changes are persisted across different sessions on the same browser, which I think is probably the desired behaviour here (i.e. change made in Chrome on your laptop will be there the next time you access Riot from that browser, but not from Chrome on your desktop/etc.)

zoom settings to be applied immediately (it feels very odd that it takes several seconds for the zoom to apply)

This is to prevent the zoom control falling out of the users view while they are scrolling it but it can also be solved be applying the zoom after the user has confirmed a selection so will change it to this.

Yeah, I think that'll work - playing around with it now I think it would be fine if it just applied the changes as soon as the user 'drops' the slider.

a prettier slider

Styled sliders are a tricky thing cross browser. This would come with the consequence of a new react component dependency and/or substantial new code. Are you happy with this? Any preferences?

Good point - is there simple styling that can be applied cross browser trivially? I'd rather we not drag in significant dependencies/chunks of code if we can avoid it.

monokh · 2018-01-02T23:37:07Z

@lampholder Happy new year 😃

Actually, it is a totally separate issue; here: element-hq/element-web#4805.

cool 🙂 well I can attend to it through there then.

playing around with it now I think it would be fine if it just applied the changes as soon as the user 'drops' the slider.

Will see about doing that!

is there simple styling that can be applied cross browser trivially? I'd rather we not drag in significant dependencies/chunks of code if we can avoid it.

I can't really think of a super simple middle ground besides positioning and extending it to full width. Perhaps just using a sass module (or even importing the required rules into the project) is the leanest approach? This sass module is pretty commonly used. While it doesn't have pretty labels, the slider itself can be styled to fit the riot brand pretty easily and it's not a substantial amount of code or a heavy dependency.

monokh · 2018-01-07T00:49:17Z

Probably also some general style fixes required for the settings panel as it doesn't cope with scaling well.

monokh · 2018-01-07T22:38:23Z

@lampholder Sorry about this going slowly, just been chipping away at this when i get some free time.
I believe it should be at a stage where you can have another look. The behaviour is similar to discord. You will also need riot-web changes from this PR: element-hq/element-web#5931 or some things may look out of whack.

There may be some follow up style changes to make sure everything scales well at the different breakpoints but i fixed anything that stood out anyway.

Let me know what you think :)

monokh · 2018-01-16T17:51:01Z

@lampholder @t3chguy Any chance you could have another look at this one? Keen to get this finished eventually.

t3chguy · 2018-01-16T17:53:49Z

I'll pester him about it 2PM Thursday

t3chguy · 2018-01-18T16:46:24Z

Its looking better :D
some things aren't font scaling properly

monokh · 2018-01-18T19:12:53Z

@t3chguy Yep. As i mentioned before, there may be some elements that don't scale correctly but they are easily fixable. When you are happy with the general state of the feature, I can do a more thorough correction on the styles in element-hq/element-web#5931 to make sure everything scales correctly.

t3chguy · 2018-01-18T19:22:25Z

I built it for toml to have a play with: https://riot.ovh/builds/tomltomltoml/

monokh · 2018-01-31T12:58:10Z

Any chance for another look at this? Seems we are pretty close 🙂

monokh · 2018-02-28T21:08:04Z

Hi @lampholder @t3chguy

Checking back on this one. Are you happy with the general implementation as demonstrated on the demo link? I'm looking forward to pushing this over the line.

aaronraimist · 2018-10-28T16:43:51Z

@t3chguy can you look at this again now that you are back?

rubo77 · 2018-11-10T13:26:38Z

I tried https://riot.ovh/builds/tomltomltoml/ there are two zoom settings, but only the one for font-size seems to wirk, the other has no effect (tested on firefox 63.0 (64-Bit), Ubuntu 18.04)

jryans · 2019-07-31T11:05:42Z

Thanks for making this contribution a while back. Since the code base has changed since this was opened, it no longer applies cleanly, and I don't think there's a need to keep it open in this state, as we can always find the code here again if needed. If you are still interested in pursuing this feature, please discuss with us in #riot-dev:matrix.org to find a good approach forward.

Zoom/scale setting: Initial

c1c2944

monokh changed the title ~~WIP: Zoom/scale setting: Initial~~ WIP: Zoom/scale setting Dec 5, 2017

t3chguy reviewed Dec 6, 2017

View reviewed changes

monokh added 3 commits December 7, 2017 23:21

Scale setting: Delayed update without reload

af86415

Scale setting: english string

834b03e

Scale setting: interface cleanup

23a38e6

monokh changed the title ~~WIP: Zoom/scale setting~~ Zoom/scale setting Dec 8, 2017

monokh mentioned this pull request Dec 14, 2017

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

Closed

t3chguy reviewed Dec 18, 2017

View reviewed changes

Scale setting: code review cleanup

c37817e

t3chguy suggested changes Dec 18, 2017

View reviewed changes

monokh added 2 commits December 18, 2017 21:38

Scale setting: update copyright

cd8eba7

Scale setting: import proptypes in scale slider component

0421f9a

t3chguy reviewed Dec 19, 2017

View reviewed changes

monokh added 5 commits January 3, 2018 21:35

Merge branch 'develop' into scale-setting

37802e1

Scale settings: Font scale initial

ede442e

Scale settings: only apply setting on value commit

a11ada1

Scale settings: Chat font scale string -en

4511e69

Scale settings: relative font scale size

20dae9c

monokh mentioned this pull request Jan 6, 2018

Style changes for scale setting element-hq/element-web#5931

Closed

2 tasks

monokh added 2 commits January 7, 2018 00:32

Scale setting: Settings slider default className

18cf921

Scale setting: appropriate min max for scaling settings

bbccc26

monokh added 2 commits January 7, 2018 21:28

Scale setting: chat font scale applies to room view only

3eacee0

Scale setting: fix linting errors

e6acc65

t3chguy mentioned this pull request Nov 21, 2018

Electron: additionally map ctrl (or cmd) + '=' to zoom in element-hq/element-web#7721

Closed

jryans closed this Jul 31, 2019



		export default class InterfaceScaleSlider extends React.Component {
		propTypes = {

Zoom/scale setting #1651

Zoom/scale setting #1651

Conversation

monokh commented Dec 5, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

t3chguy Dec 7, 2017 • edited Loading

Choose a reason for hiding this comment

monokh commented Dec 8, 2017

monokh commented Dec 18, 2017

t3chguy commented Dec 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

t3chguy commented Dec 18, 2017

t3chguy commented Dec 18, 2017

monokh commented Dec 18, 2017

t3chguy commented Dec 18, 2017

monokh commented Dec 19, 2017

Choose a reason for hiding this comment

t3chguy commented Dec 19, 2017

monokh commented Dec 19, 2017

monokh commented Dec 19, 2017

lampholder commented Dec 20, 2017

lampholder commented Dec 20, 2017 • edited Loading

monokh commented Dec 21, 2017 • edited Loading

lampholder commented Jan 2, 2018

monokh commented Jan 2, 2018

monokh commented Jan 7, 2018

monokh commented Jan 7, 2018 • edited Loading

monokh commented Jan 16, 2018

t3chguy commented Jan 16, 2018

t3chguy commented Jan 18, 2018 • edited Loading

monokh commented Jan 18, 2018

t3chguy commented Jan 18, 2018

monokh commented Jan 31, 2018

monokh commented Feb 28, 2018

aaronraimist commented Oct 28, 2018

rubo77 commented Nov 10, 2018

jryans commented Jul 31, 2019

monokh commented Dec 5, 2017 •

edited

Loading

t3chguy Dec 7, 2017 •

edited

Loading

lampholder commented Dec 20, 2017 •

edited

Loading

monokh commented Dec 21, 2017 •

edited

Loading

monokh commented Jan 7, 2018 •

edited

Loading

t3chguy commented Jan 18, 2018 •

edited

Loading