Bug 57083 - update look&feel of UIs with UCS 5.2
Summary: update look&feel of UIs with UCS 5.2
Status: CLOSED FIXED
Alias: None
Product: UCS
Classification: Unclassified
Component: Portal
Version: UCS 5.2
Hardware: Other Linux
: P5 normal
Target Milestone: UCS 5.2
Assignee: Christian Castens
QA Contact: Johannes Keiser
URL: https://git.knut.univention.de/groups...
Keywords:
Depends on:
Blocks:
 
Reported: 2024-02-23 13:51 CET by Christian Castens
Modified: 2025-02-05 15:08 CET (History)
2 users (show)

See Also:
What kind of report is it?: Development Internal
What type of bug is this?: ---
Who will be affected by this bug?: ---
How will those affected feel about the bug?: ---
User Pain:
Enterprise Customer affected?:
School Customer affected?:
ISV affected?:
Waiting Support:
Flags outvoted (downgraded) after PO Review:
Ticket number:
Bug group (optional):
Customer ID:
Max CVSS v3 score:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Christian Castens univentionstaff 2024-02-23 13:51:32 CET
This bug contains all contents of epic 491:
https://git.knut.univention.de/groups/univention/-/epics/491

For UCS 5.2 various Portal/UMC UI optimizations are planned which will be released under this bug.
Comment 1 Christian Castens univentionstaff 2024-02-26 15:28:12 CET
list of all changes:

feat(doc): update list of supported browser versions -> Issue #2059


feat(umc): add UMC module logo next to the title of the UMC module header -> Issue #2068


feat(portal): change the style of the Portal's sidebar
                  * make all ModalWrapper related fade transitions work
                  * make animations slightly faster
                  * change focus behavior of interactive elements
                  * add dividers between sections
                  * change style of buttons
                  * add hover effects for interactive elements
                  * change style of edit-mode indicator


feat(portal): change the style of the Portal's folders, tiles and scrollbars -> Issues #2058, #2061, #2062, #2064
                  * move folder scrollbar into folder
                  * change the style of all scrollbars in chromium-based
                    browsers
                  * remove shadows from folder titles to make them look
                    exactly like the titles from the regular portal tiles
                  * add spacing between title and folder when folder is
                    opened
                  * add tile/folder hover animations
                  * add tile/folder fade-in animations on page load
                  * increase font-weight for tile/folder titles


feat(portal): change the style of the Portal's header tabs -> Issue #2063
                  * reduce size of logos
                  * change shape, color and hover animation
                  * separate tabs from each other
                  * change focus behavior of interactive elements
                  * reduce thickness of the portal's iframe border


feat(umc): change the style of the UMC header -> Issue #2069
                  * show UMC header only if there are notifications or open UMC tabs
                  * add transparency
                  * change style of UMC tabs
                  * add subtle animations
                  * make all changes only apply to the UMC when opened from
                    the Portal - the "legacy UMC" remains unchanged
Comment 4 Christian Castens univentionstaff 2024-03-25 17:56:42 CET
further improvements:    
* fix scroll position when switching tabs and entering/exiting edit-mode
* fix flicker when switching from tabs to portal overview
* fix iframe tabs from being overwritten when closing other iframe tabs
* hide announcements in edit-mode
* add various dedicated portal css variables
* add various adjustments to the style of elements
* hide header tabs and go to portal main page when edit-mode is entered
* make save button in edit-mode fixed to the bottom of the
  sidenavigation
* make the header logo keep its aspect ratio
* fix shifting of the background and tiles when the scrollbar
  appears/disappears. (also removed previous, only partially working
  workaround for that)
* remove uncommented code and unused or redundant css and js
Comment 6 Christian Castens univentionstaff 2024-03-26 14:03:25 CET
Successful build
Package: univention-portal
Version: 6.0.6
Branch: ucs_5.2-0

Successful build
Package: univention-web
Version: 6.0.3
Branch: ucs_5.2-0

Successful build
Package: univention-management-console
Version: 14.0.10
Branch: ucs_5.2-0



univention-web (6.0.3)
f9770ac7321d | feat(portal): further improvements of the portal for UCS 5.2

univention-web (6.0.2)
06843a12d301 | feat(umc): add UMC module logo next to the title of the UMC module header
9e556ded7c34 | feat(umc): change the style of the UMC header

univention-portal (6.0.6)
f9770ac7321d | feat(portal): further improvements of the portal for UCS 5.2

univention-portal (6.0.4)
44d1b3409d6d | feat(portal): refine style of portal
0ef7737dded9 | feat(portal): change the style of the Portal's sidebar
ea6934ae0549 | feat(portal): change the style of the Portal's folders, tiles and scrollbars
8760f968c5a4 | feat(portal): change the style of the Portal's header tabs
9e556ded7c34 | feat(umc): change the style of the UMC header

univention-management-console (14.0.4)
06843a12d301 | feat(umc): add UMC module logo next to the title of the UMC module header
9e556ded7c34 | feat(umc): change the style of the UMC header

univention-management-console (14.0.10)
f9770ac7321d | feat(portal): further improvements of the portal for UCS 5.2

ucs-test (12.0.28)
f9770ac7321d | feat(portal): further improvements of the portal for UCS 5.2
Comment 7 Johannes Keiser univentionstaff 2024-03-26 16:19:44 CET
QAed against min supported browser versions:
Firefox 115
Chrome 120
Edge 120
Safari 15.6


QA of commit entries
[*] * add various dedicated portal css variables
[*] * prevent css files from being loaded twice
[*] * add various adjustments to the style of elements
[*] * hide header tabs and go to portal main page when edit-mode is entered
[*] * make save button in edit-mode fixed to the bottom of the sidenavigation
[*] * make the header logo keep its aspect ratio
[*] * fix shifting of the background and tiles when the scrollbar appears/disappears. (also removed previous, only partially working workaround for that)
[*] * remove uncommented code and unused or redundant css
[*] * add property description for header='try-hide'

[*] * reduce size of logos
[*] * change shape, color and hover animation
[*] * separate tabs from each other
[*] * change focus behavior of interactive elements
[*] * reduce thickness of the portal's iframe border

[*] * move folder scrollbar into folder
[*] * change the style of all scrollbars in chromium-based browsers
[*] * remove shadows from folder titles to make them look exactly like the titles from the regular portal tiles
[*] * add spacing between title and folder when folder is opened
[*] * add tile/folder hover animations
[*] * add tile/folder fade-in animations on page load
[*] * increase font-weight for tile/folder titles

[*] * make all ModalWrapper related fade transitions work
[*] * make animations slightly faster
[*] * change focus behavior of interactive elements
[*] * add dividers between sections
[*] * change style of buttons
[*] * add hover effects for interactive elements
[*] * change style of edit-mode indicator

umcheader
[*] * show UMC header only if there are notifications or open UMC tabs
[*] * add transparency
[*] * change style of UMC tabs
[*] * add subtle animations
[*] * make all changes only apply to the UMC when opened from the Portal - the "legacy UMC" remains unchanged

Additional QA
[*] initial tile animation
[*] tile hover effect
[*] header
  [*] logo
    [*] vertical
    [*] horizontal
    [*] quadratic
    [*] no logo
  [*] buttons keyboard navigation
[*] check scrollbar lock behaviour
  [*] with scrollbar
    [*] header menus
    [*] folders
    [*] modals (both levels)
  [*] without scrollbar
    [*] header menus
    [*] folders
    [*] modals (both levels)
[*] folder/menu transitions (with and without background)
[*] modal size on small/big screens
[*] notifications style
[*] editmodesidenav style
[*] announcements style
[*] iframe tabs style
[*] choose tabs style
[*] dark/light theme

OK: changelog
OK: builds
OK: install/upgrade

OK: Portal tests 86_browser/18{0,1,2,3,4,5}...
~OK: 83_self_service/11_test_frontend_translations.py
  Flaky due to loading backend data.