570124 - Long task title breaks task preview header UI (pushes buttons out of visible area, behind today pane; truncated)

Status: RESOLVED FIXED

(Calendar :: Lightning Only, defect)

Description

[Thomas D. (:thomas8)]

I can't believe there's no bug for this already, but I can't find it...
Lightning/1.0b2 RC1 still suffers from the same "break-it-all" UI problem that TB3 used to have in the new mail reader's header pane:

STR
1 Switch to lightning's Tasks tab
2 have a small screen, reduce TB window size and/or have calendar pane and today pane enabled (so that the main column where tasks are shown has a limited width)
3 have a longer task title, like "Need to address UI problem where longer titles push action buttons out of view"
4 focus the task in the list, so that the task preview shows
5 look at the header pane of the task's preview (and repeat STR with a short title to compare)

Actual result
- action buttons are pushed out of view, hidden behind the today pane or even pushed off the screen entirely (category, mark completed, priority, delete)
- depending on screen size, title length, window width etc. you may not even see any button at all

Expected result
- wrap long task titles
- always show all buttons

A) Proposed solution (short term)

- make long subject wrap as soon as there is not enough visible width to show all buttons
- possibly get inspiration and code from bug Bug 489609 which solved subject wrap for TB's header pane

B) Proposed solution (long term)

- avoid all the UI trouble that TB has gone through with the header buttons (and still not fully solved)
-> place buttons on a full-fledged customizable toolbar
- if toolbar is too long to fit next to title, make sure we can still access all the buttons: either
a) have a dropdown for the remaining buttons (like in WinWord when you have two longer toolbars in one row)
b) and/or wrap the toolbar vertically
c) and/or dynamically move the toolbar to above (or below) the title.
Actually, I wouldn't mind having c) as a static solution for this bug. It might eat some v-space, but it's also makes a tidier UI.

Pls note that the fully customizable and flexible solution of B) might go beyond the immediate scope of this bug and might require changes to the shared toolbar code (which might need separate bugs).

Comment 1

[Thomas D. (:thomas8)]

Attachment: Screenshot 1: Long task title pushes header buttons out of view

Screenshot showing the problem: All task header buttons are hidden behind today pane. But even without the left and right panes, you may still not see any / all of the buttons, depending on title's length, screen/window size, resolution/monitor size etc.

Comment 2

[Felix Möller]

I can reproduce this with current 1.0b3pre.

I think bug #412202 is a duplicate of this one?

Comment 4

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Maybe we can take this for the beta, it should be trivial to fix.

Comment 5

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Attachment: Fix - v1

This patch takes care

Comment 6

[Decathlon]

Attachment: proposal for a better use of the space

I would like to propose a solution that uses a bit better the room in the task-detail header and makes it similar to the mail-read header of Thunderbird (see next screenshot).

I've moved the row with the task title below the buttons and with a wrap text without crop it. To gain space I've moved the "priority" row (that has short text and with a fixed length) besides the buttons. In this way only the priority label (when present) will be cropped by the buttons when resizing the window.
Others items have a crop attribute, but now they are cropped only when the border get close to the text.

With the buttons closer to the panel upper border, there is a few waste of space when there is only the title in the header (compared with the actual layout).

I've also added two code lines "border: none" in the toolbox file to get rid of the two lines above and below the toolbar buttons that I see on Win7.

Does it need UI review?

Off topic.
I've just seen the new icons for the toolbar. I understand that Lightning's look has to be adapted to Thunderbird's one, but do we necessarily have to lose the beautiful colored icons to use the new dark mono colored ones? 
/Off topic

Comment 7

[Decathlon]

Attachment: Screenshot: proposal patch

Comment 8

[Stefan Sitter [:ssitter]]

> I've also added two code lines "border: none" in the toolbox file to get rid
> of the two lines above and below the toolbar buttons that I see on Win7.
Looks like the theme patch in Bug 662142 already takes care of this.

Is it possible to move the labels more to the left to take only the width of the currently visible labels? Currently it seems it always reserves and wastes space for labels that are not visible.

Comment 9

[Decathlon]

Attachment: Proposal: better use of the space and labels to the left

I talked to Philipp, I take over the bug assignment.

(In reply to comment #8)
> Is it possible to move the labels more to the left to take only the width of
> the currently visible labels? Currently it seems it always reserves and
> wastes space for labels that are not visible.

Right! This also makes the header more similar to the Thunderbird mail-read header.
This patch takes care. Now is the longest visible label that sets the space (see next screenshot).
I've also added the pinstripe theme (copy and pasted from the winstripe theme) that I forgot.
The patch needs testing on Linux and Mac.

> > I've also added two code lines "border: none" in the toolbox file to get rid
> > of the two lines above and below the toolbar buttons that I see on Win7.
> Looks like the theme patch in Bug 662142 already takes care of this.
>

the fix in that patch is similar (border-top/bottom-width: 0  instead of  border: none):

@@ -151,6 +151,7 @@
     -moz-appearance: none;
     -moz-padding-end: 6px;
     padding-top: 3px;
+    border-top-width: 0;
 }
 
 #task-actions-toolbar {
@@ -158,6 +159,7 @@
     -moz-box-pack: end;
     min-height: 0;
     padding: 0;
+    border-bottom-width: 0;
 }

for now I don't remove the lines in order to allow testing. Philipp, please keep in count when you are going to review this and that patch.

Comment 10

[Decathlon]

Attachment: Screenshot: no wast space on the left side

Comment 11

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 537510 [details] [diff] [review]
Proposal: better use of the space and labels to the left

Review of attachment 537510 [details] [diff] [review]:
-----------------------------------------------------------------

Only a minor nit, I can fix this myself before checkin. r=philipp

::: calendar/base/content/calendar-task-view.xul
@@ +120,5 @@
> +                      </menupopup>
> +
> +                      <toolbox id="task-actions-toolbox"
> +                               defaulticonsize="small"
> +                               minwidth="50px"

I know it was this way before, but maybe you can put the min width into a css file instead.

::: calendar/base/themes/pinstripe/calendar-task-view.css
@@ +148,5 @@
>      -moz-appearance: none;
>      -moz-box-pack: end;
>      min-width: 50px !important;
>      min-height: 14px !important;
> +    border: none;

I like the border: none solution better than border-top/border-bottom-width.

Comment 12

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Mac/Linux testing is still tbd, I need to wait for my linux box to finish a bisect though.

Comment 13

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Pushed to comm-central <http://hg.mozilla.org/comm-central/rev/4167a6e9313f>
-> FIXED

Comment 14

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Backported to comm-miramar <http://hg.mozilla.org/releases/comm-miramar/rev/887898f2415c>