public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00
Code Issues Releases Wiki Activity

added button for copy note link

Browse Source
This commit is contained in:
Maurits Lourens
2018-01-15 21:01:18 +01:00
parent 94be3d1fe5
commit 657489caf6
2 changed files with 100 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
browser/main/Detail/InfoPanel.js
View File

@@ -2,82 +2,97 @@ import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import styles from './InfoPanel.styl' import styles from './InfoPanel.styl'
import copy from 'copy-to-clipboard'
const InfoPanel = ({ class InfoPanel extends React.Component {
storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print copyNoteLink () {
}) => ( const {noteLink} = this.props
<div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}> this.refs.noteLink.select()
<div> copy(noteLink)
<p styleName='modification-date'>{updatedAt}</p> }
<p styleName='modification-date-desc'>MODIFICATION DATE</p>
</div>
<hr /> render () {
const {
{type === 'SNIPPET_NOTE' storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
? '' } = this.props
: <div styleName='count-wrap'> return (
<div styleName='count-number'> <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
<p styleName='infoPanel-defaul-count'>{wordCount}</p> <div>
<p styleName='infoPanel-sub-count'>Words</p> <p styleName='modification-date'>{updatedAt}</p>
<p styleName='modification-date-desc'>MODIFICATION DATE</p>
</div> </div>
<div styleName='count-number'>
<p styleName='infoPanel-defaul-count'>{letterCount}</p> <hr />
<p styleName='infoPanel-sub-count'>Letters</p>
{type === 'SNIPPET_NOTE'
? ''
: <div styleName='count-wrap'>
<div styleName='count-number'>
<p styleName='infoPanel-defaul-count'>{wordCount}</p>
<p styleName='infoPanel-sub-count'>Words</p>
</div>
<div styleName='count-number'>
<p styleName='infoPanel-defaul-count'>{letterCount}</p>
<p styleName='infoPanel-sub-count'>Letters</p>
</div>
</div>
}
{type === 'SNIPPET_NOTE'
? ''
: <hr />
}
<div>
<p styleName='infoPanel-default'>{storageName}</p>
<p styleName='infoPanel-sub'>STORAGE</p>
</div>
<div>
<p styleName='infoPanel-default'>{folderName}</p>
<p styleName='infoPanel-sub'>FOLDER</p>
</div>
<div>
<p styleName='infoPanel-default'>{createdAt}</p>
<p styleName='infoPanel-sub'>CREATION DATE</p>
</div>
<div>
<input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
<button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
<i className='fa fa-clipboard' />
</button>
<p styleName='infoPanel-sub'>NOTE LINK</p>
</div>
<hr />
<div id='export-wrap'>
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
<i className='fa fa-file-code-o' />
<p>.md</p>
</button>
<button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
<i className='fa fa-file-text-o' />
<p>.txt</p>
</button>
<button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
<i className='fa fa-html5' />
<p>.html</p>
</button>
<button styleName='export--enable' onClick={(e) => print(e)}>
<i className='fa fa-print' />
<p>Print</p>
</button>
</div> </div>
</div> </div>
} )
}
{type === 'SNIPPET_NOTE' }
? ''
: <hr />
}
<div>
<p styleName='infoPanel-default'>{storageName}</p>
<p styleName='infoPanel-sub'>STORAGE</p>
</div>
<div>
<p styleName='infoPanel-default'>{folderName}</p>
<p styleName='infoPanel-sub'>FOLDER</p>
</div>
<div>
<p styleName='infoPanel-default'>{createdAt}</p>
<p styleName='infoPanel-sub'>CREATION DATE</p>
</div>
<div>
<input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
<p styleName='infoPanel-sub'>NOTE LINK</p>
</div>
<hr />
<div id='export-wrap'>
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
<i className='fa fa-file-code-o' />
<p>.md</p>
</button>
<button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
<i className='fa fa-file-text-o' />
<p>.txt</p>
</button>
<button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
<i className='fa fa-html5' />
<p>.html</p>
</button>
<button styleName='export--enable' onClick={(e) => print(e)}>
<i className='fa fa-print' />
<p>Print</p>
</button>
</div>
</div>
)
InfoPanel.propTypes = { InfoPanel.propTypes = {
storageName: PropTypes.string.isRequired, storageName: PropTypes.string.isRequired,

15
browser/main/Detail/InfoPanel.styl
View File

@@ -15,7 +15,6 @@
position absolute position absolute
padding 20px 25px 0 25px padding 20px 25px 0 25px
width 300px width 300px
height 350px
overflow auto overflow auto
background-color $ui-noteList-backgroundColor 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) 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 height 25px
margin-bottom 6px 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 .infoPanel-trash
color #EA4447 color #EA4447
font-weight 600 font-weight 600