NC30 UI refresh cleanup

[marcoambrosini]

• https://github.com/orgs/nextcloud/projects/62/views/17?pane=issue&itemId=56918898

Vue library

Draft https://github.com/nextcloud-libraries/nextcloud-vue/pull/5746

• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/5766
• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/5780#pullrequestreview-2185912459
• [x] https://github.com/nextcloud-libraries/nextcloud-upload/issues/1275
• [x] Input fields - text fields overall check
• [x] Adjust navigation toggle position
• [x] NcAppNavigationCaption height is off
• [x] New Item element styles are off
• [x] NcAppSidebar header star top aligned
• [x] NcAppSettingsDialog entries border radius ( https://github.com/nextcloud-libraries/nextcloud-vue/pull/5963 )
• [x] NcBreadcrumbs spacing between breadcrumbs and new button
• [x] NcDashboardWidgetItem reduce size
• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/5821#pullrequestreview-2185135874
• [x] Passwordfield jumps when activated
• [x] NcListIitem details elements are not all the way right aligned
• [x] NcInputfield height is too big
• [x] NcSelect, https://github.com/nextcloud-libraries/nextcloud-vue/pull/5883
• [x] NcDateTimePicker height is too big (deprecated)
• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/5974
• [x] Standard radio set with alternative button style: border 1px and border radius element. Also center text
• [x] Standard switch is still 44px (@shgkme WIP)
• [x] NcChip remove pill shape, Advanced usage make avatar 20px and remove menu from it https://github.com/nextcloud-libraries/nextcloud-vue/pull/5924
• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/5963
• [x] NcActionTextEditable regression submit button (deprecate)
• [x] NcAppNavigationSpacer use clickable-area/2 or --default-grid * smth

Server

• [x] https://github.com/nextcloud/server/pull/46270
• [x] Bring headings down one step in size

Dashboard

• [x] https://github.com/nextcloud/server/pull/46201

Updater & AIO

• [x] https://github.com/nextcloud/all-in-one/issues/4955 cc @szaimen

cc @jancborchardt @nimishavijay @susnux @ShGKme @skjnldsv

[come-nc]

Not sure if related but the + button for groups is misaligned

[marcoambrosini]

It looks like you didn't link the vue library master @come-nc

[susnux]

For testing master without linking we need: #46230

[hamza221]

@susnux #46230 is for stable29

[ChristophWurst]

NcBreadcrumbs spacing between breadcrumbs and new button

Not sure if related but the breadcrumbs jump a tiny bit at page load

IMO the alignment is better while the file list is loading

[ChristophWurst]

• [ ] HTML inputs have a 2px border radius, not var(--border-width-input, 2px) that is used in NcSelect. This creates inconsistency

https://github.com/nextcloud/server/blob/87dc0614d703536843b878808a2721899df798b4/core/css/inputs.scss#L246

[ChristophWurst]

NcInputfield height is too big

Same as https://github.com/nextcloud/server/issues/46851?

[ChristophWurst]

• [x] User menu has 44px entries https://github.com/nextcloud/server/issues/46460

[marcoambrosini]

@susnux @ShGKme @GVodyanov please update the checkboxes if you fix some of those things

[susnux]

• [x] User menu has 44px entries

https://github.com/nextcloud/server/issues/46460

[skjnldsv]

• [ ] Quota is looking weird

[ChristophWurst]

• [x] Mobile apps menu toggle is not aligned with the app icons (https://github.com/nextcloud/server/pull/47031)

• [x] App entries are not centered vertically (https://github.com/nextcloud/server/pull/47034)

[ChristophWurst]

• [x] Share button hover state in Files breadcrumbs

---

Duplicate of:

https://github.com/nextcloud-libraries/nextcloud-upload/issues/1275

[ChristophWurst]

• [ ] Contacts menu handle scrolls on mobile

Bildschirmaufzeichnung vom 2024-08-06 07-44-57.webm

[ChristophWurst]

• [x] Large radii and old buttons on upgrade page https://github.com/nextcloud/server/pull/47152

[ChristophWurst]

NcDateTimePicker height is too big

The picker needs a general design update for 30: https://github.com/nextcloud-libraries/nextcloud-vue/issues/5951

[ChristophWurst]

• [x] Border radii when using keyboard navigation

[ChristophWurst]

• [ ] Main menu at the top right doesn't look very compact and there is too much space between the action icon and text

[susnux]

Main menu at the top right doesn't look very compact and there is too much space between the action icon and text

This is the compact styling of NcListItem, best we can do here is removing 4px padding from the inner wrapper, allowing a total size of 38px (height) (34px content + 2*2px focus visible outline). (currently one item is 42px height)

[ChristophWurst]

Not sure if related but the breadcrumbs jump a tiny bit at page load

Still happening: when you click on All files there is a spinner at the top right and it makes the breadcrumbs jump down a few px

See the alignment of the nav toggle and the breadcrumbs. It's fine until the loading spinner shows.

---

susnux: Resolved with https://github.com/nextcloud/server/pull/47370

[jancborchardt]

Also, that loading spinner makes the view toggle jump to the left, so it should be left of that toggle instead.

---

susnux: resolved: https://github.com/nextcloud/server/pull/47370

[ChristophWurst]

• [ ] Unfocused text inputs have a 2px border

https://github.com/nextcloud/server/blob/6d04ad829b2814090301b0101dc10fa0617dd783/core/css/inputs.scss#L256

This shows in apps too, like Mail

[susnux]

@ChristophWurst

This shows in apps too, like Mail

I strongly recommend to use NcInputField for this:

https://github.com/nextcloud/mail/blob/62f1cec233ab92a311bcb0f70967d49f64bd1d8d/src/components/SearchMessages.vue#L8-L13

[ChristophWurst]

Yep, agree. But vanilla inputs should also have the correct style.

[marcoambrosini]

Closing, moved few remaining things in new issues

[jancborchardt]

Great job everyone and especially @marcoambrosini for driving this. We came out with a really much more refined interface. :)