diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js index a5202e71..44b9f09a 100644 --- a/browser/main/Detail/InfoPanel.js +++ b/browser/main/Detail/InfoPanel.js @@ -2,82 +2,97 @@ import PropTypes from 'prop-types' import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './InfoPanel.styl' +import copy from 'copy-to-clipboard' -const InfoPanel = ({ - storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print -}) => ( -
-
-

{updatedAt}

-

MODIFICATION DATE

-
+class InfoPanel extends React.Component { + copyNoteLink () { + const {noteLink} = this.props + this.refs.noteLink.select() + copy(noteLink) + } -
- - {type === 'SNIPPET_NOTE' - ? '' - :
-
-

{wordCount}

-

Words

+ render () { + const { + storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print + } = this.props + return ( +
+
+

{updatedAt}

+

MODIFICATION DATE

-
-

{letterCount}

-

Letters

+ +
+ + {type === 'SNIPPET_NOTE' + ? '' + :
+
+

{wordCount}

+

Words

+
+
+

{letterCount}

+

Letters

+
+
+ } + + {type === 'SNIPPET_NOTE' + ? '' + :
+ } + +
+

{storageName}

+

STORAGE

+
+ +
+

{folderName}

+

FOLDER

+
+ +
+

{createdAt}

+

CREATION DATE

+
+ +
+ { e.target.select() }} /> + +

NOTE LINK

+
+ +
+ +
+ + + + + + +
- } - - {type === 'SNIPPET_NOTE' - ? '' - :
- } - -
-

{storageName}

-

STORAGE

-
- -
-

{folderName}

-

FOLDER

-
- -
-

{createdAt}

-

CREATION DATE

-
- -
- { e.target.select() }} /> -

NOTE LINK

-
- -
- -
- - - - - - - -
-
-) + ) + } +} InfoPanel.propTypes = { storageName: PropTypes.string.isRequired, diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 72b07c87..3baa7e1a 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -15,7 +15,6 @@ position absolute padding 20px 25px 0 25px width 300px - height 350px overflow auto background-color $ui-noteList-backgroundColor box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1) @@ -80,6 +79,20 @@ height 25px margin-bottom 6px +.infoPanel-copyButton + outline none + font-size 16px + color #A0A0A0 + background-color transparent + border none + margin 0 5px + border-radius 5px + cursor pointer + &:hover + transition 0.2s + background-color alpha($ui-button--hover-backgroundColor, 30%) + color $ui-inactive-text-color + .infoPanel-trash color #EA4447 font-weight 600