Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Update: Add copy to clipboard for about brave page (fixes #5790) #6107

Merged
merged 1 commit into from
Dec 13, 2016
Merged

Update: Add copy to clipboard for about brave page (fixes #5790) #6107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,6 @@ httpse.leveldb

# vim swap files
*.swp

# webstrom
.idea
15 changes: 14 additions & 1 deletion js/about/brave.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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 () {
Expand All @@ -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) => [
Expand Down
8 changes: 7 additions & 1 deletion less/about/siteDetails.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,16 @@ body {
display: block;
clear: both;

.title {
width: 400px;
display: flex;
justify-content: space-between;
Copy link
Member

@darkdh darkdh Dec 9, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think maybe we should move these three styles to parent selector of .sectionTitle
so the original sectionTitle style will remain the same.

Present look:
screen shot 2016-12-09 at 13 31 56

Expected look:
screen shot 2016-12-09 at 13 25 49

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And if we do so, width: 424px would be aligned

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding margin-right to .aboutAbout .fa-clipboard would work too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the expectation, that we want to move the placement of icon slightly to the left?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I didn't put the icon aligned. What I meant is

<div className='title'>
  <span className='sectionTitle' data-l10n-id='versionInformation' />
   <span className='fa fa-clipboard' title='Copy password to clipboard' onClick={this.onCopy} />
 </div>

We wanna keep the original attribute for version information like orange color.
So we can put the attributes of display and justify-content into .title
And as @luixxiul suggest, we can add margin-right to .fa-clipboard

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah i see now. Sorry abt that I dint realize we lost the color of the title. Will make the change tonight.

margin-left: @aboutPageSectionPadding;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this not be margin-right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screen shot 2016-12-10 at 14 17 38

That is the same margin-left aligned with the sortable table below

}

.sectionTitle {
font-size: 16px;
margin-bottom: 12px;
padding-left: @aboutPageSectionPadding;
}
}
}
Expand Down