diff --git a/src/browser/components/AutoSaveIndicator.jsx b/src/browser/components/AutoSaveIndicator.jsx
index 7888d953..6685502e 100644
--- a/src/browser/components/AutoSaveIndicator.jsx
+++ b/src/browser/components/AutoSaveIndicator.jsx
@@ -1,26 +1,34 @@
const React = require('react');
const {Alert} = require('react-bootstrap');
+const baseClassName = 'AutoSaveIndicator';
+const leaveClassName = `${baseClassName}-Leave`;
+
+function getClassNameAndMessage(savingState, errorMessage) {
+ switch (savingState) {
+ case 'saving':
+ return {className: baseClassName, message: 'Saving...'};
+ case 'saved':
+ return {className: baseClassName, message: 'Saved'};
+ case 'error':
+ return {className: `${baseClassName}`, message: errorMessage};
+ case 'done':
+ return {className: `${baseClassName} ${leaveClassName}`, message: 'Saved'};
+ default:
+ return {className: `${baseClassName} ${leaveClassName}`, message: ''};
+ }
+}
+
function AutoSaveIndicator(props) {
const {savingState, errorMessage, ...rest} = props;
+ const {className, message} = getClassNameAndMessage(savingState, errorMessage);
return (
- {(() => {
- switch (savingState) {
- case 'saving':
- return 'Saving...';
- case 'saved':
- return 'Saved';
- case 'error':
- return errorMessage;
- default:
- return '';
- }
- })()}
+ {message}
);
}
diff --git a/src/browser/components/SettingsPage.jsx b/src/browser/components/SettingsPage.jsx
index 63261f00..02537904 100644
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -1,6 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
const {ipcRenderer, remote} = require('electron');
@@ -432,16 +431,10 @@ const SettingsPage = React.createClass({
style={settingsPage.navbar}
>
-
- { this.state.savingState === 'done' ? null : }
-
+
{'Settings'}
diff --git a/src/browser/css/settings.css b/src/browser/css/settings.css
index e75ee212..e64b4d54 100644
--- a/src/browser/css/settings.css
+++ b/src/browser/css/settings.css
@@ -16,21 +16,8 @@
margin: 0;
}
-.AutoSaveIndicator-enter {
- opacity: 0.01;
-}
-
-.AutoSaveIndicator-enter.AutoSaveIndicator-enter-active {
- opacity: 1;
- transition: opacity 0ms;
-}
-
-.AutoSaveIndicator-leave {
- opacity: 1;
-}
-
-.AutoSaveIndicator-leave.AutoSaveIndicator-leave-active {
- opacity: 0.01;
+.AutoSaveIndicator.AutoSaveIndicator-Leave {
+ opacity: 0;
transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
}