mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 01:36:06 +08:00
58004b29a7
Summary: WIP. I added a collection index to make displaying the threads of a currently selected participant on the sidebar easy and fast. The problem is that the `participants` of a thread, while a collection of `Contact` objects, have no "ids" for those contact objects. One idea was to create the join table but access contacts by email instead of id. This required a minor change to the way the data is entered in the join table. This means the sidebar can now simply do: `DatabaseStore.findAll(Thread).where(Thread.attributes.participants.contains('foo@bar.com'))` While I didn't for this initial test, we could also/instead create the `Message-Contact` join table. The trick about a Message-Contact table is that I believe we'd have to create additional columns further specifying which field we're interested in. The following two queries: `DatabaseStore.findAll(Message).where(Message.attributes.to.contains('foo@bar.com'))` `DatabaseStore.findAll(Message).where(Message.attributes.from.contains('foo@bar.com'))` would require additional columns in the `Message-Contact` join table because currently the only columns are `id` and `value`. In the case of the sidebar use case, I think the Thread participants is what you want to see anyway. Unfortunately an email-centric scheme can't distinguish between `noreply@phab.com <Evan>` and `noreply@phab.com <Juan>`. I actually think this may be a good thing since I think most people think in terms of email address as the unique key anyway and for the use case of showing related emails in the sidebar I'd rather overshow than undershow. This solution seems to be working pretty well in initial testing, but I want to see if you guys can think of anything this may subtly screw up down the line, or if you can think of a simpler way to do this. Test Plan: todo Reviewers: juan, bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D2687
667 lines
14 KiB
Plaintext
667 lines
14 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@message-max-width: 800px;
|
|
@message-spacing: 6px;
|
|
|
|
.tag-picker {
|
|
.menu {
|
|
.content-container {
|
|
height:250px;
|
|
overflow-y:scroll;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.platform-win32 {
|
|
.sheet-toolbar {
|
|
.message-toolbar-arrow.down {
|
|
margin: 0 0 0 1px;
|
|
padding: 0 5px;
|
|
.windows-btn-bg;
|
|
&:hover {
|
|
background: #e5e5e5;
|
|
}
|
|
&.btn-icon:hover {
|
|
color: @text-color;
|
|
img.content-mask { background: rgba(35, 31, 32, 0.8); }
|
|
}
|
|
}
|
|
.message-toolbar-arrow.up {
|
|
margin: 0 0 0 1px;
|
|
padding: 0 5px;
|
|
.windows-btn-bg;
|
|
&.btn-icon:hover {
|
|
color: @text-color;
|
|
img.content-mask { background: rgba(35, 31, 32, 0.8); }
|
|
}
|
|
}
|
|
.message-toolbar-arrow.disabled {
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
#message-list {
|
|
.message-item-wrap {
|
|
.message-item-white-wrap {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.minified-bundle {
|
|
.num-messages {
|
|
border-radius: 0;
|
|
}
|
|
.msg-line {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.footer-reply-area-wrap {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-toolbar {
|
|
// This class wraps the items that appear above the message list in the
|
|
// toolbar. We want the toolbar items to sit right above the centered
|
|
// content, so we need another 800px-wide container in the toolbar...
|
|
.message-toolbar-items {
|
|
order: 200;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-toolbar-arrow.down {
|
|
order:201;
|
|
margin-right: 0;
|
|
margin-left: @spacing-standard * 1.5;
|
|
}
|
|
.message-toolbar-arrow.up {
|
|
order:202;
|
|
// <1 because of hit region padding on the button
|
|
margin-right: @spacing-standard * 0.75;
|
|
}
|
|
.message-toolbar-arrow.disabled {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.mode-split {
|
|
.message-nav-title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hide-sidebar-button {
|
|
font-size: @font-size-small;
|
|
color: @text-color-subtle;
|
|
margin-left: @spacing-standard;
|
|
cursor:default;
|
|
-webkit-user-select: none;
|
|
.img-wrap {
|
|
margin-right: @spacing-half;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
img { background: @text-color-subtle; }
|
|
}
|
|
|
|
#message-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
background: @background-secondary;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
order: 2;
|
|
|
|
search-match, .search-match {
|
|
background: @text-color-search-match;
|
|
border-radius: @border-radius-base;
|
|
box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.25);
|
|
&.current-match {
|
|
background: @text-color-search-current-match;
|
|
}
|
|
}
|
|
|
|
.show-hidden-messages {
|
|
background-color: darken(@background-secondary, 4%);
|
|
border: 1px solid darken(@background-secondary, 8%);
|
|
border-radius: @border-radius-base;
|
|
color: @text-color-very-subtle;
|
|
margin-bottom: @padding-large-vertical;
|
|
cursor: default;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
a { float: right; }
|
|
}
|
|
|
|
.message-subject-wrap {
|
|
width: calc(~"100% - 12px");
|
|
max-width: @message-max-width;
|
|
margin: 11px auto 10px auto;
|
|
-webkit-user-select: text;
|
|
line-height: @font-size-large * 1.8;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 @padding-large-horizontal;
|
|
}
|
|
.mail-important-icon {
|
|
margin-right:@spacing-half;
|
|
margin-bottom:1px;
|
|
flex-shrink: 0;
|
|
}
|
|
.message-subject {
|
|
font-size: @font-size-large;
|
|
color: @text-color;
|
|
margin-right: @spacing-standard;
|
|
}
|
|
.message-icons-wrap {
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
background: @text-color-subtle;
|
|
}
|
|
div + div {
|
|
margin-left: @padding-small-horizontal;
|
|
}
|
|
}
|
|
.thread-injected-mail-labels {
|
|
vertical-align: top;
|
|
}
|
|
.message-list-headers {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
display:block;
|
|
|
|
.participants {
|
|
.contact-chip {
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.messages-wrap {
|
|
flex: 1;
|
|
opacity:0;
|
|
transition: opacity 0s;
|
|
}
|
|
.messages-wrap.ready {
|
|
opacity:1;
|
|
transition: opacity .1s linear;
|
|
}
|
|
|
|
.minified-bundle + .message-item-wrap {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.message-item-wrap {
|
|
transition: height 0.1s;
|
|
position: relative;
|
|
|
|
max-width: @message-max-width;
|
|
width: calc(~"100% - 12px");
|
|
|
|
margin: 0 auto;
|
|
|
|
.message-item-white-wrap {
|
|
background: @background-primary;
|
|
border: 0;
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
padding-bottom: @message-spacing * 2;
|
|
&.before-reply-area { padding-bottom: 0; }
|
|
|
|
&.collapsed {
|
|
.message-item-white-wrap {
|
|
background-color: darken(@background-primary, 2%);
|
|
padding-top: 19px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&+.minified-bundle {
|
|
margin-top: -@message-spacing
|
|
}
|
|
}
|
|
|
|
&.collapsed .message-item-area {
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: @font-size-small;
|
|
|
|
.collapsed-snippet {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.collapsed-attachment {
|
|
width:15px;
|
|
height:15px;
|
|
background-size: 15px;
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
padding:12px;
|
|
margin-left: 0.5em;
|
|
background-image:url(../static/images/message-list/icon-attachment-@2x.png);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.collapsed-from {
|
|
font-weight: @font-weight-semi-bold;
|
|
color: @text-color-very-subtle;
|
|
// min-width: 60px;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.collapsed-timestamp {
|
|
margin-left: 0.5em;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.message-item-divider {
|
|
border:0; // remove default hr border left, right
|
|
border-top: 2px solid @border-secondary-bg;
|
|
height: 3px;
|
|
background: @background-secondary;
|
|
border-bottom: 1px solid @border-primary-bg;
|
|
margin: 0;
|
|
|
|
&.collapsed {
|
|
height: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.minified-bundle {
|
|
margin-right: @message-spacing;
|
|
margin-left: @message-spacing;
|
|
position: relative;
|
|
.num-messages {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -80px;
|
|
margin-top: -15px;
|
|
border-radius: 15px;
|
|
border: 1px solid @border-color-divider;
|
|
width: 160px;
|
|
background: @background-primary;
|
|
text-align: center;
|
|
color: @text-color-very-subtle;
|
|
z-index: 2;
|
|
background: @background-primary;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
.msg-lines {
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
margin-top: -13px;
|
|
}
|
|
.msg-line {
|
|
border-radius: 4px 4px 0 0;
|
|
position: relative;
|
|
border-top: 1px solid @border-color-divider;
|
|
background-color: darken(@background-primary, 2%);
|
|
box-shadow: 0 0.5px 0 rgba(0,0,0,0.1), 0 -0.5px 0 rgba(0,0,0,0.1), 0.5px 0 0 rgba(0,0,0,0.1), -0.5px 0 0 rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.message-header {
|
|
position: relative;
|
|
font-size: @font-size-small;
|
|
padding-bottom: 0;
|
|
padding-top: 19px;
|
|
|
|
&.pending {
|
|
.message-actions-wrap {
|
|
width: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
.pending-spinner {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pending-spinner {
|
|
transition: opacity 100ms;
|
|
transition-delay: 50ms, 0ms;
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
.header-row {
|
|
margin-top: 0.5em;
|
|
color: @text-color-very-subtle;
|
|
|
|
.header-label {
|
|
float: left;
|
|
display: block;
|
|
font-weight: @font-weight-normal;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.header-name {
|
|
}
|
|
}
|
|
|
|
.message-actions-wrap {
|
|
transition: opacity 100ms, width 150ms;
|
|
transition-delay: 50ms, 0ms;
|
|
transition-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.message-actions-ellipsis {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.message-actions {
|
|
display: inline-block;
|
|
height: 23px;
|
|
border: 1px solid lighten(@border-color-divider, 6%);
|
|
border-radius: 11px;
|
|
|
|
z-index: 4;
|
|
margin-top: 0.35em;
|
|
margin-left: 0.5em;
|
|
text-align: center;
|
|
|
|
.btn-icon {
|
|
opacity: 0.75;
|
|
padding: 0 @spacing-half;
|
|
height: 20px;
|
|
line-height: 10px;
|
|
border-radius: 0;
|
|
border-right: 1px solid lighten(@border-color-divider, 6%);
|
|
&:last-child { border-right: 0; }
|
|
margin: 0;
|
|
&:active {background: transparent;}
|
|
}
|
|
}
|
|
|
|
.message-time {
|
|
padding-top: 4px;
|
|
z-index: 2; position: relative;
|
|
display: inline-block;
|
|
min-width: 125px;
|
|
cursor: default;
|
|
}
|
|
.msg-actions-tooltip {
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.message-time, .message-indicator {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.message-header-right {
|
|
z-index: 4;
|
|
position: relative;
|
|
top: -5px;
|
|
float: right;
|
|
text-align: right;
|
|
display: flex;
|
|
height: 2em;
|
|
}
|
|
|
|
}
|
|
|
|
.message-item-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: 0 20px @spacing-standard 20px;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-top: 10px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.collapse-region {
|
|
width: calc(~"100% - 30px");
|
|
height: 56px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.header-toggle-control {
|
|
&.inactive { display: none; }
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -1 * 13px;
|
|
img { background: @text-color-very-subtle; }
|
|
}
|
|
.message-item-wrap:hover {
|
|
.header-toggle-control.inactive { display: block; }
|
|
}
|
|
|
|
.footer-reply-area-wrap {
|
|
overflow: hidden;
|
|
|
|
width: calc(~"100% - 12px");
|
|
max-width: @message-max-width;
|
|
margin: -3px auto @spacing-double auto;
|
|
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
border: 0;
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
|
|
border-top: 1px dashed @border-color-divider;
|
|
border-radius: 0 0 4px 4px;
|
|
background: @background-primary;
|
|
|
|
color: @text-color-very-subtle;
|
|
img.content-mask { background-color:@text-color-very-subtle; }
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
|
|
.footer-reply-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: 12px @spacing-standard * 1.5;
|
|
}
|
|
.reply-text {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
}
|
|
.attachments-area {
|
|
padding-top: @spacing-standard;
|
|
|
|
// attachments are padded on both sides so that things like the remove "X" can
|
|
// overhang them. To make the attachments line up with the body, we need to outdent
|
|
margin-left: -@spacing-standard;
|
|
margin-right: -@spacing-standard;
|
|
|
|
cursor:default;
|
|
}
|
|
|
|
|
|
///////////////////////////////
|
|
// message-participants.cjsx //
|
|
///////////////////////////////
|
|
.pending {
|
|
.message-participants {
|
|
padding-left: 34px;
|
|
}
|
|
}
|
|
.message-participants {
|
|
z-index: 1;
|
|
position: relative;
|
|
display: flex;
|
|
transition: padding-left 150ms;
|
|
transition-timing-function: ease-in-out;
|
|
|
|
&.collapsed:hover {cursor: default;}
|
|
|
|
.from-contact {
|
|
font-weight: @headings-font-weight;
|
|
color: @text-color;
|
|
}
|
|
.from-label, .to-label, .cc-label, .bcc-label {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.to-contact, .cc-contact, .bcc-contact, .to-everyone {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
&.to-participants {
|
|
width: 100%;
|
|
|
|
.collapsed-participants {
|
|
width: 100%;
|
|
margin-top: -6px;
|
|
}
|
|
}
|
|
|
|
.collapsed-participants {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.to-contact {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.expanded-participants {
|
|
position: relative;
|
|
padding-right: 1.2em;
|
|
width: 100%;
|
|
|
|
.participant {
|
|
display: inline-block;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.participant-type {
|
|
margin-top: 0.5em;
|
|
&:first-child {margin-top: 0;}
|
|
}
|
|
|
|
.from-label, .to-label, .cc-label, .bcc-label {
|
|
float: left;
|
|
display: block;
|
|
text-transform: capitalize;
|
|
font-weight: @font-weight-normal;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.from-contact, .subject {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
|
|
// .from-label { margin-right: 1em; }
|
|
.to-label, .cc-label { margin-right: 0.5em; }
|
|
.bcc-label { margin-right: 0; }
|
|
|
|
.participant-primary {
|
|
color: @text-color-very-subtle;
|
|
margin-right: 0.15em;
|
|
display:inline-block;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
display:inline-block;
|
|
}
|
|
|
|
.from-contact {
|
|
.participant-primary {
|
|
color: @text-color;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////
|
|
// sidebar-contact-card.cjsx //
|
|
///////////////////////////////
|
|
.sidebar-section {
|
|
opacity: 0;
|
|
margin: 5px;
|
|
cursor: default;
|
|
border: 1px solid @border-primary-bg;
|
|
border-radius: @border-radius-large;
|
|
background: @background-primary;
|
|
padding: 15px;
|
|
|
|
&.visible {
|
|
transition: opacity 0.1s ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 11px;
|
|
font-weight: @font-weight-semi-bold;
|
|
text-transform: uppercase;
|
|
color: @text-color-very-subtle;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
margin: 2em 0 1em 0;
|
|
}
|
|
|
|
.sidebar-contact-card {
|
|
}
|
|
}
|
|
.sidebar-participant-picker {
|
|
padding: 10px 5px 20px 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
.column-MessageListSidebar {
|
|
background-color: @background-secondary;
|
|
overflow: auto;
|
|
border-left: 1px solid @border-color-divider;
|
|
color: @text-color-subtle;
|
|
.flexbox-handle-horizontal div {
|
|
border-right: 0;
|
|
width: 1px;
|
|
}
|
|
}
|