geary/ui/geary.css

170 lines
3.4 KiB
CSS
Raw Normal View History

/*
* Copyright 2016 Software Freedom Conservancy Inc.
* Copyright 2016, 2017 Michael Gratton <mike@vee.net>
*
* This software is licensed under the GNU Lesser General Public License
* (version 2.1 or later). See the COPYING file in this distribution.
*/
/* MainWindow */
.geary-folder-frame > border {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
}
.geary-conversation-frame > border {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
}
/* For 3-pane mode only */
.geary-sidebar-pane-separator.vertical .conversation-frame > border {
border-bottom-width: 0;
}
.geary-composer-box > border {
border-width: 0px;
}
.geary-composer-body > border {
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
.geary-titlebar-left:dir(ltr),
.geary-titlebar-right:dir(rtl) {
border-top-right-radius: 0px;
}
.geary-titlebar-right:dir(ltr),
.geary-titlebar-left:dir(rtl) {
border-top-left-radius: 0px;
}
/* MainWindowInfoBarSet */
.geary-info-bar-frame > border {
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
}
/* FolderPopover */
row.geary-folder-popover-list-row {
padding: 6px;
border-color: @borders;
border-style: groove;
border-bottom-width: 1px;
}
row.geary-folder-popover-list-row > label {
color: @theme_text_color;
}
/* ConversationListBox */
Break out ListBox used to display conversations into standalone widget. The conversation viewer's ListBox is sufficiently complex to warrant its own widget. Use empty placeholders for the list per the HIG, and correctly fix mamagement of empty folder vs no conversations selected this time. * src/client/application/geary-controller.vala (GearyController): Directly manage secondary parts of the conversation viewer, since the controller since it has a better and more timely idea of when a conversation change is due to folder loading status or from the user selecting conversations, and so the viwer doesn't need to hook back into the controller. Remove the now-unused conversations_selected signal and its callers. * src/client/conversation-viewer/conversation-listbox.vala: New widget for displaying the list of emails for a conversation. Moved relevant code from ConversationViewer here. Made adding emails async to get better UI responsiveness. Don't implement anything to handle conversation changes or emptying the list. * src/client/conversation-viewer/conversation-viewer.vala: Replace user messages - empty folder/search & no/multiple messages selected with new EmptyPlaceholder. Remove a lot of the state manage code needed when managing the email listbox. Add a new ConversationListBox for every new conversation and just throw away. * src/client/conversation-list/conversation-list-view.vala (ConversationListView): Clean up firing the conversations_selected signal - don't actually emit it when the model is clearing, and don't bother delaying the check either. * src/client/components/empty-placeholder.vala: New widget for displaying empty list and grid placeholders per the HIG. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): Make manually read a property, since it effectively is one. * src/CMakeLists.txt: Include new source files. * po/POTFILES.in: Include new source and UI files, and some missing ones. * ui/CMakeLists.txt: Include new UI files. * ui/conversation-viewer.ui: Replace user message and splash page with placeholders for the new empty placeholders(!). * ui/empty-placeholder.ui: UI def for new widget class. * ui/geary.css: Chase widget name/class changes, style new empty placeholder UI.
2016-07-25 10:33:42 +10:00
.conversation-listbox {
padding: 18px;
}
Break out ListBox used to display conversations into standalone widget. The conversation viewer's ListBox is sufficiently complex to warrant its own widget. Use empty placeholders for the list per the HIG, and correctly fix mamagement of empty folder vs no conversations selected this time. * src/client/application/geary-controller.vala (GearyController): Directly manage secondary parts of the conversation viewer, since the controller since it has a better and more timely idea of when a conversation change is due to folder loading status or from the user selecting conversations, and so the viwer doesn't need to hook back into the controller. Remove the now-unused conversations_selected signal and its callers. * src/client/conversation-viewer/conversation-listbox.vala: New widget for displaying the list of emails for a conversation. Moved relevant code from ConversationViewer here. Made adding emails async to get better UI responsiveness. Don't implement anything to handle conversation changes or emptying the list. * src/client/conversation-viewer/conversation-viewer.vala: Replace user messages - empty folder/search & no/multiple messages selected with new EmptyPlaceholder. Remove a lot of the state manage code needed when managing the email listbox. Add a new ConversationListBox for every new conversation and just throw away. * src/client/conversation-list/conversation-list-view.vala (ConversationListView): Clean up firing the conversations_selected signal - don't actually emit it when the model is clearing, and don't bother delaying the check either. * src/client/components/empty-placeholder.vala: New widget for displaying empty list and grid placeholders per the HIG. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): Make manually read a property, since it effectively is one. * src/CMakeLists.txt: Include new source files. * po/POTFILES.in: Include new source and UI files, and some missing ones. * ui/CMakeLists.txt: Include new UI files. * ui/conversation-viewer.ui: Replace user message and splash page with placeholders for the new empty placeholders(!). * ui/empty-placeholder.ui: UI def for new widget class. * ui/geary.css: Chase widget name/class changes, style new empty placeholder UI.
2016-07-25 10:33:42 +10:00
.conversation-listbox > row {
margin: 0;
border: 1px solid @borders;
border-bottom-width: 0;
padding: 0;
box-shadow: 0 4px 8px 1px rgba(0,0,0,0.4);
Reenable displaying sub-messages. Geary currently displays RFC 822 attachments inline, below the email's primary message body, using the same HTML chrome for the headers and email body as for the primary body. Taking the same approach but using GTK+ widgets meant splitting ConversationMessage up into a ConversationEmail class that manages the UI for displaying an email in its entirety, and a ConversationMessage to manage the only header widgets and webview for displaying an individual RFC 822 message, usable for both the primary body and any sub-messages. Thus, this is a big change. One behavioural change is that each sub-message with remote images now requires individual approval, rather than being dependant on the containing message's sender and/or approval. This prevents some attacks e.g. a trusted sender forwarding a spam/malware message, but does not prevent it if the message is forwarded inline, obviosuly. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): New class for managing the UI for an overall email message. This replaces the old ConversationMessage and contains much of it's code and widgets - anything from that class which does not directly support displaying headers or a message body. * src/client/conversation-viewer/conversation-message.vala: (ConversationMessage): Same class as before, but now with its scope narrowed to only display message headers and body. The draft infobar remains here rather than being put ConversationEmail where it belongs since it's bit of a pain to insert in the right place and doesn't really hurt. (::email): Moved this property and any code that depends on it to ConversationEmail. (::always_load_remote_images): New property passed in via the ctor, allowing one dependency on the old ::email property to be removed. (::inlined_content_ids): Moved to ConversationEmail, since that is the class that keeps track of attachments to display. Add the signal attachment_displayed_inline to allow ConversationEmail to be notified of inlined attachments instead. (::flag_remote_images, ::remember_remote_images): New signals to notify ConversationEmail that the user has flagged this message or the message's sender for loading remote images. This is passed through since in the former's case we may need to set flags on the email itself, the latter because it is one less use of the contact_store property, which should be removed from this class at some point. * src/client/conversation-viewer/conversation-viewer.vala: Chase API changes from the above. In general, replace use of the term "message" with "email" since this class is now mostly dealing with ConversationEmail instances, rather than ConversationMessage instances. (ConversationViewer::check_mark_read): Only consider the ConversationEmail's primary message body when checking for visibility rather than that and any submessages to keep things simple. (ConversationViewer::show_message, ::hide_message): Renamed to expand_email/collapse_email respectively since we don't ever actually hide it. Carry that change on to same methods on ConversationEmail. * src/engine/rfc822/rfc822-message.vala (Geary.RFC822.Message): Add get_primary_originator(), almost vermatim from Geary.Email, to support determining the sender for remembering remote message loading for senders of sub-emails. * src/client/components/main-window.vala (MainWindow::set_styling): Fix background transition for collapsed emails. * src/client/application/geary-controller.vala: Chase API name changes. * src/CMakeLists.txt: Include new ConversationEmail source file. * ui/conversation-email.ui: New UI for ConversationEmail, move the email action box, attachments box amd sub-messages box here from conversation-message.ui. * ui/CMakeLists.txt: Include new UI in compiled resources. * po/POTFILES.in: Add new UI for transation.
2016-04-19 16:52:34 +10:00
transition: margin 0.1s;
}
.conversation-listbox > row > box {
2016-07-08 11:12:42 +10:00
background: @theme_base_color;
Reenable displaying sub-messages. Geary currently displays RFC 822 attachments inline, below the email's primary message body, using the same HTML chrome for the headers and email body as for the primary body. Taking the same approach but using GTK+ widgets meant splitting ConversationMessage up into a ConversationEmail class that manages the UI for displaying an email in its entirety, and a ConversationMessage to manage the only header widgets and webview for displaying an individual RFC 822 message, usable for both the primary body and any sub-messages. Thus, this is a big change. One behavioural change is that each sub-message with remote images now requires individual approval, rather than being dependant on the containing message's sender and/or approval. This prevents some attacks e.g. a trusted sender forwarding a spam/malware message, but does not prevent it if the message is forwarded inline, obviosuly. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): New class for managing the UI for an overall email message. This replaces the old ConversationMessage and contains much of it's code and widgets - anything from that class which does not directly support displaying headers or a message body. * src/client/conversation-viewer/conversation-message.vala: (ConversationMessage): Same class as before, but now with its scope narrowed to only display message headers and body. The draft infobar remains here rather than being put ConversationEmail where it belongs since it's bit of a pain to insert in the right place and doesn't really hurt. (::email): Moved this property and any code that depends on it to ConversationEmail. (::always_load_remote_images): New property passed in via the ctor, allowing one dependency on the old ::email property to be removed. (::inlined_content_ids): Moved to ConversationEmail, since that is the class that keeps track of attachments to display. Add the signal attachment_displayed_inline to allow ConversationEmail to be notified of inlined attachments instead. (::flag_remote_images, ::remember_remote_images): New signals to notify ConversationEmail that the user has flagged this message or the message's sender for loading remote images. This is passed through since in the former's case we may need to set flags on the email itself, the latter because it is one less use of the contact_store property, which should be removed from this class at some point. * src/client/conversation-viewer/conversation-viewer.vala: Chase API changes from the above. In general, replace use of the term "message" with "email" since this class is now mostly dealing with ConversationEmail instances, rather than ConversationMessage instances. (ConversationViewer::check_mark_read): Only consider the ConversationEmail's primary message body when checking for visibility rather than that and any submessages to keep things simple. (ConversationViewer::show_message, ::hide_message): Renamed to expand_email/collapse_email respectively since we don't ever actually hide it. Carry that change on to same methods on ConversationEmail. * src/engine/rfc822/rfc822-message.vala (Geary.RFC822.Message): Add get_primary_originator(), almost vermatim from Geary.Email, to support determining the sender for remembering remote message loading for senders of sub-emails. * src/client/components/main-window.vala (MainWindow::set_styling): Fix background transition for collapsed emails. * src/client/application/geary-controller.vala: Chase API name changes. * src/CMakeLists.txt: Include new ConversationEmail source file. * ui/conversation-email.ui: New UI for ConversationEmail, move the email action box, attachments box amd sub-messages box here from conversation-message.ui. * ui/CMakeLists.txt: Include new UI in compiled resources. * po/POTFILES.in: Add new UI for transation.
2016-04-19 16:52:34 +10:00
transition: background 0.25s;
}
.conversation-listbox > row:hover > box {
2016-07-08 11:12:42 +10:00
background: shade(@theme_base_color, 0.96);
}
Break out ListBox used to display conversations into standalone widget. The conversation viewer's ListBox is sufficiently complex to warrant its own widget. Use empty placeholders for the list per the HIG, and correctly fix mamagement of empty folder vs no conversations selected this time. * src/client/application/geary-controller.vala (GearyController): Directly manage secondary parts of the conversation viewer, since the controller since it has a better and more timely idea of when a conversation change is due to folder loading status or from the user selecting conversations, and so the viwer doesn't need to hook back into the controller. Remove the now-unused conversations_selected signal and its callers. * src/client/conversation-viewer/conversation-listbox.vala: New widget for displaying the list of emails for a conversation. Moved relevant code from ConversationViewer here. Made adding emails async to get better UI responsiveness. Don't implement anything to handle conversation changes or emptying the list. * src/client/conversation-viewer/conversation-viewer.vala: Replace user messages - empty folder/search & no/multiple messages selected with new EmptyPlaceholder. Remove a lot of the state manage code needed when managing the email listbox. Add a new ConversationListBox for every new conversation and just throw away. * src/client/conversation-list/conversation-list-view.vala (ConversationListView): Clean up firing the conversations_selected signal - don't actually emit it when the model is clearing, and don't bother delaying the check either. * src/client/components/empty-placeholder.vala: New widget for displaying empty list and grid placeholders per the HIG. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): Make manually read a property, since it effectively is one. * src/CMakeLists.txt: Include new source files. * po/POTFILES.in: Include new source and UI files, and some missing ones. * ui/CMakeLists.txt: Include new UI files. * ui/conversation-viewer.ui: Replace user message and splash page with placeholders for the new empty placeholders(!). * ui/empty-placeholder.ui: UI def for new widget class. * ui/geary.css: Chase widget name/class changes, style new empty placeholder UI.
2016-07-25 10:33:42 +10:00
.conversation-listbox > row.geary-expanded {
margin-bottom: 6px;
border-bottom-width: 1px;
}
.conversation-listbox *.geary-matched *.geary-match {
color: @theme_selected_fg_color;
background: @theme_selected_bg_color;
}
Break out ListBox used to display conversations into standalone widget. The conversation viewer's ListBox is sufficiently complex to warrant its own widget. Use empty placeholders for the list per the HIG, and correctly fix mamagement of empty folder vs no conversations selected this time. * src/client/application/geary-controller.vala (GearyController): Directly manage secondary parts of the conversation viewer, since the controller since it has a better and more timely idea of when a conversation change is due to folder loading status or from the user selecting conversations, and so the viwer doesn't need to hook back into the controller. Remove the now-unused conversations_selected signal and its callers. * src/client/conversation-viewer/conversation-listbox.vala: New widget for displaying the list of emails for a conversation. Moved relevant code from ConversationViewer here. Made adding emails async to get better UI responsiveness. Don't implement anything to handle conversation changes or emptying the list. * src/client/conversation-viewer/conversation-viewer.vala: Replace user messages - empty folder/search & no/multiple messages selected with new EmptyPlaceholder. Remove a lot of the state manage code needed when managing the email listbox. Add a new ConversationListBox for every new conversation and just throw away. * src/client/conversation-list/conversation-list-view.vala (ConversationListView): Clean up firing the conversations_selected signal - don't actually emit it when the model is clearing, and don't bother delaying the check either. * src/client/components/empty-placeholder.vala: New widget for displaying empty list and grid placeholders per the HIG. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): Make manually read a property, since it effectively is one. * src/CMakeLists.txt: Include new source files. * po/POTFILES.in: Include new source and UI files, and some missing ones. * ui/CMakeLists.txt: Include new UI files. * ui/conversation-viewer.ui: Replace user message and splash page with placeholders for the new empty placeholders(!). * ui/empty-placeholder.ui: UI def for new widget class. * ui/geary.css: Chase widget name/class changes, style new empty placeholder UI.
2016-07-25 10:33:42 +10:00
.conversation-listbox > row.geary-last {
margin-bottom: 0;
}
/* ConversationEmail */
.geary-unread grid.geary-message-summary {
border-color: @theme_selected_bg_color;
transition: border 0.25s;
}
/* ConversationMessage */
grid.geary-message-summary {
border-top: 4px solid transparent;
padding: 12px;
padding-top: 8px;
transition: border 4s;
}
.geary-headers label {
margin: 0;
padding: 1px;
}
2017-12-11 21:42:55 +11:00
.geary-headers label.geary-header:dir(ltr) {
padding-right: 6px;
}
2017-12-11 21:42:55 +11:00
.geary-headers label.geary-header:dir(rtl) {
padding-left: 6px;
}
.geary-headers flowboxchild {
margin: 0;
padding: 1px;
}
.geary-headers flowboxchild label {
margin: 0;
padding: 0;
}
.geary-headers label.geary-from {
font-weight: bold;
}
.geary-header-value > flowboxchild:active {
background: mix(@theme_base_color, @theme_bg_color, 0.5);
}
.geary-header-value > flowboxchild:hover {
background: @theme_base_color;
}
2017-12-11 21:42:55 +11:00
.geary-header-value > flowboxchild label.dim-label:dir(ltr) {
margin-left: 6px;
}
2017-12-11 21:42:55 +11:00
.geary-header-value > flowboxchild label.dim-label:dir(rtl) {
margin-right: 6px;
}
2016-07-08 11:12:42 +10:00
.geary-submessages .geary-message {
background-image: linear-gradient(rgba(0,0,0,0.2), @bg_color 6px);
}
/* Composer */
.geary-composer-embed headerbar {
border-top: 1px solid @borders;
border-radius: 0px;
}
/* EmptyPlaceholder */
Break out ListBox used to display conversations into standalone widget. The conversation viewer's ListBox is sufficiently complex to warrant its own widget. Use empty placeholders for the list per the HIG, and correctly fix mamagement of empty folder vs no conversations selected this time. * src/client/application/geary-controller.vala (GearyController): Directly manage secondary parts of the conversation viewer, since the controller since it has a better and more timely idea of when a conversation change is due to folder loading status or from the user selecting conversations, and so the viwer doesn't need to hook back into the controller. Remove the now-unused conversations_selected signal and its callers. * src/client/conversation-viewer/conversation-listbox.vala: New widget for displaying the list of emails for a conversation. Moved relevant code from ConversationViewer here. Made adding emails async to get better UI responsiveness. Don't implement anything to handle conversation changes or emptying the list. * src/client/conversation-viewer/conversation-viewer.vala: Replace user messages - empty folder/search & no/multiple messages selected with new EmptyPlaceholder. Remove a lot of the state manage code needed when managing the email listbox. Add a new ConversationListBox for every new conversation and just throw away. * src/client/conversation-list/conversation-list-view.vala (ConversationListView): Clean up firing the conversations_selected signal - don't actually emit it when the model is clearing, and don't bother delaying the check either. * src/client/components/empty-placeholder.vala: New widget for displaying empty list and grid placeholders per the HIG. * src/client/conversation-viewer/conversation-email.vala (ConversationEmail): Make manually read a property, since it effectively is one. * src/CMakeLists.txt: Include new source files. * po/POTFILES.in: Include new source and UI files, and some missing ones. * ui/CMakeLists.txt: Include new UI files. * ui/conversation-viewer.ui: Replace user message and splash page with placeholders for the new empty placeholders(!). * ui/empty-placeholder.ui: UI def for new widget class. * ui/geary.css: Chase widget name/class changes, style new empty placeholder UI.
2016-07-25 10:33:42 +10:00
.geary-empty-placeholder > image {
margin-bottom: 12px;
}
.geary-empty-placeholder > .title {
font-weight: bold;
}