starred/cypht

Fork 0

mirror of https://github.com/cypht-org/cypht.git synced 2026-04-25 04:56:03 +03:00

[GH-ISSUE #20] Add more classes to enhance styling possibilities #18

New issue

Closed

opened 2026-02-25 21:33:56 +03:00 by kerem · 13 comments

kerem commented

2026-02-25 21:33:56 +03:00

Owner

Originally created by @R-J on GitHub (Oct 5, 2015).
Original GitHub issue: https://github.com/cypht-org/cypht/issues/20

Originally assigned to: @jasonmunro on GitHub.

By now the source (Account /Feed Name) is only available in a TD element inside of a TR element. if the source is added as a class, users can add their own styling based on the account.

The Unseen class is in a DIV that is a child of the subject TD. I think that class should also be given to the TR element, so that styling of the complete message in the list is possible.

Originally created by @R-J on GitHub (Oct 5, 2015). Original GitHub issue: https://github.com/cypht-org/cypht/issues/20 Originally assigned to: @jasonmunro on GitHub. By now the source (Account /Feed Name) is only available in a TD element inside of a TR element. if the source is added as a class, users can add their own styling based on the account. The Unseen class is in a DIV that is a child of the subject TD. I think that class should also be given to the TR element, so that styling of the complete message in the list is possible.

kerem

2026-02-25 21:33:56 +03:00

closed this issue
added the
enhancement
label

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 5, 2015):

I'm happy to add any classes that could be useful!

@jasonmunro commented on GitHub (Oct 5, 2015): I'm happy to add any classes that could be useful!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@R-J commented on GitHub (Oct 5, 2015):

Wow, thanks for that prompt reply! I thought of doing a pull request to support your work (and make my wish faster come true), but I found that it would need to change the way the core function message_list_row($values, $id, $style, $output_mod) works. And so you have to decide how to design that change.

The message_list_row function already has a $style parameter which I thought would be the best name for the style of the row, but by now it is a news/email flag. I would use $style for the table rows style and use a parameter called $type which holds the email/news information.
Another option would be to make $style of type array and do a if (in_array('news', $style)) wherever you've used if ($style == 'news') before. The actual style for TR could then be an implode(' ', $style)

But all that results in the need to weak a) the message row function and b) all modules that use this function. By now this seems to be "only" 6 files ;)

When it comes to styling, I would set classes at the highest possible level since in CSS you have selectors for childs, but not for parents.

@R-J commented on GitHub (Oct 5, 2015): Wow, thanks for that prompt reply! I thought of doing a pull request to support your work (and make my wish faster come true), but I found that it would need to change the way the core `function message_list_row($values, $id, $style, $output_mod)` works. And so you have to decide how to design that change. The message_list_row function already has a $style parameter which I thought would be the best name for the style of the row, but by now it is a news/email flag. I would use $style for the table rows style and use a parameter called $type which holds the email/news information. Another option would be to make $style of type array and do a `if (in_array('news', $style))` wherever you've used `if ($style == 'news')` before. The actual style for TR could then be an `implode(' ', $style)` But all that results in the need to weak a) the message row function and b) all modules that use this function. By now this seems to be ["only" 6 files ;)](https://github.com/jasonmunro/hm3/search?l=php&q=message_list_row&utf8=%E2%9C%93) When it comes to styling, I would set classes at the highest possible level since in CSS you have selectors for childs, but not for parents.

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 5, 2015):

Thanks for the detailed follow up! You are right, this is not quite as painless as I thought, but definitely still worth doing. I should have some time tonight and tomorrow to get this done, I will update the thread when I do!

@jasonmunro commented on GitHub (Oct 5, 2015): Thanks for the detailed follow up! You are right, this is not quite as painless as I thought, but definitely still worth doing. I should have some time tonight and tomorrow to get this done, I will update the thread when I do!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 6, 2015):

Changes to support this are committed:

Update the message_list_row() function to allow for additional row classes:
github.com/jasonmunro/hm3@6659c03345

Update module sets using message_list_row() to pass additional information to set the row class. Currently sets will set the source, the "type" (email/feeds/github/etc), and an "unseen" class if the item has that status. No CSS has been changed to use these classes as of yet:
github.com/jasonmunro/hm3@a77d9155b4

Thanks again for the feedback, and let me know if you run into any trouble!

@jasonmunro commented on GitHub (Oct 6, 2015): Changes to support this are committed: Update the message_list_row() function to allow for additional row classes: https://github.com/jasonmunro/hm3/commit/6659c03345ff69e50219c9daa158ebaee9cbb907 Update module sets using message_list_row() to pass additional information to set the row class. Currently sets will set the source, the "type" (email/feeds/github/etc), and an "unseen" class if the item has that status. No CSS has been changed to use these classes as of yet: https://github.com/jasonmunro/hm3/commit/a77d9155b448b7ac22c45359ed41155e4113c817 Thanks again for the feedback, and let me know if you run into any trouble!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 6, 2015):

I also just also changed the css around "unseen" so that only the subject is highlighted and not the entire row (maintaining the existing behavior)

@jasonmunro commented on GitHub (Oct 6, 2015): I also just also changed the css around "unseen" so that only the subject is highlighted and not the entire row (maintaining the existing behavior)

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@dumblob commented on GitHub (Oct 6, 2015):

Nice modifications, thanks.

@dumblob commented on GitHub (Oct 6, 2015): Nice modifications, thanks.

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 6, 2015):

This broke a few things (which I think I have all fixed), specifically around how we use the message list row class in the browser. A better fix than my hacks, is to move the row "id" value the js uses to an actual id attribute and not as a class attribute. It's on my list!

@jasonmunro commented on GitHub (Oct 6, 2015): This broke a few things (which I think I have all fixed), specifically around how we use the message list row class in the browser. A better fix than my hacks, is to move the row "id" value the js uses to an actual id attribute and not as a class attribute. It's on my list!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 6, 2015):

Along the sames lines as this request, I just added a message list specific class to the containing div for message list views. Now rows styles can be combined with that for per-message-list specific styles:

.unread_list table .email td { background-color: green; }

Not sure how handy this is, but might be nice for themes to be able to color-code rows in combined views only without effecting all message lists.

@jasonmunro commented on GitHub (Oct 6, 2015): Along the sames lines as this request, I just added a message list specific class to the containing div for message list views. Now rows styles can be combined with that for per-message-list specific styles: .unread_list table .email td { background-color: green; } Not sure how handy this is, but might be nice for themes to be able to color-code rows in combined views only without effecting all message lists.

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@R-J commented on GitHub (Oct 8, 2015):

That's a great thing! I named my accounts like my mail addresses and so I had to test a little while until I achieved what I wanted:

tr.firstname\@lastname\.de.unseen > :first-child {
    border-left: 6px solid #ff9900 !important;
}

tr.firstname\.lastname\@gmx\.de.unseen > :first-child {
    border-left: 6px solid #1c449b !important;
}

tr.firstname\@lastname\.de > :first-child {
    border-left: 2px solid #ff9900 !important;
}

tr.firstname\.lastname\@gmx\.de > :first-child {
    border-left: 2px solid #1c449b !important;
}

The "." and the "@" signs have to be escaped and I needed an "!important" in my css. I've saved that lines in a "custom.css" file and added @import url("custom.css"); at the top of site.css. Now I have colored markers for different accounts, while unread messages get a fat border and read messages only a small!

But I have the following problem: I have two different accounts and one stopped working after using the current master branch. While both list views (?page=message_list&list_path=imap_0_INBOX and ?page=message_list&list_path=imap_1_INBOX show correct results, all the combined views only include imap_1

Since I suspect this is a result of the changes made for this issue, I didn't create a new issue.

@R-J commented on GitHub (Oct 8, 2015): That's a great thing! I named my accounts like my mail addresses and so I had to test a little while until I achieved what I wanted: ``` tr.firstname\@lastname\.de.unseen > :first-child { border-left: 6px solid #ff9900 !important; } tr.firstname\.lastname\@gmx\.de.unseen > :first-child { border-left: 6px solid #1c449b !important; } tr.firstname\@lastname\.de > :first-child { border-left: 2px solid #ff9900 !important; } tr.firstname\.lastname\@gmx\.de > :first-child { border-left: 2px solid #1c449b !important; } ``` The "." and the "@" signs have to be escaped and I needed an "!important" in my css. I've saved that lines in a "custom.css" file and added `@import url("custom.css");` at the top of site.css. Now I have colored markers for different accounts, while unread messages get a fat border and read messages only a small! But I have the following problem: I have two different accounts and one stopped working after using the current master branch. While both list views (`?page=message_list&list_path=imap_0_INBOX` and `?page=message_list&list_path=imap_1_INBOX` show correct results, all the combined views only include imap_1 Since I suspect this is a result of the changes made for this issue, I didn't create a new issue.

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 8, 2015):

Weird! I'm not seeing that problem. First thing to double check is that the time limit for a combined view is not set so short that it excludes all messages from that account (for example, if you have the "unread since" setting for the unread combined view set to 1 week, but you don't have any messages in that account for the last week). The next thing to look at is the "sources" dropdown in the upper right (it's the folder icon). Are both accounts listed as sources for combined views? Finally, count the number of AJAX requests fired off when you load a combined view. It should be at least 1 per source. Also, make sure you have hard refreshed in your browser to force the latest js code to be used - if the js was stale you could see weird issues like this.

I'm not sure how the latest changes could break just 1 of 2 accounts, but it's possible. What name did you give the account that is missing? I wonder if there is something about that causing the problem. That is all I can think of for now - let me know what you find out!

@jasonmunro commented on GitHub (Oct 8, 2015): Weird! I'm not seeing that problem. First thing to double check is that the time limit for a combined view is not set so short that it excludes all messages from that account (for example, if you have the "unread since" setting for the unread combined view set to 1 week, but you don't have any messages in that account for the last week). The next thing to look at is the "sources" dropdown in the upper right (it's the folder icon). Are both accounts listed as sources for combined views? Finally, count the number of AJAX requests fired off when you load a combined view. It should be at least 1 per source. Also, make sure you have hard refreshed in your browser to force the latest js code to be used - if the js was stale you could see weird issues like this. I'm not sure how the latest changes could break just 1 of 2 accounts, but it's possible. What name did you give the account that is missing? I wonder if there is something about that causing the problem. That is all I can think of for now - let me know what you find out!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 8, 2015):

The "." and the "@" signs have to be escaped and I needed an "!important" in my css.
I've saved that lines in a "custom.css" file and added @import url("custom.css"); at the top of
site.css. Now I have ...

FYI, You can do this without changing the existing modules by putting your css in modules/site/site.css. It will automatically be included in the combined/minified css output. This will include it after the main css, so you might not need the !important attribute anymore (just depends on the style, you still might need it).

@jasonmunro commented on GitHub (Oct 8, 2015): > The "." and the "@" signs have to be escaped and I needed an "!important" in my css. > I've saved that lines in a "custom.css" file and added @import url("custom.css"); at the top of > site.css. Now I have ... FYI, You can do this without changing the existing modules by putting your css in modules/site/site.css. It will automatically be included in the combined/minified css output. This will include it after the main css, so you might not need the !important attribute anymore (just depends on the style, you still might need it).

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@R-J commented on GitHub (Oct 9, 2015):

Thanks for the modules/site/site.css hint!

I've sent you more details about my problem by mail - and guess which mail client I've used!

@R-J commented on GitHub (Oct 9, 2015): Thanks for the modules/site/site.css hint! I've sent you more details about my problem by mail - and guess which mail client I've used!

kerem commented

2026-02-25 21:33:56 +03:00

Author

Owner

@jasonmunro commented on GitHub (Oct 9, 2015):

Nice! I'm sure we can figure out what is going wrong. I'm going to close this thread since the original request is done. Don't hesitate to open a new issue if you need to!

@jasonmunro commented on GitHub (Oct 9, 2015): Nice! I'm sure we can figure out what is going wrong. I'm going to close this thread since the original request is done. Don't hesitate to open a new issue if you need to!