From d45897b6e808e5d5d13373720aa9e470281e201f Mon Sep 17 00:00:00 2001
From: Simon-zhenfeng <412133775@qq.com>
Date: Thu, 20 Oct 2022 09:41:50 +0800
Subject: [PATCH] Feature share (#504)

* #493: As a user, I want to share the diagram so that they can collaborate with me
1. when user click the button, browser will open a new window show the github survey page
2. regarding the implements:
2.1 I have to add an empty function for the share button, I don't know how to avoid that
2.2 I might need to change the share button position

* Add tract event for share survey

Co-authored-by: hanzhenfeng <hanzhenfeng@baidu.com>
---
 src/components/ContentWrap.jsx | 10 ++++++----
 src/style.css                  |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 33c6b7e3..8bc99c71 100644
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@@ -460,6 +460,10 @@ export default class ContentWrap extends Component {
 		trackEvent('ui', 'downloadJpeg');
 	}
 
+	shareClickHandler(e) {
+		trackEvent('ui', 'shareSurvey');
+	}
+
 	async resetSplitting() {
 		await this.setState({
 			codeSplitSizes: this.getCodeSplitSizes(),
@@ -765,8 +769,6 @@ export default class ContentWrap extends Component {
 		this.cm.js.setValue(codeService.addCode(code, param));
 	}
 
-	gotoShareSurvey() {}
-
 	render() {
 		return (
 			<SplitPane
@@ -1003,13 +1005,13 @@ export default class ContentWrap extends Component {
 				<div class="demo-side" id="js-demo-side" style="overflow-y: auto; -webkit-overflow-scrolling: touch;">
 					{window.zenumlDesktop ? (null) : (
 						<div className='promotion'>
-							<div className="downloads">
+							<div className="actions">
 								<a href='https://github.com/ZenUml/web-sequence/discussions/496' target="_blank"
 								   style={{textDecoration:'none'}}>
 									<Button
 										className="btn--dark button icon-button hint--rounded hint--bottom-left"
 										aria-label="Share Your Work"
-										onClick={this.gotoShareSurvey.bind()}>
+										onClick={this.shareClickHandler.bind(this)}>
 										<span className="material-symbols-outlined">share</span>
 										<span>Share</span>
 									</Button>
diff --git a/src/style.css b/src/style.css
index df7e17a5..acd8bf38 100644
--- a/src/style.css
+++ b/src/style.css
@@ -382,7 +382,7 @@ body:not(.light-version).overlay-visible .main-container {
 	font-weight: lighter;
 }
 
-.demo-side .promotion .downloads {
+.demo-side .promotion .actions {
 	margin-left: auto;
 	display: flex;
 	align-items: center;