Add Share to Reddit and Copy Share URL to Share Menu

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -65,18 +65,6 @@ const MetadataEditor = createClass({
 			});
 	},
 
-	getRedditLink : function(){
-		const meta = this.props.metadata;
-
-		const shareLink = (meta.googleId || '') + meta.shareId;
-		const title = `${meta.title} [${meta.systems.join(' ')}]`;
-		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
-
-**[Homebrewery Link](https://homebrewery.naturalcrit.com/share/${shareLink})**`;
-
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
-	},
-
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -127,21 +115,6 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
-	renderShareToReddit : function(){
-		if(!this.props.metadata.shareId) return;
-
-		return <div className='field reddit'>
-			<label>reddit</label>
-			<div className='value'>
-				<a href={this.getRedditLink()} target='_blank' rel='noopener noreferrer'>
-					<button className='publish'>
-						<i className='fab fa-reddit-alien' /> share to reddit
-					</button>
-				</a>
-			</div>
-		</div>;
-	},
-
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;
 
@@ -215,8 +188,6 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
-			{this.renderShareToReddit()}
-
 			{this.renderDelete()}
 
 		</div>;

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -77,11 +77,6 @@
 			.button(@red);
 		}
 	}
-	.reddit.field .value{
-		button{
-			.button(@purple);
-		}
-	}
 	.authors.field .value{
 		font-size: 0.8em;
 		line-height    : 1.5em;

client/homebrew/pages/editPage/editPage.jsx

@@ -399,6 +399,42 @@ const EditPage = createClass({
 					 this.state.brew.shareId;
 	},
 
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	getRedditLink : function(){
+
+		const shareLink = this.processShareId();
+		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
+		const title = `${this.props.brew.title} ${systems}`;
+		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
+
+**[Homebrewery Link](https://homebrewery.naturalcrit.com/share/${shareLink})**`;
+
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		const shareLink = this.processShareId();
+
+		return <div className='dropdown'>
+			<a href={`/share/${this.processShareId()}`} className='item'>
+				view
+			</a>
+			<a className='item' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
+				copy url
+			</a>
+			<a href={`${this.getRedditLink()}`} target='_blank' rel='noopener noreferrer' className='item'>
+				post to reddit
+			</a>
+		</div>;
+	},
+
 	renderNavbar : function(){
 		return <Navbar>
 
@@ -420,8 +456,11 @@ const EditPage = createClass({
 				{this.renderSaveButton()}
 				<NewBrew />
 				<ReportIssue />
-				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
-					Share
+				<Nav.item color='teal' icon='fas fa-share-alt' className='share'
+					onMouseEnter={()=>this.handleDropdown(true)}
+					onMouseLeave={()=>this.handleDropdown(false)}>
+					share
+					{this.renderDropdown()}
 				</Nav.item>
 				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />

client/homebrew/pages/editPage/editPage.less

@@ -18,6 +18,50 @@
 			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;
 	}