Univention Bugzilla – Bug 43528
Fine adjustments of new UCS 4.2 design
Last modified: 2017-04-04 18:28:52 CEST
This bug is a collection of fine adjustments for the new 4.2 design. +++ This bug was initially created as a clone of Bug #42261 +++ The new UMC 4.2 design waits to be implemented.
Created attachment 8422 [details] content from different tab is visible If one tab is locked and a progress bar is shown, that progress bar is also shown at the bottom of different tabs. Example iamge: downloading an UCC image and switching to the computers module
Created attachment 8423 [details] styling issues with a module tab Some issues with the umc module styling: * WHY is there a scrollbar if the content is only in the upper half of the screen? For me this says: "there must be something down there, why else would there be a scrollbar?" * The search button only shows an icon when hovering the button * When an item is selected, the 'more' option is not aligned in the grid header
Issues with object creation wizards: * When clicking 'Next' in a UDM wizard, the wizard 'jumps' on the screen. Seems like another anchor is chosen? * When clicking the final 'create' button in the wizard, the action is not executed, one has to click twice When interacting with the wizard only using keyboard commands, most issues are not present.
From Bug 42261, comment 11: > Created attachment 8417 [details] > ucc image modules > > The ucc images module does not show its.. i dont know the correct wording.. > 'description' on the left of the grid, see screenshot From Bug 42261, comment 12: > Created attachment 8420 [details] > umc module load - style > > When loading a UMC module, the inactive area his highlighted in white, while > the correct content is already shown.
When the session timeout popup appears, the 'OK' button should redirect to the login page.
(In reply to Erik Damrose from comment #5) > When the session timeout popup appears, the 'OK' button should redirect to > the login page. The popup will be removed. It's WIP Bug #42174.
As input fields are filled white on dark background, they should be filled grey on white background (e.g., for dialogs).
We need to use the LiveSearch widget instead of search field with extra search button in most UMC modules. AFAIS, the disabled state of buttons has not been adapted properly so far (there is still some gray gradient).
(In reply to Erik Damrose from comment #2) > Created attachment 8423 [details] > styling issues with a module tab > > Some issues with the umc module styling: > * WHY is there a scrollbar if the content is only in the upper half of the > screen? For me this says: "there must be something down there, why else > would there be a scrollbar?" Dojo changed the styling of hidden panes in StackContainers. They use visibility: hidden instead of display: none which preserve the space the hidden panes occupy. see Bug #43509
* disabled grid buttons/actions are not shown anymore. Maybe because dijitHidden is used there?
The disabled state of tabs in an udm DetailsPage (eg. the 'Groups' tab in user DetailsPage) is not recognizable as disabled.
The right navbar (toggled by the hamburger menu) has an optical feedback (gray->light gray) when hovering over clickable items, except for the 'back' button at the top. I suggest to make the top link (if possible only the left-arrow) also give an optical feedback.
The pop-up messages on the right side don't habe a 'close' button anymore. Although they were always hard to hit, they allowed to "remove tasks done", which I like to do.
@comment13: may be just a visibility issue, if i click on the notification where the button used to be, it still closes, and it has mouseover feedback.
From Bug 42266, comment #2: > The "disabled" flag for menu entries is not evaluated. (E.g. the currently > selected language in the menu should be disabled while it is not).
From Bug 38824, comment 15: > TODO: we also need to move some App Center related code (e.g., css styling) > into univention-web
The software update module cannot be opened
From Bug 42267, comment 6: > [...] > (e) The input fields should have a slight grey background.
The GIF for the login animation needs a white background.
I have adjusted the styling of the login page/dialog. univention-management-console (9.0.43-2): r77105 | Bug #43528: adjust styling of login page univention-web (1.0.29-2): r77105 | Bug #43528: adjust styling of login page
(In reply to Alexander Kläser from comment #20) > I have adjusted the styling of the login page/dialog. > > univention-management-console (9.0.43-2): > r77105 | Bug #43528: adjust styling of login page > > univention-web (1.0.29-2): > r77105 | Bug #43528: adjust styling of login page Apparently, I introduced an error which would let the login process hang indefinitely. This has been fixed now. univention-management-console (9.0.43-3): r77110 | Bug #43528: fix login hanging after submitting + optimize code
Created attachment 8460 [details] Inline dialog used in the App Center installation dialog Dialogs: * We can have "inline" dialogs, e.g. for the installation wizard in the App Center, Self Service, UCS@school wizard, UCC wizard... and maybe others? Inline dialogs are non-modal and offer a frame for pages with few content. * Dialogs (and inline dialogs) should have flat buttons with the default button being colored (in the normal dialogs the color should be the UCS default green) * To unify the look of inline and normal dialogs, we should to remove the dark header + close button according to the GMD style.
Created attachment 8461 [details] Self service We need to adjust the padding in the self service and use the unified style for inline dialogs.
(In reply to Alexander Kläser from comment #22) > * We can have "inline" dialogs, e.g. for the installation wizard in the App > Center, Self Service, UCS@school wizard, UCC wizard... and maybe others? -> UVMM 'Create VM' wizard, office365, gsuite
Created attachment 8462 [details] Grid buttons Grid: * We still have gradient styles for disabled buttons... this needs to be adapted, we might even remove any gradient stylings? * The "more" button is misaligned. * It would be good to have a "N items selected" info at the right side.
Created attachment 8463 [details] Menu with white background Menu: * It would be more friendly to style the menu with white background. * The back button in the sub menu should be aligned with the text entries. * The close button in the menu is missing.
(In reply to Alexander Kläser from comment #26) > Created attachment 8463 [details] > Menu with white background > > Menu: > * It would be more friendly to style the menu with white background. > * The back button in the sub menu should be aligned with the text entries. > * The close button in the menu is missing. We also need to show the currently logged in user and the name of the system in the menu.
Created attachment 8464 [details] Users search Search in modules * We need to have a LiveSearch widget in the UMC modules (in order to have the magnifier icon in the search field). * This might only be a bit tricky for the LDAP navigation module, as there is no search field by default. * The "more" button icon does not work in this context... better would be a plus icon (as round button). * In most UMC modules (definitively the UDM modules), the search fields should always be placed above the grid (and not at the left side). * If there is informative text in a UMC module, I would vote for a help button which links to the documentation.
Created attachment 8465 [details] Setup wizard Setup wizard: * Adjust header background to #787878 (=slightly lighter gray from the icons) * Remove the green line * It would be good to adjust these colors also in the Debian installer if possible...
Created attachment 8466 [details] App Center detail page App Center detail page: * Use white background for details + screenshots * Do not use bold font for headings, but instead 20px + font-weight 500 * Larger paddings between text and headings
Created attachment 8467 [details] Setup wizard (In reply to Alexander Kläser from comment #29) > Created attachment 8465 [details] > Setup wizard > > Setup wizard: > * Adjust header background to #787878 (=slightly lighter gray from the icons) > * Remove the green line > * It would be good to adjust these colors also in the Debian installer if > possible... Setup wizard: * I forgot to mention, that the h1 heading should be aligned to the left as on the mockup (currently it is centered).
(In reply to Alexander Kläser from comment #31) > Setup wizard: > * I forgot to mention, that the h1 heading should be aligned to the left as > on the mockup (currently it is centered). I think this applies more generally: I see this also in statistics, updater, certificate, process view, ... (set via .umc h1)
Created attachment 8473 [details] MultiInput widget (remove + add entry buttons) MultiInput widget: * Flat button to add a new entry (maybe in category color?) * A garbage can icon right to the input fields * Upon hover, show highlighted (darker grey) round circle (cf., GMD icon toggle buttons)
(In reply to Alexander Kläser from comment #27) > (In reply to Alexander Kläser from comment #26) > > Created attachment 8463 [details] > > Menu with white background > > > > Menu: > > * It would be more friendly to style the menu with white background. > > * The back button in the sub menu should be aligned with the text entries. > > * The close button in the menu is missing. > > We also need to show the currently logged in user and the name of the system > in the menu. r 77135 univention-web (1.0.29-3) Bug #43528: * Add username and hostname to umc/widgets/Menu * Adjust styling of umc/widgets/Menu The close button in the menu is still missing
(In reply to Alexander Kläser from comment #29) > Created attachment 8465 [details] > Setup wizard > > Setup wizard: > * Adjust header background to #787878 (=slightly lighter gray from the icons) > * Remove the green line I adjust these styling issues via Bug 43506. univention-system-setup (10.0.7-13): r77143 | Bug #43506: Fix errors and styling for software selection > * It would be good to adjust these colors also in the Debian installer if > possible... This point is still open.
Created attachment 8479 [details] Too much whitespace in join module The join module has too much whitespace in the grid header, especially on a ucs slave, see screenshot
(In reply to Alexander Kläser from comment #25) > Created attachment 8462 [details] > Grid buttons > > Grid: > [...] > * It would be good to have a "N items selected" info at the right side. → See also Bug 43630.
Created attachment 8483 [details] Input field borders I noticed that the color of the 5px vertical border elements of an input field should use darker gray.
(In reply to Alexander Kläser from comment #30) > Created attachment 8466 [details] > App Center detail page > > App Center detail page: > * Use white background for details + screenshots > * Do not use bold font for headings, but instead 20px + font-weight 500 > * Larger paddings between text and headings r 77230 univention-appcenter (6.0.1-46) * Bug #43528: Adjust styling of details and screenshots in the app details page
(In reply to Alexander Kläser from comment #16) > From Bug 38824, comment 15: > > TODO: we also need to move some App Center related code (e.g., css styling) > > into univention-web r 77240 univention-web (1.0.29-7) * Bug #43528: Move styling and code for the gallery in the portal and appcenter into univention-web r 77241 univention-appcenter (6.0.1-47) * Bug #43528: Use the generalized gallery widget from univention-web and remove unused styling r 77242 univention-portal (1.0.6-9) * Bug #43528: Use the generalized gallery widget from univention-web and remove unused styling
(In reply to Alexander Kläser from comment #38) > Created attachment 8483 [details] > Input field borders > > I noticed that the color of the 5px vertical border elements of an input > field should use darker gray. r 77243 univention-web (1.0.29-8) * Bug #43528: Correct wrong color of left and right border of input fields
Created attachment 8487 [details] return to top button blocks regular buttons The 'return to top' button blocks regular buttons in larger wizards. Users cannot read the button text.
The "software update" module has 2 "back" buttons, when an update finished.
(In reply to Erik Damrose from comment #14) > @comment13: may be just a visibility issue, if i click on the notification > where the button used to be, it still closes, and it has mouseover feedback. ACK - managed to hit it today.
The menu on /univention/server-overview/ doesn't contain the hostname. Only the username is displayed with a single "@". Probably we need to either check if the hostname is set or move the initial tools.status() dict into univention-web.
(In reply to Alexander Kläser from comment #33) > Created attachment 8473 [details] > MultiInput widget (remove + add entry buttons) > > MultiInput widget: > * Flat button to add a new entry (maybe in category color?) > * A garbage can icon right to the input fields > * Upon hover, show highlighted (darker grey) round circle (cf., GMD icon > toggle > buttons) r 77274 univention-web (1.0.29-10) * Bug #43528: Adjust styling of multi input fields First draft for the styling of MultiInput fields
Icons in buttons are not within the padding of the text, but before it. The icons (e.g. in appcenter "+" and "shopping cart") are thus to near to the left button border.
r 77286 univention-web (1.0.29-11) * Bug #43528: Adjust styling of Grid header more button r 77287 univention-web (1.0.29-12) * Bug #43528: Adjust styling of wide multi input fields
Created attachment 8491 [details] return to top button - to much space r 77288 univention-web (1.0.29-13) * Bug #43528: Let floating scroll to top button not block module content There is a dom element that adds enough space for the floating button (when it is visible) to not block any module content. But if there were already a lot of whitespace at the bottom of a module it can look weird.
You added tools.isFQDN. Great! Unfortunately, tools.isFQDN('10.200.4.50') returns true; I ended up doing "! isIPAddress()" in my code.
Did you change anything in univention-portal? The tiles are visible and functional, but my Firefox does not show the link. Clicking opens it "magically", but you cannot see what you are about to open.
(In reply to Erik Damrose from comment #32) > (In reply to Alexander Kläser from comment #31) > > Setup wizard: > > * I forgot to mention, that the h1 heading should be aligned to the left as > > on the mockup (currently it is centered). > > I think this applies more generally: I see this also in statistics, updater, > certificate, process view, ... (set via .umc h1) Fixed. univention-web (1.0.29-16): r77307 | Bug #43528: Fix h1 heading alignment
In Chrome 56.0.2924.87 the dark-grey filling of a progressbar in motion is not wide enough, leaving a light-grey border at the bottom.
Created attachment 8493 [details] Owncloud remove button for multi input fields (In reply to Alexander Kläser from comment #33) > Created attachment 8473 [details] > MultiInput widget (remove + add entry buttons) > > MultiInput widget: > * Flat button to add a new entry (maybe in category color?) > * A garbage can icon right to the input fields > * Upon hover, show highlighted (darker grey) round circle (cf., GMD icon > toggle > buttons) See attached an example how ownCloud handles the remove button. They use a smaller icon with light gray color. This works nicely.
r 77315 univention-portal (1.0.6-15) * Bug #43528: Remove title attribute from root dom node of portal categories r 77321 univention-web (1.0.29-18) * Bug #43528: Adjust resizing of AppGallery item names r 77322 univention-portal (1.0.6-16) * Bug #43528: Fix item names of category entries not resizing initially (In reply to Dirk Wiesenthal from comment #51) > Did you change anything in univention-portal? The tiles are visible and > functional, but my Firefox does not show the link. Clicking opens it > "magically", but you cannot see what you are about to open. r 77342 univention-portal (1.0.6-17) * Bug #43528: Use html 'a' tag in PortalGallery instead of actions r 77343 univention-web (1.0.29-21) * Bug #43528: Adjust styling for links in PortalGallery r 77346 univention-web (1.0.29-22) * Bug #43528: Adjust styling of focused links in PortalGallery (In reply to Daniel Tröder from comment #53) > In Chrome 56.0.2924.87 the dark-grey filling of a progressbar in motion is > not wide enough, leaving a light-grey border at the bottom. r 77330 univention-web (1.0.29-20) * Bug #43528: Fix display error of progress bars (In reply to Alexander Kläser from comment #54) > Created attachment 8493 [details] > Owncloud remove button for multi input fields > > (In reply to Alexander Kläser from comment #33) > > Created attachment 8473 [details] > > MultiInput widget (remove + add entry buttons) > > > > MultiInput widget: > > * Flat button to add a new entry (maybe in category color?) > > * A garbage can icon right to the input fields > > * Upon hover, show highlighted (darker grey) round circle (cf., GMD icon > > toggle > > buttons) > > See attached an example how ownCloud handles the remove button. They use a > smaller icon with light gray color. This works nicely. r 77328 univention-web (1.0.29-19) * Bug #43528: Adjust styling of multi input fields add and remove button
App tiles in the "Installed Applications" category now resize the title of Apps. The name of the Samba 4 AD App is so long, the title is now tiny (like 6px).
With Bug 43658 - "Adjust notifications to new design" tagged to 4.2 errata, we should at least get the Close button for the current notifications back (comment 13+14)
Another thing that I observed... with a width < 340px, the univention logo disappears. We could replace "(u) univention" with a simple "(u)" on smaller screens.
In Chrome 56.0.2924.87 (64-bit) the progress bar (observed in the AppCenter) is vertically centered to the complete web page and not to what's currently in the users view. This results in a grayed page that looks hanging, although the progress bar is simply displayed much more downwards.
I adjusted the regular expression used for tools.isFQDN(). univention-web (1.0.31-5): r77437 | Bug #43528: fix tools.isFQDN() (used to accept IP addresses)
Created attachment 8500 [details] page offset added by app details Appcenter: When clicking on a screenshot in app details to enlarge it, an offset is added to the whole page, making the 'home' button disappear and adding a border on the right side
(In reply to Daniel Tröder from comment #13) > The pop-up messages on the right side don't habe a 'close' button anymore. > Although they were always hard to hit, they allowed to "remove tasks done", > which I like to do. I fixed this. We had some problems in the build process as stylus was used in two steps which seemed to result in problems with resolving the URLs. Now umc.css is compiled in one step. The close icon is visible again. I also rearranged the Makefile to make it clearer and more robust. univention-web (1.0.31-10): r77455 | Bug #43528: Adjust Makefile to ensure correct image paths
(In reply to Erik Damrose from comment #61) > Created attachment 8500 [details] > page offset added by app details > > Appcenter: When clicking on a screenshot in app details to enlarge it, an > offset is added to the whole page, making the 'home' button disappear and > adding a border on the right side This is another side-effect of the 'dijitHidden' change (Bug #43509) Hidden module header buttons cause overflow on the x-axis. The x-axis scrollbar is hidden so in most modules with hidden buttons this is not a problem.
Created attachment 8501 [details] password placeholder alignment When a session timeout occurs, the placeholder 'Password' text in the dialog is misaligned, which is best perceived when it is focused
(In reply to Alexander Kläser from comment #62) > (In reply to Daniel Tröder from comment #13) > > The pop-up messages on the right side don't habe a 'close' button anymore. > I fixed this. > univention-web (1.0.31-10): > r77455 | Bug #43528: Adjust Makefile to ensure correct image paths I just saw it in 11.0.31-11. Looks good!
When a "new page" is loaded (for example when a module is opened), the view stays at the vertical position it was in before. Expected behavior would be to be moved to the top. Especially if the new page is shorter that the old one, the user is left looking at what seems a blank page (and then has to scroll up to find what he's looking for).
Created attachment 8502 [details] Module entries with long descriptions Seems the resizing is not done properly anymore.
Created attachment 8503 [details] Grid header in misterious circumstances
There are often 2 standby animations e.g. when opening a partition in the user quota module.
r 77400 univention-web (1.0.29-26) * Bug #43528: Fix onClick event for SearchBox + adjust grid view of users r 77401 * Bug #43528: Show icon to toggle the grid view in users/user module + move submit button into textbox in udm search forms (when applicable) r 77448 univention-web (1.0.31-7) * Bug #43528: Update inline label of text boxes when the value is set via _setValueAttr r 77449 univention-management-console-module-udm (7.0.7-2) * Bug #43528: Reset udm search form values when toggling back to simple search + fix dependency error between search form widgets r 77450 univention-web (1.0.31-8) * Bug #43528: Adjust alignment of search icon in SearchBox widget r 77451 univention-web (1.0.31-9) * Bug #43528: Let submit button of SearchForm be initially hideable r 77457 univention-web (1.0.31-12) * Bug #43528: Adjust styling of SearchBox + adjust styling of ComboBox arrow r 77458 univention-printserver (10.0.0-4) * Bug #43528: Use SearchBox and hide extra search button r 77459 univention-management-console-module-top (6.0.0-3) * Bug #43528: Use SearchBox and hide extra search button r 77461 univention-management-console-module-services (6.0.0-2) * Bug #43528: Use SearchBox and hide extra search button r 77467 univention-management-console-module-ucr (6.0.1-3) * Bug #43528: Use SearchBox and hide extra search button r 77484 univention-web (1.0.31-16) * Bug #43528: Make SearchBox disableable and refocus when search icon is clicked + styling of disabled TextBox r 77485 univention-management-console-module-udm (7.0.7-3) * Bug #43528: Adjust styling of simple search form r 77487 univention-appcenter (6.0.1-52) * Bug #43528: Adjust search form for package management
(In reply to Florian Best from comment #69) > There are often 2 standby animations e.g. when opening a partition in the > user quota module. AFAIS this used to be like that in UCS 4.1, as well.
(In reply to Erik Damrose from comment #64) > Created attachment 8501 [details] > password placeholder alignment > > When a session timeout occurs, the placeholder 'Password' text in the dialog > is misaligned, which is best perceived when it is focused r 77502 univention-web (1.0.31-17) * Bug #43528: Adjust styling of PasswordBox placeholders
I added a link to /univention which is displayed just above the login/logout menu entry. univention-server-overview (0.0.3-3): r77581 | Bug #43528: Move 'back to start site' menu entry into univention-web-js univention-web (1.0.36-3): r77582 | Bug #43528: Remove menu entry "Help / UCS start site" r77581 | Bug #43528: Move 'back to start site' menu entry into univention-web-js
r 77601 univention-web (1.0.36-4) * Bug #43528: Adjust _resizeItemNames method in GalleryPane
When using the keyboard to switch to a different button to click on (e.g. in system-setup), there is no highlight of the currently active button/item. One has to guess what will happen when pressing <Enter>
r 77705 univention-web (1.0.36-12) * Bug #43528: Adjust styling for icons in buttons
Created attachment 8550 [details] Whitespace issue in appcenter popups When displaying the REAME as a popup dialog in the appcenter, there is too much whitespace between the text elements, see screenshots. May be true for other dialogs as well?
Created attachment 8584 [details] logo scaling issue In IE11 (and 10): The Univention logo on the login page is not scaled correctly, see attached screenshot.
I adjusted the layout in various modules (esp. UDM or UCR) to use the full page width. univention-web (1.0.39-14): r77996 | Bug #43528: Add flag fullWidth to Page + adjust styling of tiles univention-management-console-module-udm (7.0.9-2): r77997 | Bug #43528: Use full width for grids by default univention-management-console-module-ucr (6.0.1-4): r77999 | Bug #43528: Use full width for grids by default univention-management-console-module-top (6.0.1-1): r78000 | Bug #43528: Use full width for grids by default univention-management-console-module-services (6.0.0-3): r78001 | Bug #43528: Use full width for grids by default univention-join (9.0.3-2): r78002 | Bug #43528: Use full width for grids by default univention-appcenter (6.0.3-17): r78003 | Bug #43528: Use full width for repository / packages module univention-system-setup (10.0.9-10): r78004 | Bug #43528: Use full width for * settings modules univention-quota (11.0.0-4): r78005 | Bug #43528: Use full width for grids + adjust search box univention-management-console-module-diagnostic (3.0.0-3): r78006 | Bug #43528: Use full width for module
Most of the mentioned points have been addressed now. For the following open points, I created new bugs to be able to handle them separately: Bug 43999 - Adjust styling of dialogs Bug 44000 - Improve vertical positioning of progressbar/standby animation Bug 44001 - Focused buttons are not highlighted Bug 44002 - Too much whitespace in App Center dialogs Bug 44003 - UCS logo is not scaled correctly on login page This bug can be closed now.
Added changelog entry. changelog-4.2-0.xml: r78045 | Bug #43528: added changelog entry
UCS 4.2 has been released: https://docs.software-univention.de/release-notes-4.2-0-en.html https://docs.software-univention.de/release-notes-4.2-0-de.html If this error occurs again, please use "Clone This Bug".