Make it possible to mark messages important

[ChristophWurst]

For https://github.com/nextcloud/mail/projects/7
Fixes #2963

• Requires Update the message cache when a message is flagged #2800

[jancborchardt]

As icon, you can use the same icon that Gmail uses: https://material.io/resources/icons/?search=label_important&icon=label_important&style=baseline

If a message is important, we can overlay it on the avatar just like the Favorite star.

[ChristophWurst]

I can't find that icon in https://www.npmjs.com/package/vue-material-design-icons. What's its name?

[jancborchardt]

I can't find that icon in https://www.npmjs.com/package/vue-material-design-icons. What's its name?

It’s on the link / in the url: label_important. If that library doesn’t have it, just download it from the page and put it in the repository. :)

[ChristophWurst]

What do ya think

[jancborchardt]

Looking good! Could use some more opacity, and ideally a slight white border around the icon to separate it from the avatar – same for the favorites icon.

But how do we do this so it works with the dark theme? Should I make it 2 icons each, white border for normal, dark border for dark theme?

[ChristophWurst]

But how do we do this so it works with the dark theme? Should I make it 2 icons each, white border for normal, dark border for dark theme?

How does it work with the other icons? Don't we do this automagically?

[jancborchardt]

But how do we do this so it works with the dark theme? Should I make it 2 icons each, white border for normal, dark border for dark theme?

How does it work with the other icons? Don't we do this automagically?

We currently do not do this visual separation for any icons which overlay other things. Cases where it’s similar:

• Files: The favorites icon overlays as well, but has no visual separation. Would look nicer there too, so we could actually do this in the core favorites icon.
• Notifications: On new notifications, the red dot on the bell icon is part of the icon and the bell has a cutout – it’s manually made as different icons, as the background of the header also needs to shine through.
• Android: On Android we have a white border around the star icon, and need to adjust this now for dark mode.
• Text: The avatars overlap and have a 2px border which visually separate them. We can do this here as they are HTML elements and not images.

cc @skjnldsv @juliushaertl is it possible to add this border programmatically, and adjust it based on the theme – maybe like the shadow and the black/white version? it should be a hard 1 or 2px border of the background color, just like the avatars in the Text app.

[skjnldsv]

cc @skjnldsv @juliushaertl is it possible to add this border programmatically, and adjust it based on the theme – maybe like the shadow and the black/white version? it should be a hard 1 or 2px border of the background color, just like the avatars in the Text app.

you can fill the whole icon if you want, the border, don't think so.
Unless you use inline svg in the html code, then you can with css vars

[GretaD]

Now it looks like this, after the style fixup.

Not related to this but should we maybe change also the star icon and add a border, or remove the border from the important one, just to have the consistency.. cc @jancborchardt

[jancborchardt]

Not related to this but should we maybe change also the star icon and add a border, or remove the border from the important one, just to have the consistency.. cc @jancborchardt

Yep, already talked to @skjnldsv that of course the star icon should have the same style with border. He mentioned the standardization of list items to be a blocker for that – correct me if that was wrong @skjnldsv. :)

[skjnldsv]

He mentioned the standardization of list items to be a blocker for that – correct me if that was wrong @skjnldsv. :)

Yep, this is coming from server, until we have a nice dedicated component in #nextcloud-vue, there is no proper way to do it (inline svg + css variables)
@ma12-co had some components for the talk app, could we make them available everywhere on vue components & allow us to add inline svg around the avatar (like they're doing with the video icon & star?

[marcoambrosini]

until we have a nice dedicated component in #nextcloud-vue, there is no proper way to do it (inline svg + css variables)

I hope I'll be able to give some love to this once the call view in talk is done

[ChristophWurst]

@nextcloud/mail please give this a test. The basic marking as important should just work. The automatic classification is very basic. Let's get this implementation in and see how it performs. Then we can improve it.

[ChristophWurst]

• BLOCKED by mail_messages.mailbox_id should be an INT #2963

SQLSTATE[42883]: Undefined function: 7 ERROR:  operator does not exist: integer = character varying

LINE 1: ... INNER JOIN "oc_mail_mailboxes" "mb" ON "mb"."id" = "m"."mai...

                                                             ^

HINT:  No operator matches the given name and argument type(s). You might need to add explicit type casts.

[rullzer]

DB stuff looks good!

[jancborchardt]

O lala, we’re getting closer! :) Congrats everyone 🎉