mirror of
https://github.com/wassname/talk.git
synced 2026-07-21 12:51:03 +08:00
Merge pull request #44 from coralproject/embed-link
Updating embed link style to match designs.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user