From 942e95c14a96352f36469cdad939408e72002c70 Mon Sep 17 00:00:00 2001
From: Gyandeep Singh <gyandeeps@gmail.com>
Date: Thu, 8 Dec 2016 20:02:45 -0600
Subject: [PATCH] Update: Add copy to clipboard for about brave page (fixes
 #5790)

---
 .gitignore                  |  3 +++
 js/about/brave.js           | 15 ++++++++++++++-
 less/about/siteDetails.less |  8 +++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index d54b7e8faa0..4068836c7ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,6 @@ httpse.leveldb
 
 # vim swap files
 *.swp
+
+# webstrom
+.idea
diff --git a/js/about/brave.js b/js/about/brave.js
index 08965cfbd69..71ecba9286e 100644
--- a/js/about/brave.js
+++ b/js/about/brave.js
@@ -6,12 +6,17 @@ const React = require('react')
 const Immutable = require('immutable')
 const messages = require('../constants/messages')
 const SortableTable = require('../components/sortableTable')
+const aboutActions = require('./aboutActions')
 
 const ipc = window.chrome.ipc
 
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
+const tranformVersionInfoToString = (versionInformation) =>
+  versionInformation
+    .reduce((coll, entry) => `${coll} \n${entry.get('name')}: ${entry.get('version')}`, '')
+
 class AboutBrave extends React.Component {
   constructor () {
     super()
@@ -21,6 +26,11 @@ class AboutBrave extends React.Component {
         this.setState({versionInformation: Immutable.fromJS(versionInformation)})
       }
     })
+    this.onCopy = this.onCopy.bind(this)
+  }
+
+  onCopy () {
+    aboutActions.setClipboard(tranformVersionInfoToString(this.state.versionInformation))
   }
 
   render () {
@@ -30,7 +40,10 @@ class AboutBrave extends React.Component {
       </div>
 
       <div className='siteDetailsPageContent aboutAbout'>
-        <div className='sectionTitle' data-l10n-id='versionInformation' />
+        <div className='title'>
+          <span className='sectionTitle' data-l10n-id='versionInformation' />
+          <span className='fa fa-clipboard' title='Copy password to clipboard' onClick={this.onCopy} />
+        </div>
         <SortableTable
           headings={['Name', 'Version']}
           rows={this.state.versionInformation.map((entry) => [
diff --git a/less/about/siteDetails.less b/less/about/siteDetails.less
index 39245ea4d43..52f8100e74a 100644
--- a/less/about/siteDetails.less
+++ b/less/about/siteDetails.less
@@ -78,10 +78,16 @@ body {
     display: block;
     clear: both;
 
+    .title {
+      width: 400px;
+      display: flex;
+      justify-content: space-between;
+      margin-left: @aboutPageSectionPadding;
+    }
+
     .sectionTitle {
       font-size: 16px;
       margin-bottom: 12px;
-      padding-left: @aboutPageSectionPadding;
     }
   }
 }