Add color mixins, help dropdown, and remove unused nav items

2025-12-24 16:22:44 +00:00 · 2022-01-26 08:40:33 -06:00
parent 603cf2c0ab
commit 38c0527d35
12 changed files with 102 additions and 77 deletions
--- a/client/homebrew/navbar/help.navitem.jsx
+++ b/client/homebrew/navbar/help.navitem.jsx
@@ -0,0 +1,49 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const Help = createClass({
+
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	renderDropdown : function(){
+		return !this.state.showDropdown ? null : <div className='dropdown'>
+			<a href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
+				className='item red'
+				target='_blank'
+				rel='noopener noreferrer'>
+				<span className='title'>report issue <i className='fas fa-fw fa-bug'/></span>
+			</a>
+			<a href='/migrate'
+				className='item blue'
+				target='_blank'
+				rel='noopener noreferrer'>
+				<span className='title'>migrate <i className='fas fa-fw fa-route'/></span>
+			</a>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-life-ring' color='grey' className='recent'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			Need Help?
+			{this.renderDropdown()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = Help;
--- a/client/homebrew/navbar/issue.navitem.jsx
+++ b/client/homebrew/navbar/issue.navitem.jsx
@@ -1,13 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.item
-		newTab={true}
-		color='red'
-		icon='fas fa-bug'
-		href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
-		report issue
-	</Nav.item>;
-};
--- a/client/homebrew/navbar/migrate.navitem.jsx
+++ b/client/homebrew/navbar/migrate.navitem.jsx
@@ -1,13 +0,0 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.item
-		className='migrate'
-		newTab={false}
-		href='/migrate'
-		color='blue'
-		icon='fas fa-route'>
-		migrate
-	</Nav.item>;
-};
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -1,3 +1,4 @@
+@import 'naturalcrit/styles/colors.less';
@navbarHeight : 28px;
@keyframes pinkColoring {
 	//from {color: white;}
@@ -67,17 +68,17 @@
 			color: pink;
 		}
 	}
-	.migrate.navItem{
-		border-right : 1px solid #666;
-	}
-	.recent.navItem{
+	.recent.navItem,
+	.help.navItem{
 		position : relative;
 		.dropdown{
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
+			position   : absolute;
+			top        : 28px;
+			left       : 0px;
+			z-index    : 10000;
+			width      : 100%;
+			overflow   : hidden auto;
+			max-height : ~"calc(100vh - 28px)";
 			h4{
 				display          : block;
 				box-sizing       : border-box;
@@ -91,6 +92,7 @@
 				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
 			}
 			.item{
+				#backgroundColors;
 				.animate(background-color);
 				position         : relative;
 				display          : block;
@@ -104,11 +106,14 @@
 					background-color : @blue;
 				}
 				.title{
-					display       : inline-block;
 					overflow      : hidden;
 					width         : 100%;
 					text-overflow : ellipsis;
 					white-space   : nowrap;
+
+					i{
+						float: right;
+					}
 				}
 				.time{
 					position  : absolute;
--- a/client/homebrew/navbar/recent.navitem.jsx
+++ b/client/homebrew/navbar/recent.navitem.jsx
@@ -123,8 +123,8 @@ const RecentItems = createClass({
 		if(!this.state.showDropdown) return null;

 		const makeItems = (brews)=>{
-			return _.map(brews, (brew)=>{
-				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+			return _.map(brews, (brew, i)=>{
+				return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 				</a>;
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -10,7 +10,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');

 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -23,7 +23,6 @@ const Markdown = require('naturalcrit/markdown.js');

 const googleDriveActive = require('../../googleDrive.png');
 const googleDriveInactive = require('../../googleDriveMono.png');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');

 const SAVE_TIMEOUT = 3000;

@@ -434,8 +433,7 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<NewBrew />
-				<MigrateNavItem />
-				<ReportIssue />
+				<HelpNavItem/>
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share
--- a/client/homebrew/pages/errorPage/errorPage.jsx
+++ b/client/homebrew/pages/errorPage/errorPage.jsx
@@ -7,11 +7,10 @@ const cx = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const HelpNavItem = require('../../navbar/help.navitem.jsx');

 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');

 const ErrorPage = createClass({
 	getDefaultProps : function() {
@@ -34,8 +33,7 @@ const ErrorPage = createClass({

 				<Nav.section>
 					<PatreonNavItem />
-					<MigrateNavItem />
-					<IssueNavItem />
+					<HelpNavItem />
 					<RecentNavItem />
 				</Nav.section>
 			</Navbar>
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -9,8 +9,7 @@ const { Meta } = require('vitreum/headtags');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');

@@ -59,8 +58,7 @@ const HomePage = createClass({
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
 				<NewBrewItem />
-				<MigrateNavItem />
-				<IssueNavItem />
+				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -11,12 +11,11 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');

 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');

 const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -291,8 +290,7 @@ const NewPage = createClass({
 			<Nav.section>
 				{this.renderSaveButton()}
 				{this.renderLocalPrintButton()}
-				<MigrateNavItem />
-				<IssueNavItem />
+				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -13,7 +13,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
-const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');

 // const brew = {
 // 	title   : 'SUPER Long title woah now',
@@ -163,7 +163,7 @@ const UserPage = createClass({
 			<Navbar>
 				<Nav.section>
 					<NewBrew />
-					<ReportIssue />
+					<HelpNavItem />
 					<RecentNavItem />
 					<Account />
 				</Nav.section>