640109 - Some UI polish for the Sync prefs panel

Status: RESOLVED WONTFIX

(SeaMonkey :: Preferences, defect)

Description

[Philip Chee]

The Sync listbox needs some flex. Also let the engine list wrap to take up less space.

Comment 1

[Philip Chee]

Attachment: Screenshot of proposed tweaks.

Comment 2

[Philip Chee]

Attachment: Patch v1.0 Tweak listbox.

Hmm. Not sure if it should be r? or ui-r?

> -      <deck id="weavePrefsDeck">
> +      <deck id="weavePrefsDeck" flex="1">

>          <vbox id="hasAccount">
> -          <groupbox>
> +          <groupbox flex="1">

>              <caption label="&accountGroupboxCaption.label;"/>
> -            <vbox>
> +            <vbox flex="1">
>                <label value="&syncMy2.label;"/>

Add some flex so that the listbox can shrink vertically.

> +++ b/suite/themes/classic/communicator/prefpanels.css
> 
>  #syncDesc {
> -  padding: 0 12em;
> +  padding: 0 1em;
>  }

12em is excessive and prevents the listbox from shrinking horizontally.

> +#syncEnginesList > listrows > listboxbody {
> +  display: block;
> +}

Flow the  list of Sync engines to reduce the amount of vertical space taken up.

Comment 3

[Jens Hatlak (:InvisibleSmiley)]

Comment on attachment 518005 [details] [diff] [review]
Patch v1.0 Tweak listbox.

Sorry Philip, but just looking at the screen shot tells me this is (at least partly) wrong: Never align checkboxes horizontally. Reason: The user cannot easily tell with which label a checkbox relates with. This is a standard UI design no-go.

Comment 4

[[e-mail]]

Comment on attachment 518005 [details] [diff] [review]
Patch v1.0 Tweak listbox.

>+            <vbox flex="1">
>               <label value="&syncMy2.label;"/>
>               <listbox id="syncEnginesList" flex="1">
I realise that this flex is basically useless without the flex on its ancestors but the problem is that without the flex the listbox increases in height and it's already on the tall side as it is.

> #syncDesc {
>-  padding: 0 12em;
I'm not keen on this padding either but the problem with simply reducing the padding is that the text becomes unbalanced in relation to the button.

>+#syncEnginesList > listrows > listboxbody {
>+  display: block;
This is just no good at all; if I had wanted horizontal checkboxes I wouldn't have asked for a listbox.

Comment 5

[[e-mail]]

> but the problem is that without the flex the listbox increases in height and
*with* the flex the listbox increases in height...

Comment 6

[Philip Chee]

Probably obsolete by now.