Copy to Clipboard animation

Fixes brave#6297

app/extensions/brave/locales/en-US/app.properties

@@ -246,3 +246,4 @@ widevinePanelTitle=Brave needs to install Google Widevine to proceed
 installAndAllow=Install and Allow
 rememberThisDecision=Remember this decision for {{origin}}
 copyToClipboard.title=Copy to clipboard
+copied=Copied!

app/renderer/components/clipboardButton.js

@@ -0,0 +1,85 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+/**
+ * Represents a 'Copy to clipboard' button
+ */
+class ClipboardButton extends React.Component {
+ constructor (props) {
+ super(props)
+ this.copyAction = props.copyAction
+ this.onClick = this.onClick.bind(this)
+ this.onAnimationEnd = this.onAnimationEnd.bind(this)
+ this.state = {
+ visibleLabel: false
+ }
+ }
+
+ onClick () {
+ this.setState({
+ visibleLabel: true
+ })
+ this.copyAction()
+ }
+
+ onAnimationEnd () {
+ this.setState({
+ visibleLabel: false
+ })
+ }
+
+ render () {
+ return <span className={css(styles.clipboardButton)}>
+ <span className={css(
+ styles.doneLabel,
+ this.state.visibleLabel && styles.visible
+ )} onAnimationEnd={this.onAnimationEnd} data-l10n-id='copied'>Copiesd!</span>
+ <span
+ className={this.props.className}
+ onClick={this.onClick}>
+ {
+ this.props.textContext
+ ? this.props.textContext
+ : ''
+ }
+ </span>
+ </span>
+ }
+}
+
+const animation = {
+ '0%': {
+ opacity: 0
+ },
+
+ '30%': {
+ opacity: 1
+ },
+
+ '100%': {
+ opacity: 0
+ }
+}
+
+const styles = StyleSheet.create({
+ clipboardButton: {
+ cursor: 'pointer'
+ },
+ doneLabel: {
+ marginRight: '15px',
+ opacity: 0,
+ display: 'none'
+ },
+ visible: {
+ display: 'inline',
+ animationName: animation,
+ animationDuration: '2s',
+ animationTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)'
+ }
+})
+
+module.exports = ClipboardButton

js/about/brave.js

@@ -6,6 +6,7 @@ const React = require('react')
 const Immutable = require('immutable')
 const messages = require('../constants/messages')
 const SortableTable = require('../components/sortableTable')
+const ClipboardButton = require('../../app/renderer/components/clipboardButton')
 const aboutActions = require('./aboutActions')
 
 const ipc = window.chrome.ipcRenderer
@@ -43,7 +44,11 @@ class AboutBrave extends React.Component {
  <div className='siteDetailsPageContent aboutAbout'>
  <div className='title'>
  <span className='sectionTitle' data-l10n-id='versionInformation' />
- <span className='fa fa-clipboard' data-l10n-id='copyToClipboard' onClick={this.onCopy} />
+ <ClipboardButton
+ data-l10n-id='copyToClipboard'
+ className='fa fa-clipboard'
+ copyAction={this.onCopy}
+ />
  </div>
  <SortableTable
  headings={['Name', 'Version']}