mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 12:40:08 +08:00
37af2ba42c
Summary:
- Separate gmail's remove-from-view and delete behaviors and write logic
for each of those
- Remove MailboxPerspective::{canArchiveThreads, canTrashThreads,
removeThreads} and some unecessary code in TaskFactory
- Instead, add MailboxPerspective::tasksForRemovingFromPerspective (I
know its a bit of a mouthful)
- I initially tried to put all of the logic for each execution path
inside the TaskFactory by checking perspective types, but it made
more sense to use the polymorphism already in place for the different
perspective types.
- There is a default delete/remove-from-view behavior which is
configurable via simple ruleset objects. The gmail behavior is
configured in this way.
- Update swipe css classes based on destination of threads
- Fixes #1460:
- Update logic to display archive/trash buttons and context menu options correctly
when selected threads can be archived/trashed (not based on
perspective)
- Same for swiping
- Add a bunch of specs
- Convert some code to ES6
- TODO write some docs for new functions
Test Plan: Unit tests
Reviewers: drew, evan, bengotow
Reviewed By: bengotow
Differential Revision: https://phab.nylas.com/D2682
562 lines
13 KiB
Text
562 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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.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 {
|
|
padding: 1px 8px;
|
|
font-size: 0.8em;
|
|
line-height: 17px;
|
|
.inner {
|
|
position: inherit;
|
|
}
|
|
.x {
|
|
display: none;
|
|
}
|
|
}
|
|
.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;
|
|
margin-top:10px;
|
|
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;
|
|
}
|
|
}
|
|
}
|