public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Fix layout at InfoPanel

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-11-06 02:40:59 +09:00
parent a238be5b7c
commit 5c3f0cd060
2 changed files with 110 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,68 +6,56 @@ const InfoPanel = ({
storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
}) => ( }) => (
<div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}> <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
<div styleName='group-section'> <div>
<div styleName='group-section-label'> <p styleName='modification-date'>{updatedAt}</p>
Storage <p styleName='modification-date-desc'>MODIFICATION DATE</p>
</div>
<div styleName='group-section-control'>
{storageName}
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>
Folder
</div>
<div styleName='group-section-control'>
{folderName}
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>
Created
</div>
<div styleName='group-section-control'>
{createdAt}
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>
Updated
</div>
<div styleName='group-section-control'>
{updatedAt}
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>
Note Link
</div>
<div styleName='group-section-control'>
<input value={noteLink} onClick={(e) => { e.target.select() }} />
</div>
</div> </div>
<hr />
{type === 'SNIPPET_NOTE' {type === 'SNIPPET_NOTE'
? '' ? ''
: <div> :
<div styleName='group-section'> <div styleName='count-wrap'>
<div styleName='group-section-label'> <div styleName='count-number'>
Words <p styleName='infoPanel-defaul-count'>{wordCount}</p>
</div> <p styleName='infoPanel-sub-count'>Words</p>
<div styleName='group-section-control'>
{wordCount}
</div>
</div> </div>
<div styleName='group-section'> <div styleName='count-number'>
<div styleName='group-section-label'> <p styleName='infoPanel-defaul-count'>{letterCount}</p>
Letters <p styleName='infoPanel-sub-count'>Letters</p>
</div>
<div styleName='group-section-control'>
{letterCount}
</div>
</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'> <div id='export-wrap'>
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}> <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
<i className='fa fa-file-code-o fa-fw' /> <i className='fa fa-file-code-o fa-fw' />

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

@@ -10,13 +10,25 @@
.control-infoButton-panel .control-infoButton-panel
z-index 200 z-index 200
margin-top 45px margin-top 38px
margin-left -210px margin-left -140px
position absolute position absolute
padding 20px 20px 0 20px padding 20px 25px 0 25px
width 340px width 300px
height 500px
overflow auto
background-color $ui-noteList-backgroundColor background-color $ui-noteList-backgroundColor
border 1px solid $border-color box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
border-radius 2px
.modification-date
font-size 18px
line-height 30px
color $ui-text-color
.modification-date-desc
font-size 18px
color $ui-inactive-text-color
.control-infoButton-panel-trash .control-infoButton-panel-trash
z-index 200 z-index 200
@@ -28,40 +40,44 @@
background-color $ui-noteList-backgroundColor background-color $ui-noteList-backgroundColor
border 1px solid $border-color border 1px solid $border-color
.group-section .count-wrap
display flex display flex
position relative
width 100%
.count-number
position relative
display block
width 50%
overflow hidden
margin 0
padding 0
.infoPanel-defaul-count
font-size 16px
line-height 30px line-height 30px
font-size 13px
.group-section-label
width 70px
height 20px
text-align left
margin-right 50px
font-size 13px
color $ui-inactive-text-color
.group-section-control
flex 1
font-size 13px
color $ui-text-color color $ui-text-color
.group-section-control input .infoPanel-sub-count
width 160px font-size 16px
height 25px color $ui-inactive-text-color
padding-bottom 8px
.group-section-control text .infoPanel-default
color #EA4447
font-weight 600
font-size 14px font-size 14px
width 70px line-height 30px
color $ui-text-color
.infoPanel-sub
font-size 14px
color $ui-inactive-text-color
padding-bottom 8px
.infoPanel-noteLink
padding-right 5px
width 200px
height 25px height 25px
background-color rgba(226,33,113,0.1) margin-bottom 6px
border none
outline none
border-radius 2px
margin-right 5px
padding 2px 5px
[id=export-wrap] [id=export-wrap]
height 90px height 90px
@@ -96,20 +112,32 @@
body[data-theme="dark"] body[data-theme="dark"]
.control-infoButton-panel .control-infoButton-panel
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
border 1px solid $ui-dark-borderColor border 1px solid alpha($ui-dark-borderColor, 40%)
.control-infoButton-panel-trash .control-infoButton-panel-trash
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
border 1px solid $ui-dark-borderColor border 1px solid $ui-dark-borderColor
.group-section-label .modification-date
color $ui-inactive-text-color
.group-section-control
color $ui-dark-text-color color $ui-dark-text-color
.group-section-control input .modification-date-desc
background-color alpha($ui-dark-borderColor, 80%) color $ui-inactive-text-color
.infoPanel-defaul-count
color $ui-dark-text-color
.infoPanel-sub-count
color $ui-inactive-text-color
.infoPanel-default
color $ui-dark-text-color
.infoPanel-sub
color $ui-inactive-text-color
.infoPanel-noteLink
background-color alpha($ui-dark-borderColor, 60%)
color $ui-dark-text-color color $ui-dark-text-color
[id=export-wrap] [id=export-wrap]