on save, flash "saved" message #124

src/css/_animations.scss

@@ -0,0 +1,19 @@
+%flash {
+	-webkit-animation-duration: 4s;
+	-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+	-webkit-animation-name: flash;
+}
+
+@-webkit-keyframes flash {
+	from {
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}

src/css/_menubar.scss

@@ -61,9 +61,21 @@
 	.saved {
 		float: left;
 
-		a {
+		a, .success {
 			@include adjust-font-size-to($s3);
 			@include adjust-leading-to(1);
 		}
+
+		.success {
+			opacity: 0;
+			margin-left: $horizontal-space;
+			color: $solarized_base3;
+		}
+
+		.success-enter {
+			@extend %flash;
+		}
+		.success-enter-active {
+		}
 	}
 }

src/css/main.scss

@@ -15,6 +15,7 @@
 @import "colors";
 @import "typography";
 @import "button";
+@import "animations";
 
 // components
 @import "livecoding";

src/js/components/Livecoding.jsx

@@ -49,7 +49,8 @@ var Livecoding = React.createClass({
 			// Specify what mode we're currently editing.
 			mode: 'html',
 			user: this.getUser(),
-			userAvatarUrl: this.getUserAvatarUrl()
+			userAvatarUrl: this.getUserAvatarUrl(),
+			gist: null
 		};
 	},
 
@@ -78,8 +79,10 @@ var Livecoding = React.createClass({
 				<MenuBar
 					mode={mode}
 					gistUrl={this.state.gist ? this.state.gist.html_url : null}
+					gistVersion={this.state.gist ? this.state.gist.history[0].version : null}
 					user={this.state.user}
 					userAvatarUrl={this.state.userAvatarUrl}
+					savedMessage={this.flashSaved.pop()}
 				/>
 				<div className='content'>
 					<Output
@@ -259,17 +262,16 @@ var Livecoding = React.createClass({
 
 		var self = this;
 
-		// If we're not the gist owner, fork, and save.
-		// If we're the gist owner, update.
-		// If there is no gist, create.
-
 		// If there is no gist,
 		if (!this.state.gist) {
 
 			// create a new gist,
 			GitHub.createGist(this.getToken(), data)
 				.then(function(gist) {
 
+					// set flash message,
+					self.flashSaved.push('saved');
+
 					// and update state.
 					self.setState({gist: gist});
 					history.pushState(gist.id, '', '#' + gist.id);
@@ -287,6 +289,9 @@ var Livecoding = React.createClass({
 				GitHub.updateGist(this.getToken(), data, this.state.gist.id)
 					.then(function(gist) {
 
+						// set flash message,
+						self.flashSaved.push('saved');
+
 						// and update state.
 						self.setState({gist: gist});
 
@@ -305,6 +310,9 @@ var Livecoding = React.createClass({
 					})
 					.then(function(gist) {
 
+						// set flash message,
+						self.flashSaved.push('saved');
+
 						// and update state.
 						self.setState({gist: gist});
 						history.pushState(gist.id, '', '#' + gist.id);
@@ -328,7 +336,10 @@ var Livecoding = React.createClass({
 
 	// Decide whether to render update Editor contents.
 	_defaultUpdateEditorContent: true,
-	updateEditorContent: [this._defaultUpdateEditorContent]
+	updateEditorContent: [this._defaultUpdateEditorContent],
+
+	// Flash saved message.
+	flashSaved: []
 
 });
 

src/js/components/MenuBar.jsx

@@ -61,12 +61,17 @@ var MenuBar = React.createClass({
 			</li>;
 		});
 
+		var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
+
 		var gistUrl = this.props.gistUrl;
 
-		var saved = gistUrl ?
-			<div className='saved'>
-				<a href={gistUrl}>{gistUrl}</a>
-			</div> : null;
+		var saved = gistUrl ? <a href={gistUrl}>{gistUrl}</a> : null;
+
+		var success = null;
+		var savedMessage = this.props.savedMessage;
+		if (savedMessage) {
+			success = <span className='success' key={this.props.gistVersion}>saved</span>;
+		}
 
 		return (
 			<div className='menubar'>
@@ -81,7 +86,12 @@ var MenuBar = React.createClass({
 						</ul>
 					</li>
 				</ul>
-				{saved}
+				<div className='saved'>
+					{saved}
+					<ReactCSSTransitionGroup transitionName='success' transitionLeave={false}>
+						{success}
+					</ReactCSSTransitionGroup>
+				</div>
 				<ul className='menugroup mode'>
 					<li>
 						<ul className='menu'>