NC30 UI refresh cleanup

[marcoambrosini]

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

Vue library

Draft nextcloud-libraries/nextcloud-vue#5746

• Fix input field label alignment nextcloud-libraries/nextcloud-vue#5766
• fix(NcListItem): Anchor height was set not to content but random area nextcloud-libraries/nextcloud-vue#5780 (review)
• Files top actions bar vertically shifted cause of too big "new" button nextcloud-libraries/nextcloud-upload#1275
• Input fields - text fields overall check
• Adjust navigation toggle position
• NcAppNavigationCaption height is off
• New Item element styles are off
• NcAppSidebar header star top aligned
• NcAppSettingsDialog entries border radius ( fix(NcAppSettingsDialog): Adjust navigation entries to match Nextcloud 30 design nextcloud-libraries/nextcloud-vue#5963 )
• NcBreadcrumbs spacing between breadcrumbs and new button
• NcDashboardWidgetItem reduce size
• fix(NcInputField): Make sure label and placeholder is not jumping nextcloud-libraries/nextcloud-vue#5821 (review)
• Passwordfield jumps when activated
• NcListIitem details elements are not all the way right aligned
• NcInputfield height is too big
• NcSelect, fix(NcSelect): Ensure component height is same as input element nextcloud-libraries/nextcloud-vue#5883
• NcDateTimePicker height is too big (deprecated)
• fix(NcCheckboxRadioSwitch): adjust to new border radius nextcloud-libraries/nextcloud-vue#5974
• Standard radio set with alternative button style: border 1px and border radius element. Also center text
• Standard switch is still 44px (@ShGKme WIP)
• NcChip remove pill shape, Advanced usage make avatar 20px and remove menu from it fix(NcChip): adjust border radius to new design nextcloud-libraries/nextcloud-vue#5924
• fix(NcAppSettingsDialog): Adjust navigation entries to match Nextcloud 30 design nextcloud-libraries/nextcloud-vue#5963
• NcActionTextEditable regression submit button (deprecate)
• NcAppNavigationSpacer use clickable-area/2 or --default-grid * smth

Server

• Match input height with clickable area #46270
• Bring headings down one step in size

Dashboard

• Update dashboard panels border radius #46201

Updater & AIO

• Adjust the design to fit nc30 all-in-one#4955 cc @szaimen

cc @jancborchardt @nimishavijay @susnux @ShGKme @skjnldsv

[ChristophWurst]

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

server/core/css/inputs.scss

Line 246 in 87dc061

border: 2px solid var(--color-border-maxcontrast);

[marcoambrosini]

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

[skjnldsv]

• Quota is looking weird

[ChristophWurst]

• Contacts menu handle scrolls on mobile

Bildschirmaufzeichnung.vom.2024-08-06.07-44-57.webm

[ChristophWurst]

NcDateTimePicker height is too big

The picker needs a general design update for 30: nextcloud-libraries/nextcloud-vue#5951

[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]

• Unfocused text inputs have a 2px border

server/core/css/inputs.scss

Line 256 in 6d04ad8

border: 2px solid var(--color-border-maxcontrast);

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. :)