668966 - Remove the padding around the Calendar list

Status: RESOLVED FIXED

(Calendar :: Lightning Only, defect)

Description

[Richard Marti (:Paenglab)]

Make the look of the Calendar list similar to the Folder list (treeitems are touching the window/splitter).

Comment 1

[Richard Marti (:Paenglab)]

Attachment: Remove the padding/margin on both sides

Comment 2

[Andreas Nilsson (:andreasn)]

Comment on attachment 543587 [details] [diff] [review]
Remove the padding/margin on both sides

I'm fine with this change if Philip is.

Comment 3

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

Could you attach a screenshot on how this looks on other platforms? For mac it doesn't seem to change much, you'd have to change the padding in .task-tree-subpane (lightning.css, although it would probably be better to change classes) and possibly also #calendar-panel (also lightning.css)

Comment 4

[Richard Marti (:Paenglab)]

I changed the margin/padding where I could do it. One point was #calendar-panel. But .task-tree-subpane has no definitions where I could change something.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: Sidebar under Win7

On the left side before patch and on the right side after patch

Comment 6

[Richard Marti (:Paenglab)]

Attachment: Sidebar under Linux

Comment 7

[Richard Marti (:Paenglab)]

(In reply to comment #3)
> Could you attach a screenshot on how this looks on other platforms? For mac
> it doesn't seem to change much

I have no access to a Mac. I copied the changes from Win/Linux to Mac in the hope this also works here. Can you attach a screenshot on Mac?

Comment 8

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

Attachment: Sidebar under mac

This is what it looks like on mac. The culprit rule is:

http://mxr.mozilla.org/comm-central/source/calendar/lightning/themes/pinstripe/lightning.css#114

which controls the margin for both the filter list and the calendar list.

Comment 9

[Richard Marti (:Paenglab)]

Is this with the patch applied?
Do you mean the indention on the left and is this standard style for Mac programms? If not, this could be removed. Or should I do only a patch for Win/Linux?

Comment 10

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

With the patch applied. I think this rule can be removed, its not standard style. The folder pane has less padding left.

Comment 11

[Richard Marti (:Paenglab)]

Attachment: Remove the padding/margin on both sides v2

Patch with removing the .task-tree-subpane rule under Mac.

Taking ui-r+ from previous patch.

Comment 12

[Decathlon]

Attachment: indentation in the calendar list

What about giving some indentation to the calendar list (and the tasks filter) related to the element that expands/collapses the list?
The same indentation is present in the folder list of Thunderbird.

Comment 13

[Richard Marti (:Paenglab)]

I tried the indentation but failed  with the tree. I haven't found the correct selector. With padding-start on #calendar-list-tree-widget treechildren::-moz-tree-cell the checkbox and text are moving correct, but calendar color quadrate isn't moving and overlaps the checkbox.

If you can tell me the selector (DOMi can't inspect trees) for the quadrate I can update the patch. Else we should leave the patch as it is now.

Comment 14

[Decathlon]

Attachment: patch with indentation

Richard, you are right, it isn't so easy, at least for me.
I'm able to find only this solution (patch only for winstripe theme), but probably it isn't the best because it merely adds a margin to the checkbox image.
What's your opinion?

Comment 15

[Richard Marti (:Paenglab)]

Attachment: Remove the padding/margin on both sides v3

Thank you Decathlon for the tip. Padding removed, but given again on the left for the tree style indentation ;)

I removed the dotted bottom border for the titles, also to give more tree style

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Sidebar with tree style under Win7

Comment 17

[Richard Marti (:Paenglab)]

Attachment: Sidebar with tree style under Linux

Comment 18

[Richard Marti (:Paenglab)]

Attachment: Remove the padding/margin on both sides v4

Added gnomestripe support

Comment 19

[Decathlon]

I've found another solution for the calendar list indentation.
It's based on the "tree-scrollable-columns" box's class from the treecols binding in the toolkit:
http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/content/widgets/tree.xml#935

Instead of adding the class "checkbox-treecol-class" and related padding, we could simply add the padding to that box in this way:

calendar-list-tree .tree-scrollable-columns {
  -moz-padding-start: 18px;
}
(in the calendar-widgets.css file).

It moves to the right the content of the box i.e. all the elements of the tree, so the effect is the same, but it seems more rational/functional.

Richard, what's your opinion? Which solution is preferable?

Comment 20

[Richard Marti (:Paenglab)]

Attachment: Remove the padding/margin on both sides v5

(In reply to Decathlon from comment #19)
> It moves to the right the content of the box i.e. all the elements of the
> tree, so the effect is the same, but it seems more rational/functional.
> 
> Richard, what's your opinion? Which solution is preferable?

As you wrote, it seems more rational/functional. And we have to touch one file fewer :)

This patch is using you suggestion.

Comment 21

[Decathlon]

Comment on attachment 561537 [details] [diff] [review]
Remove the padding/margin on both sides v5

For Mac and Linux I can't test the patch, but I suppose it works like it should. The only difference in the code is the class task-tree-subpane  and the padding in the #task-tree-filtergroup for the Mac platform.

r+

Comment 22

[Richard Marti (:Paenglab)]

Pushed to comm-central

<http://hg.mozilla.org/comm-central/rev/c18e5085a08a>

Comment 23

[Richard Marti (:Paenglab)]

Backported to comm-aurora

<http://hg.mozilla.org/releases/comm-aurora/rev/fecfead4cd0b>

Comment 24

[Richard Marti (:Paenglab)]

Backported to comm-beta

<http://hg.mozilla.org/releases/comm-beta/rev/513cc948c501>