1427509 - Use Photon style icons in Thunderbird

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Comment 1

[Tim Nguyen :ntim]

Attachment: photon-icons.patch

This has all mail/chat/calendar/addressbook icons changed.

Comment 2

[Tim Nguyen :ntim]

I won't have time to commit more effort into this, feel free to use the patch as you want :)

Comment 3

[Tim Nguyen :ntim]

Attachment: photon-icons.patch

Fixed one wrong icon.

Comment 4

[Tim Nguyen :ntim]

Attachment: photon-icons.patch

Comment 5

[Tim Nguyen :ntim]

Attachment: photon-icons.patch

Ok, all icons should have context-fill now.

Comment 6

[Tim Nguyen :ntim]

Attachment: photon-icons.patch

Updated the Junk icon.

Comment 7

[Jorg K (CEST = GMT+2)]

People love unsolicited comments, so here goes ;-)
Looks nice with these exceptions:
1. Write is a diagonal line with to dots, is this meant to be a pen?
2. Compact was better before, we had a broom (or a rocket??) A broom signifies a clean-sweep, no?
3. Print still needs to be replaced.
4. Add Star(?) doesn't have an icon.
5. Reply All: Not so good, the second arrow is barely visible.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: reply.png

(In reply to Jorg K (GMT+1) from comment #7)
> People love unsolicited comments, so here goes ;-)
> Looks nice with these exceptions:

I like it too.

> 1. Write is a diagonal line with to dots, is this meant to be a pen?

Maybe something like the Monterail pen with a clamp could look better.

> 2. Compact was better before, we had a broom (or a rocket??) A broom
> signifies a clean-sweep, no?

Yes, this needs a new icon.

> 3. Print still needs to be replaced.

No, I used already the Photon Print icon.

> 4. Add Star(?) doesn't have an icon.

This comes from Comactheader extension.

> 5. Reply All: Not so good, the second arrow is barely visible.

Yes, the second arrow is too faint. I made it bolder, see attached screenshot. What do you think about it?

Comment 9

[Jorg K (CEST = GMT+2)]

Comment on attachment 8939326 [details]
reply.png

Better, thanks. BTW, I don't think I like the new Calendar icon all that much. I can't identify this as a calendar. The task icon is OK.

Comment 10

[Tim Nguyen :ntim]

Comment on attachment 8939326 [details]
reply.png

LGTM!

Comment 11

[Tim Nguyen :ntim]

(In reply to Richard Marti (:Paenglab) from comment #8)
> > 1. Write is a diagonal line with to dots, is this meant to be a pen?
> 
> Maybe something like the Monterail pen with a clamp could look better.

The icon I made is a pencil. I think it's suited for the compose action. A pen would be fine too, it's just harder to make it fit the photon style (and have it snapped to the pixel grid!).

> > 2. Compact was better before, we had a broom (or a rocket??) A broom
> > signifies a clean-sweep, no?
> 
> Yes, this needs a new icon.

I agree the new icon is not super explicit, but I think the broom icon is even less so. Cleaning is removing un-used items. Compacting/compressing is reducing the size of individual items, this is what the 4 arrows pointing in represent.

Comment 12

[Jorg K (CEST = GMT+2)]

(In reply to Tim Nguyen :ntim from comment #11)
> I agree the new icon is not super explicit, but I think the broom icon is
> even less so. Cleaning is removing un-used items. Compacting/compressing is
> reducing the size of individual items, this is what the 4 arrows pointing in
> represent.
No. Compacting is about removing (cleaning) superseded/deleted messages. No compaction of individual messages and no compression. So something that signifies cleaning would be good.

Comment 13

[Jorg K (CEST = GMT+2)]

(In reply to Tim Nguyen :ntim from comment #11)
> The icon I made is a pencil.
Sorry, it can't be recognised as a "writing tool", it's just a diagonal line with two dots.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: write.png

(In reply to Tim Nguyen :ntim from comment #11)
> Cleaning is removing un-used items.

Removing deleted messages is exactly what is done.

What do you think about my write icon? It looks now more like a pen. I need only to make the gaps sharper.

Comment 15

[Jorg K (CEST = GMT+2)]

Comment on attachment 8939334 [details]
write.png

That looks like a pen :-)

Comment 16

[Tim Nguyen :ntim]

(In reply to Jorg K (GMT+1) from comment #12)
> (In reply to Tim Nguyen :ntim from comment #11)
> > I agree the new icon is not super explicit, but I think the broom icon is
> > even less so. Cleaning is removing un-used items. Compacting/compressing is
> > reducing the size of individual items, this is what the 4 arrows pointing in
> > represent.
> No. Compacting is about removing (cleaning) superseded/deleted messages. No
> compaction of individual messages and no compression. So something that
> signifies cleaning would be good.

In this case, the label could be changed to "Clean messages". A broom would probably work well. I don't know if I have time to work on it however.

(In reply to Jorg K (GMT+1) from comment #13)
> (In reply to Tim Nguyen :ntim from comment #11)
> > The icon I made is a pencil.
> Sorry, it can't be recognised as a "writing tool", it's just a diagonal line
> with two dots.

https://material.io/icons/#ic_create

Comment 17

[Jorg K (CEST = GMT+2)]

(In reply to Tim Nguyen :ntim from comment #16)
> https://material.io/icons/#ic_create
That pen looks good, too, perhaps even better than Richard's since it's simpler. And funnily next to it, there is a "delete sweep".

Comment 18

[Tim Nguyen :ntim]

Attachment: compose-v2.svg

What do you think of this version ? It should look more like an actual pencil, or at least the icon in the link: https://material.io/icons/#ic_create

As for Richard's icon, I can see the attempt of making a fountain pen, but if that is the case, then the pen end should also reflect that: https://thenounproject.com/term/pen/1480353/

Right now, the top looks perfectly like an fountain pen, but the pen end looks like a classic pen end, or even a pencil's end.

Comment 19

[Jorg K (CEST = GMT+2)]

Comment on attachment 8939341 [details]
compose-v2.svg

Yep. Better than the fountain pen. Now all I need is a broom ;-)

Comment 20

[Tim Nguyen :ntim]

Attachment: compact-v2.svg

Comment 21

[Tim Nguyen :ntim]

Comment on attachment 8939334 [details]
write.png

see comment 18

Comment 22

[Jorg K (CEST = GMT+2)]

Comment on attachment 8939342 [details]
compact-v2.svg

Nice, better than the broom-rocket we currently have, thanks!

Comment 23

[Richard Marti (:Paenglab)]

Comment on attachment 8939341 [details]
compose-v2.svg

I like it. Nit: before the pencil's end there it is a bit smaller and the end's angle is less than 90°. This makes it a bit blurry. What do you think about to make it 90°?

Comment 24

[Richard Marti (:Paenglab)]

Comment on attachment 8939342 [details]
compact-v2.svg

Bought. :)

Comment 25

[Tim Nguyen :ntim]

Attachment: compose-v3.svg

The end is slightly smaller, but it's snapped to the pixel grid which makes it less blurry.

Comment 26

[Richard Marti (:Paenglab)]

Comment on attachment 8939366 [details]
compose-v3.svg

Perfect, thank you very much!

I'll attach the patch with all changes soon.

Comment 27

[Richard Marti (:Paenglab)]

Attachment: photon-icons.patch v2

Updated to the latest icons. Fixed the allowed-dupes.mn and removed unneeded </path> etc.

I added a fill of the chat bubble with 50% opacity when new chat messages came in. Normally we see only the bubble border. The pro is also one less dupe in allowed-dupes. :)

In Lightning I removed the duplicate arrows for the today pane and the calendar navigation.

Comment 28

[Richard Marti (:Paenglab)]

Attachment: Calendar-screenshot.png

Screenshot of all Lightning icons for easier review.

Comment 29

[Tim Nguyen :ntim]

Attachment: compact-v4.svg

After testing the patch I wasn't too satisfied with the new compact icon, as it didn't match the photon style. Here's a newer version of the icon.

Comment 30

[Richard Marti (:Paenglab)]

Comment on attachment 8939389 [details]
compact-v4.svg

Looks better than the one in patch v2.

Comment 31

[Richard Marti (:Paenglab)]

Attachment: photon-icons.patch v2.1

Updated the compact icon.

Philipp, for easier review see attachment 8939379 [details].

Comment 32

[Richard Marti (:Paenglab)]

Attachment: photon-icons.patch v2.2

Same patch as v 2.1 with updated priority, status, freebusy and timezones icons.

I think the only icon which need a change is the today icon. But we can do this also later. I'll attach a new screenshot with the updated icons.

Comment 33

[Richard Marti (:Paenglab)]

Attachment: Calendar-screenshot.png

Updated screenshot for review.

Comment 34

[Richard Marti (:Paenglab)]

Attachment: photon-icons.patch v2.3

This should be now the final patch. The calendar icon on top right is changed and the Today icon makes now more sense with this change.

Comment 35

[Richard Marti (:Paenglab)]

Attachment: Screenshot of v2.3 (calendar view)

Screenshot for easier review of v2.3.

Comment 36

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/454eb3e4fa5e
Use Photon style icons in Thunderbird. r=Paenglab,philipp

Comment 37

[Jorg K (CEST = GMT+2)]

Attachment: Screenshot showing inconsistencies

Looking at this in a Tinderbox build I noticed a few things:
- The thin paper clip (attachment) icon doesn't go well with the thicker new icons
- The coloured tab icons (inbox, drafts, templates, sent, archives, junk, trash,
  account icon and even the folder icons) don't go so well with the new scheme.
  The same goes for the calendar tab and event icons.
  If you use "Customise", you'll also see some Calendar synchronisation icons which are still
  big and colourful like in the XP days.
- You've changed the mail tab icon when opening a message. It used to be an envelop
  (from bug 1404695), and it already had Photon style (Bug 1404695 comment #1).
  Now it's a chat bubble. That's rather unfortunate since a message is not a chat item.

Comment 38

[Richard Marti (:Paenglab)]

(In reply to Jorg K (GMT+1) from comment #37)
> Created attachment 8939779 [details]
> Screenshot showing inconsistencies
> 
> Looking at this in a Tinderbox build I noticed a few things:
> - The thin paper clip (attachment) icon doesn't go well with the thicker new
> icons
> - The coloured tab icons (inbox, drafts, templates, sent, archives, junk,
> trash,
>   account icon and even the folder icons) don't go so well with the new
> scheme.

This was already before this bug. If we could get SVG files, that would be great.

>   The same goes for the calendar tab and event icons.

Tim and I talked already about this on IRC

>   If you use "Customise", you'll also see some Calendar synchronisation
> icons which are still
>   big and colourful like in the XP days.

You'll be tricked by an extension.

> - You've changed the mail tab icon when opening a message. It used to be an
> envelop
>   (from bug 1404695), and it already had Photon style (Bug 1404695 comment
> #1).
>   Now it's a chat bubble. That's rather unfortunate since a message is not a
> chat item.

A follow-up follows.

Comment 39

[Richard Marti (:Paenglab)]

Attachment: Bug1427509-fup.patch

Restore the message icon.

Comment 40

[Jorg K (CEST = GMT+2)]

Comment on attachment 8939833 [details] [diff] [review]
Bug1427509-fup.patch

Looks like you're restoring the message.svg to its previous state, cool for me. I hope Tim agrees.

Since I cancelled today's Daily, I'll land this tonight and no one will have seen it :-)

As for the the synchronise icons: They will come from MyPhoneExplorer.

And the paper clip: Well, it's too thin now, but we can follow up here or in another bug.

Comment 41

[Tim Nguyen :ntim]

I actually don't remember changing message.svg to the chat icon (and I actually disagree with that change).

I agree to restoring message.svg to the mail icon :)

Comment 42

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/ff91862ffb2a
Follow-up: restore the previous message icon which was accidentally replaced. r=jorgk