mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 12:40:08 +08:00
592374c0dc
Summary: This diff does two things: - It adds a new SwipeContainer that makes it easy to implement swipe gestures. This is built into listTabular, so you can create a list and define onSwipeLeft/Right to enable gestures. - It adds support for basic add/remove animations to the thread list. This works by adding a CSS transition to `top` and also leaving removed rows around for a specified time. (these times need to match.) Pretty much just cloned the core idea from TimeoutTransitionGroup. Test Plan: No tests yet Reviewers: evan, juan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2581
536 lines
12 KiB
Text
536 lines
12 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 {
|
|
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 {
|
|
background-color: mix(#8d6be3, @background-primary, 75%);
|
|
&::after {
|
|
content: "Snooze";
|
|
left: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-snooze@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #8d6be3;
|
|
&::after {
|
|
left: 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-top:8px;
|
|
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;
|
|
}
|
|
|
|
.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-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";
|
|
|
|
.thread-list .list-item .list-column-HoverActions {
|
|
display:none;
|
|
.action {
|
|
display:inline-block;
|
|
background-size: 100%;
|
|
zoom:0.5;
|
|
width: 81px;
|
|
height: 57px;
|
|
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;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
|
|
// 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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
}
|