From 513042d769afd0b5769f072b114352273893c420 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sat, 13 May 2017 17:00:34 +0900 Subject: [PATCH] made escButton ReactComponent --- browser/components/ModalEscButton.js | 18 ++++++++++++++ browser/components/ModalEscButton.styl | 14 +++++++++++ browser/main/modals/CreateFolderModal.js | 7 ++---- browser/main/modals/CreateFolderModal.styl | 24 ++----------------- browser/main/modals/InitModal.js | 2 ++ browser/main/modals/InitModal.styl | 9 ------- browser/main/modals/NewNoteModal.js | 7 ++---- browser/main/modals/NewNoteModal.styl | 15 ------------ .../PreferencesModal/PreferencesModal.styl | 13 +--------- browser/main/modals/PreferencesModal/index.js | 6 ++--- browser/main/modals/RenameFolderModal.js | 5 ++-- browser/main/modals/RenameFolderModal.styl | 20 ++-------------- 12 files changed, 47 insertions(+), 93 deletions(-) create mode 100644 browser/components/ModalEscButton.js create mode 100644 browser/components/ModalEscButton.styl diff --git a/browser/components/ModalEscButton.js b/browser/components/ModalEscButton.js new file mode 100644 index 00000000..190b7ccd --- /dev/null +++ b/browser/components/ModalEscButton.js @@ -0,0 +1,18 @@ +import React, {PropTypes} from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './ModalEscButton.styl' + +const ModalEscButton = ({ + handleEscButtonClick +}) => ( + +) + +ModalEscButton.propTypes = { + handleEscButtonClick: PropTypes.func.isRequired +} + +export default CSSModules(ModalEscButton, styles) diff --git a/browser/components/ModalEscButton.styl b/browser/components/ModalEscButton.styl new file mode 100644 index 00000000..378fac85 --- /dev/null +++ b/browser/components/ModalEscButton.styl @@ -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 diff --git a/browser/main/modals/CreateFolderModal.js b/browser/main/modals/CreateFolderModal.js index 9ece3d86..44699af2 100644 --- a/browser/main/modals/CreateFolderModal.js +++ b/browser/main/modals/CreateFolderModal.js @@ -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 {
Create new folder
- - + this.handleCloseButtonClick(e)} />
Folder name
diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 740f9cad..16ca7fba 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -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() \ No newline at end of file + colorDarkPrimaryButton() diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js index f8dacab2..01177d89 100644 --- a/browser/main/modals/InitModal.js +++ b/browser/main/modals/InitModal.js @@ -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 {
Initialize Storage
+ this.handleCloseButtonClick(e)} />
Welcome! diff --git a/browser/main/modals/InitModal.styl b/browser/main/modals/InitModal.styl index 317794a2..73b7308a 100644 --- a/browser/main/modals/InitModal.styl +++ b/browser/main/modals/InitModal.styl @@ -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 diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js index eb63a933..61f3d41f 100644 --- a/browser/main/modals/NewNoteModal.js +++ b/browser/main/modals/NewNoteModal.js @@ -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 {
Make a Note
- - + this.handleCloseButtonClick(e)} />
+ this.handleEscButtonClick(e)} />
{navButtons}
diff --git a/browser/main/modals/RenameFolderModal.js b/browser/main/modals/RenameFolderModal.js index 107a9f55..09e86632 100644 --- a/browser/main/modals/RenameFolderModal.js +++ b/browser/main/modals/RenameFolderModal.js @@ -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 {
Rename Folder
- + this.handleCloseButtonClick(e)} />