Skip to content

Commit 1879315

Browse files
author
Pedro Aim
committed
changing backing up ui
1 parent 84c71ce commit 1879315

File tree

11 files changed

+167
-227
lines changed

11 files changed

+167
-227
lines changed

‎electron_app/src/ipc/backup.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const {
1919
defineUnitToAppend,
2020
backupDateFormat
2121
} = require('./../utils/TimeUtils');
22+
const { APP_DOMAIN } = require('../utils/const');
2223
const { updateAccount } = require('./../database');
2324
const myAccount = require('../Account');
2425
let autoBackupsTime = [];
@@ -40,12 +41,17 @@ ipc.answerRenderer('create-default-backup-folder', () =>
4041
createDefaultBackupFolder()
4142
);
4243

43-
const handleProgressCallback = (progress, message, email, progressCallback) => {
44+
const handleProgressCallback = (
45+
progress,
46+
message,
47+
userData,
48+
progressCallback
49+
) => {
4450
if (!progressCallback) return;
4551
progressCallback({
4652
progress,
4753
message,
48-
email
54+
...userData
4955
});
5056
};
5157

@@ -65,7 +71,12 @@ const doExportBackupUnencrypted = async params => {
6571
handleProgressCallback(
6672
-1,
6773
'starting_backup',
68-
`${recipientId}@${domain}`,
74+
{
75+
email: `${recipientId}@${domain || APP_DOMAIN}`,
76+
username: recipientId,
77+
domain: domain || APP_DOMAIN,
78+
name: accountObj ? accountObj.name : myAccount.name
79+
},
6980
progressCallback
7081
);
7182

‎email_mailbox/src/components/Loading.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import string from './../lang';
44
import './loading.scss';
55

66
// const messages = string.loading.messages;
7-
const statusType = {
7+
export const statusType = {
88
RUNNING: 'running-animation',
99
STOP: 'stop-animation',
10-
COMPLETE: 'complete-animation'
10+
COMPLETE: 'complete-animation',
11+
ACTIVE: 'active-animation'
1112
};
1213

1314
const errorType = {
@@ -34,6 +35,21 @@ const Loading = props => (
3435
</div>
3536
);
3637

38+
export const SingleLoading = props => (
39+
<div id={'loading-container'} className="dialog-container">
40+
<div className="dialog-content">
41+
<div className="dialog-content-body">
42+
<div className="bar">
43+
<div
44+
className={`content ${props.animationClass}`}
45+
style={{ width: props.percent + '%' }}
46+
/>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
);
52+
3753
const dialogTitle = props => {
3854
if (props.animationClass === statusType.RUNNING) {
3955
return <p> {string.address.add.step3.running.title}</p>;
@@ -143,4 +159,9 @@ Loading.propTypes = {
143159
decreaseStep: PropTypes.func
144160
};
145161

162+
SingleLoading.propTypes = {
163+
animationClass: PropTypes.string,
164+
percent: PropTypes.number
165+
};
166+
146167
export default Loading;

‎email_mailbox/src/components/PanelWrapper.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import Panel from './Panel';
33
import PropTypes from 'prop-types';
4+
import randomcolor from 'randomcolor';
45
import {
56
addEvent,
67
removeEvent,
@@ -9,8 +10,12 @@ import {
910
sendMailboxEvent
1011
} from '../utils/electronEventInterface';
1112
import { checkForUpdates, processPendingEvents } from '../utils/ipc';
12-
import { LabelType, getPendingRestoreStatus } from '../utils/electronInterface';
13-
import { SectionType } from '../utils/const';
13+
import {
14+
LabelType,
15+
getPendingRestoreStatus,
16+
mySettings
17+
} from '../utils/electronInterface';
18+
import { SectionType, avatarBaseUrl } from '../utils/const';
1419
import {
1520
addLabels,
1621
setAvatarUpdatedTimestamp,
@@ -20,9 +25,6 @@ import {
2025
} from '../actions';
2126
import { USER_GUIDE_STEPS } from './UserGuide';
2227
import { TAB } from './Settings';
23-
import string from '../lang';
24-
25-
const backupString = string.backup;
2628

2729
const MAILBOX_POPUP_TYPES = {
2830
ACCOUNT_DELETED: 'account-deleted',
@@ -545,24 +547,33 @@ class PanelWrapper extends Component {
545547

546548
handleBackupProgress = data => {
547549
const currentSnackbar = this.state.backupSnackbar || {};
548-
const newMessage = backupString[data.message] || currentSnackbar.message;
550+
if (!currentSnackbar.color) {
551+
currentSnackbar.color = randomcolor({
552+
seed: data.name || data.email,
553+
luminosity: mySettings.theme === 'dark' ? 'dark' : 'bright'
554+
});
555+
}
556+
if (data.username && data.domain) {
557+
currentSnackbar.avatarUrl = `${avatarBaseUrl}${data.domain}/${
558+
data.username
559+
}`;
560+
}
549561
this.setState({
550562
backupSnackbar: {
551563
...currentSnackbar,
552-
...data,
553-
message: newMessage
564+
...data
554565
}
555566
});
556567
};
557568

558569
handleBackupFinish = () => {
559-
const currentSnackbar = this.state.backupSnackbar || {};
570+
if (!this.state.backupSnackbar) return;
571+
const currentSnackbar = this.state.backupSnackbar;
560572
this.setState(
561573
{
562574
backupSnackbar: {
563575
...currentSnackbar,
564-
progress: 100,
565-
message: backupString.success_backup
576+
progress: 100
566577
}
567578
},
568579
() => {
@@ -572,13 +583,13 @@ class PanelWrapper extends Component {
572583
};
573584

574585
handleBackupFailed = () => {
586+
if (!this.state.backupSnackbar) return;
575587
const currentSnackbar = this.state.backupSnackbar || {};
576588
this.setState(
577589
{
578590
backupSnackbar: {
579591
...currentSnackbar,
580-
progress: -2,
581-
message: backupString.failure_backup
592+
progress: -2
582593
}
583594
},
584595
() => {

‎email_mailbox/src/components/Snackbar.js‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,83 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import './snackbar.scss';
4+
import { SingleLoading, statusType } from './Loading';
5+
import AvatarImage from './AvatarImage';
6+
import string from '../lang';
47

5-
const Loading = () => (
6-
<div className="loading-ring">
7-
<div />
8-
<div />
9-
<div />
10-
<div />
11-
</div>
12-
);
8+
const backupString = string.backup;
139

1410
const Snackbar = props => (
1511
<div className="snackbar-wrapper">
16-
<ProgressIndicator {...props} />
17-
<div className="snackbar-message-contianer">
18-
<div className="snackbar-message">
19-
<span>{props.message}</span>
20-
</div>
21-
<div className="snackbar-account">
22-
<span>{props.email}</span>
12+
<div className="snackbar-title-container">
13+
<h4>{backupString.title}</h4>
14+
<div className="snackbar-title-hide" onClick={props.onDismissSnackbar}>
15+
<span>{backupString.hide}</span>
2316
</div>
2417
</div>
25-
{props.progress < 100 && (
26-
<div className="snackbar-close" onClick={props.onDismissSnackbar}>
27-
<i className="icon-exit" />
18+
<div className="snackbar-info-container">
19+
<AvatarIndicator {...props} />
20+
<div className="snackbar-message-contianer">
21+
<div className="snackbar-message">
22+
<Loader {...props} />
23+
</div>
24+
<div className="snackbar-account">
25+
<span>{props.email}</span>
26+
</div>
2827
</div>
29-
)}
28+
</div>
3029
</div>
3130
);
3231

33-
const ProgressIndicator = props => {
32+
const Loader = props => {
3433
switch (props.progress) {
3534
case -2:
36-
return (
37-
<div className="snackbar-loader-container">
38-
<div className="snackbar-failure-progress">
39-
<i className="icon-exit" />
40-
</div>
41-
</div>
42-
);
35+
return <SingleLoading percent={100} animationClass={statusType.STOP} />;
4336
case -1:
44-
return (
45-
<div className="snackbar-loader-container">
46-
<Loading />
47-
</div>
48-
);
37+
return <SingleLoading percent={0} animationClass={statusType.ACTIVE} />;
4938
case 100:
5039
return (
51-
<div className="snackbar-loader-container">
52-
<div className="snackbar-success-progress">
53-
<i className="icon-check" />
54-
</div>
55-
</div>
40+
<SingleLoading
41+
percent={props.progress}
42+
animationClass={statusType.COMPLETE}
43+
/>
5644
);
5745
default:
5846
return (
59-
<div className="snackbar-loader-container">
60-
<Loading />
61-
<span>{props.progress}%</span>
62-
</div>
47+
<SingleLoading
48+
percent={props.progress}
49+
animationClass={statusType.ACTIVE}
50+
/>
6351
);
6452
}
6553
};
6654

55+
const AvatarIndicator = props => {
56+
return (
57+
<div className="snackbar-loader-container">
58+
<AvatarImage
59+
showBorder={false}
60+
name={props.name}
61+
color={props.color}
62+
avatarUrl={props.avatarUrl}
63+
/>
64+
</div>
65+
);
66+
};
67+
6768
Snackbar.propTypes = {
6869
email: PropTypes.string,
69-
message: PropTypes.string,
70-
progress: PropTypes.number,
7170
onDismissSnackbar: PropTypes.func
7271
};
7372

74-
ProgressIndicator.propTypes = {
73+
AvatarIndicator.propTypes = {
74+
progress: PropTypes.number,
75+
name: PropTypes.string,
76+
color: PropTypes.string,
77+
avatarUrl: PropTypes.string
78+
};
79+
80+
Loader.propTypes = {
7581
progress: PropTypes.number
7682
};
7783

‎email_mailbox/src/components/loading.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@
7878
animation: move 1s linear infinite;
7979
}
8080

81+
.active-animation {
82+
width: 0%;
83+
background-color: #0091ff;
84+
animation: fadeDown 1s linear;
85+
}
86+
8187
.stop-animation {
8288
width: 0%;
8389
background-color: red;

0 commit comments

Comments
 (0)