From a695540f608909c979762e4ed8f332f2331f2494 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Wed, 13 Oct 2021 11:53:01 -0400 Subject: [PATCH 1/3] Working dropdown component on the Share Page --- client/homebrew/pages/sharePage/sharePage.jsx | 48 ++++++------------- .../homebrew/pages/sharePage/sharePage.less | 47 +----------------- shared/naturalcrit/nav/nav.jsx | 40 ++++++++++++++++ shared/naturalcrit/nav/nav.less | 19 ++++++++ 4 files changed, 74 insertions(+), 80 deletions(-) diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index 5adc25bda..7ba049a19 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -29,12 +29,6 @@ const SharePage = createClass({ }; }, - getInitialState : function() { - return { - showDropdown : false - }; - }, - componentDidMount : function() { document.addEventListener('keydown', this.handleControlKeys); }, @@ -57,28 +51,6 @@ const SharePage = createClass({ this.props.brew.shareId; }, - handleDropdown : function(show){ - this.setState({ - showDropdown : show - }); - }, - - renderDropdown : function(){ - if(!this.state.showDropdown) return null; - - return
- - view - - - download - - - clone to new - -
; - }, - render : function(){ return
@@ -90,12 +62,20 @@ const SharePage = createClass({ {this.props.brew.shareId && <> - this.handleDropdown(true)} - onMouseLeave={()=>this.handleDropdown(false)}> - source - {this.renderDropdown()} - + + + source + + + view + + + download + + + clone to new + + } diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less index cedb54e25..40b90496a 100644 --- a/client/homebrew/pages/sharePage/sharePage.less +++ b/client/homebrew/pages/sharePage/sharePage.less @@ -2,49 +2,4 @@ .content{ overflow-y : hidden; } - .source.navItem{ - position : relative; - .dropdown{ - position : absolute; - top : 28px; - left : 0px; - z-index : 10000; - width : 100%; - h4{ - display : block; - box-sizing : border-box; - padding : 5px 0px; - background-color : #333; - font-size : 0.8em; - color : #bbb; - text-align : center; - border-top : 1px solid #888; - &:nth-of-type(1){ background-color: darken(@teal, 20%); } - &:nth-of-type(2){ background-color: darken(@purple, 30%); } - } - .item{ - .animate(background-color); - position : relative; - display : block; - width : 100%; - vertical-align : middle; - padding : 13px 5px; - box-sizing : border-box; - 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; - } - } - } - } -} \ No newline at end of file +} diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx index 37243ea98..7587778b5 100644 --- a/shared/naturalcrit/nav/nav.jsx +++ b/shared/naturalcrit/nav/nav.jsx @@ -68,6 +68,46 @@ const Nav = { } }), + dropdown : createClass({ + getInitialState : function() { + return { + showDropdown : false + }; + }, + + handleDropdown : function(show){ + this.setState({ + showDropdown : show + }); + }, + + renderDropdown : function(dropdownChildren){ + if(!this.state.showDropdown) return null; + + return ( +
+ {dropdownChildren} +
+ ); + }, + + render : function () { + const dropdownChildren = React.Children.map(this.props.children, (child, i) => { + // Ignore the first child + if (i < 1) return; + return child; + }); + return ( +
this.handleDropdown(true)} + onMouseLeave={()=>this.handleDropdown(false)}> + {this.props.children[0]} + {this.renderDropdown(dropdownChildren)} +
+ ) + } + }) + }; diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less index fea60b53e..60c55dd85 100644 --- a/shared/naturalcrit/nav/nav.less +++ b/shared/naturalcrit/nav/nav.less @@ -78,4 +78,23 @@ nav{ .navSection:last-child .navItem{ border-left : 1px solid #666; } + .navDropdownContainer{ + position: relative; + .navDropdown { + position : absolute; + top : 28px; + left : 0px; + z-index : 10000; + width : 100%; + .navItem{ + position : relative; + display : block; + width : 100%; + vertical-align : middle; + padding : 8px 5px; + border : 1px solid #888; + border-bottom : 0; + } + } + } } From 872125515e0c17994b5a182e51cbadc03e1fc9e7 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 14 Oct 2021 00:03:22 -0400 Subject: [PATCH 2/3] Apply to Edit page --- client/homebrew/pages/editPage/editPage.jsx | 44 +++++++------------ client/homebrew/pages/editPage/editPage.less | 44 ------------------- client/homebrew/pages/sharePage/sharePage.jsx | 2 + shared/naturalcrit/nav/nav.jsx | 6 +-- 4 files changed, 20 insertions(+), 76 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index ec95b4694..ee4f41f5b 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -399,12 +399,6 @@ const EditPage = createClass({ this.state.brew.shareId; }, - handleDropdown : function(show){ - this.setState({ - showDropdown : show - }); - }, - getRedditLink : function(){ const shareLink = this.processShareId(); @@ -417,25 +411,9 @@ const EditPage = createClass({ return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`; }, - renderDropdown : function(){ - if(!this.state.showDropdown) return null; - + renderNavbar : function(){ const shareLink = this.processShareId(); - return ; - }, - - renderNavbar : function(){ return {this.state.alertTrashedGoogleBrew && @@ -456,12 +434,20 @@ const EditPage = createClass({ {this.renderSaveButton()} - this.handleDropdown(true)} - onMouseLeave={()=>this.handleDropdown(false)}> - share - {this.renderDropdown()} - + + + share + + + view + + {navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}> + copy url + + + post to reddit + + diff --git a/client/homebrew/pages/editPage/editPage.less b/client/homebrew/pages/editPage/editPage.less index 1be86f2f4..5d0d21b64 100644 --- a/client/homebrew/pages/editPage/editPage.less +++ b/client/homebrew/pages/editPage/editPage.less @@ -18,50 +18,6 @@ background-color : @red; } } - .share.navItem{ - position : relative; - .dropdown{ - position : absolute; - top : 28px; - left : 0px; - z-index : 10000; - width : 100%; - h4{ - display : block; - box-sizing : border-box; - padding : 5px 0px; - background-color : #333; - font-size : 0.8em; - color : #bbb; - text-align : center; - border-top : 1px solid #888; - &:nth-of-type(1){ background-color: darken(@teal, 20%); } - &:nth-of-type(2){ background-color: darken(@purple, 30%); } - } - .item{ - .animate(background-color); - position : relative; - display : block; - width : 100%; - padding : 13px 5px; - box-sizing : border-box; - 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; - } - } - } - } .googleDriveStorage { position : relative; } diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index 7ba049a19..fdfc81809 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -32,9 +32,11 @@ const SharePage = createClass({ componentDidMount : function() { document.addEventListener('keydown', this.handleControlKeys); }, + componentWillUnmount : function() { document.removeEventListener('keydown', this.handleControlKeys); }, + handleControlKeys : function(e){ if(!(e.ctrlKey || e.metaKey)) return; const P_KEY = 80; diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx index 7587778b5..11e67e32c 100644 --- a/shared/naturalcrit/nav/nav.jsx +++ b/shared/naturalcrit/nav/nav.jsx @@ -92,9 +92,9 @@ const Nav = { }, render : function () { - const dropdownChildren = React.Children.map(this.props.children, (child, i) => { + const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{ // Ignore the first child - if (i < 1) return; + if(i < 1) return; return child; }); return ( @@ -104,7 +104,7 @@ const Nav = { {this.props.children[0]} {this.renderDropdown(dropdownChildren)}
- ) + ); } }) From feb8fcadd6662eea3ccec7c901a9fba2323e1c26 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 14 Oct 2021 00:40:51 -0400 Subject: [PATCH 3/3] Animate dropdown --- shared/naturalcrit/nav/nav.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less index 60c55dd85..fea4c1c8b 100644 --- a/shared/naturalcrit/nav/nav.less +++ b/shared/naturalcrit/nav/nav.less @@ -1,3 +1,11 @@ +@keyframes glideDropDown { + 0% {transform : translate(0px, -100%); + opacity : 0; + background-color: #333;} + 100% {transform : translate(0px, 0px); + opacity : 1; + background-color: #333;} +} nav{ background-color : #333; .navContent{ @@ -87,6 +95,8 @@ nav{ z-index : 10000; width : 100%; .navItem{ + animation-name: glideDropDown; + animation-duration: 0.4s; position : relative; display : block; width : 100%;