fix(talk/settings): adjust to new design #1530

ShGKme · 2025-11-07T21:10:23Z

☑️ Resolves

Ref: Overview: Settings reorganization server#55667
Ref: Talk settings reorganization spreed#16113
Bye 🥲 [WIP] chore(config): re-design #1155
Problems:
- Having +1 structuring level is lost
- ~~NcSelect for Nextcloud 30 design is not implemented yet~~
  - [DRAFT] feat: add NcFormBoxSelectNative nextcloud-libraries/nextcloud-vue#7838
- ~~Zoom is draft - I need to think about it~~
- ~~Radio groups don't look well with long text even on a normal screen~~
  - Replaced with select
- I loved having icons :(

🖼️ Screenshots

🏚️ Before	🏡 After

nickvergessen · 2025-11-07T22:38:18Z

Radio groups don't look well with long text even on a normal screen

Yeah, that immediately jumped my eye as well. Should stay with a dropdown there I think

ShGKme · 2025-11-10T20:08:31Z

Full settings for the complete view

Antreesy

Otherwise nice splitting

Antreesy · 2025-11-11T08:55:43Z

src/talk/renderer/Settings/components/NcFormBoxItem.vue

Shall be better exposed in vue-lib, I guess?

Exposing it would require keeping its API. I'd avoid it until we know well it works.
In this specific case it can be removed after:

[DRAFT] feat: add NcFormBoxSelectNative nextcloud-libraries/nextcloud-vue#7838

Antreesy · 2025-11-11T09:54:33Z

src/talk/renderer/Settings/components/UiFormGroupZoom.vue

+				</NcButton>
+			</NcFormBox>
+
+			<NcButton :class="itemClass" wide @click="modelValue = 1">


Maybe we can put a 'Reset' button to the side of zoom scale (like this)?

Pushed an update

Antreesy · 2025-11-11T10:05:54Z

src/talk/renderer/Settings/DesktopSettingsSection.vue

-import SettingsFormGroup from './components/SettingsFormGroup.vue'
-import SettingsSelect from './components/SettingsSelect.vue'
-import SettingsSubsection from './components/SettingsSubsection.vue'
-import { ZOOM_MAX, ZOOM_MIN } from '../../../constants.js'


Are these constants still used?

Yes, on the backend

ShGKme · 2025-11-11T12:46:41Z

Updated Zoom setting, see screenshots

nickvergessen · 2025-11-11T13:04:10Z

src/talk/renderer/Settings/components/UiFormBoxSelectNative.vue

+
+<script setup lang="ts" generic="T extends string | null">
+import { computed, useId, useTemplateRef } from 'vue'
+import IconUnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'


I would use the arrow bottom that we use in the NcSelect components

Or is that "deprecated" and will be replaced everywhere?
I think the double arrow makes less sense then expanding the list, even when the direction is "wrong"

I would use the arrow bottom that we use in the NcSelect components

There is no way to detect the open state to make it UP on open like in a fully custom select.

That is why unfold (arrow up + down) is often the default select icon.

src/talk/renderer/Settings/components/UiFormGroupZoom.vue

kra-mo

Looks quite nice. Some smaller points of feedback:

The reset split button could have a bit more left/right padding, enough to align the icon with trailing icons in FormBox* components.
The two options related to secondary speakers should probably have their own group to indicate that they are more related to each other than any other two notification options. Even better would be if they could be in the same box, but not sure if that works with the split button.
"Notifications and sounds" could be renamed to "Notifications & Sounds" for consistency
"Theme" could be moved below "Appearance" for structure.
The zoom controls are indeed a bit tricky. For now, I'm thinking:

This gets rid of the slider but it makes it so you don't need to move your mouse too much to click on plus after you clicked on minus and vice versa.

It would get rid of the keyboard shortcuts, but that's probably fine? Ideally, they would be in the actual Keyboard shortcuts section anyway, but I'm guessing we don't want to insert them there?

kra-mo · 2025-11-11T16:19:24Z

I loved having icons :(

This is something I'd be willing to revisit later by the way. But probably worth it only after we move to Material Symbols.

ShGKme · 2025-11-11T19:04:20Z

The reset split button could have a bit more left/right padding, enough to align the icon with trailing icons in FormBox* components.

🥲👍

(Needs more hacking or new components or making our buttons FormBox compatible by default/additionally)

The two options related to secondary speakers should probably have their own group to indicate that they are more related to each other than any other two notification options. Even better would be if they could be in the same box, but not sure if that works with the split button.

👍

"Notifications and sounds" could be renamed to "Notifications & Sounds" for consistency

👍

It would get rid of the keyboard shortcuts, but that's probably fine? Ideally, they would be in the actual Keyboard shortcuts section anyway, but I'm guessing we don't want to insert them there?

Possible with some additional work, will do it later. Though, makes more sense if we have many desktop-specific shortcuts.

"Theme" could be moved below "Appearance" for structure.

It cannot, because from the new settings design structure, a radio group has the same structuring level as a general group (it is also a group).

Level 1: Settings Section (labelled)
Level 2: A group (form group or radio group, labelled)
Level 3: Visual box - subgroup (buttons in the radio group, list of switches)

The zoom controls are indeed a bit tricky. For now, I'm thinking:

Then:

Manual input is lost - not possible to select a value in between anymore
The button named as "Zoom" visually and from a11y has a "Reset" icon and acts like a reset, which is a semantic and accessibility issue
Slider is quite a classic element for the zoom, does it look bad :( ?

kra-mo · 2025-11-13T12:02:28Z

It cannot, because from the new settings design structure, a radio group has the same structuring level as a general group (it is also a group).

Sorry, I meant below as in just swapping their positions, not putting one inside the other. It's still more structured that way if a more general thing is above a more specific thing.

Manual input is lost - not possible to select a value in between anymore

If we do increments of 5%, that is probably fine. The difference between 103% and 105% is not very relevant. The difference between 100% and 105% could be.

The button named as "Zoom" visually and from a11y has a "Reset" icon and acts like a reset, which is a semantic and accessibility issue

Pf, I understand what you mean. I was thinking of for example Firefox, where you can click on the percentage to reset the zoom… maybe it is fine to change the a11y label/description manually here to accommodate this? I'm guessing that's what would be done if there was no original "Zoom" title in the UI and it was just the percentage (which was my original idea, I just decided that the title could be put here).

Slider is quite a classic element for the zoom, does it look bad :( ?

It doesn't look too bad haha, it's just that in this particular case, where it zooms the UI, I'm not sure how useful it is anyway, because:

If it applies the zoom adjustment immediately, then your cursor will move relative to the bar when the UI size changes, which makes adjustments in the slider difficult or impossible because it jumps around.
If it doesn't apply it immediately, and you have to manually apply it or let go of your cursor, it diminishes the value of the slider since you don't get any feedback and you have to press-release, press-release, press-release to see what happens, so it might as well be a button.

And as I said before, adjustments like 103% vs. 105% aren't that different and people would probably want a more round number anyway, so for coarser adjustments, I think a button makes more sense too.

ShGKme · 2025-11-13T12:14:26Z

If we do increments of 5%, that is probably fine. The difference between 103% and 105% is not very relevant. The difference between 100% and 105% could be.

Then if I want 400%, I need to click 60 times

ShGKme · 2025-11-13T12:23:58Z

If it applies the zoom adjustment immediately, then your cursor will move relative to the bar when the UI size changes, which makes adjustments in the slider difficult or impossible because it jumps around.

That is why it has an internal value, which only applies zoom once you released the mouse, but not while you are zooming.

So this case is explicitly handled.

ShGKme · 2025-11-15T20:33:56Z

Rebased to resolved conflict after dependabot merges

kra-mo · 2025-11-18T07:55:22Z

I'm not ready to lose functionality in favour of visuals...

To be clear: I am not advocating for my proposal in terms of visuals. There should never be a need to give up functionality in favor of it.

I'm only advocating for it from a practical POV:

The + and - buttons being far apart on the existing slider make them harder to use than if they were next to each other.
The two main advantages of a scale aren't here:
- There is no clearly defined start and end (10%-200%? 50%-300%? both of these could be valid), so seeing the range is not practical.
- The UI (and thereby the slider) zooming after the release of one's cursor makes fine adjustments just as hard as with buttons, as outlined above.

You raised a good point about it being difficult to jump big ranges in my initial proposal. I think with a dropdown and the buttons, we wouldn't lose anything by going with the more straightforward design and we would gain clarity/ease of use.

With that said, I do not think the slider looks particularly good, no. But if you choose to go ahead with it, I would try to adjust it to fit it into the style better.

Please let me know what you think.

kra-mo · 2025-11-18T08:00:23Z

Making it "below' doesn't actually make it structurally inside "Appearance". If we want to make it inside - we need 1 more structural level

Not semantically, but generally, it does. This type of organization is still an important part of the part of layouts like this imo and I used similar thinking to organize other settings dialogs.

"Theme" is the setting most of the users will use - I'd prefer to keep it on top

I did also think about theme being a more common option, but I thought that it has such a distinctive selector and it would still be pretty high up (you never have to scroll to see it) that it wouldn't be an issue.

ShGKme · 2025-11-18T09:43:22Z

The + and - buttons being far apart on the existing slider make them harder to use than if they were next to each other.

They used to be really far (on the opposite sides of the slider), but now they are on the sides of the input, quite close, aren't they?

There is no clearly defined start and end (10%-200%? 50%-300%? both of these could be valid), so seeing the range is not practical.

I can add the start, end and 100% labels

Please let me know what you think.

Regarding Zoom, I'm fine removing the slider, but I don't want to lose the manual input to have an exact zoom you need.

I did also think about theme being a more common option, but I thought that it has such a distinctive selector and it would still be pretty high up (you never have to scroll to see it) that it wouldn't be an issue.

We'll have more "Appearance" settings later (soon), including tray-related

kra-mo · 2025-11-18T12:09:00Z

They used to be really far (on the opposite sides of the slider), but now they are on the sides of the input, quite close, aren't they?

Better, but for buttons like this, it's always nice to have them directly next to each other.

Regarding Zoom, I'm fine removing the slider, but I don't want to lose the manual input to have an exact zoom you need.

Ah ok. In that case, can we have a combined dropdown and input?

That way, we still don't need reset as you can select 100%, but you can also manually enter the zoom level.

We'll have more "Appearance" settings later (soon), including tray-related

Ok, fair enough

ShGKme · 2025-11-19T10:10:02Z

Ah ok. In that case, can we have a combined dropdown and input?

Yes, but:

We don't have a select in this design. The label will be outside.
Either it will be wide (with an empty space after short "100%" string), or we have a short select with empty space in the row.

Also, the values are not beautiful to the end user

ShGKme · 2025-11-19T10:10:38Z

Another proposal, keeping the reset button and with an button to edit the value manually.

Dismissing to move forward with something that should not be discussed this long

kra-mo · 2025-11-20T08:21:42Z

We don't have a select in this design. The label will be outside.

That's fine for now as long as the label is aligned (as I've been nagging you about in DMs, sorry!)

Either it will be wide (with an empty space after short "100%" string), or we have a short select with empty space in the row.

It being wide is OK. If there's gonna be whitespace either way, it might as well increase the click target instead of contribute to the empty void :)

Also, the values are not beautiful to the end user

Oh no, as I said earlier, if we go with a dropdown, I would show only larger fixed, amounts in there. Browsers and other apps do this with increments. So for example:

50%
75%
100%
125%
150%
200%
300%

Then the buttons could still adjust the zoom level by 5% increments for finer adjustments.

Another proposal, keeping the reset button and with an button to edit the value manually.

You know, that's fine by me, I like it. I'm still not entirely sure about the reset button as you can just select 100%, but it looks fine… And if there is no reset button, I'd also move the edit button to the right to keep the text aligned. But your call, really.

The only question: Would the edit button edit the value in-line? Would it spawn a dialog or just an input field nearby?

ShGKme · 2025-11-20T12:46:47Z

Oh no, as I said earlier, if we go with a dropdown, I would show only larger fixed, amounts in there. Browsers and other apps do this with increments. So for example:

50% 75% 100% 125% 150% 200% 300%

Then the buttons could still adjust the zoom level by 5% increments for finer adjustments.

It had a different change for a reason.

Moving from 50% to 100% (+50%) makes everything twice as large, which is a significant change.
Moving from 400% to 450% (also +50%) is not very noticeable and feels like moving from 100% to 125%.

In the web-browsers it is always annoying that you can Zoom with a mouse/keyboard, and the zooming in is slower and slower while zooming out is faster and faster.

That is why we use the factor.

ShGKme · 2025-11-20T12:47:48Z

The only question: Would the edit button edit the value in-line? Would it spawn a dialog or just an input field nearby?

Inline, replacing the select

kra-mo · 2025-11-20T12:48:44Z

The only question: Would the edit button edit the value in-line? Would it spawn a dialog or just an input field nearby?

Inline, replacing the select

Can I see how that looks?

kra-mo · 2025-11-20T12:54:32Z

That is why we use the factor.

Ok, that is very fair, it just indeed doesn't look very nice and people might want to match their zoom level for the app to one offered by the browser which usually round them to 5.

How about keeping them roughly the same, just rounding them a bit? This would mean the increments would be 5, 10, 15, 25:

60%
65%
70%
75%
80%
90%
100%
110%
120%
130%
145%
160%
175%
200%
225%
250%
275%
300%
325%

Signed-off-by: Grigorii K. Shartsev <[email protected]>

ShGKme · 2025-11-21T14:31:14Z

Rebased to resolve conflict
Update to @nextcloud/vue v9.3.0
Reworked the zoom setting (again)

Screenshot is updated.

ShGKme · 2025-11-21T14:31:52Z

@Antreesy @DorraJaouad If you want to have a look again - let me know. Otherwise you can merge 👀

ShGKme · 2025-11-21T14:35:01Z

Additions about the Zoom:

Manual input replaces select and the edit button. Enter applies the zoom and focus the button again.

Select has only every second value rounded to 5:

Antreesy

Code-wise OK, zoom value is not limited to min and max (+- buttons can still change it)

Signed-off-by: Grigorii K. Shartsev <[email protected]>

ShGKme · 2025-11-21T16:00:07Z

src/talk/renderer/Settings/components/UiFormGroupZoom.vue

+		<NcFormBox class="zoom-box__row" row>
+			<UiFormBoxSplitButton
+				:label="t('talk_desktop', 'Zoom out')"
+				hide-label
+				:disabled="modelValue / STEP_FACTOR < ZOOM_MIN"
+				@click="modelValue /= STEP_FACTOR">
+				<template #icon>
+					<IconMinus :size="20" />
+				</template>
+			</UiFormBoxSplitButton>
+
+			<UiFormBoxSplitButton
+				:label="t('talk_desktop', 'Zoom in')"
+				hide-label
+				:disabled="modelValue * STEP_FACTOR > ZOOM_MAX"
+				@click="modelValue *= STEP_FACTOR">
+				<template #icon>
+					<IconPlus :size="20" />
+				</template>
+			</UiFormBoxSplitButton>


Code-wise OK, zoom value is not limited to min and max (+- buttons can still change it)

Fixed with disabled

ShGKme requested a review from kra-mo November 7, 2025 21:10

ShGKme self-assigned this Nov 7, 2025

ShGKme added bug Something isn't working 2. developing labels Nov 7, 2025

ShGKme mentioned this pull request Nov 7, 2025

[WIP] chore(config): re-design #1155

Closed

ShGKme marked this pull request as draft November 10, 2025 18:32

ShGKme force-pushed the fix/settings-degisn branch from de19227 to b94f779 Compare November 10, 2025 19:42

ShGKme requested review from Antreesy and DorraJaouad November 10, 2025 19:42

ShGKme added 3. to review and removed 2. developing labels Nov 10, 2025

ShGKme added this to the 🪴 Next Release milestone Nov 10, 2025

ShGKme marked this pull request as ready for review November 10, 2025 19:43

ShGKme changed the title ~~[WIP] fix(talk/settings): new design~~ fix(talk/settings): adjust to new design Nov 10, 2025

ShGKme force-pushed the fix/settings-degisn branch from b94f779 to 4346729 Compare November 10, 2025 20:07

Antreesy approved these changes Nov 11, 2025

View reviewed changes

nickvergessen reviewed Nov 11, 2025

View reviewed changes

This comment was marked as off-topic.

Sign in to view

Antreesy reviewed Nov 11, 2025

View reviewed changes

src/talk/renderer/Settings/components/UiFormGroupZoom.vue Outdated Show resolved Hide resolved

kra-mo previously requested changes Nov 11, 2025

View reviewed changes

ShGKme force-pushed the fix/settings-degisn branch from c36c8b4 to 0960176 Compare November 15, 2025 20:33

ShGKme added 3 commits November 21, 2025 15:16

chore(deps): bump @nextcloud/vue to 9.3.0

5ae6988

Signed-off-by: Grigorii K. Shartsev <[email protected]>

chore(tsconfig): remove vue 2.7 settings

6efcfea

Signed-off-by: Grigorii K. Shartsev <[email protected]>

build: add CSS Modules support

03abc06

Signed-off-by: Grigorii K. Shartsev <[email protected]>

ShGKme force-pushed the fix/settings-degisn branch from 0960176 to fe9c156 Compare November 21, 2025 14:18

kra-mo approved these changes Nov 21, 2025

View reviewed changes

Antreesy approved these changes Nov 21, 2025

View reviewed changes

DorraJaouad approved these changes Nov 21, 2025

View reviewed changes

fix(talk/settings): new design

833ebc8

Signed-off-by: Grigorii K. Shartsev <[email protected]>

ShGKme force-pushed the fix/settings-degisn branch from fe9c156 to 833ebc8 Compare November 21, 2025 15:58

ShGKme commented Nov 21, 2025

View reviewed changes

ShGKme merged commit 7242d5c into main Nov 21, 2025
11 checks passed

ShGKme deleted the fix/settings-degisn branch November 21, 2025 16:00

ShGKme mentioned this pull request Nov 25, 2025

release: v2.0.4 #1562

Merged

fix(talk/settings): adjust to new design #1530

fix(talk/settings): adjust to new design #1530

Uh oh!

Conversation

ShGKme commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☑️ Resolves

🖼️ Screenshots

Uh oh!

nickvergessen commented Nov 7, 2025

Uh oh!

ShGKme commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Antreesy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShGKme commented Nov 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

Uh oh!

kra-mo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kra-mo commented Nov 11, 2025

Uh oh!

ShGKme commented Nov 11, 2025

Uh oh!

kra-mo commented Nov 13, 2025

Uh oh!

ShGKme commented Nov 13, 2025

Uh oh!

ShGKme commented Nov 13, 2025

Uh oh!

ShGKme commented Nov 15, 2025

Uh oh!

kra-mo commented Nov 18, 2025

Uh oh!

kra-mo commented Nov 18, 2025

Uh oh!

ShGKme commented Nov 18, 2025

Uh oh!

kra-mo commented Nov 18, 2025

Uh oh!

ShGKme commented Nov 19, 2025

Uh oh!

ShGKme commented Nov 19, 2025

Uh oh!

kra-mo commented Nov 20, 2025

Uh oh!

ShGKme commented Nov 20, 2025

Uh oh!

ShGKme commented Nov 20, 2025

Uh oh!

kra-mo commented Nov 20, 2025

Uh oh!

kra-mo commented Nov 20, 2025

Uh oh!

ShGKme commented Nov 21, 2025

Uh oh!

ShGKme commented Nov 21, 2025

ShGKme commented Nov 7, 2025 •

edited

Loading

ShGKme commented Nov 10, 2025 •

edited

Loading

kra-mo left a comment •

edited

Loading