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

modify: change design for model window creating new folder

Browse Source
This commit is contained in:
sota1235
2017-01-03 14:45:49 +09:00
parent 7f066c4443
commit d67e4009e7
2 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
browser/main/modals/CreateFolderModal.js
View File

@@ -75,24 +75,27 @@ class CreateFolderModal extends React.Component {
onKeyDown={(e) => this.handleKeyDown(e)} onKeyDown={(e) => this.handleKeyDown(e)}
> >
<div styleName='header'> <div styleName='header'>
<div styleName='title'>New Folder</div> <div styleName='title'>Create new folder</div>
</div> </div>
<button styleName='closeButton' <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
onClick={(e) => this.handleCloseButtonClick(e)} <div styleName='close-mark'>X</div>
>Close</button> <div styleName='close-text'>esc</div>
</button>
<div styleName='control'> <div styleName='control'>
<input styleName='control-input' <div styleName='control-folder'>
placeholder='Folder Name' <div styleName='control-folder-label'>Folder name</div>
ref='name' <input styleName='control-folder-input'
value={this.state.name} ref='name'
onChange={(e) => this.handleChange(e)} value={this.state.name}
onKeyDown={(e) => this.handleInputKeyDown(e)} onChange={(e) => this.handleChange(e)}
/> onKeyDown={(e) => this.handleInputKeyDown(e)}
/>
</div>
<button styleName='control-confirmButton' <button styleName='control-confirmButton'
onClick={(e) => this.handleConfirmButtonClick(e)} onClick={(e) => this.handleConfirmButtonClick(e)}
> >
Confirm Create Folder
</button> </button>
</div> </div>
</div> </div>

53
browser/main/modals/CreateFolderModal.styl
View File

@@ -1,47 +1,52 @@
.root .root
modal() modal()
max-width 340px width 700px
height 200px
overflow hidden overflow hidden
position relative position relative
padding 0 40px
.header .header
height 50px height 50px
margin-bottom 10px
margin-top 10px
font-size 18px font-size 18px
line-height 50px line-height 50px
padding 0 15px
background-color $ui-backgroundColor background-color $ui-backgroundColor
border-bottom solid 1px $ui-borderColor
color $ui-text-color color $ui-text-color
.closeButton .close-mark
font-size 15px
.close
height 50px
position absolute position absolute
top 10px background-color transparent
color $ui-inactive-text-color
border none
top 7px
right 10px right 10px
height 30px
width 0 25px
border $ui-border
border-radius 2px
color $ui-text-color
colorDefaultButton()
.control
padding 25px 15px 15px
text-align center text-align center
width top-bar--height
height top-bar--height
.control-input .control-folder-label
text-align left
font-size 14px
color $ui-text-color
.control-folder-input
display block display block
height 30px height 30px
width 240px width 620px
padding 0 5px padding 0 5px
margin 0 auto 15px margin 10px auto 15px
border none border 1px solid #C9C9C9 // TODO: use variable.
border-bottom solid 1px $border-color border-radius 5px
border-radius 2px
background-color transparent background-color transparent
outline none outline none
vertical-align middle vertical-align middle
font-size 18px font-size 18px
text-align center
&:disabled &:disabled
background-color $ui-input--disabled-backgroundColor background-color $ui-input--disabled-backgroundColor
&:focus, &:active &:focus, &:active
@@ -50,10 +55,12 @@
.control-confirmButton .control-confirmButton
display block display block
height 30px height 30px
width 620px
border none border none
border-radius 2px border-radius 5px
padding 0 25px padding 0 25px
margin 0 auto margin 20px auto
font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] body[data-theme="dark"]