Skip to content

Commit abbbfe9

Browse files
author
Erika Perugachi
authored
Merge pull request #979 from erikaperugachi/email
Add loading emails. Close #974
2 parents f95cc88 + 7d3202f commit abbbfe9

File tree

4 files changed

+157
-0
lines changed

4 files changed

+157
-0
lines changed

‎email_mailbox/src/components/EmailLoading.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import './emailloading.scss';
3+
4+
const EmailLoading = () => (
5+
<div className="cptx-email-loading-container">
6+
<div className="cptx-email-loading-info">
7+
<div className="cptx-email-loading-info-letter" />
8+
<div className="cptx-email-loading-info-content">
9+
<div className="cptx-email-loading-text-line" />
10+
<div className="cptx-email-loading-text-line" />
11+
</div>
12+
</div>
13+
<hr />
14+
<div className="cptx-email-loading-body">
15+
<div className="cptx-email-loading-text">
16+
<div className="cptx-email-loading-text-line" />
17+
<div className="cptx-email-loading-text-line" />
18+
<div className="cptx-email-loading-text-line" />
19+
<div className="cptx-email-loading-text-line" />
20+
</div>
21+
</div>
22+
</div>
23+
);
24+
25+
export default EmailLoading;

‎email_mailbox/src/components/Thread.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React, { Component } from 'react';
33
import PropTypes from 'prop-types';
44
import Email from './../containers/Email';
5+
import EmailLoading from './EmailLoading';
56
import Label from './Label';
67
import Message from '../containers/Message';
78
import './thread.scss';
@@ -105,6 +106,9 @@ class Thread extends Component {
105106
};
106107

107108
renderEmails = () => {
109+
if (!this.props.emails.length) {
110+
return <EmailLoading />;
111+
}
108112
const emailContainers = this.props.emails.map((email, index) => {
109113
const isLast = this.props.emails.length - 1 === index;
110114
return (

‎email_mailbox/src/components/emailloading.scss‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import "./../styles/index.scss";
2+
3+
.cptx-email-loading-container{
4+
border: solid 1px transparent;
5+
border-radius: 4px;
6+
display: flex;
7+
flex-direction: column;
8+
height: calc(100% - 8px);
9+
margin-bottom: 6px;
10+
width: calc(100% - 2px);
11+
12+
.cptx-email-loading-info{
13+
align-items: center;
14+
display: flex;
15+
flex-direction: row;
16+
height: 65px;
17+
margin: 5px 17px 0;
18+
width: calc(100% - 32px);
19+
20+
.cptx-email-loading-info-letter{
21+
border-radius: 50%;
22+
height: 36px;
23+
margin-right: 10px;
24+
width: 36px;
25+
@extend .animated-background;
26+
}
27+
28+
.cptx-email-loading-info-content{
29+
align-content: space-around;
30+
display: flex;
31+
flex-direction: column;
32+
width: calc(100% - 46px);
33+
34+
.cptx-email-loading-text-line{
35+
&:nth-child(1){
36+
width: 35%;
37+
}
38+
39+
&:nth-child(2){
40+
margin-top: 10px;
41+
width: 50%;
42+
}
43+
}
44+
}
45+
}
46+
47+
> hr{
48+
background-color: transparent;
49+
border: 0;
50+
border-top: 1px solid rgba(0, 0, 0, 0.1);
51+
margin: 0 auto;
52+
width: calc(100% - 20px);
53+
}
54+
55+
.cptx-email-loading-body{
56+
margin: 5px 17px 0;
57+
width: calc(100% - 32px);
58+
59+
.cptx-email-loading-text-line{
60+
&:nth-child(1){
61+
margin-top: 40px;
62+
width: 40%;
63+
}
64+
65+
&:nth-child(2){
66+
margin-top: 30px;
67+
}
68+
69+
&:nth-child(3), &:nth-child(4){
70+
margin-top: 10px;
71+
}
72+
73+
&:nth-child(4){
74+
width: 60%;
75+
}
76+
}
77+
}
78+
79+
.cptx-email-loading-text-line{
80+
background-color: #cbd4dc;
81+
border-radius: 2px;
82+
height: 7px;
83+
margin: 5px 0;
84+
width: 100%;
85+
@extend .animated-background;
86+
}
87+
}
88+
89+
@keyframes placeHolderShimmer{
90+
0%{
91+
background-position: -468px 0
92+
}
93+
100%{
94+
background-position: 468px 0
95+
}
96+
}
97+
98+
.animated-background {
99+
animation-duration: 1.25s;
100+
animation-fill-mode: forwards;
101+
animation-iteration-count: infinite;
102+
animation-name: placeHolderShimmer;
103+
animation-timing-function: linear;
104+
position: relative;
105+
}
106+
107+
@mixin themable($_THEME, $_BACKGROUND_COLOR_EMAIL, $_BORDER_COLOR_EMAIL, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3){
108+
[data-theme^=#{$_THEME}],
109+
[data-theme] [data-theme^=#{$_THEME}] {
110+
.cptx-email-loading-container{
111+
background-color: $_BACKGROUND_COLOR_EMAIL;
112+
border-color: $_BORDER_COLOR_EMAIL;
113+
}
114+
115+
.animated-background{
116+
background: linear-gradient(to right, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1 8%, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2 18%, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3 33%);
117+
background-size: 800px 104px;
118+
}
119+
}
120+
}
121+
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_EMAIL_LIGHT, $_BORDER_COLOR_EMAIL_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_LIGHT);
122+
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_EMAIL_DARK, $_BORDER_COLOR_EMAIL_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_DARK);

‎email_mailbox/src/styles/index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ $_BACKGROUND_COLOR_THREAD_ITEM_EMAILS_SIZE_LIGHT: #cecece;
5252
$_BACKGROUND_COLOR_THREAD_ITEM_BUTTON_OPTION_LIGHT: #f7f7f8;
5353
$_BACKGROUND_COLOR_THREAD_ITEM_LABELS_LIGHT: #e5e5e6;
5454
$_BACKGROUND_COLOR_EMAIL_LIGHT: white;
55+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_LIGHT: #e3ebf3;
56+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_LIGHT: #ecf2f8;
57+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_LIGHT: #dee7f0;
5558
$_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT: white;
5659
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_LIGHT: #f3f3f3;
5760
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_LIGHT: #e9eaeb;
@@ -161,6 +164,9 @@ $_BACKGROUND_COLOR_THREAD_ITEM_EMAILS_SIZE_DARK: #4b4b4b;
161164
$_BACKGROUND_COLOR_THREAD_ITEM_BUTTON_OPTION_DARK: #1f2228;
162165
$_BACKGROUND_COLOR_THREAD_ITEM_LABELS_DARK: #5a5c66;
163166
$_BACKGROUND_COLOR_EMAIL_DARK: #34363c;
167+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_DARK: #45484d;
168+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_DARK: #4e5055;
169+
$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_DARK: #42454a;
164170
$_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_DARK: #34363c;
165171
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_DARK: #535762;
166172
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_DARK: #656a78;

0 commit comments

Comments
 (0)