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

made escButton ReactComponent

Browse Source
This commit is contained in:
Sosuke Suzuki
2017-05-13 17:00:34 +09:00
parent 0e8d681954
commit 513042d769
12 changed files with 47 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
browser/components/ModalEscButton.js Normal file
View File

@@ -0,0 +1,18 @@
import React, {PropTypes} from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './ModalEscButton.styl'
const ModalEscButton = ({
handleEscButtonClick
}) => (
<button styleName='escButton' onClick={handleEscButtonClick}>
<div styleName='esc-mark'>x</div>
<div styleName='esc-text'>esc</div>
</button>
)
ModalEscButton.propTypes = {
handleEscButtonClick: PropTypes.func.isRequired
}
export default CSSModules(ModalEscButton, styles)

14
browser/components/ModalEscButton.styl Normal file
View File

@@ -0,0 +1,14 @@
.escButton
height 50px
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 1px
right 10px
text-align center
width top-bar--height
height top-bar-height
.esc-mark
font-size 15px

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

@@ -4,6 +4,7 @@ import styles from './CreateFolderModal.styl'
import dataApi from 'browser/main/lib/dataApi'
import store from 'browser/main/store'
import consts from 'browser/lib/consts'
import ModalEscButton from 'browser/components/ModalEscButton'
class CreateFolderModal extends React.Component {
constructor (props) {
@@ -77,11 +78,7 @@ class CreateFolderModal extends React.Component {
<div styleName='header'>
<div styleName='title'>Create new folder</div>
</div>
<button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div>
</button>
<ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
<div styleName='control'>
<div styleName='control-folder'>
<div styleName='control-folder-label'>Folder name</div>

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

@@ -15,21 +15,6 @@
background-color $ui-backgroundColor
color $ui-text-color
.close-mark
font-size 15px
.close
height 70px
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 7px
right 30px
text-align center
width top-bar--height
height top-bar--height
.control-folder-label
text-align left
font-size 12px
@@ -85,13 +70,8 @@ body[data-theme="dark"]
border 1px solid #C9C9C9 // TODO: use variable.
color white
.closeButton
border-color $ui-dark-borderColor
color $ui-dark-text-color
colorDarkDefaultButton()
.description
.description
color $ui-inactive-text-color
.control-confirmButton
colorDarkPrimaryButton()
colorDarkPrimaryButton()

2
browser/main/modals/InitModal.js
View File

@@ -5,6 +5,7 @@ import dataApi from 'browser/main/lib/dataApi'
import store from 'browser/main/store'
import { hashHistory } from 'react-router'
import _ from 'lodash'
import ModalEscButton from 'browser/components/ModalEscButton'
const CSON = require('@rokt33r/season')
const path = require('path')
@@ -199,6 +200,7 @@ class InitModal extends React.Component {
<div styleName='header'>
<div styleName='header-title'>Initialize Storage</div>
</div>
<ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
<div styleName='body'>
<div styleName='body-welcome'>
Welcome!

9
browser/main/modals/InitModal.styl
View File

@@ -22,15 +22,6 @@
border-bottom solid 1px $ui-borderColor
color $ui-text-color
.closeButton
position absolute
top 10px
right 10px
height 30px
padding 0 25px
color $ui-text-color
colorDefaultButton()
.body
padding 30px

7
browser/main/modals/NewNoteModal.js
View File

@@ -4,6 +4,7 @@ import styles from './NewNoteModal.styl'
import dataApi from 'browser/main/lib/dataApi'
import { hashHistory } from 'react-router'
import ee from 'browser/main/lib/eventEmitter'
import ModalEscButton from 'browser/components/ModalEscButton'
class NewNoteModal extends React.Component {
constructor (props) {
@@ -102,11 +103,7 @@ class NewNoteModal extends React.Component {
<div styleName='header'>
<div styleName='title'>Make a Note</div>
</div>
<button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div>
</button>
<ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
<div styleName='control'>
<button styleName='control-button'
onClick={(e) => this.handleMarkdownNoteButtonClick(e)}

15
browser/main/modals/NewNoteModal.styl
View File

@@ -13,25 +13,10 @@
border-bottom solid 1px $ui-borderColor
color $ui-text-color
.closeButton
height 50px
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 1px
right 10px
text-align center
width top-bar--height
height top-bar--height
.control
padding 25px 15px 15px
text-align center
.close-mark
font-size 15px
.control-button
width 220px
height 220px

13
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -20,17 +20,6 @@ top-bar--height = 50px
font-size 18px
line-height top-bar--height
.top-bar-close
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 0
right 0
text-align center
width top-bar--height
height top-bar--height
.nav
absolute top left right
top top-bar--height
@@ -95,4 +84,4 @@ body[data-theme="dark"]
color white
background-color $dark-primary-button-background--active
&:hover
color white
color white

6
browser/main/modals/PreferencesModal/index.js
View File

@@ -5,6 +5,7 @@ import HotkeyTab from './HotkeyTab'
import UiTab from './UiTab'
import InfoTab from './InfoTab'
import StoragesTab from './StoragesTab'
import ModalEscButton from 'browser/components/ModalEscButton'
import CSSModules from 'browser/lib/CSSModules'
import styles from './PreferencesModal.styl'
@@ -117,10 +118,7 @@ class Preferences extends React.Component {
<div styleName='top-bar'>
<p>Your menu for Boostnote</p>
</div>
<button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
<div styleName='top-bar-close-mark'>×</div>
<div styleName='top-bar-close-text'>esc</div>
</button>
<ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
<div styleName='nav'>
{navButtons}
</div>

5
browser/main/modals/RenameFolderModal.js
View File

@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
import styles from './RenameFolderModal.styl'
import dataApi from 'browser/main/lib/dataApi'
import store from 'browser/main/store'
import ModalEscButton from 'browser/components/ModalEscButton'
class RenameFolderModal extends React.Component {
constructor (props) {
@@ -72,9 +73,7 @@ class RenameFolderModal extends React.Component {
<div styleName='header'>
<div styleName='title'>Rename Folder</div>
</div>
<button styleName='closeButton'
onClick={(e) => this.handleCloseButtonClick(e)}
>Close</button>
<ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
<div styleName='control'>
<input styleName='control-input'

20
browser/main/modals/RenameFolderModal.styl
View File

@@ -13,17 +13,6 @@
border-bottom solid 1px $ui-borderColor
color $ui-text-color
.closeButton
position absolute
top 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
@@ -65,12 +54,7 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
color $ui-dark-text-color
.closeButton
border-color $ui-dark-borderColor
color $ui-dark-text-color
colorDarkDefaultButton()
.description
.description
color $ui-inactive-text-color
.control-input
@@ -78,4 +62,4 @@ body[data-theme="dark"]
color $ui-dark-text-color
.control-confirmButton
colorDarkPrimaryButton()
colorDarkPrimaryButton()