Server: Settings navigation: selected category out of viewable range after select

[j-ed]

Expected behavior

If you navigate through the settings menu categories, the last selected category should always be shown on the screen.

Current behavior

If you open the setting menu the available Personal and Administration categories are shown on the left part of the screen. If you now scroll down and select e.g. the category Administration - Logging the relevant content is correctly show on the right part of the screen but the menu itself is refreshed so that the previously selected category cannot be seen anymore.

Steps to reproduce

1. Open the settings menu.
2. Scroll down the menu and select the category Administration - Logging.
3. The relevant content is correctly shown but the selected category itself is not viewable anymore because the menu is refreshed.

Environment

Server Configuration

OS: Linux 3.16.60
Web server: Apache2 2.4.37
Database: MariaDB 10.2.18
PHP version: 7.2.13
Nextcloud version: 15.0.0

Client Configuration

Browser: Mozilla Firefox 64.0
Operating system: Windows 10

[violoncelloCH]

you mean that the settings category menu is scrolled to the top after refresh even though an element at the bottom is selected?

[j-ed]

@violoncelloch Yes, that's exactly what I meant.

[violoncelloCH]

cc @nextcloud/designers what do you think? could someone of you take a look at this?

[jancborchardt]

Totally agree with the issue. It seems something we might need JS for? @nextcloud/javascript

• either the scroll position should be remembered on refresh
• or the list should be scrolled so the selected element is vertically centered

[christophehenry]

I'd like to take this issue. I' fumbled through the xode yesterday but I don't get everything yet. The Vue code seems intrcated with the legacy code. So I may ask a few questions if you're ok.

[violoncelloCH]

cool, of course, just ask :)
if the questions get concrete it's maybe helpful to just push your changes and open a PR so we can take a look at it...

[christophehenry]

Ok, so here is my question. I noticed that the settings menu was rendered using Vue (AppNavigationItem), I reckon. What I wanted to do, is put a $ref on the active item and scroll to it when the component is mounted. So I started to look at the place where the active class is set on he component. I found the getAllApps getters in the store but then I couldn't go any further since the code looks really complex.

Long story short: I don't quite get how this settings menu is generated.

I am an experienced Vue developer and I see you are trying to port your front to Vue so I wanted to help you in doing so :wink:

[kesselb]

https://github.com/nextcloud/server/blob/a8dafc2ff8259adb18a98c263dc1473aa24e454c/settings/templates/settings/frame.php#L69 Here is the template for settings navigation.

[christophehenry]

Oh... It's not rendered at all by Vue? So what is the usage of AppNavigationItem?

[skjnldsv]

@christophehenry yes it is :)
See https://github.com/nextcloud/server/blob/d40b21ac815b8088a5d0b51a6d48b39ed754631a/settings/src/views/Users.vue#L25

and our library: https://github.com/nextcloud/nextcloud-vue/tree/master/src/components