Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-08 17:03:24 +00:00
Code Issues Projects Releases Wiki Activity

App :: Add tooltip for copy to clipboard button

Browse Source
This commit is contained in:
aysenur-jf
2020-05-19 20:56:18 +03:00
parent 77629048ff
commit bf1a13dee1
2 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.js
View File

@@ -85,6 +85,7 @@ class App extends Component {
this.state = { this.state = {
ready: false, ready: false,
darkMode: false, darkMode: false,
copied: false,
sidebar: true, sidebar: true,
codeView: false, codeView: false,
view: 'desktop', view: 'desktop',
@@ -111,7 +112,7 @@ class App extends Component {
} }
handleContentDidMount() { handleContentDidMount() {
setTimeout(() => { setTimeout(() => {
this.setState({ this.setState({
ready: true, ready: true,
markup: this.markupRef.current.innerHTML markup: this.markupRef.current.innerHTML
@@ -211,10 +212,16 @@ class App extends Component {
input.select(); input.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(input); document.body.removeChild(input);
this.setState({copied: true});
setTimeout(() => {
this.setState({
copied: false
})
}, 2000);
} }
render() { render() {
const { darkMode, theme, blockName, blockType, sidebar, view } = this.state; const { darkMode, theme, blockName, blockType, sidebar, view, copied } = this.state;
return ( return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}> <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} /> <textarea className="copy-textarea" ref={this.textareaRef} />
@@ -223,11 +230,14 @@ class App extends Component {
</aside> </aside>
<div className="toolbar"> <div className="toolbar">
<button className="opener" onClick={this.toggleSidebar}>TAILBLOCKS</button> <button className="opener" onClick={this.toggleSidebar}>TAILBLOCKS</button>
{this.state.codeView ? ( {this.state.codeView &&
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}> <div className="clipboard-wrapper">
{clipboardIcon} <button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
<span>COPY TO CLIPBOARD</span> {clipboardIcon}
</button>) : '' <span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
</div>
} }
<button className="copy-the-block" onClick={this.toggleView}> <button className="copy-the-block" onClick={this.toggleView}>
{!this.state.codeView ? {!this.state.codeView ?

26
src/index.css
View File

@@ -558,4 +558,28 @@ pre, code {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.clipboard-wrapper {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.clipboard-tooltip {
margin-right: -10px;
color: #fff;
font-size: 13px;
background-color: rgba(255, 255, 255, 0.4);
padding: 2px 5px;
letter-spacing: .2px;
border-radius: 4px;
position: relative;
opacity: 0;
transition: opacity .4s, margin-right .4s;
}
.clipboard-tooltip.is-copied {
margin-right: 6px;
opacity: 1;
}