mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
a3ede94423
Summary: The TaskQueue does it's own throttling and has it's own processQueue retry timeout, no need for longPollConnected Remove dead code (OfflineError) Rename long connection state to status so we don't ask for `state.state` Remove long poll actions related to online/offline in favor of exposing connection state through NylasSyncStatusStore Consoliate notifications and account-error-heaer into a single package and organize files into sidebar vs. header. Update the DeveloperBarStore to query the sync status store for long poll statuses Test Plan: All existing tests pass Reviewers: juan, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2835
225 lines
4.7 KiB
Plaintext
225 lines
4.7 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
.sidebar-activity-transition-wrapper {
|
|
order: 2;
|
|
z-index: 2;
|
|
overflow-y: auto;
|
|
|
|
&.sidebar-activity-empty {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.sidebar-activity {
|
|
display: block;
|
|
width: 100%;
|
|
bottom: 0;
|
|
background: @background-off-primary;
|
|
font-size: @font-size-small;
|
|
color: @text-color-subtle;
|
|
line-height:@line-height-computed * 0.95;
|
|
box-shadow:inset 0 1px 0 @border-color-divider;
|
|
&:hover { cursor: default }
|
|
|
|
.item {
|
|
border-bottom:1px solid @border-color-divider;
|
|
&:hover { cursor: default }
|
|
|
|
.inner {
|
|
padding: @padding-large-vertical*1.2 @padding-base-horizontal @padding-large-vertical*1.2 @padding-base-horizontal;
|
|
}
|
|
.count {
|
|
color: @text-color-very-subtle;
|
|
float:right;
|
|
}
|
|
.btn {
|
|
display:block;
|
|
text-align:center;
|
|
margin-top:4px;
|
|
margin-bottom:4px;
|
|
font-size: @font-size-small;
|
|
}
|
|
.progress-track {
|
|
display:block;
|
|
height:3px;
|
|
font-size:0;
|
|
background: rgba(0,0,0,0.1);
|
|
.progress {
|
|
transition: width 0.4s;
|
|
height:3px;
|
|
background-color: @background-color-info;
|
|
}
|
|
}
|
|
// TODO: Necessary for Chromium 42 to render `activity-opacity-leave` animation
|
|
// properly. Removing position relative causes the div to remain visible
|
|
position:relative;
|
|
opacity: 1;
|
|
|
|
.account-detail-area {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s;
|
|
}
|
|
&.expanded-sync {
|
|
.account-detail-area {
|
|
max-height: 1000px;
|
|
}
|
|
.account.inner {
|
|
border-top: 1px solid rgba(0,0,0,0.1)
|
|
}
|
|
}
|
|
h2 {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
}
|
|
h3 {
|
|
font-size: 14px;
|
|
margin: 10px 0 4px 0;
|
|
}
|
|
.amount {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: @text-color-subtle;
|
|
}
|
|
.close-expanded {
|
|
display: block;
|
|
margin: 0 @padding-base-horizontal @padding-large-vertical @padding-base-horizontal;
|
|
}
|
|
|
|
.complete .progress-track .progress {
|
|
background-color: @color-success;
|
|
}
|
|
}
|
|
|
|
transition: height 0.4s;
|
|
transition-delay: 2s;
|
|
&.sidebar-activity-error {
|
|
.progress {
|
|
background-color: @color-error;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-opacity-enter {
|
|
opacity:0;
|
|
transition: opacity .125s ease-out;
|
|
}
|
|
|
|
.activity-opacity-enter.activity-opacity-enter-active {
|
|
opacity:1;
|
|
}
|
|
|
|
.activity-opacity-leave {
|
|
opacity:1;
|
|
transition: opacity .125s ease-in;
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.activity-opacity-leave.activity-opacity-leave-active {
|
|
transition-delay: 0.5s;
|
|
opacity:0;
|
|
}
|
|
|
|
.notifications-sticky {
|
|
width:100%;
|
|
|
|
.notification-info {
|
|
background-color: @background-color-info;
|
|
}
|
|
.notification-developer {
|
|
background-color: #615396;
|
|
}
|
|
.notification-error {
|
|
background-color: @background-color-error;
|
|
border-color: @background-color-error;
|
|
color: @color-error;
|
|
}
|
|
.notification-success {
|
|
border-color: @background-color-success;
|
|
}
|
|
.notification-offline {
|
|
background-color: #CC9900;
|
|
border-color: darken(#CC9900, 5%);
|
|
}
|
|
|
|
.notifications-sticky-item {
|
|
display:flex;
|
|
font-size: @font-size-base;
|
|
color:@text-color-inverse;
|
|
border-top:1px solid rgba(0,0,0,0.25);
|
|
border-bottom:1px solid rgba(0,0,0,0.25);
|
|
padding-left: @padding-base-horizontal;
|
|
line-height: @line-height-base * 1.5;
|
|
align-items: baseline;
|
|
a {
|
|
flex-shrink: 0;
|
|
color:@text-color-inverse;
|
|
padding: 0 @padding-base-horizontal;
|
|
}
|
|
a:hover {
|
|
background-color: rgba(255,255,255,0.15);
|
|
text-decoration:none;
|
|
color:@text-color-inverse;
|
|
}
|
|
a.default {
|
|
background-color: rgba(0,0,0,0.15);
|
|
}
|
|
a.default:hover {
|
|
background-color: rgba(255,255,255,0.15);
|
|
}
|
|
i {
|
|
margin-right:@padding-base-horizontal;
|
|
}
|
|
.icon {
|
|
display: inline-block;
|
|
align-self: center;
|
|
line-height: 16px;
|
|
margin-right:@padding-base-horizontal;
|
|
|
|
img {
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
|
|
div.message {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: @line-height-base * 1.1;
|
|
padding: @padding-small-vertical 0;
|
|
}
|
|
|
|
&.has-default-action:hover {
|
|
-webkit-filter: brightness(110%);
|
|
cursor:default;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Windows Changes
|
|
|
|
body.platform-win32 {
|
|
.notifications-sticky {
|
|
.notifications-sticky-item {
|
|
a {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Activity Error Header
|
|
|
|
.account-error-header.notifications-sticky {
|
|
.notifications-sticky-item {
|
|
background-color: initial;
|
|
background: linear-gradient(to top, #ca2541 0%, #d55268 100%);
|
|
}
|
|
}
|