Fixes #159 - added Twitter share button
This commit is contained in:
Mavis Ou
Родитель
fd064fca4c
Коммит
b04d75c5a6
|
|
@ -0,0 +1 @@
|
|||
<svg width="23" height="20" viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M19.739 5.453c.015.196.015.39.015.586 0 5.962-4.537 12.829-12.83 12.829-2.554 0-4.928-.738-6.924-2.024.363.042.713.056 1.09.056a9.017 9.017 0 0 0 5.595-1.927 4.513 4.513 0 0 1-4.213-3.126c.279.042.556.07.85.07.404 0 .81-.056 1.186-.154A4.51 4.51 0 0 1 .894 7.337v-.056c.6.338 1.298.546 2.038.573A4.504 4.504 0 0 1 .923 4.101c0-.84.221-1.607.613-2.278a12.81 12.81 0 0 0 9.298 4.718 4.858 4.858 0 0 1-.112-1.031A4.507 4.507 0 0 1 15.229 1c1.299 0 2.472.546 3.295 1.423a8.822 8.822 0 0 0 2.861-1.087 4.49 4.49 0 0 1-1.982 2.484A9.029 9.029 0 0 0 22 3.12a9.69 9.69 0 0 1-2.261 2.332" stroke="#E14164" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 797 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="23" height="20" viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M19.739 5.453c.015.196.015.39.015.586 0 5.962-4.537 12.829-12.83 12.829-2.554 0-4.928-.738-6.924-2.024.363.042.713.056 1.09.056a9.017 9.017 0 0 0 5.595-1.927 4.513 4.513 0 0 1-4.213-3.126c.279.042.556.07.85.07.404 0 .81-.056 1.186-.154A4.51 4.51 0 0 1 .894 7.337v-.056c.6.338 1.298.546 2.038.573A4.504 4.504 0 0 1 .923 4.101c0-.84.221-1.607.613-2.278a12.81 12.81 0 0 0 9.298 4.718 4.858 4.858 0 0 1-.112-1.031A4.507 4.507 0 0 1 15.229 1c1.299 0 2.472.546 3.295 1.423a8.822 8.822 0 0 0 2.861-1.087 4.49 4.49 0 0 1-1.982 2.484A9.029 9.029 0 0 0 22 3.12a9.69 9.69 0 0 1-2.261 2.332" stroke="#ADADAD" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 798 B |
|
|
@ -126,11 +126,20 @@ class ProjectCard extends React.Component {
|
|||
ReactGA.event(this.createGaEventConfig(`Read more`, `Clicked`));
|
||||
}
|
||||
|
||||
handleTwitterShareClick() {
|
||||
ReactGA.event(this.createGaEventConfig(`Twitter Share button`, `Clicked`, `beacon`));
|
||||
}
|
||||
|
||||
handleShareBtnClick() {
|
||||
ReactGA.event(this.createGaEventConfig(`Reveal entry share link`, `Clicked`));
|
||||
this.shareBtn.classList.add(`active`);
|
||||
this.urlToShare.focus();
|
||||
this.urlToShare.select();
|
||||
if (this.shareBtn.classList.contains(`active`)) {
|
||||
ReactGA.event(this.createGaEventConfig(`Hide entry share link`, `Clicked`));
|
||||
this.shareBtn.classList.remove(`active`);
|
||||
} else {
|
||||
ReactGA.event(this.createGaEventConfig(`Reveal entry share link`, `Clicked`));
|
||||
this.shareBtn.classList.add(`active`);
|
||||
this.urlToShare.focus();
|
||||
this.urlToShare.select();
|
||||
}
|
||||
}
|
||||
|
||||
renderTitle(detailViewLink) {
|
||||
|
|
@ -161,10 +170,14 @@ class ProjectCard extends React.Component {
|
|||
let actionPanel = null;
|
||||
|
||||
if (this.props.onDetailView) {
|
||||
let twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(this.props.title)}&url=${encodeURIComponent(window.location.href)}`;
|
||||
actionPanel = (
|
||||
<div className="share">
|
||||
<a className="btn" onClick={evt => this.handleShareBtnClick(evt)} ref={(btn) => { this.shareBtn = btn; }}></a>
|
||||
<input readOnly type="text" ref={(input) => { this.urlToShare = input; }} />
|
||||
<div className="d-flex share">
|
||||
<a href={twitterUrl} onClick={evt => this.handleTwitterShareClick(evt) } className="btn twitter-share d-inline-block align-self-center mr-3"></a>
|
||||
<div className="reveal-url">
|
||||
<a className="btn" onClick={evt => this.handleShareBtnClick(evt)} ref={(btn) => { this.shareBtn = btn; }}></a>
|
||||
<input creadOnly type="text" ref={(input) => { this.urlToShare = input; }} className="form-control px-2" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -74,32 +74,46 @@
|
|||
}
|
||||
|
||||
.share {
|
||||
.btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.twitter-share {
|
||||
width: 23px;
|
||||
background-image: url(/assets/svg/icon-twitter.svg);
|
||||
background-size: auto 17px;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-image: url(/assets/svg/icon-twitter-selected.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal-url {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
|
||||
.btn {
|
||||
width: 23px;
|
||||
height: 19px;
|
||||
background: url(/assets/svg/icon-link.svg) center center no-repeat;
|
||||
background-image: url(/assets/svg/icon-link.svg);
|
||||
background-size: auto 18px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: url(/assets/svg/icon-link-selected.svg) center center no-repeat;
|
||||
background-size: auto 18px;
|
||||
background-image: url(/assets/svg/icon-link-selected.svg);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
visibility: hidden;
|
||||
box-sizing: border-box;
|
||||
color: #adadad;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
|
||||
<link rel="icon" type="image/png" sizes="36x36" href="/favicon.png">
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="/assets/favicons/favicon-128x128@2x.png">
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="/assets/favicons/touch-icon-ipad.png">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ export default {
|
|||
scriptSrc: [
|
||||
`'self'`,
|
||||
`'unsafe-inline'`,
|
||||
`https://*.google-analytics.com`
|
||||
`https://*.google-analytics.com`,
|
||||
`https://platform.twitter.com/widgets.js`
|
||||
],
|
||||
fontSrc: [
|
||||
`'self'`,
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ function renderPage(appHtml,reactHelmet) {
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
|
||||
<link rel="icon" type="image/png" sizes="36x36" href="/favicon.png">
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="/assets/favicons/favicon-128x128@2x.png">
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="/assets/favicons/touch-icon-ipad.png">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче