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 <[email protected]>

Author: Simon-zhenfeng

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>

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;