From 38c0527d35dfa00a6e4acd3c369370ca55b62b35 Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Wed, 26 Jan 2022 08:40:33 -0600 Subject: [PATCH] Add color mixins, help dropdown, and remove unused nav items --- client/homebrew/navbar/help.navitem.jsx | 49 +++++++++++++++++++ client/homebrew/navbar/issue.navitem.jsx | 13 ----- client/homebrew/navbar/migrate.navitem.jsx | 13 ----- client/homebrew/navbar/navbar.less | 25 ++++++---- client/homebrew/navbar/recent.navitem.jsx | 4 +- client/homebrew/pages/editPage/editPage.jsx | 6 +-- client/homebrew/pages/errorPage/errorPage.jsx | 6 +-- client/homebrew/pages/homePage/homePage.jsx | 6 +-- client/homebrew/pages/newPage/newPage.jsx | 6 +-- client/homebrew/pages/userPage/userPage.jsx | 4 +- shared/naturalcrit/nav/nav.less | 22 +-------- shared/naturalcrit/styles/colors.less | 25 +++++++++- 12 files changed, 102 insertions(+), 77 deletions(-) create mode 100644 client/homebrew/navbar/help.navitem.jsx delete mode 100644 client/homebrew/navbar/issue.navitem.jsx delete mode 100644 client/homebrew/navbar/migrate.navitem.jsx diff --git a/client/homebrew/navbar/help.navitem.jsx b/client/homebrew/navbar/help.navitem.jsx new file mode 100644 index 000000000..7252d03c7 --- /dev/null +++ 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 :
+ + report issue + + + migrate + +
; + }, + + render : function(){ + return this.handleDropdown(true)} + onMouseLeave={()=>this.handleDropdown(false)}> + Need Help? + {this.renderDropdown()} + ; + } + +}); + +module.exports = Help; diff --git a/client/homebrew/navbar/issue.navitem.jsx b/client/homebrew/navbar/issue.navitem.jsx deleted file mode 100644 index 529744c29..000000000 --- a/client/homebrew/navbar/issue.navitem.jsx +++ /dev/null @@ -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 - report issue - ; -}; diff --git a/client/homebrew/navbar/migrate.navitem.jsx b/client/homebrew/navbar/migrate.navitem.jsx deleted file mode 100644 index d0ac086d3..000000000 --- a/client/homebrew/navbar/migrate.navitem.jsx +++ /dev/null @@ -1,13 +0,0 @@ -const React = require('react'); -const Nav = require('naturalcrit/nav/nav.jsx'); - -module.exports = function(props){ - return - migrate - ; -}; diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index 37c28f3e8..b8a032914 100644 --- 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; diff --git a/client/homebrew/navbar/recent.navitem.jsx b/client/homebrew/navbar/recent.navitem.jsx index e386d9caf..4e0611b3c 100644 --- 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 + return _.map(brews, (brew, i)=>{ + return {brew.title || '[ no title ]'} {Moment(brew.ts).fromNow()} ; diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 22db79ff7..89bf51e57 100644 --- 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()} - - + share diff --git a/client/homebrew/pages/errorPage/errorPage.jsx b/client/homebrew/pages/errorPage/errorPage.jsx index 2b7aef8aa..560ab5625 100644 --- 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({ - - + diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index f7384285d..e95c75c0d 100644 --- 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 - - + diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index b4529f873..21d1d9dcd 100644 --- 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({ {this.renderSaveButton()} {this.renderLocalPrintButton()} - - + diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx index 3ef0d0340..aa9860128 100644 --- 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({ - + diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less index fea4c1c8b..02e890dea 100644 --- a/shared/naturalcrit/nav/nav.less +++ b/shared/naturalcrit/nav/nav.less @@ -1,3 +1,4 @@ +@import '../styles/colors'; @keyframes glideDropDown { 0% {transform : translate(0px, -100%); opacity : 0; @@ -49,6 +50,7 @@ nav{ } } .navItem{ + #backgroundColors; .animate(background-color); padding : 8px 12px; cursor : pointer; @@ -62,26 +64,6 @@ nav{ margin-left : 5px; font-size : 13px; } - &.tealLight:hover{ background-color : @tealLight }; - &.teal:hover{ background-color : @teal }; - &.greenLight:hover{ background-color : @greenLight }; - &.green:hover{ background-color : @green }; - &.blueLight:hover{ background-color : @blueLight }; - &.blue:hover{ background-color : @blue }; - &.purpleLight:hover{ background-color : @purpleLight }; - &.purple:hover{ background-color : @purple }; - &.steelLight:hover{ background-color : @steelLight }; - &.steel:hover{ background-color : @steel }; - &.yellowLight:hover{ background-color : @yellowLight }; - &.yellow:hover{ background-color : @yellow }; - &.orangeLight:hover{ background-color : @orangeLight }; - &.orange:hover{ background-color : @orange }; - &.redLight:hover{ background-color : @redLight }; - &.red:hover{ background-color : @red }; - &.silverLight:hover{ background-color : @silverLight }; - &.silver:hover{ background-color : @silver }; - &.greyLight:hover{ background-color : @greyLight }; - &.grey:hover{ background-color : @grey }; } .navSection:last-child .navItem{ border-left : 1px solid #666; diff --git a/shared/naturalcrit/styles/colors.less b/shared/naturalcrit/styles/colors.less index 4fea42bc3..340fb38a7 100644 --- a/shared/naturalcrit/styles/colors.less +++ b/shared/naturalcrit/styles/colors.less @@ -20,4 +20,27 @@ @silverLight : #ECF0F1; @silver : #BDC3C7; @greyLight : #95A5A6; -@grey : #7F8C8D; \ No newline at end of file +@grey : #7F8C8D; + +#backgroundColors { + &.tealLight:hover{ background-color : @tealLight }; + &.teal:hover{ background-color : @teal }; + &.greenLight:hover{ background-color : @greenLight }; + &.green:hover{ background-color : @green }; + &.blueLight:hover{ background-color : @blueLight }; + &.blue:hover{ background-color : @blue }; + &.purpleLight:hover{ background-color : @purpleLight }; + &.purple:hover{ background-color : @purple }; + &.steelLight:hover{ background-color : @steelLight }; + &.steel:hover{ background-color : @steel }; + &.yellowLight:hover{ background-color : @yellowLight }; + &.yellow:hover{ background-color : @yellow }; + &.orangeLight:hover{ background-color : @orangeLight }; + &.orange:hover{ background-color : @orange }; + &.redLight:hover{ background-color : @redLight }; + &.red:hover{ background-color : @red }; + &.silverLight:hover{ background-color : @silverLight }; + &.silver:hover{ background-color : @silver }; + &.greyLight:hover{ background-color : @greyLight }; + &.grey:hover{ background-color : @grey }; +} \ No newline at end of file