Merge pull request #44 from coralproject/embed-link

Updating embed link style to match designs.
This commit is contained in:
David Erwin
2016-11-09 14:03:58 -05:00
committed by GitHub
2 changed files with 22 additions and 10 deletions
@@ -25,10 +25,19 @@
.configSettingEmbed {
border: 1px solid #ccc;
border-radius: 4px;
height: 90px;
margin-bottom: 10px;
display: block;
height: 170px;
}
.copiedText {
color: #008000;
float: right;
padding: 12px;
font-size: 14px;
}
.copyButton {
float: right;
}
.embedInput {
@@ -40,6 +49,6 @@
margin-bottom: 10px;
color: #555;
padding: 14px;
font-size: 16px;
font-size: 14px;
letter-spacing: 0.03em;
}
+10 -7
View File
@@ -17,7 +17,8 @@ import translations from '../translations';
class Configure extends React.Component {
constructor (props) {
super(props);
this.state = {activeSection: 'comments'};
this.state = {activeSection: 'comments', copied: false};
this.copyToClipBoard = this.copyToClipBoard.bind(this);
}
getCommentSettings () {
@@ -47,22 +48,24 @@ class Configure extends React.Component {
try {
document.execCommand('copy');
this.setState({copied: true});
} catch (err) {
console.error('Unable to copy');
console.error('Unable to copy', err);
}
}
getEmbed () {
const embedText =
`<div id='coralStreamEmbed'></div><script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/client/coral-embed-stream/', {title: 'comments'});</script>`;
`<div id='coralStreamEmbed'></div><script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/client/embed/stream/bundle.js', {title: 'comments'});</script>`;
return <List>
<ListItem className={styles.configSettingEmbed}>
<p>Copy and paste code below into your CMS to embed your comment box in your articles</p>
<textarea type='text' className={styles.embedInput}>
{embedText}
</textarea>
<Button raised colored>{lang.t('embedlink.copy')}</Button>
<textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
<Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
{lang.t('embedlink.copy')}
</Button>
<div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
</ListItem>
</List>;
}