mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 20:44:30 +08:00
0e19f4511e
Summary: Previously, when adding an account, we waited for it to be completely loaded (which meant having fetched the folder list) before focusing it on the sidebar. This could take several seconds, so it made the app feel unresponsive or slow when adding an account. Then, we changed the logic to wait an arbitrary amount of time to focus the newly added account in the sidebar, with the hope that it would be enough time to focus it correctly but that it wouldn't seem too long. This still caused the unwanted effect of focusing it before it had been fully loaded. This commit changes the auth flow so that the onboarding shows a Success page until the newly added account is fully loaded, and only /then/ closes itself, focuses the main window, and allows the account to be correctly focused in the sidebar. Test Plan: manual Reviewers: halla, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D3751
616 lines
10 KiB
Text
616 lines
10 KiB
Text
@import "onboarding-reset";
|
|
|
|
@-webkit-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.alpha-fade-enter {
|
|
opacity: 0.01;
|
|
transition: all .15s ease-out;
|
|
}
|
|
|
|
.alpha-fade-enter.alpha-fade-enter-active {
|
|
opacity: 1;
|
|
}
|
|
.alpha-fade-leave {
|
|
opacity: 1;
|
|
transition: all .15s ease-in;
|
|
}
|
|
|
|
.alpha-fade-leave.alpha-fade-leave-active {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.page-frame {
|
|
text-align: center;
|
|
flex: 1;
|
|
|
|
.page-container {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.page {
|
|
background-color: #F3F3F3;
|
|
flex: 1;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 100;
|
|
font-size: 40pt;
|
|
margin:0;
|
|
}
|
|
|
|
h2 {
|
|
line-height: 1.3em;
|
|
font-size: 30pt;
|
|
font-weight: 200;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 400;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
.logo-container {
|
|
width: 117px;
|
|
height: 117px;
|
|
display: inline-block;
|
|
padding-top: 40px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.btn-add-account {
|
|
width: 170px;
|
|
margin-left: 10px;
|
|
transition: width 150ms ease-in-out;
|
|
}
|
|
.btn-add-account.spinning {
|
|
img { vertical-align: middle; margin-right: 5px; margin-bottom: 2px; }
|
|
}
|
|
|
|
.prompt {
|
|
color:#5D5D5D;
|
|
font-size:1.07em;
|
|
font-weight:300;
|
|
margin-top:20px;
|
|
margin-bottom:14px;
|
|
}
|
|
|
|
.close {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 1px;
|
|
left: 6px;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: 15px;
|
|
left: 15px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom:15px;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
|
|
&.error {
|
|
color: #A33;
|
|
-webkit-user-select: text;
|
|
a {
|
|
color: #A33;
|
|
}
|
|
}
|
|
&.empty {
|
|
color: gray;
|
|
}
|
|
}
|
|
|
|
form.settings {
|
|
padding: 0 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
input {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 7px;
|
|
margin-bottom: 10px;
|
|
background: #FFF;
|
|
color: #333;
|
|
text-align: left;
|
|
border: 1px solid #AAA;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: #C6C6C6;
|
|
}
|
|
|
|
&[type=checkbox] {
|
|
width: initial;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&:disabled {
|
|
background: fadeout(@input-bg, 40%);
|
|
}
|
|
&.error {
|
|
border: 1px solid #A33;
|
|
}
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
color: #888;
|
|
text-align: left;
|
|
padding:3px 0;
|
|
}
|
|
|
|
label[for=subscribe-check] {
|
|
color: black;
|
|
white-space: inherit;
|
|
}
|
|
|
|
label.checkbox {
|
|
width: inherit;
|
|
}
|
|
|
|
.toggle-advanced {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 0.94em;
|
|
text-align: right;
|
|
padding: 0;
|
|
}
|
|
|
|
.btn {
|
|
margin-top:8px;
|
|
}
|
|
}
|
|
|
|
.page.authenticate {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
webview {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.webview-loading-spinner {
|
|
position: absolute;
|
|
right: 17px;
|
|
top: 17px;
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in-out;
|
|
transition-delay: 200ms;
|
|
&.loading-true {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.webview-cover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #F3F3F3;
|
|
opacity: 1;
|
|
transition: opacity 200ms ease-out;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.message {
|
|
color: #444;
|
|
opacity: 0;
|
|
margin-top: 20px;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
.try-again {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
}
|
|
.webview-cover.slow,
|
|
.webview-cover.error {
|
|
.message {
|
|
opacity: 1;
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
.webview-cover.error {
|
|
.spinner { visibility: hidden;}
|
|
.try-again {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.webview-cover.ready {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.page.account-choose {
|
|
h2 {
|
|
margin-top: 104px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.provider-list {
|
|
margin:auto;
|
|
width: 280px;
|
|
}
|
|
.cloud-sync-note {
|
|
margin-bottom: 20px;
|
|
cursor: default;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.provider-name {
|
|
font-size: 18px;
|
|
font-weight: 300;
|
|
color: rgba(0,0,0,0.7);
|
|
}
|
|
|
|
.provider {
|
|
text-align: left;
|
|
cursor: default;
|
|
line-height: 63px;
|
|
|
|
.icon-container {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: inline-block;
|
|
box-sizing: content-box;
|
|
padding: 0 15px 0 20px;
|
|
vertical-align: top;
|
|
zoom: 0.9;
|
|
}
|
|
}
|
|
.provider:hover{
|
|
background: rgba(255,255,255,0.4);
|
|
}
|
|
}
|
|
|
|
.page.account-setup {
|
|
form {
|
|
width: 400px;
|
|
padding-top: 20px;
|
|
margin: auto;
|
|
}
|
|
.twocol {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 700px;
|
|
margin: auto;
|
|
transition: width 400ms ease-in-out;
|
|
}
|
|
.twocol.hide-second-column {
|
|
width: 400px;
|
|
.col:nth-child(2) {
|
|
opacity: 0;
|
|
flex: 0;
|
|
padding: 0;
|
|
flex-shrink: 1;
|
|
}
|
|
.col:first-child {
|
|
}
|
|
}
|
|
.col {
|
|
flex: 1;
|
|
padding: 0 20px;
|
|
opacity: 1;
|
|
border-left: 1px solid #ddd;
|
|
overflow: hidden;
|
|
transition: all 400ms ease-in-out;
|
|
}
|
|
.col:first-child {
|
|
border-left: none;
|
|
}
|
|
.col-heading {
|
|
text-align: left;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.page.account-setup.AccountExchangeSettingsForm {
|
|
.logo-container {
|
|
padding-top: 36px;
|
|
}
|
|
.twocol {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.page.account-setup.AccountIMAPSettingsForm {
|
|
h2 {
|
|
padding-top: 36px;
|
|
}
|
|
.logo-container {
|
|
display: none;
|
|
}
|
|
.twocol {
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
.page.account-setup.google, .page.account-setup.AccountOnboardingSuccess {
|
|
.logo-container {
|
|
padding-top: 160px;
|
|
}
|
|
}
|
|
|
|
.page.tutorial {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&.appeared-false {
|
|
.tutorial-container .left {
|
|
transform: translate3d(-30px, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
.tutorial-container .right {
|
|
transform: translate3d(30px, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.tutorial-container {
|
|
background-color: #F9F9F9;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
|
|
.left {
|
|
align-self: center;
|
|
flex: 2;
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: all ease-in-out 400ms;
|
|
|
|
.screenshot {
|
|
width: 523px;
|
|
height: 385px;
|
|
background:url(nylas://onboarding/assets/app-screenshot@2x.png) top left no-repeat;
|
|
background-size: contain;
|
|
margin:auto;
|
|
position: relative;
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
width:40px;
|
|
height:40px;
|
|
border: 2px solid rgba(0,0,0,0.7);
|
|
border-radius: 20px;
|
|
transform:translate3d(-50%, -50%, 0);
|
|
transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 260ms;
|
|
|
|
.overlay-content {
|
|
transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 260ms;
|
|
transform: translate3d(-67px,-67px,0) scale(0.21);
|
|
background:url(nylas://onboarding/assets/app-screenshot@2x.png) top left no-repeat;
|
|
background-position: 10% 20%;
|
|
border-radius: 73px;
|
|
width: 146px;
|
|
height: 146px;
|
|
opacity: 0;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.overlay.seen {
|
|
border: 2px solid rgba(0,0,0,0.3);
|
|
}
|
|
.overlay.expanded {
|
|
width:150px;
|
|
height:150px;
|
|
border: 2px solid rgba(0,0,0,0.7);
|
|
border-radius: 75px;
|
|
box-shadow: 0 0 15px fade(#2673D1, 50%);
|
|
z-index: 2;
|
|
|
|
.overlay-content {
|
|
transform:scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
padding: 30px;
|
|
padding-left: 0;
|
|
opacity: 1;
|
|
transform:translate3d(0, 0, 0);
|
|
transition: all ease-in-out 400ms;
|
|
|
|
h2 {
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
line-height: 1.85em;
|
|
text-align: left;
|
|
padding: 10px 0;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page.welcome {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.footer {
|
|
background-image: linear-gradient(to right, rgba(167,214,134,1) 0%,rgba(122,201,201,1) 100%);
|
|
}
|
|
|
|
@-webkit-keyframes slideIn {
|
|
from {
|
|
transform: translate3d(20,0,0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translate3d(0,0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
border-bottom: 1px solid white;
|
|
text-decoration: none;
|
|
font-weight: 300;
|
|
&:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
}
|
|
|
|
.steps-container {
|
|
position: relative;
|
|
flex: 1;
|
|
background-image: linear-gradient(to right, rgba(149,205,107,1) 0%,rgba(60,176,176,1) 100%);
|
|
color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: 34px;
|
|
line-height: 41px;
|
|
font-weight: 200;
|
|
cursor: default;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
.sub-text {
|
|
font-size: 17px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
img.icons {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.page.welcome,
|
|
.page.tutorial {
|
|
.footer {
|
|
text-align: center;
|
|
background-color: #ececec;
|
|
border-top: 1px solid rgba(0,0,0,0.10);
|
|
box-shadow: 0 1px 1px solid rgba(255,255,255,0.25);
|
|
|
|
.btn-next,
|
|
.btn-prev {
|
|
width: 160px;
|
|
margin: 20px 10px;
|
|
}
|
|
.btn-continue {
|
|
font-weight: 300;
|
|
margin: 20px 0;
|
|
width: 296px;
|
|
line-height: 2.5em;
|
|
height: 2.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.platform-win32 {
|
|
.page-frame {
|
|
.alpha-fade-enter {
|
|
transition: all .01s ease-out;
|
|
}
|
|
.alpha-fade-leave {
|
|
transition: opacity .01s ease-in;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Individual Components
|
|
|
|
.appearance-mode {
|
|
background-color:#f7f9f9;
|
|
border-radius: 10px;
|
|
border: 1px solid #c6c7c7;
|
|
text-align: center;
|
|
flex: 1;
|
|
padding:9px;
|
|
padding-top:10px;
|
|
margin:10px;
|
|
margin-top:0;
|
|
img {
|
|
background-color: #c6c7c7;
|
|
}
|
|
div {
|
|
margin-top: 10px;
|
|
text-transform: capitalize;
|
|
cursor: default;
|
|
}
|
|
}
|
|
.appearance-mode.active {
|
|
border:1px solid @component-active-color;
|
|
color: @component-active-color;
|
|
img { background-color: @component-active-color; }
|
|
}
|
|
|
|
|
|
.alternative-auth {
|
|
p {
|
|
color: @text-color-heading;
|
|
}
|
|
.url-copy-target {
|
|
width: 50%;
|
|
border: 1px solid #c6c7c7;
|
|
margin: 10px;
|
|
}
|
|
.copy-to-clipboard {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
img {
|
|
background-color: @btn-icon-color;
|
|
}
|
|
img:active {
|
|
background-color: @black;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.fadein {
|
|
opacity: 1;
|
|
transition: opacity 2s linear;
|
|
}
|
|
|
|
.fadeout {
|
|
opacity: 0;
|
|
transition: opacity 1s linear;
|
|
}
|
|
|
|
input {
|
|
margin-top: 0;
|
|
}
|
|
|
|
}
|