arnowelzel commented 2 years ago

How to use GitHub

Please use the 👍 reaction to show that you are interested into the same feature.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.

With Nextcloud 25 a new UI was introduced which is technically a great improvement and many visual problems got fixed.

However what is not ideal are some of the new things which got introduced and can not be easily changed:

1) Rounded corners for the content area

Not all applications take that into account so the rectangular UI of the application gets cut off in the corners. Also scroll bars are cut off:

Also some applications, despite being compatible to Nextcloud 25 still use the "old" UI, which is a bit confusing:

In addition for the visual effect to work at all, the whole content area has a margin of about 8px. This does not sound a lot, but there is no real usability benefit from removing usable space just to be able have rounded corners around the application area.

2) Translucent navigation area

Even if no background image is enabled, the navigation area has still a translucent style with a backdrop filter which sometimes causes confusing light rectangles to appear in the navigation area background when hovering a menu item:

This can be fixed with a custom CSS to remove the background like this:

#app-navigation, .app-navigation {
  backdrop-filter:none !important;
}

Also having translucent effects with fixed background images does not help performance. Yes, one can disable that, but by default all users will first have the new "fancy" UI and have to manually disable that since there is not option for administrator to globally choose a certain default for all users.

Describe the solution you'd like

1) Have an option for the administrator to select a default theme for all users.

2) Add an option to choose between the "new" look with rounded corners or the "classic" look as it was before (or at least without rounded corners and margins around the content area). I created a custom CSS (using the app "Custom CSS") which changes the look to a somewhat mixed look between old and new. But it would be much easier for users if they can just select this as an option if they prefer the "classic" style.

My CSS for "Custom CSS" so far, so you can see, how I customized the styles:

/* Disable the rounded corners for the main content area */

#content, .content {
  border-radius:0 !important;
}

/* Remove margins for the main content area */

#content, .content {
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:0 !important;
  width:100% !important;
  height: calc(var(--body-height) + var(--body-container-margin)) !important;
}

/* Make input element  corners a bit less rounded
   (may need some additional classes, as I did not check every detail in the UI) */

input, textarea, select, .multiselect__tags, .rich-contenteditable__input {
  border-radius:4px !important;
}

/* Fix visual glitches with navigation if there is no background image */

#app-navigation, .app-navigation {
  backdrop-filter:none !important;
}

/* Make quota display non-clickable since selecting this element does not do anything at all
   and remove rounded border to avoid cutting of the visual indicator */

.app-files #quota {
  pointer-events:none;
}

.app-files #quota,
.app-files #quota > a {
  border-radius:0 !important;
}

/* Fix for "new" menu entries in the files app */

#content[class*=app-] .bubble li > button,
#content[class*=app-] .bubble li > a,
#content[class*=app-] .bubble li > .menuitem,
#content[class*=app-] .app-navigation-entry-menu li > button,
#content[class*=app-] .app-navigation-entry-menu li > a,
#content[class*=app-] .app-navigation-entry-menu li > .menuitem,
#content[class*=app-] .popovermenu li > button,
#content[class*=app-] .popovermenu li > a,
#content[class*=app-] .popovermenu li > .menuitem {
  width: 100%;
}

The following styles are just additional things I added for my setup to cope with some issues in individual applications:

/* OnlyOffice with correct height */

#app > iframe {
  height:calc(100vh - 50px);
}

/* Draw.io without scrolling of the app area */

.app-drawio > #app-content {
  overflow:hidden;
}

/* Custom styling for markdown editor to have a bit bigger text */

.text-editor__wrapper div.ProseMirror p {
  font-size:16px;
}

The result looks like this:

Background images are also supported with these rules:

Describe alternatives you've considered

Create the possibility to provide new themes similar to apps.

reinob commented 2 years ago

Just wanted to say thank you for your CSS customizations above, which make everything cleaner and nicer (at least until Nextcloud provides for a proper squared theme).

Would you happen to know how to also make the rounded areas showing the selected element (like "All files" in the screenshot above) also square?

That would be great! :)

reinob commented 2 years ago

ah, with this:

* {
 --default-clickable-area:10px;
 --border-radius-pill:10px;
}

it looks really nice. Some elements are still round (like in Contacts), but I'll get there too :)

EddiFreiter commented 2 years ago

I would also like to see the option to choose between modern and classic styles.

nursoda commented 2 years ago

Nextcloud server itself should always provide these:

Pages meant for embedding should NOT use the background/border theming at all as it looks awful in an iframe.
Icons must be visible if they are shown over an image. Currently, an image that has light and dark regions (like a chess board) leads to at least some unreadable icons. But even when the image is light at the top, icons currently (25.0.1) aren't colored properly (see below).

"Normal" users/hobbyist admins should be able to EASILY set (→as in "a Nextcloud admin setting") these at least:

Set a distinct theme (at least light/dark) for embedded pages. If set for all, that would thwart some use cases but is a good start. Ideal would be to be able to select upon sharing, but that's a major change in dialogs.
Be able to distinguish between LOGIN background (e.g. a custom image) and LOGGED-IN background (e.g. a custom color).

Examples:

20221105_164324 20221105_163750

paulijar commented 2 years ago

If you want to get rid of the rounded corners and content margin using custom CSS, then instead of directly overriding the styles for #content and .content, you might want to modify the related variables:

:root {
    --body-container-margin: 0px;
    --body-container-radius: 0px;
}

With this, all the other elements relying on these will get adjusted too. At least the Music app utilizes these variables for its adjustments to the new NC25 layout and I bet that many other apps do the same.

vagner-dias commented 1 year ago

Hello, @arnowelzel !

Great article! but I have a question. would there be a way to enable OnlyOffice to take the whole browser space using CSS?

arnowelzel commented 1 year ago

Hello, @arnowelzel !

Great article! but I have a question. would there be a way to enable OnlyOffice to take the whole browser space using CSS?

No, this is not just a CSS matter. The integration application itself needs to use a different approach to open the UI.

One way to this is to use a non modal application frame which is below the main toolbar (<div id="app-content">...</div>). However this element is intentionally placed as it is. Applications like the address book, calendar, notes and OnlyOffice work this way. "Non modal" means - you still can navigate to other applications directly using the main toolbar without closing the current application first. Of course it will close anyway, but it can not do anything to prevent this.

The other way is to use a modal integration like it is done in the PDF viewer, image viewer or Nextcloud Office. "Modal" means, you enter another "mode" which prevents you from using anything else - before you can use another application you have to manually close it. The application may prevent that if you have unsaved changes and ask you what to do before it will end. Technically this is also a DIV element but created in a different way and with different interaction with the Nextcloud UI.

If you want to have OnlyOffice as modal application you need to ask the maintainers of the OnlyOffice integration app to do so.

Hk1020 commented 1 year ago

Icons must be visible if they are shown over an image. Currently, an image that has light and dark regions (like a chess board) leads to at least some unreadable icons. But even when the image is light at the top, icons currently (25.0.1) aren't colored properly (see below).

"Normal" users/hobbyist admins should be able to EASILY set (→as in "a Nextcloud admin setting") these at least:

Set a distinct theme (at least light/dark) for embedded pages. If set for all, that would thwart some use cases but is a good start. Ideal would be to be able to select upon sharing, but that's a major change in dialogs.

Be able to distinguish between LOGIN background (e.g. a custom image) and LOGGED-IN background (e.g. a custom color).

Examples:

I have exactly this problem with unreadable icons. Is there a way to make them readable again? This was all fine before Nextcloud 25. I want my picture on the welcome screen but it is useless when logged in. In fact it only destroys the icons and does nothing else.

arnowelzel commented 1 year ago

I have exactly this problem with unreadable icons. Is there a way to make them readable again? This was all fine before Nextcloud 25. I want my picture on the welcome screen but it is useless when logged in. In fact it only destroys the icons and does nothing else.

You can try CustomCSS. Examine the icons in the toolbar with the web developer tools of your browser and check what CSS classes they use. Then you can add additional styling rules in CustomCSS to add drop shadows etc..

For example: the icon area are itself uses the CSS class app-menu: <nav data-v-44a795f6="" class="app-menu">

So if you add a background color to that class, the icons will at least have their own background:

.app-menu {
  background-color: rgba(0, 0, 0, 0.7);
}

You can also do this with the hole header which is the following part: <header role="banner" id="header">

For example for a header with a grey background and no opacity:

#header {
  background-color: #808080;
}

Hk1020 commented 1 year ago

I have exactly this problem with unreadable icons. Is there a way to make them readable again? This was all fine before Nextcloud 25. I want my picture on the welcome screen but it is useless when logged in. In fact it only destroys the icons and does nothing else.

You can try [CustomCSS](https:// For example for a header with a grey background and no opacity:
#header {
  background-color: #808080;
}

Thank you!! This is exactly what I needed. Now Nextcloud is usable again. Used my custom colors though. Thanks.

arnowelzel commented 1 year ago

Thank you!! This is exactly what I needed. Now Nextcloud is usable again. Used my custom colors though. Thanks.

You're welcome. Just keep in mind that these are just "quick & dirty" examples. The icons on top also may contain opacity rules, so you may need to fine tune this as well if needed.

Hk1020 commented 1 year ago

Thank you!! This is exactly what I needed. Now Nextcloud is usable again. Used my custom colors though. Thanks.

You're welcome. Just keep in mind that these are just "quick & dirty" examples. The icons on top also may contain opacity rules, so you may need to fine tune this as well if needed.

Well, it’s good enough, no comparison to the guesswork before. I also removed the rounded corners as described in https://github.com/nextcloud/server/issues/34727#issuecomment-1289045969. I like it better.

le-patenteux commented 1 year ago

Thanks a lot @arnowelzel for this quick fix! our Nextcloud instance was unusable after the update to version 25 because many addons were not playing nicely with the new rounded Theme.

And I totally agree with your statements on the NC forums and was disappointed in the NC team's response. This UI change was bad... nothing to add! there should have been a way to revert it... that is what everyone does, even Microsoft lets you chose the "original experience" on O365 (and they could not care less about the end-user!)

Did you notice slow-down after adding this CSS, I am having issues lately with the UI and am wondering if it can be that...

arnowelzel commented 1 year ago

No, I don't experience any slow down because of that.

But the NC 25 seems to be more sensitive to slow storage backends. I had to move one instance to another server lately because the storage backend which worked ok with NC 24 caused severe delays with NC 25. Instead of loading times of 3-4 seconds for the file app it took nearly 20 seconds with NC 25. After I switched to a faster storage backend NC 25 worked as fast as expected.

And about design decisions:

I understand that rounded corners are the way to go in modern design. Every modern web application has rounded buttons, rounded input elements and so on. Also see OS X and Windows 11 with its rouned window corners.

However: this does not mean it makes sense to have an application area with rounded corners inside a rectangular browser viewport. Good design also needs to consider usability. Having less space available or cutting content off in the corners because of the use of rounded corners does not always help that.

Also a user should always clearly recognize which elements are clickable and which are not. The current NC 25 still has some issues with that - for example with the quota display in the files app which is clickable even though clicking it does not do anything at all (that's why a added a workaround for that as well in my custom CSS rules).

Good design also needs experience - people learn this at university, because it's not something you can just do by intuition only. The current layout of the "contacts" app for example is unfortunately an example how not to do it.

I am very grateful for the good work the many maintainers of Nextcloud did over the last years and without Nextcloud and great apps like Nextcloud Office I would really miss something. But the UI design may need some more experienced people in the team in some cases.

arnowelzel commented 1 year ago

Update: I added some additional CSS rules which I currently use to fix some more glitches in the new UI (like cut off quota bar in the "files" app or non uniform menu elements in the "new" menu). Some may already have been fixed in the latest release of Nextcloud, but if not, feel free to try it with these rules.

cappuMUC commented 1 year ago

@arnowelzel thank you for sharing the custom styles. The design introduced with Hub 4, especially the huge bubble, is extremely unpleasant. Especially on small displays like my 12" Notebook. Hopefully the situation is getting better in the upcoming releases.

arnowelzel commented 1 year ago

Now nearly one year has passed and the new "hub 6" will be announced today. However it seems no one has time to fix the visual problems - even at https://conf.nextcloud.com you can see problems in the UI.

Yes, I understand that UI glitches are not a major show stopper - but if these are still present nearly one year after introducing the new UI it leaves the impression that nobody seems to cares at all.

Background of navigation shows strange bright boxes when hovering certain icons in the man toolbar:

Parts of the text is visible in the file list header when scrolling up:

Parts of the scroll bars are cut off and content barely fits inside the content are due to the round corners around the content area:

nmhproitalia commented 11 months ago

I recommend this solution so as not to affect the registration header as well!

header .header-left {

background-color: #454545; }

header .header-right {

background-color: #454545; }

Jieiku commented 10 months ago

I am still on Nextcloud 24.0.12 so that I can avoid the rounded corners, I plan to run this version until nextcloud has a selectable square theme again. Even though it is an old version I have had no problems.

arnowelzel commented 10 months ago

I am still on Nextcloud 24.0.12 so that I can avoid the rounded corners, I plan to run this version until nextcloud has a selectable square theme again. Even though it is an old version I have had no problems.

You should not run an outdated version with known security issues (also see https://www.cvedetails.com/vulnerability-list/vendor_id-15913/Nextcloud.html).

Just use CustomCSS and apply the CSS rules as described above. My current installation with Nextcloud 28.0.1 looks like this:

Since it is possible to add custom CSS using an app, I will maybe create an app for this, so one does not have to maintain custom CSS rules manually.

nursoda commented 10 months ago

THAT would be awesome!

Jieiku commented 10 months ago

That does look really good, and it is consistent between pages? I also make heavy use of the calendar.

Dennis1993 commented 10 months ago

I really don't understand why they introduced the front end with rounded corners. It offers no benefit at all and just wastes space unnecessarily. At the same time, there are display problems everywhere. I think it would make a lot of sense if we rethink this fundamentally and take the old path, so that everything around it is angular and goes all the way to the edge like it did back then. This is much better for usability.

I think an extra app for this is good, but in my opinion it's not the best way. The cloud becomes slower with every additional app and so far NextCloud doesn't exactly shine with performance. We should find a good solution together here :)

Jieiku commented 10 months ago

I was shocked when I upgraded to 25 and seen that, and immediately rolled back to 24, I have stayed on 24 since.

I think some people actually like the rounded look, what is shocking is that they did not also include an option to change the appearance to classic/square, they could have made everyone happy that way.

Dennis1993 commented 10 months ago

There are definitely people who like the round design. Personally, I think the design looks very old-fashioned. In addition, Microsoft Edge now does this too, so that you have double curves.

Since I don't see any advantage, I think the previous variant makes sense (no problems with apps, no unnecessary wasted space that you urgently need because all the pop-ups have been abolished and moved to the sidebar on the right).

It would be good if you left it up to the user to choose what he wanted among the designs and everyone could activate the curves if necessary. I think we should leave the default here as square for the best user experience.

arnowelzel commented 10 months ago

That does look really good, and it is consistent between pages? I also make heavy use of the calendar.

Yes, other apps look the same. This specific instance is currently used by about 70 users and so far I never had any complaints about visual problems. However I did some additional changes for Nextcloud 28 in my instance as well:

These are my current CustomCSS rules which also address issues with some apps like Collectives, Draw.io or OnlyOffice. You need to adjust this for your own needs since I also hide certain elements in the UI which you may want to have like the "recent pages" or URL widgets in Collectives or Markdown text files.

/* Custom CSS for Nextcloud, 2024-01-13, 14:39 CET */

/* Make textarea for Custom CSS bigger */

textarea#theming-customcss-input {
  height: 40em;
}

/* Since Nextcloud 25: Remove rounded corners and margins for content frame */

:root {
  --body-container-margin: 0px;
  --body-container-radius: 0px;
}

/* Since Nextcloud 25: Remove rounded corners in the mobile view */

#content, #app-navigation {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#content, .content {
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:0 !important;
  width:100% !important;
  height: calc(var(--body-height) + var(--body-container-margin)) !important;
}

/* Text editor: Always show scroll bar in richtext editor to avoid jumping content */

.app-collectives .splitpanes__pane-details {
  overflow-y: scroll !important;
}

/* Text editor: Bigger font size for better readibility */

div.ProseMirror p,
div.ProseMirror th,
div.ProseMirror td {
  font-size: 16px;
}

div.ProseMirror code,
div.ProseMirror pre {
  font-size: 14px;
}

/* Text editor: Fix table editing, this rule is provided by the editor app, but somehow overwritten by a global rule */

.text-editor__wrapper div.ProseMirror table {
  width: calc(100% - 50px) !important;
}

/* Text editor: Fix lower margin of info boxes in text editor */

div.ProseMirror .callout__content {
  margin-bottom: -1em;
}

/* Text editor: Hide widgets below URLs

.widgets--list {
  display: none !important;
}

/* Text editor: Adjust spacing below code blocks */

.ProseMirror .code-block {
  margin-bottom: 1em;
}

/* Since Nextcloud 25: Fix visual glitches in the navigation area if no background image is selected */

#app-navigation, .app-navigation {
  backdrop-filter:none !important;
}

/* Since Nextcloud 25: Draw.io without additional scroll bar */

.app-drawio > #app-content {
  overflow:hidden;
}

/* Since Nextcloud 26: view mode toggle in files app has transparent background
   since the header is not full width */

.files-controls {
  width:100%;
}

/* Collectives: Adjust size of title headers in Collective to avoid descenders getting cut off */

.app-collectives input.title {
  height: 43px !important;
  font-size: 30px !important;
}

/* Collectives: fix non-clickable areas in navigation pills on the left */

.app-collectives .app-content-list-item-link {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

/* Collectives: fix emoji button - do not use rounded corners which can cut off the emoji */

.app-collectives .button-emoji-page {
  border-radius: 4px !important;
}

/* Collectives: hide "recent pages" widget */

.app-collectives .recent-pages-widget {
  display: none;
}

/* Collectives: hide URL previews */

.ProseMirror .widgets--list {
  display: none;
}

/* Collectives: ignore clicks on links in editing mode */

.ProseMirror-focused a {
  pointer-events: none;
}

/* Nextcloud 27: fix file picker layout in Collectives, not needed any longer in Nextcloud 28 */

/*
.file-picker__content table {
  width: 100%;
}

.file-picker__name-container {
  display: flex;
  gap: 4px;
}
*/

/* Nextcloud 28: hide additional label for input fields which will just mirror the placeholder */

label.input-field__label {
  display: none;
}

/* Nextcloud 28: limit width of input field for new app password */

.app-name-text-field {
  margin-top: 0 !important;
  max-width: 370px;
}

/* Nextcloud 28: fix button positions in files header */

.files-list__header {
  padding-left: 4px;
}

/* Nextcloud 28: fix footer for public shares */

#body-public footer {
  border-radius: 0;
  margin: 0;
  width: 100%;
  height: 32px;
  background: var(--color-background-plain, var(--color-main-background));
}

#body-public footer p,
#body-public footer p a {
  color: var(--color-primary-element-text);
}

#body-public footer p a:hover {
  text-decoration: underline;
}

/* Nextcloud 28: fix for contact list header to be high enough */

.contacts-list__header {
  min-height: 60px !important;
}

/* Nextcloud 28: fix OnlyOffice app frame to use full height */

#onlyofficeFrame {
  height: calc(100vh + 8px);
}

c0f commented 10 months ago

Another solution is the Unrounded Corners app which, thankfully, is keeping up with Nextcloud releases: https://apps.nextcloud.com/apps/unroundedcorners

arnowelzel commented 10 months ago

Another solution is the Unrounded Corners app which, thankfully, is keeping up with Nextcloud releases: https://apps.nextcloud.com/apps/unroundedcorners

Thanks for the tip. In older versions that app only changed buttons, but it seems it will now also make the whole UI "classic" again.

However - it has the same issue with some applications like OnlyOffice, where the lower border of the frame is not covered (this one of the things I fixed with my own custom CSS rules):

pReya commented 10 months ago

@arnowelzel Would you mind merging/adding your custom styles to "unroundedcorners" app?

arnowelzel commented 10 months ago

@arnowelzel Would you mind merging/adding your custom styles to "unroundedcorners" app?

If that app has a GitHub repository, sure.

nursoda commented 10 months ago

https://github.com/OliverParoczai/nextcloud-unroundedcorners

arnowelzel commented 10 months ago

I really don't understand why they introduced the front end with rounded corners. It offers no benefit at all and just wastes space unnecessarily. At the same time, there are display problems everywhere. I think it would make a lot of sense if we rethink this fundamentally and take the old path, so that everything around it is angular and goes all the way to the edge like it did back then. This is much better for usability.

I think an extra app for this is good, but in my opinion it's not the best way. The cloud becomes slower with every additional app and so far NextCloud doesn't exactly shine with performance. We should find a good solution together here :)

Rounded corners are not something new and dates back to the first Apple MacIntosh in the 1980ies which also had rounded corners for the deskop, because it used a CRT with rounded corners as display device. Also GitHub and other online services nowadays uses round corners for many elements since CSS introduced the border-radius property.

However, having the main content area with rounded corners inside the viewport of a browser makes no sense when having a flat screen which displays things with edged corners. Even for Microsoft Edge there is an option to disable this for full screen display to gain more usable space and to overcome the somewhat strange impression of having a website inside a box with rounded corners on a screen with normal edges.

gohrner commented 8 months ago

@Danielside: Nextcloud 25? Latest Fixes? You know that Nextcloud 25 is not supported any more since four months and does not get any security fixes any more since then? (Or do you have some kind of magic enterprise contract which still provides you with security maintenance for it?)

jancborchardt commented 3 months ago

Hi everyone, we did take this feedback to heart and hope you will be happy to hear that we updated the design a bit for the upcoming release. :)

You can find more details through the linked issues of https://github.com/nextcloud/server/issues/45751, and the finished product is polished as we speak in the bugfixing phase. If you want to get involved with beta-testing and reporting issues that would be amazing → the final release will be mid-September at our Nextcloud Community Conference which you are all invited to. :)

Thanks to everyone! :heart:

nextcloud / server

Allow more customization of the Nextcloud 25 UI theming to get back "classic" style #34727

How to use GitHub

header .header-left {

header .header-right {