self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-20 20:55:18 +02:00
Code Issues Releases Activity

Desktop: Add loading animation to import/export (#1888)

Browse Source 
* Add loading animation to import/export

* Removed unecessary CSS prefixes
This commit is contained in:
Devon Zuegel 2019-10-05 17:46:39 -04:00 committed by Laurent Cozic
parent c6842a8591
commit d2aaac22e5
2 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ElectronClient/app/gui/MainScreen.jsx
View File

@ -245,7 +245,16 @@ class MainScreenComponent extends React.Component {
} else if (command.name === 'toggleSidebar') {
this.toggleSidebar();
} else if (command.name === 'showModalMessage') {
this.setState({ modalLayer: { visible: true, message: command.message } });
this.setState({
modalLayer: {
visible: true,
message:
<div className="modal-message">
<div id="loading-animation" />
<div className="text">{command.message}</div>
</div>,
},
});
} else if (command.name === 'hideModalMessage') {
this.setState({ modalLayer: { visible: false, message: '' } });
} else if (command.name === 'editAlarm') {

27
ElectronClient/app/style.css
View File

@ -149,3 +149,30 @@ a {
outline: 0 none;
}
.modal-message {
display: flex;
justify-content: center;
align-items: center;
color: grey;
font-size: 1.2em;
margin: 40px 20px;
}
.modal-message #loading-animation {
margin-right: 20px;
width: 20px;
height: 20px;
border: 5px solid lightgrey;
border-top: 4px solid white;
border-radius: 50%;
transition-property: transform;
animation-name: rotate;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}