mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 12:40:08 +08:00
552b66fbaf
Summary:
This diff replaces "finalizeSessionBeforeSending" with a
plugin hook that is bidirectional and allows us to put the draft in
the "ready to send" state every time we save it, and restore it to
the "ready to edit" state every time a draft session is created to
edit it.
This diff also significantly restructures the draft tasks:
1. SyncbackDraftUploadsTask:
- ensures that `uploads` are converted to `files` and that any
existing files on the draft are part of the correct account.
1. SyncbackDraftTask:
- saves the draft, nothing else.
3. SendDraftTask
- sends the draft, nothing else.
- deletes the entire uploads directory for the draft
Test Plan: WIP
Reviewers: juan, evan
Reviewed By: evan
Differential Revision: https://phab.nylas.com/D2753
547 lines
13 KiB
Text
547 lines
13 KiB
Text
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@scrollbar-margin: 8px;
|
|
|
|
// MIXINS
|
|
|
|
.inverseContent() {
|
|
// Note: these styles are also applied below
|
|
// subpixel antialiasing looks awful against dark background colors
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
color: @text-color-inverse;
|
|
|
|
.participants {
|
|
.unread-true {
|
|
font-weight: @font-weight-normal;
|
|
}
|
|
}
|
|
.subject {
|
|
font-weight: @font-weight-normal;
|
|
}
|
|
|
|
.thread-icon, .draft-icon, .mail-important-icon {
|
|
-webkit-filter: brightness(600%) grayscale(100%);
|
|
}
|
|
|
|
.mail-label {
|
|
// Note - these !important styles override values set by a style tag
|
|
// since the color of the label is detemined programatically.
|
|
background: fade(@text-color-inverse, 20%) !important;
|
|
box-shadow: none !important;
|
|
-webkit-filter: brightness(600%) grayscale(100%);
|
|
}
|
|
|
|
}
|
|
|
|
// STYLES
|
|
|
|
*:focus, input:focus {
|
|
outline:none;
|
|
}
|
|
|
|
.thread-list, .draft-list {
|
|
.list-container, .scroll-region {
|
|
width:100%;
|
|
height:100%;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
.swipe-backing {
|
|
background-color: darken(@background-primary, 10%);
|
|
&::after {
|
|
color: fade(white, 90%);
|
|
padding-top: 45px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: @font-size-small;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(0%);
|
|
width: 80px;
|
|
bottom: 0;
|
|
opacity: 0.8;
|
|
transition: opacity linear 150ms;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 35%;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
&.swipe-trash {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#ed304b, @background-primary, 75%);
|
|
&::after {
|
|
transition: left linear 150ms, transform linear 150ms;
|
|
content: "Trash";
|
|
left: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-trash@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #ed304b;
|
|
&::after {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&.swipe-archive,&.swipe-all {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#6cd420, @background-primary, 75%);
|
|
&::after {
|
|
transition: left linear 150ms, transform linear 150ms;
|
|
content: "Archive";
|
|
left: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-archive@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #6cd420;
|
|
&::after {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&.swipe-snooze {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#8d6be3, @background-primary, 75%);
|
|
&::after {
|
|
transition: right linear 150ms, transform linear 150ms;
|
|
content: "Snooze";
|
|
right: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-snooze@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #8d6be3;
|
|
&::after {
|
|
right: 100%;
|
|
transform: translateX(100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
background-color: darken(@background-primary, 2%);
|
|
border-bottom: 1px solid fade(@list-border, 60%);
|
|
line-height: 36px;
|
|
}
|
|
|
|
.mail-important-icon {
|
|
margin-left:6px;
|
|
padding: 12px;
|
|
vertical-align: initial;
|
|
&:not(.active) {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.message-count {
|
|
color: @text-color-inverse;
|
|
background: @background-tertiary;
|
|
padding: 4px 6px 2px 6px;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.draft-icon {
|
|
margin-left:10px;
|
|
flex-shrink: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.participants {
|
|
font-size: @font-size-small;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
|
|
&.no-recipients {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
.subject {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
padding-right: @padding-base-horizontal;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
// Shrink, but only after snippet has shrunk
|
|
flex-shrink:0.1;
|
|
}
|
|
.snippet {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
opacity: 0.62;
|
|
flex: 1;
|
|
}
|
|
.thread-icon {
|
|
margin-right:@padding-base-horizontal;
|
|
margin-left:@padding-base-horizontal;
|
|
}
|
|
}
|
|
|
|
.list-column-State {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.list-column-Date {
|
|
text-align: right;
|
|
}
|
|
|
|
.timestamp {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
min-width:70px;
|
|
margin-right:@scrollbar-margin;
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.unread:not(.focused):not(.selected) {
|
|
background-color: @background-primary;
|
|
&:hover {
|
|
background: darken(@background-primary, 2%);
|
|
}
|
|
.snippet {
|
|
color: @text-color-subtle;
|
|
}
|
|
}
|
|
|
|
.unread:not(.focused):not(.selected):not(.next-is-selected) {
|
|
border-bottom: 1px solid @list-border;
|
|
}
|
|
|
|
.unread:not(.focused) {
|
|
// Never show any unread styles when the thread is focused.
|
|
// It will be marked as read and the delay from focus=>read
|
|
// is noticeable.
|
|
.subject {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participants {
|
|
.unread-true {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.focused {
|
|
.inverseContent;
|
|
}
|
|
|
|
.thread-injected-icons {
|
|
vertical-align: top;
|
|
}
|
|
.thread-injected-mail-labels {
|
|
margin-right: 6px;
|
|
}
|
|
.thread-icon {
|
|
width:25px;
|
|
height:24px;
|
|
flex-shrink:0;
|
|
background-size: 15px;
|
|
display:inline-block;
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
|
|
&.thread-icon-attachment {
|
|
background-image:url(../static/images/thread-list/icon-attachment-@2x.png);
|
|
margin-right:0;
|
|
margin-left:0;
|
|
}
|
|
&.thread-icon-unread {
|
|
background-image:url(../static/images/thread-list/icon-unread-@2x.png);
|
|
}
|
|
&.thread-icon-replied {
|
|
background-image:url(../static/images/thread-list/icon-replied-@2x.png);
|
|
}
|
|
&.thread-icon-forwarded {
|
|
background-image:url(../static/images/thread-list/icon-forwarded-@2x.png);
|
|
}
|
|
&.thread-icon-star {
|
|
background-size: 16px;
|
|
background-image:url(../static/images/thread-list/icon-star-@2x.png);
|
|
}
|
|
}
|
|
.star-button {
|
|
font-size: 16px;
|
|
.fa-star {
|
|
color: rgb(239, 209, 0);
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: rgb(220,220,220);
|
|
}
|
|
}
|
|
.fa-star-o {
|
|
color: rgb(220,220,220);
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: rgb(239, 209, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// quick actions
|
|
@archive-img: "../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png";
|
|
@trash-img: "../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png";
|
|
@snooze-img: "../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png";
|
|
|
|
.thread-list .list-item .list-column-HoverActions {
|
|
display:none;
|
|
.action {
|
|
display: inline-block;
|
|
background-size: 100%;
|
|
zoom: 0.5;
|
|
width: 81px;
|
|
height: 51px;
|
|
margin: 9px 16px 0 16px;
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat, @background-gradient;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat, @background-gradient;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat, @background-gradient;
|
|
}
|
|
}
|
|
body.platform-win32 {
|
|
.thread-list .list-item .list-column-HoverActions {
|
|
.action {
|
|
border: 0;
|
|
margin: 9px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
.thread-list .list-item:hover .list-column-HoverActions {
|
|
width: 0;
|
|
padding: 0;
|
|
display:block;
|
|
overflow: visible;
|
|
height:100%;
|
|
|
|
.inner {
|
|
position:relative;
|
|
width:300px;
|
|
height:100%;
|
|
left: -300px;
|
|
.thread-injected-quick-actions {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.thread-list .list-item:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(darken(@list-bg, 5%), 0%) 0%, darken(@list-bg, 5%) 50%, darken(@list-bg, 5%) 100%);
|
|
}
|
|
|
|
.thread-list .list-item.selected:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-selected-bg, 0%) 0%, @list-selected-bg 50%, @list-selected-bg 100%);
|
|
}
|
|
|
|
.thread-list .list-item.focused:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
|
|
.action {
|
|
-webkit-filter: invert(100%) brightness(300%);
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat;
|
|
}
|
|
}
|
|
|
|
|
|
// stars
|
|
|
|
.thread-list .thread-icon-star:hover
|
|
{
|
|
background-image:url(../static/images/thread-list/icon-star-@2x.png);
|
|
background-size: 16px;
|
|
-webkit-filter: brightness(90%);
|
|
}
|
|
.thread-list .list-item:hover .thread-icon-none:hover {
|
|
background-image:url(../static/images/thread-list/icon-star-action-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.thread-list .list-item:hover .thread-icon-none {
|
|
background-image:url(../static/images/thread-list/icon-star-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.thread-list .list-item:hover .mail-important-icon.enabled {
|
|
visibility: inherit;
|
|
}
|
|
.thread-list .thread-icon-star-on-hover:hover {
|
|
background-image:url(../static/images/thread-list/icon-star-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
|
|
.thread-list-narrow {
|
|
.list-column {
|
|
display:block;
|
|
}
|
|
.list-tabular-item {
|
|
line-height: 21px;
|
|
}
|
|
.timestamp {
|
|
order: 100;
|
|
min-width: 0;
|
|
}
|
|
.participants {
|
|
font-size: @font-size-base;
|
|
}
|
|
.thread-icon {
|
|
margin-right:5px;
|
|
}
|
|
|
|
.mail-important-icon {
|
|
margin-left:1px;
|
|
float:left;
|
|
padding: 12px;
|
|
vertical-align: initial;
|
|
}
|
|
|
|
.subject {
|
|
font-size: @font-size-base;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
margin-left:30px;
|
|
margin-right:@scrollbar-margin;
|
|
}
|
|
.snippet-and-labels {
|
|
margin-left:30px;
|
|
margin-right:@scrollbar-margin;
|
|
display: flex;
|
|
align-items: baseline;
|
|
overflow: hidden;
|
|
|
|
.mail-label {
|
|
font-size: 0.8em;
|
|
line-height: 17px;
|
|
}
|
|
|
|
.snippet {
|
|
font-size: @font-size-small;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.7;
|
|
text-align: left;
|
|
min-height: 21px;
|
|
margin-right:4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// selection looks like focus in split mode
|
|
|
|
.thread-list.handler-split {
|
|
.list-item {
|
|
&.selected {
|
|
background: @list-focused-bg;
|
|
color: @list-focused-color;
|
|
.inverseContent;
|
|
}
|
|
}
|
|
.list-item.selected:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
|
|
.action {
|
|
-webkit-filter: invert(100%) brightness(300%);
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
body.is-blurred {
|
|
.thread-list.handler-split {
|
|
.list-item {
|
|
&.selected {
|
|
background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
|
|
border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes sending-progress-move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
.draft-list {
|
|
.sending {
|
|
background-color: @background-primary;
|
|
&:hover {
|
|
background-color: @background-primary;
|
|
}
|
|
}
|
|
|
|
.sending-progress {
|
|
display: block;
|
|
height:7px;
|
|
align-self: center;
|
|
background-color: @background-primary;
|
|
border-bottom:1px solid @border-color-divider;
|
|
position: relative;
|
|
|
|
.filled {
|
|
display: block;
|
|
background: @component-active-color;
|
|
height:6px;
|
|
width: 0; //overridden by style
|
|
transition: width 1000ms linear;
|
|
}
|
|
.indeterminate {
|
|
display: block;
|
|
background: @component-active-color;
|
|
height:6px;
|
|
width: 100%;
|
|
}
|
|
.indeterminate:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, .2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, .2) 50%,
|
|
rgba(255, 255, 255, .2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 50px 50px;
|
|
animation: sending-progress-move 2s linear infinite;
|
|
}
|
|
}
|
|
}
|