Coloured Email Labels

wanageeska

Hi,

I've just started experimenting with Vivaldi.

One feature I find extremely useful when scanning my inbox (whether in Gmail or Thunderbird) is having coloured labels (or, in Thunderbird, coloured subject lines). Can this be implemented in Vivaldi Mail?

Thanks!
-w

gmg

@wanageeska
You can at the moment use flags for this
(I should allow you to name the flags something else)

I have yet to store some colors with the labels. I can look into that if you make a bug for that.

wanageeska

@gmg
Yeah, I know the flags are there, but I currently have more labels/filters than there are flags available!

Mine might be a very specific use case, but I'll summarise it for the sake of illustration:

I receive a lot of news-related emails for work, such that my inbox is akin to a news feed.

In order to manage the influx, I make heavy use of filters and coloured labels to help me quickly cut through the chaff. (See attached image.)

When I saw that Vivaldi carried the labels through from Gmail anyway, I thought, rather than recreating my existing setup in Vivaldi, I could just colour-match the local labels to the remote labels (in Gmail).

All that said though, the real benefit of having colours/labels comes from having those colours/labels visible in the Inbox, and I've since noticed that Vivaldi Mail doesn't actually show labels in the Unread/Inbox anyway, only Flags.

I've also since noticed that Mail seems to operate a little differently since I first posted. Vivaldi used to carry my Gmail labels through to Labels, whereas it now seems to translate them into Custom Folders, so I don't really know where that leaves my original post haha.

Ideally, at least for me, Labels and Flags would be one and the same, and the newly-coloured labels would be visible in the *Inbox/Unread view to facilitate rapid eyeballing. But, as I said, mine might not be a use case shared by the majority of mail users.

Coloured Labels in Gmail:

Coloured Subject Lines in Thunderbird:

WildEnte

@wanageeska in a nutshell, in views that show emails with different labels or that are in different custom folders, you want a more clear visual indicator than now to see the categorization. The names of labels are shown in the list, but the names of the custom folders are not AFAIK (writing this on mobile so no way to double check the statement)

With custom folders and flags the use of color makes sense, because a single email can only be in one custom folder or carry one flag. (I would prefer coloring the background of the list item rather than. The text...)

For labels, assigning a color is not straightforward, because one email can have several labels if it fits several filter categories at the same time.

wanageeska

With custom folders and flags the use of color makes sense, because a single email can only be in one custom folder or carry one flag. (I would prefer coloring the background of the list item rather than. The text...)

Yes, you’re absolutely right with regard to colouring the text itself. I probably shouldn’t have included that Thunderbird example.

But take the Gmail model for instance: it allows a single email to carry multiple labels/tags (whether a user wants to use colours or not), and the labels are easily visible in each email’s subject line in the inbox. It just a seems to be a pretty flexible way to organise things. Allowing a user to colour code their labels/tags is just an added benefit when a user is looking at a long list of monochrome subject lines in their inbox.

That said, I’m definitely biased to that particular way of categorising/filtering purely because of the flexibility it affords. I actually de-de-googled because of how beneficial I find it.

I’m also on mobile at the moment, but I’ll attach a nonsense example of multiple labels in the Gmail mobile app.

!

WildEnte

@wanageeska OK, here the label itself is colored, not the entire line. Makes sense

(edited a nonsensical "it" into a "not")

jumpsq

I've just been made aware by @josephj11 (thanks!) that there are colour tags in Thunderbird. Judging now from @wanageeska's screenshots, I do agree that probably coloured tags make more sense for vivaldi, but any form of colouring will be an advantage and I also somehow like the line colouring (especially if it's set automatically via filters, this seems to be neat). :>

// DId you already create a bug report as suggested and would mind to share its ID?

wanageeska

Hey @jumpsq, sorry for slow reply... I finally got around to submitting a bug report this morning. ID is VB-87784.

Denyerec

Came here to suggest exactly this.

A frustration is that the classes assigned to the row elements are not at the row level, such as it is, we're not able to apply our own styles to labelled mails to solve the problem in the short term.

EG:

<div class="mail_entry unread" data-id="32409"><label><span class="mail-status-indicator read-status"><svg ... />
            <circle strokewidth="2" cx="8" cy="8" r="3"></circle>
            </svg>
        </span></label><label class="subject" style="width: var(--subjectWidth); margin-left: 0px;"><span>Yesterday's
            Forum Activity (from UKworkshop.co.uk)</span></label><label
        class="from"><span>UKworkshop.co.uk</span></label><label class="labels">
        <div class="adjustment-mail-labels">
            <div>
                <div class="MailLabels-Observer">
                    <ul class="MailLabels-Container" style="padding-left: unset;">
                        <li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>
                    </ul>
                </div>
            </div>
        </div>
    </label><label class="mail-status-indicator"></label><label class="maildate"><span>05:19</span></label></div>

The key bit being:

<li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>

Obviously at this point in the chrome generation, we know we've got labels and we know what they are. Now if that could just be applied to the container like so... :

<div class="mail_entry unread MailLabels-Important MailLabels-ToDo" data-id="32409"> ...

We could do whatever we want with the emails.
This issue of burying status classes at the bottom of the element heirarchy rather than the top crops up all over the place, and it's frustrated the hell out of me. Wouldn't be a problem if Chromium supported :has() pseudoselector, but as of yet it does not.

thetrigger

I just found a way https://github.com/thetrigger/Vivaldi-colored-labels

we can use :has selector supported by chromium to get the whole row

jumpsq

Thank you

floresarts

@wanageeska As a graphic designer and very visual learner, I applaud your use of color as a wayfinding technique but mostly because I just happen to organize my in-box the same way. Sadly, I deleted the default labels too quickly, thinking I could edit the names while the colors would remain. Sad face.

shifte

Hmm, that should do.

#mail_view div.tree-item:has(li[title='Important']) { color:red; }
#mail_view div.tree-item:has(li[title='Work']) { color:orange; }
#mail_view div.tree-item:has(li[title='Personal']) { color:green; }
#mail_view div.tree-item:has(li[title='To Do']) { color:blue; }
#mail_view div.tree-item:has(li[title='Later']) { color:violet; }

VAIO73

@shifte how it works?as I set it up???

shifte

@VAIO73
https://forum.vivaldi.net/topic/10549/modding-vivaldi
Open vivaldi://experiments
Enable "Allow for using CSS modifications"
Open Appearance section in settings
Choose the folder you want to use
Place your CSS files inside it
Restart Vivaldi to see them in effect

VAIO73

@shifte 2023-01-28 12.49.30 vivaldi 7c4788b74ab0.jpg
custom.css.jpg

I have enabled and add custom.css on directory, and not works

SORRY..., WORKS ony English version, but when I switch vivaldi to another language it doesn't work that way...

Zalex108

@shifte said in Coloured Email Labels:

Open Appearance section in settings
Choose the folder you want to use
Place your CSS files inside it
Restart Vivaldi to see them in effect

@VAIO73

VAIO73

@Zalex108 works only English version vivaldi, but when I switch vivaldi to another language it doesn't work that way...

VAIO73

@Zalex108 colored label works only in English language mutation, when I switch it to another language, you are all in black and white

Zalex108

@VAIO73

Finding the Language Name for that Labels and Duplicating the code for those and replacing the names should work.

Keeping English also in case of future Language toggle.