search

spymastermatt / thunderbird-monterail

A set of themes for thunderbird inspired by a Monterail blog post
GNU General Public License v3.0
1.05k stars 77 forks source link

Assigning tags does not set the color of the message in the message list #31

Closed pinkdroyd closed 7 years ago

pinkdroyd commented 7 years ago

When selecting a message and adding a tag (e.g. by pressing 1 on the keyboard for the standard red important tag) it should show the message in the selected color in the message list (even when it is currently selected imo, as it is in the standard theme). This currently does not happen, tags are assigned but the message does not get colorized.

FerSabGar commented 7 years ago

Hi @pinkdroyd, See issue #27 for a solution (Message list lines & tags Colors).

pinkdroyd commented 7 years ago

Thank you @FerSabGar, seems I skipped over that issue while searching for a fix.

pinkdroyd commented 7 years ago

My second point still stands: It would be nice to have the text color of a selected message in the list in the color of the tag (as it happens in the standard theme).

FerSabGar commented 7 years ago

Yes, it would be nice to solve the second point. I tried some without success :-(

conema commented 7 years ago

@pinkdroyd @FerSabGar I'm building a fix for this but today is a busy day. However, if you want you can try to fix it by yourselves. I think that is only necessary add the !important rule to the css rules found in tagColors.css and copy these rules in our theme.

I will update you when a PR is ready. Sorry for the wait.

conema commented 7 years ago

@pinkdroyd @FerSabGar I'm happy to announce that the PR is now online #34! Let me know if this solve your problems.

FerSabGar commented 7 years ago

@conema, in path #34 you are using a color gradient for those lines tagged according to the tag color.

The result is nice.

After I was thinking that coherency could be enhanced if a gradient was also used in normal lines (for messages without any tag). So I tested a solution for monterail theme which consists in making some changes in "_based.ccs" to draw a gradient based on --message-list-background-color and --message-list-highlight-background-color variables.

The result is this one: image

I know that making a gradient from the highlight background color (blue in monterail theme) to message list background color (white in monterail theme) is maybe excessive but in this way I've been able to use defined variables which is better in terms of personalization. I have not enough knowledge to play with a different opacity of the highlight background color. In addition, using variables could be useful to enhance this change to others styles.

Anyway, just take it as an idea to gain coherency.

The resulting code in _base.cc is:

#threadTree > treechildren::-moz-tree-row(selected) {
    border: none !important;
/*  background: var(--message-list-highlight-background-color) !important; */
/*  Background is printed as gradient for coherency with tag lines styles */
    background: linear-gradient(var(--message-list-background-color),
                                    var(--message-list-highlight-background-color)) !important;
}

Thanks for your work.

conema commented 7 years ago

@FerSabGar Thanks for the suggestion, if you want you can try to create the gradients for all the three theme and create a pull request. Collaborators are always welcome 😀

FerSabGar commented 7 years ago

@conema With the following code in _base.css the gradient looks good enough for all themes. The code:

#threadTree > treechildren::-moz-tree-row(selected) {
    border: none !important;
    background: linear-gradient(var(--message-list-background-color),
                    var(--message-list-highlight-background-color),
                                    var(--message-list-highlight-background-color)) !important;
}

How it looks in each theme: Monterail image Dark image Fulldark image System (with adapta theme) image They look good enough but I think an improvement could be possible by means of creating a second variable to play with two colors of the same range(color) for drawing the gradient (avoiding creating the gradient with the mesage list backgroud color). I will try to implement it, although I know nothing about CSS (all my code changes come after looking for a solution from quite zero). Regarding creating a pull request, the problem is the same, I have not done it before, so I'am afraid I could mesh things. Anyway if my final proposal is good enough I'll let you know and then we can discuss the more convenient way to proceed.

FerSabGar commented 7 years ago

I did it! I managed to draw a gradient highlight for non-tagged messages in messages list acoording to differrent levels of the same color. With my code it will be easy to personalize the gradient colors through the userChrome.css file. The gradients look like this: Monterail image Dark image Fulldark image System (with adapta theme). In this case I chose to maintain the highlight without gradient, but it is easy to setup from userChrome.ccs. Just now I will try to fork the last version of this respository, add the code and ask for a Pull Request. I hope my work could useful.

conema commented 7 years ago

@FerSabGar Sorry for the late answer, I wasn't at home all the day. I saw that you did a commit with your changes, I'm very happy to see that. Open source projects, like this, serve for learn new things every day. Tomorrow I will look at you changes (It's 1:30 AM now, not a good hour for look some codes 😂). Hope you will help us even more in the future and I hope you enjoyed it.

FerSabGar commented 7 years ago

Yes, I enjoyed it. Thanks! ;-)

spymastermatt commented 7 years ago

Hi all. The fix for the missing tag colors is now up, Thanks to everyone who helped on this!

@FerSabGar @conema I'm not sure if you saw my other comment so I'll copy it here:

Regarding gradients: whilst I like them (believe it or not I'm not personally a massive fan of flat design) the idea of this theme was to conform to a particular set of mockups. Since those mockups are very much flat-design oriented, I personally don't think that the gradient look fits the general feel of the original mockups. As such, I have made a version of the tag colors which adheres to this design.

That said, I would like gradients to be an option for people who like them (like me), but I am aware that the number and complexity of the 'easy to edit' variables in the userChrome.css is constantly growing and that this makes it almost as difficult for someone to decipher which variables should be edited, as if they edited the css in the first place.

To solve this (and more) I would like to create a new project: A web page where one can select a base theme and then use sliders, checkboxes etc to customise the theme, preferably with a live updating preview so that people can see what they are actually adjusting.

This doesn't strike me as enormously difficult to do, but I would appreciate any assistance any one is willing to provide!

FerSabGar commented 7 years ago

Hi. @spymastermatt I saw your comment and it is OK for me, it makes sense.

So I've understood that you have merged the @conema's pull request with your own modifications in order to get tag colors. And regarding gradients, they must be included via another project. I will look forward to know about it, and as I said, I'm new in this, but I'll try to help if I can.

Thank a lot for your work guys.

FerSabGar commented 7 years ago

Hi,

Just two comments:

a) For me flaggedCol is more elegant with border-left: 3px

b) I would rather use gradients than solid color for highlight backgrounds. Maybe a more elegant option would be use the normal highlighted color, using only the left border color to draw tags.

I made a personal version merging @conema and @spymastermatt improvements. I like it.

I made a personal version merging @conema and @spymastermatt improvements. I like it. Here you can see as it looks (with monterail theme, standard fonts and minor adjustments): demo