wwe
October 23, 2022, 7:33pm
6
rounded corners is very controversial topic:
Sorry for the harsh reaction - but please try to understand it anyway.
I just installed the update to NC 25 and realized that the whole UI now as big round corners?
What use do these rounded corners have?
Even in apps like office integrations or calender with a scroll bar at the right side there are big round corners which even cut off the scroll bar!
Also why the background image? What use does this have?
Also why does the main content area have margins around it? There is absolutely no be…
it would be great major UI changes are not “one-way” but there is always an option to retain “previous” view. Lot of of people (including me) don’t like rounded corner, round images etc.
Please pay attention to
opened 03:56PM - 21 Oct 22 UTC
enhancement
0. Needs triage
feature: theming
25-feedback
<!--
Thanks for reporting issues back to Nextcloud!
Note: This is the **issu… e tracker of Nextcloud**, please do NOT use this to get answers to your questions or get help for fixing your installation. This is a place to report bugs to developers, after your server has been debugged. You can find help debugging your system on our home user forums: https://help.nextcloud.com or, if you use Nextcloud in a large organization, ask our engineers on https://portal.nextcloud.com. See also https://nextcloud.com/support for support options.
Nextcloud is an open source project backed by Nextcloud GmbH. Most of our volunteers are home users and thus primarily care about issues that affect home users. Our paid engineers prioritize issues of our customers. If you are neither a home user nor a customer, consider paying somebody to fix your issue, do it yourself or become a customer.
Guidelines for submitting issues:
* Please search the existing issues first, it's likely that your issue was already reported or even fixed.
- Go to https://github.com/nextcloud and type any word in the top search/command bar. You probably see something like "We couldn’t find any repositories matching ..." then click "Issues" in the left navigation.
- You can also filter by appending e. g. "state:open" to the search string.
- More info on search syntax within github: https://help.github.com/articles/searching-issues
* This repository https://github.com/nextcloud/server/issues is *only* for issues within the Nextcloud Server code. This also includes the apps: files, encryption, external storage, sharing, deleted files, versions, LDAP, and WebDAV Auth
* SECURITY: Report any potential security bug to us via our HackerOne page (https://hackerone.com/nextcloud) following our security policy (https://nextcloud.com/security/) instead of filing an issue in our bug tracker.
* The issues in other components should be reported in their respective repositories: You will find them in our GitHub Organization (https://github.com/nextcloud/)
-->
### How to use GitHub
* Please use the đź‘Ť [reaction](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) 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"](https://apps.nextcloud.com/apps/theming_customcss) 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.
and let the users to decide which style is preferred.
Based on telemetry you could stop support for unpopular designs later .
2 Likes