Bug 36291 - Fine tuning of UMC design
Fine tuning of UMC design
Status: CLOSED FIXED
Product: UCS
Classification: Unclassified
Component: UMC - Domain management (Generic)
UCS 4.0
Other Linux
: P5 enhancement (vote)
: UCS 4.0-0-errata
Assigned To: Johannes Keiser
Florian Best
:
Depends on: 35654
Blocks: 37730
  Show dependency treegraph
 
Reported: 2014-10-24 09:51 CEST by Florian Best
Modified: 2015-02-09 13:10 CET (History)
5 users (show)

See Also:
What kind of report is it?: ---
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): Design
Max CVSS v3 score:


Attachments
vertical scrollbar MultiObjectSelect (44.97 KB, image/png)
2014-10-24 09:52 CEST, Florian Best
Details
Users/user account tab - alignment MultiInput remove button (18.78 KB, image/png)
2014-10-24 09:53 CEST, Florian Best
Details
label pane of policies should be on top (65.05 KB, image/png)
2014-10-24 09:54 CEST, Florian Best
Details
alignment of add policy button (57.44 KB, image/png)
2014-10-24 09:55 CEST, Florian Best
Details
label pane of permission flags should be on top (51.70 KB, image/png)
2014-10-24 09:56 CEST, Florian Best
Details
margin-top on share-advanced settings tab (31.28 KB, image/png)
2014-10-24 09:57 CEST, Florian Best
Details
general alignment of printers and required flag on empty label panes (53.94 KB, image/png)
2014-10-24 09:58 CEST, Florian Best
Details
label pane of policies should be on top (70.87 KB, image/png)
2014-10-24 09:59 CEST, Florian Best
Details
nagios settings alignment (54.62 KB, image/png)
2014-10-24 09:59 CEST, Florian Best
Details
DHCP search input field (27.23 KB, image/png)
2014-10-24 10:13 CEST, Florian Best
Details
DNS alignment / size classes (42.12 KB, image/png)
2014-10-24 10:14 CEST, Florian Best
Details
policy reference button with iconClass (30.67 KB, image/png)
2014-10-24 10:14 CEST, Florian Best
Details
radiobutton text alignment → Bug #36321 (64.93 KB, image/png)
2014-10-24 10:15 CEST, Florian Best
Details
not indented (64.60 KB, image/png)
2014-10-24 10:58 CEST, Florian Best
Details
Bug #36457 checkbox under submit button (52.42 KB, image/png)
2014-10-24 10:59 CEST, Florian Best
Details
screenshot (183.93 KB, image/png)
2015-01-27 09:25 CET, Florian Best
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Florian Best univentionstaff 2014-10-24 09:51:09 CEST
+++ This bug was initially created as a clone of Bug #35654 +++

The UMC design should be revised with UCS 4.0.
Comment 1 Florian Best univentionstaff 2014-10-24 09:52:39 CEST
Created attachment 6213 [details]
vertical scrollbar MultiObjectSelect

probably because of the checkboxes → they should be removed in MultiObjectSelect as they don't have a function there.
Comment 2 Florian Best univentionstaff 2014-10-24 09:53:59 CEST
Created attachment 6214 [details]
Users/user account tab - alignment MultiInput remove button
Comment 3 Florian Best univentionstaff 2014-10-24 09:54:48 CEST
Created attachment 6215 [details]
label pane of policies should be on top
Comment 4 Florian Best univentionstaff 2014-10-24 09:55:27 CEST
Created attachment 6216 [details]
alignment of add policy button
Comment 5 Florian Best univentionstaff 2014-10-24 09:56:16 CEST
Created attachment 6217 [details]
label pane of permission flags should be on top
Comment 6 Florian Best univentionstaff 2014-10-24 09:57:00 CEST
Created attachment 6218 [details]
margin-top on share-advanced settings tab
Comment 7 Florian Best univentionstaff 2014-10-24 09:58:05 CEST
Created attachment 6219 [details]
general alignment of printers and required flag on empty label panes
Comment 8 Florian Best univentionstaff 2014-10-24 09:59:10 CEST
Created attachment 6220 [details]
label pane of policies should be on top

better screenshot for attachment 6215 [details]
Comment 9 Florian Best univentionstaff 2014-10-24 09:59:41 CEST
Created attachment 6221 [details]
nagios settings alignment
Comment 10 Florian Best univentionstaff 2014-10-24 10:13:28 CEST
Created attachment 6222 [details]
DHCP search input field
Comment 11 Florian Best univentionstaff 2014-10-24 10:14:00 CEST
Created attachment 6223 [details]
DNS alignment / size classes
Comment 12 Florian Best univentionstaff 2014-10-24 10:14:50 CEST
Created attachment 6224 [details]
policy reference button with iconClass
Comment 13 Florian Best univentionstaff 2014-10-24 10:15:32 CEST
Created attachment 6225 [details]
radiobutton text alignment → Bug #36321
Comment 14 Florian Best univentionstaff 2014-10-24 10:55:15 CEST
labelPosition of Text, UnixAccessRights*, MultiInput has been moved into the 'top' → r54896
Comment 15 Florian Best univentionstaff 2014-10-24 10:58:46 CEST
Created attachment 6226 [details]
not indented
Comment 16 Florian Best univentionstaff 2014-10-24 10:59:08 CEST
Created attachment 6227 [details]
Bug #36457 checkbox under submit button
Comment 17 Alexander Kläser univentionstaff 2014-10-24 16:52:53 CEST
(In reply to Florian Best from comment #13)
> Created attachment 6225 [details]
> radiobutton text alignment

This should be fine now.
Comment 18 Alexander Kläser univentionstaff 2014-10-24 17:45:55 CEST
(In reply to Florian Best from comment #11)
> Created attachment 6223 [details]
> DNS alignment / size classes

Fixed.

univention-management-console-frontend-theme (0.0.69-1):
* Bug #36291: fixed handling of sizing for ComplexInput/MultiInput

univention-management-console-frontend (4.1.73-1):
* Bug #36291: fixed handling of sizing + labels for ComplexInput/MultiInput
Comment 19 Alexander Kläser univentionstaff 2014-10-24 17:47:55 CEST
(In reply to Florian Best from comment #7)
> Created attachment 6219 [details]
> general alignment of printers and required flag on empty label panes

fixed.
Comment 20 Alexander Kläser univentionstaff 2014-10-24 17:55:54 CEST
(In reply to Florian Best from comment #9)
> Created attachment 6221 [details]
> nagios settings alignment

fixed.

univention-directory-manager-modules (10.0.20-1):
Bug #36291
* adjust sizes of complex syntaxes
* adjust layout of nagios/service UDM object
Comment 21 Alexander Kläser univentionstaff 2014-10-30 09:19:36 CET
It seems that only the following issues remain.

(In reply to Florian Best from comment #2)
> Created attachment 6214 [details]
> alignment MultiInput remove button

MultiInput widget with large label: Could be fixed with a larger size or smaller text.
IMHO no blocker.

(In reply to Florian Best from comment #4)
> Created attachment 6216 [details]
> alignment of add policy button

UDM add plolicy button.
IMHO no blocker.

(In reply to Florian Best from comment #12)
> Created attachment 6224 [details]
> policy reference button with iconClass

UDM tab for policy reference: The icon is there, SVG is only too large. A background-size=16px would do the job, maybe something to add in general in umc/tools:getIconClass() for SVG graphics. We could also replace PNGs in the Grid with SVGs (I am not sure whether we have SVGs for all icons, though).
This should be fixed, as well.

(In reply to Florian Best from comment #15)
> Created attachment 6226 [details]
> not indented

UCC wizard: The indentation + alignment is broken.
This should be fixed

(In reply to Florian Best from comment #16)
> Created attachment 6227 [details]
> checkbox under submit button

Repository settings: The checkbox should go above the submit button.
IMHO no blocker.
Comment 22 Alexander Kläser univentionstaff 2014-10-31 20:34:08 CET
(In reply to Alexander Kläser from comment #21)
> ...
> (In reply to Florian Best from comment #15)
> > Created attachment 6226 [details]
> > not indented
> 
> UCC wizard: The indentation + alignment is broken.
> This should be fixed
> ...

I opened Bug 36373 for this part.
The rest can be done as erratum.
Comment 23 Alexander Kläser univentionstaff 2014-11-03 12:23:19 CET
From Bug 35654, comment #7:
> Created attachment 6280 [details]
> missing max-height for dialog

Missing max-height property in UMC module "Software update".
Comment 24 Florian Best univentionstaff 2014-11-05 17:00:06 CET
Comment on attachment 6227 [details]
Bug #36457 checkbox under submit button

Bug #36457 was created for attachment 6227 [details] - marking it as obsolete to use that bug.
Comment 25 Florian Best univentionstaff 2014-11-13 11:31:59 CET
There is always a request to 
https://*/univention-management-console/js/dijit/themes/umc/images/spriteArrows.png
which does not exists.
Comment 26 Alexander Kläser univentionstaff 2014-11-17 12:03:17 CET
(In reply to Florian Best from comment #6)
> Created attachment 6218 [details]
> margin-top on share-advanced settings tab

This might be correct by switching the CSS rule

.umc .dijitTitlePane {
  margin-top: 3em;
}

to margin-bottom instead.
Comment 27 Johannes Keiser univentionstaff 2014-12-04 17:12:25 CET
r56484

univention-management-console-frontend-theme (0.0.88-2) 
* Added max-height to the software update dialog
* aligned buttons with inputfields in LabelPanes
Comment 28 Alexander Kläser univentionstaff 2014-12-05 12:13:39 CET
YAML file entry:
>  * The Upgrade dialog in the "Software update" module now has an
>    maximum height.

Suggestion:
>  * The dialogue showing the list of packages to be updated/installed
>    in the "Software update" module now is limited in its maximum height.
Comment 29 Alexander Kläser univentionstaff 2014-12-05 12:18:11 CET
Another YAML entry:
> * The warning if IE <= 8 is beeing used now lists all supported browsers.
>   If an outdated brwoser is beeing used a message will be shown in the 
>   login dialog. A notification after the login will no longer show up.
> * The icon on the policy reference button is now shown

Minor adaptations and typo fixes:
> * A warning is displayed when using Internet Explorer in version <= 8
>   along with a list of all supported browsers.
> * If an outdated browser is being used, a message will be shown in the 
>   login dialogue. A notification after the login will no longer show up.
> * The icon on the policy reference button is now shown.
Comment 30 Johannes Keiser univentionstaff 2015-01-08 18:04:02 CET
r57204

univention-management-console-frontend-theme (0.0.88-4)

Bug #36291: adjusted styling of the MultiObjectSelect so it adapts to
 to the width of the screen
Comment 31 Johannes Keiser univentionstaff 2015-01-08 18:08:19 CET
Included YAML changes from comment #28 and comment #29
Comment 32 Florian Best univentionstaff 2015-01-09 14:24:52 CET
(In reply to Florian Best from comment #6)
> Created attachment 6218 [details]
> margin-top on share-advanced settings tab
REOPEN: this is not done yet.

The rest seems to be okay (did no code review).
Comment 33 Johannes Keiser univentionstaff 2015-01-15 13:13:34 CET
(In reply to Florian Best from comment #6)
> Created attachment 6218 [details]
> margin-top on share-advanced settings tab

Fixed:

r57332
univention-management-console-frontend-theme (0.0.88-6)

* Bug #36291: Changed margin-top for Titlepanes to margin-bottom
Comment 34 Alexander Kläser univentionstaff 2015-01-19 14:42:41 CET
Most changes are really good! I just could spot minor things...

(In reply to Alexander Kläser from comment #21)
> ...
> (In reply to Florian Best from comment #2)
> > Created attachment 6214 [details]
> > alignment MultiInput remove button
> 
> MultiInput widget with large label: Could be fixed with a larger size or
> smaller text.
> IMHO no blocker.

→ OK, alignment of button has been adjust, this looks great!

> (In reply to Florian Best from comment #4)
> > Created attachment 6216 [details]
> > alignment of add policy button
> 
> UDM add plolicy button.
> IMHO no blocker.

→ OK, change for the above problem fixes this, as well :) !

(In reply to Alexander Kläser from comment #21)
> ...
> (In reply to Florian Best from comment #12)
> > Created attachment 6224 [details]
> > policy reference button with iconClass
> 
> UDM tab for policy reference: The icon is there, SVG is only too large. A
> background-size=16px would do the job, maybe something to add in general in
> umc/tools:getIconClass() for SVG graphics. We could also replace PNGs in the
> Grid with SVGs (I am not sure whether we have SVGs for all icons, though).
> This should be fixed, as well.

→ OK, icons look fine now, cool!

(In reply to Alexander Kläser from comment #22)
> (In reply to Alexander Kläser from comment #21)
> > ...
> > (In reply to Florian Best from comment #15)
> > > Created attachment 6226 [details]
> > > not indented
> > 
> > UCC wizard: The indentation + alignment is broken.
> > This should be fixed
> > ...
> 
> I opened Bug 36373 for this part.
> The rest can be done as erratum.

→ OK, handled via Bug #36373.

(In reply to Alexander Kläser from comment #21)
> ...
> (In reply to Florian Best from comment #16)
> > Created attachment 6227 [details]
> > checkbox under submit button
> 
> Repository settings: The checkbox should go above the submit button.
> IMHO no blocker.

→ OK, handled via Bug #36457.

(In reply to Alexander Kläser from comment #23)
> From Bug 35654, comment #7:
> > Created attachment 6280 [details]
> > missing max-height for dialog
> 
> Missing max-height property in UMC module "Software update".

Referring to r56484:
+.umc .dijitDialogPaneContent .umcText {
+	max-height: 400px;
+	overflow: auto;
+	//white-space: pre;
+}

I think it is not a good idea to set a generic max-height on umcText elements. I this case, I would rather suggest to set the max-height property in the specific Text widget in the updater.
→ REOPEN

(In reply to Florian Best from comment #25)
> There is always a request to 
> https://*/univention-management-console/js/dijit/themes/umc/images/
> spriteArrows.png
> which does not exists.

→ OK, seems to be fine, I could not find any erroneous requests.

(In reply to Alexander Kläser from comment #26)
> (In reply to Florian Best from comment #6)
> > Created attachment 6218 [details]
> > margin-top on share-advanced settings tab
> 
> This might be correct by switching the CSS rule
> 
> .umc .dijitTitlePane {
>   margin-top: 3em;
> }
> 
> to margin-bottom instead.

Looks good, however, on the policies subtab there is now quite a lot of margin. Could you have a look at this, please (see screenshot below).
→ REOPEN

(In reply to Johannes Keiser from comment #30)
> r57204
> 
> univention-management-console-frontend-theme (0.0.88-4)
> 
> Bug #36291: adjusted styling of the MultiObjectSelect so it adapts to
>  to the width of the screen

Cool! The problem still persists for MultiSelect widgets (see screenshot below). Could you extend it for this widget?
→ REOPEN

(In reply to Florian Best from comment #6)
> Created attachment 6218 [details]
> margin-top on share-advanced settings tab

→ OK, looks good.
Comment 35 Alexander Kläser univentionstaff 2015-01-20 12:09:45 CET
(In reply to Alexander Kläser from comment #34)
> ...
> (In reply to Alexander Kläser from comment #23)
> > From Bug 35654, comment #7:
> > > Created attachment 6280 [details]
> > > missing max-height for dialog
> > 
> > Missing max-height property in UMC module "Software update".
> 
> Referring to r56484:
> +.umc .dijitDialogPaneContent .umcText {
> +	max-height: 400px;
> +	overflow: auto;
> +	//white-space: pre;
> +}
> 
> I think it is not a good idea to set a generic max-height on umcText
> elements. I this case, I would rather suggest to set the max-height property
> in the specific Text widget in the updater.
> → REOPEN

I opened Bug 37573, as this is updater specific.
Comment 36 Johannes Keiser univentionstaff 2015-01-21 18:58:23 CET
> (In reply to Alexander Kläser from comment #26)
> > (In reply to Florian Best from comment #6)
> > > Created attachment 6218 [details]
> > > margin-top on share-advanced settings tab
> > 
> > This might be correct by switching the CSS rule
> > 
> > .umc .dijitTitlePane {
> >   margin-top: 3em;
> > }
> > 
> > to margin-bottom instead.
> 
> Looks good, however, on the policies subtab there is now quite a lot of
> margin. Could you have a look at this, please (see screenshot below).
> → REOPEN
>
> (In reply to Johannes Keiser from comment #30)
> > r57204
> > 
> > univention-management-console-frontend-theme (0.0.88-4)
> > 
> > Bug #36291: adjusted styling of the MultiObjectSelect so it adapts to
> >  to the width of the screen
> 
> Cool! The problem still persists for MultiSelect widgets (see screenshot
> below). Could you extend it for this widget?
> → REOPEN
>

Fixed:

r57452
univention-management-console-frontend-theme (0.0.88-7)

* removed margin-bottom for the last-child of the TitlePanes
* adjusted sytling of MultiSelect box so it adapts to the width of the screen

YAML: r57453
Comment 37 Alexander Kläser univentionstaff 2015-01-22 13:35:29 CET
(In reply to Alexander Kläser from comment #34)
> ...
> Referring to r56484:
> +.umc .dijitDialogPaneContent .umcText {
> +	max-height: 400px;
> +	overflow: auto;
> +	//white-space: pre;
> +}
> 
> I think it is not a good idea to set a generic max-height on umcText
> elements. I this case, I would rather suggest to set the max-height property
> in the specific Text widget in the updater.
> → REOPEN

→ OK, has been reverted

> ... 
> (In reply to Alexander Kläser from comment #26)
> > (In reply to Florian Best from comment #6)
> > > Created attachment 6218 [details]
> > > margin-top on share-advanced settings tab
> > 
> > This might be correct by switching the CSS rule
> > 
> > .umc .dijitTitlePane {
> >   margin-top: 3em;
> > }
> > 
> > to margin-bottom instead.
> 
> Looks good, however, on the policies subtab there is now quite a lot of
> margin. Could you have a look at this, please (see screenshot below).
> → REOPEN

→ OK... I forgot to add the screenshot, ehem... but this is not critical at the moment.

> (In reply to Johannes Keiser from comment #30)
> > r57204
> > 
> > univention-management-console-frontend-theme (0.0.88-4)
> > 
> > Bug #36291: adjusted styling of the MultiObjectSelect so it adapts to
> >  to the width of the screen
> 
> Cool! The problem still persists for MultiSelect widgets (see screenshot
> below). Could you extend it for this widget?
> → REOPEN

→ OK, the rules for .umcMultiObjectSelect and .umcMultiSelect could be merged if I am correct. They have been copied & pasted. But that is OK for now.

The changes were not committed to the git repository that is tracked within the SVN repository, as well. However, as this complicates the development process, I removed the .git directory from the SVN. This should simplify the work with the UMC theme [r57479].
Comment 38 Alexander Kläser univentionstaff 2015-01-22 13:40:45 CET
Changes: OK
YAML entries: OK
Package version: OK
Comment 39 Florian Best univentionstaff 2015-01-27 09:25:41 CET
Created attachment 6634 [details]
screenshot

The changes cause the issue in the screenshot when having AD-Mode enabled.
Comment 40 Johannes Keiser univentionstaff 2015-01-27 13:12:19 CET
(In reply to Florian Best from comment #39)
> Created attachment 6634 [details]
> screenshot
> 
> The changes cause the issue in the screenshot when having AD-Mode enabled.

fixed:

r57594
univention-management-console-module-udm (5.1.25-42) 

* Bug #36291: Adjusted margin for UDMDetailPageWarning to accommodate to
    style changes for TitlePane

----------
(In reply to Alexander Kläser from comment #37)
> (In reply to Alexander Kläser from comment #34)
.
.
> → OK, the rules for .umcMultiObjectSelect and .umcMultiSelect could be
> merged if I am correct. They have been copied & pasted. But that is OK for
> now.

r57602
univention-management-console-frontend-theme (0.0.88-8)

   removed style for umcMultiObjectSelect since umcMultiSelect is within umcMultiObjectSelect
Comment 41 Florian Best univentionstaff 2015-01-27 13:21:39 CET
OK: both changes are fine
Comment 42 Janek Walkenhorst univentionstaff 2015-01-29 11:40:31 CET
<http://errata.univention.de/ucs/4.0/50.html>
Comment 43 Janek Walkenhorst univentionstaff 2015-01-29 11:46:26 CET
<http://errata.univention.de/ucs/4.0/62.html>
Comment 44 Janek Walkenhorst univentionstaff 2015-01-29 11:50:43 CET
<http://errata.univention.de/ucs/4.0/51.html>