From 566fe9258950ed389e54e9bbbfa122d52d283932 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Fri, 3 Mar 2017 02:13:13 +0900 Subject: [PATCH 1/3] change the icon to delete snippet and markdown --- browser/SnippetTab.js | 131 ++++++++++++++++++++++ browser/main/Detail/MarkdownNoteDetail.js | 10 +- browser/main/Detail/NoteDetailInfo.styl | 3 +- browser/main/Detail/SnippetNoteDetail.js | 10 +- 4 files changed, 151 insertions(+), 3 deletions(-) create mode 100644 browser/SnippetTab.js diff --git a/browser/SnippetTab.js b/browser/SnippetTab.js new file mode 100644 index 00000000..2b4f3ad6 --- /dev/null +++ b/browser/SnippetTab.js @@ -0,0 +1,131 @@ +import React from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './SnippetTab.styl' +import context from 'browser/lib/context' + +class SnippetTab extends React.Component { + constructor (props) { + super(props) + + this.state = { + isRenaming: false, + name: props.snippet.name + } + } + + componentWillUpdate (nextProps) { + if (nextProps.snippet.name !== this.props.snippet.name) { + this.setState({ + name: nextProps.snippet.name + }) + } + } + + handleClick (e) { + this.props.onClick(e) + } + + handleContextMenu (e) { + context.popup([ + { + label: 'Rename', + click: (e) => this.handleRenameClick(e) + } + ]) + } + + handleRenameClick (e) { + this.startRenaming() + } + + handleNameInputBlur (e) { + this.handleRename() + } + + handleNameInputChange (e) { + this.setState({ + name: e.target.value + }) + } + + handleNameInputKeyDown (e) { + switch (e.keyCode) { + case 13: + this.handleRename() + break + case 27: + this.setState({ + name: this.props.snippet.name, + isRenaming: false + }) + break + } + } + + handleRename () { + this.setState({ + isRenaming: false + }, () => { + if (this.props.snippet.name !== this.state.name) { + this.props.onRename(this.state.name) + } + }) + } + + handleDeleteButtonClick (e) { + this.props.onDelete(e) + } + + startRenaming () { + this.setState({ + isRenaming: true + }, () => { + this.refs.name.focus() + this.refs.name.select() + }) + } + + render () { + let { isActive, snippet, isDeletable } = this.props + return ( +
+ {!this.state.isRenaming + ? + : this.handleNameInputChange(e)} + onBlur={(e) => this.handleNameInputBlur(e)} + onKeyDown={(e) => this.handleNameInputKeyDown(e)} + /> + } + {isDeletable && + + } +
+ ) + } +} + +SnippetTab.propTypes = { +} + +export default CSSModules(SnippetTab, styles) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 65821962..0320b512 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -238,7 +238,15 @@ class MarkdownNoteDetail extends React.Component { diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 73062d8a..eeffd78a 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -60,9 +60,10 @@ $info-margin-under-border = 27px border-radius 17px font-size 14px margin 13px 7px - padding 0 + padding-top 7px border none color $ui-button-color + fill $ui-button-color background-color transparent &:hover opacity 1 diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 30760589..e5d1908e 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -548,7 +548,15 @@ class SnippetNoteDetail extends React.Component { From 4243afb03304f9ca6acb1ed3ed7506f0ddad89b3 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Thu, 16 Mar 2017 02:34:26 +0900 Subject: [PATCH 2/3] remove the extra file, and correct indents --- browser/SnippetTab.js | 131 ----------------------- browser/main/Detail/SnippetNoteDetail.js | 6 +- 2 files changed, 3 insertions(+), 134 deletions(-) delete mode 100644 browser/SnippetTab.js diff --git a/browser/SnippetTab.js b/browser/SnippetTab.js deleted file mode 100644 index 2b4f3ad6..00000000 --- a/browser/SnippetTab.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react' -import CSSModules from 'browser/lib/CSSModules' -import styles from './SnippetTab.styl' -import context from 'browser/lib/context' - -class SnippetTab extends React.Component { - constructor (props) { - super(props) - - this.state = { - isRenaming: false, - name: props.snippet.name - } - } - - componentWillUpdate (nextProps) { - if (nextProps.snippet.name !== this.props.snippet.name) { - this.setState({ - name: nextProps.snippet.name - }) - } - } - - handleClick (e) { - this.props.onClick(e) - } - - handleContextMenu (e) { - context.popup([ - { - label: 'Rename', - click: (e) => this.handleRenameClick(e) - } - ]) - } - - handleRenameClick (e) { - this.startRenaming() - } - - handleNameInputBlur (e) { - this.handleRename() - } - - handleNameInputChange (e) { - this.setState({ - name: e.target.value - }) - } - - handleNameInputKeyDown (e) { - switch (e.keyCode) { - case 13: - this.handleRename() - break - case 27: - this.setState({ - name: this.props.snippet.name, - isRenaming: false - }) - break - } - } - - handleRename () { - this.setState({ - isRenaming: false - }, () => { - if (this.props.snippet.name !== this.state.name) { - this.props.onRename(this.state.name) - } - }) - } - - handleDeleteButtonClick (e) { - this.props.onDelete(e) - } - - startRenaming () { - this.setState({ - isRenaming: true - }, () => { - this.refs.name.focus() - this.refs.name.select() - }) - } - - render () { - let { isActive, snippet, isDeletable } = this.props - return ( -
- {!this.state.isRenaming - ? - : this.handleNameInputChange(e)} - onBlur={(e) => this.handleNameInputBlur(e)} - onKeyDown={(e) => this.handleNameInputKeyDown(e)} - /> - } - {isDeletable && - - } -
- ) - } -} - -SnippetTab.propTypes = { -} - -export default CSSModules(SnippetTab, styles) diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index e5d1908e..7ef1c832 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -552,10 +552,10 @@ class SnippetNoteDetail extends React.Component { - - + + - + From 712301436d8f4db8658af61fb3c74c8f08ed833b Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Thu, 16 Mar 2017 02:54:57 +0900 Subject: [PATCH 3/3] I crrected indents --- browser/main/Detail/MarkdownNoteDetail.js | 18 +++++++++--------- browser/main/Detail/SnippetNoteDetail.js | 12 ++++++------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 0320b512..cff43906 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -238,15 +238,15 @@ class MarkdownNoteDetail extends React.Component { diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 7ef1c832..ddc700a2 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -549,13 +549,13 @@ class SnippetNoteDetail extends React.Component { onClick={(e) => this.handleContextButtonClick(e)} > - - - - - + + + + + - +