Recently viewed and edited seem to be working great

changelog.md

@@ -1,7 +1,7 @@
 # changelog
 
-### Sunday, 29/05/2016
+### Sunday, 29/05/2016 - v2.1.0
-- Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own ovrride to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!
+- Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own override to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!
 - Override Ctrl+P (and cmd+P) to launch to the print page. Many people try to just print either the editing or share page to get a PDF. While this dones;t make much sense, I do get a ton of issues about it. So now if you try to do this, it'll just bring you imediately to the print page. Everybody wins!
 - The onboarding flow has also been confusing a few users (Homepage -> new -> save -> edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
 

client/homebrew/navbar/navbar.less

@@ -16,9 +16,9 @@
 	.editTitle.navItem{
 		padding : 2px 12px;
 		input{
+			width            : 250px;
 			margin           : 0;
 			padding          : 2px;
-			width : 250px;
 			background-color : #444;
 			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
@@ -32,19 +32,19 @@
 			display        : inline-block;
 			vertical-align : bottom;
 			margin-left    : 8px;
+			color          : #666;
 			text-align     : right;
-			color : #666;
 			&.max{
 				color : @red;
 			}
 		}
 	}
 	.brewTitle.navItem{
-		font-size        : 12px;
+		font-size      : 12px;
-		font-weight      : 800;
+		font-weight    : 800;
-		color            : white;
+		color          : white;
-		text-align       : center;
+		text-align     : center;
-		text-transform: initial;
+		text-transform : initial;
 	}
 	.patreon.navItem{
 		i{
@@ -54,5 +54,42 @@
 			}
 		}
 	}
-
+	.recent.navItem{
+		position : relative;
+		.dropdown{
+			position : absolute;
+			top      : 28px;
+			left     : 0px;
+			z-index  : 10000;
+			width    : 100%;
+			.item{
+				.animate(background-color);
+				position         : relative;
+				display          : block;
+				box-sizing       : border-box;;
+				padding          : 13px 5px;
+				background-color : #333;
+				color            : white;
+				text-decoration  : none;
+				border-top       : 1px solid #888;
+				&:hover{
+					background-color : @blue;
+				}
+				.title{
+					display       : inline-block;
+					overflow      : hidden;
+					width         : 100%;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time{
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888;
+				}
+			}
+		}
+	}
 }

client/homebrew/navbar/recent.navitem.jsx

@@ -0,0 +1,118 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var Moment = require('moment');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+var BaseItem = React.createClass({
+	getDefaultProps: function() {
+		return {
+			storageKey : '',
+			text : '',
+			currentBrew:{
+				title : '',
+				id : '',
+				url : ''
+			}
+		};
+	},
+	getInitialState: function() {
+		return {
+			showDropdown: false,
+			brews : []
+		};
+	},
+
+	componentDidMount: function() {
+		var brews = JSON.parse(localStorage.getItem(this.props.storageKey) || '[]');
+
+		brews = _.filter(brews, (brew)=>{
+			return brew.id !== this.props.currentBrew.id;
+		});
+		brews.unshift({
+			id : this.props.currentBrew.id,
+			url : this.props.currentBrew.url,
+			title : this.props.currentBrew.title,
+			ts : Date.now()
+		});
+		brews = _.slice(brews, 0, 5);
+		localStorage.setItem(this.props.storageKey, JSON.stringify(brews));
+		this.setState({
+			brews : brews
+		});
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		})
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		var items = _.map(this.state.brews, (brew)=>{
+			return <a href={brew.url} className='item' key={brew.id} target='_blank'>
+				<span className='title'>{brew.title}</span>
+				<span className='time'>{Moment(brew.ts).fromNow()}</span>
+			</a>
+		});
+
+		return <div className='dropdown'>{items}</div>
+	},
+
+	render : function(){
+		return <Nav.item icon='fa-clock-o' color='grey' className='recent'
+					onMouseEnter={this.handleDropdown.bind(null, true)}
+					onMouseLeave={this.handleDropdown.bind(null, false)}>
+			{this.props.text}
+			{this.renderDropdown()}
+		</Nav.item>
+	},
+
+});
+
+
+
+module.exports = {
+	viewed : React.createClass({
+		getDefaultProps: function() {
+			return {
+				brew : {
+					title : '',
+					shareId : ''
+				}
+			};
+		},
+		render : function(){
+			return <BaseItem text='recently viewed' storageKey='RECENTLY_VIEWED'
+				currentBrew={{
+					id : this.props.brew.shareId,
+					title : this.props.brew.title,
+					url : `/homebrew/share/${this.props.brew.shareId}`
+				}}
+			/>
+		},
+	}),
+
+	edited : React.createClass({
+		getDefaultProps: function() {
+			return {
+				brew : {
+					title : '',
+					editId : ''
+				}
+			};
+		},
+		render : function(){
+			return <BaseItem text='recently edited' storageKey='RECENTLY_EDITED'
+				currentBrew={{
+					id : this.props.brew.editId,
+					title : this.props.brew.title,
+					url : `/homebrew/edit/${this.props.brew.editId}`
+				}}
+			/>
+		},
+	}),
+}

client/homebrew/pages/editPage/editPage.jsx

@@ -9,6 +9,7 @@ var Navbar = require('../../navbar/navbar.jsx');
 var EditTitle = require('../../navbar/editTitle.navitem.jsx');
 var ReportIssue = require('../../navbar/issue.navitem.jsx');
 var PrintLink = require('../../navbar/print.navitem.jsx');
+var RecentlyEdited = require('../../navbar/recent.navitem.jsx').edited;
 
 
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
@@ -175,6 +176,7 @@ var EditPage = React.createClass({
 			</Nav.section>
 			<Nav.section>
 				{this.renderSaveButton()}
+				<RecentlyEdited brew={this.props.brew} />
 				<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
 					Share
 				</Nav.item>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -4,8 +4,8 @@ var cx = require('classnames');
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
-
 var PrintLink = require('../../navbar/print.navitem.jsx');
+var RecentlyViewed = require('../../navbar/recent.navitem.jsx').viewed;
 
 var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
@@ -40,6 +40,7 @@ var SharePage = React.createClass({
 				</Nav.section>
 
 				<Nav.section>
+					<RecentlyViewed brew={this.props.brew} />
 					<PrintLink shareId={this.props.brew.shareId} />
 					<Nav.item href={'/homebrew/source/' + this.props.brew.shareId} color='teal' icon='fa-code'>
 						source

shared/naturalcrit/nav/nav.jsx

@@ -51,12 +51,12 @@ var Nav = {
 			if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
 
 			if(this.props.href){
-				return <a href={this.props.href} className={classes} target={this.props.newTab ? '_blank' : '_self'}>
+				return <a {...this.props} className={classes} target={this.props.newTab ? '_blank' : '_self'} >
 					{this.props.children}
 					{icon}
 				</a>
 			}else{
-				return <div className={classes} onClick={this.handleClick}>
+				return <div {...this.props} className={classes} onClick={this.handleClick} >
 					{this.props.children}
 					{icon}
 				</div>