delete note

2025-12-22 06:01:45 +00:00 · 2016-07-23 15:28:17 +09:00
parent b2d34ab95d
commit 45b1cd3942
17 changed files with 498 additions and 329 deletions
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -36,7 +36,8 @@ class InitModal extends React.Component {
      migrationRequested: true,
      isLoading: true,
      data: null,
-      legacyStorageExists: false
+      legacyStorageExists: false,
+      isSending: false
    }
  }

@@ -86,67 +87,77 @@ class InitModal extends React.Component {
  }

  handleSubmitButtonClick (e) {
-    dataApi
-      .addStorage({
-        name: 'My Storage',
-        path: this.state.path
-      })
-      .then((data) => {
-        if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
-          return dataApi.migrateFromV5(data.storage.key, this.state.data)
-        }
-        return data
-      })
-      .then((data) => {
-        store.dispatch({
-          type: 'ADD_STORAGE',
-          storage: data.storage,
-          notes: data.notes
+    this.setState({
+      isSending: true
+    }, () => {
+      dataApi
+        .addStorage({
+          name: 'My Storage',
+          path: this.state.path
        })
-
-        let defaultMarkdownNote = dataApi
-          .createMarkdownNote(data.storage.key, data.storage.folders[0].key, {
-            title: 'Welcome to Boostnote :)',
-            content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
-          })
-          .then((note) => {
-            store.dispatch({
-              type: 'CREATE_NOTE',
-              note: note
-            })
-          })
-        let defaultSnippetNote = dataApi
-          .createSnippetNote(data.storage.key, data.storage.folders[0].key, {
-            title: 'Snippet note example',
-            description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
-            snippets: [
-              {
-                name: 'example.html',
-                mode: 'html',
-                content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
-              },
-              {
-                name: 'example.js',
-                mode: 'javascript',
-                content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
-              }
-            ]
-          })
-          .then((note) => {
-            store.dispatch({
-              type: 'CREATE_NOTE',
-              note: note
-            })
+        .then((data) => {
+          if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
+            return dataApi.migrateFromV5(data.storage.key, this.state.data)
+          }
+          return data
+        })
+        .then((data) => {
+          store.dispatch({
+            type: 'ADD_STORAGE',
+            storage: data.storage,
+            notes: data.notes
          })

-        return Promise.resolve(defaultSnippetNote)
-          .then(defaultMarkdownNote)
-          .then(() => data.storage)
-      })
-      .then((storage) => {
-        hashHistory.push('/storages/' + storage.key)
-        this.props.close()
-      })
+          let defaultMarkdownNote = dataApi
+            .createMarkdownNote(data.storage.key, data.storage.folders[0].key, {
+              title: 'Welcome to Boostnote :)',
+              content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
+            })
+            .then((note) => {
+              store.dispatch({
+                type: 'CREATE_NOTE',
+                note: note
+              })
+            })
+          let defaultSnippetNote = dataApi
+            .createSnippetNote(data.storage.key, data.storage.folders[0].key, {
+              title: 'Snippet note example',
+              description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
+              snippets: [
+                {
+                  name: 'example.html',
+                  mode: 'html',
+                  content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
+                },
+                {
+                  name: 'example.js',
+                  mode: 'javascript',
+                  content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
+                }
+              ]
+            })
+            .then((note) => {
+              store.dispatch({
+                type: 'CREATE_NOTE',
+                note: note
+              })
+            })
+
+          return Promise.resolve(defaultSnippetNote)
+            .then(defaultMarkdownNote)
+            .then(() => data.storage)
+        })
+        .then((storage) => {
+          hashHistory.push('/storages/' + storage.key)
+          this.props.close()
+        })
+        .catch((err) => {
+          this.setState({
+            isSending: false
+          })
+          throw err
+        })
+    })
  }

  handleMigrationRequestedChange (e) {
@@ -197,7 +208,15 @@ class InitModal extends React.Component {
          <div styleName='body-control'>
            <button styleName='body-control-createButton'
              onClick={(e) => this.handleSubmitButtonClick(e)}
-            >Let's Go!</button>
+              disabled={this.state.isSending}
+            >
+              {this.state.isSending
+                ? <span>
+                  <i className='fa fa-spin fa-spinner'/> Loading...
+                </span>
+                : 'Let\'s Go!'
+              }
+            </button>
          </div>
        </div>

--- a/browser/main/modals/InitModal.styl
+++ b/browser/main/modals/InitModal.styl
@@ -27,7 +27,7 @@
  top 10px
  right 10px
  height 30px
-  width 0 25px
+  padding 0 25px
  border $ui-border
  border-radius 2px
  color $ui-text-color
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'

 class NewNoteModal extends React.Component {
  constructor (props) {
@@ -36,6 +37,7 @@ class NewNoteModal extends React.Component {
          pathname: location.pathname,
          query: {key: note.uniqueKey}
        })
+        ee.emit('detail:focus')
        this.props.close()
      })
  }
@@ -67,6 +69,7 @@ class NewNoteModal extends React.Component {
          pathname: location.pathname,
          query: {key: note.uniqueKey}
        })
+        ee.emit('detail:focus')
        this.props.close()
      })
  }
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -204,6 +204,14 @@ class UnstyledFolderItem extends React.Component {
 const FolderItem = CSSModules(UnstyledFolderItem, styles)

 class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isLabelEditing: false
+    }
+  }
+
  handleNewFolderButtonClick (e) {
    let { storage } = this.props
    let input = {
@@ -242,6 +250,35 @@ class StorageItem extends React.Component {
      })
  }

+  handleLabelClick (e) {
+    let { storage } = this.props
+    this.setState({
+      isLabelEditing: true,
+      name: storage.name
+    }, () => {
+      this.refs.label.focus()
+    })
+  }
+  handleLabelChange (e) {
+    this.setState({
+      name: this.refs.label.value
+    })
+  }
+  handleLabelBlur (e) {
+    let { storage } = this.props
+    dataApi
+      .renameStorage(storage.key, this.state.name)
+      .then((storage) => {
+        store.dispatch({
+          type: 'RENAME_STORAGE',
+          storage: storage
+        })
+        this.setState({
+          isLabelEditing: false
+        })
+      })
+  }
+
  render () {
    let { storage } = this.props
    let folderList = storage.folders.map((folder) => {
@@ -253,9 +290,24 @@ class StorageItem extends React.Component {
    return (
      <div styleName='root' key={storage.key}>
        <div styleName='header'>
-          <i className='fa fa-folder-open'/>&nbsp;
-          {storage.name}&nbsp;
-          <span styleName='header-path'>({storage.path})</span>
+          {this.state.isLabelEditing
+            ? <div styleName='header-label--edit'>
+              <input styleName='header-label-input'
+                value={this.state.name}
+                ref='label'
+                onChange={(e) => this.handleLabelChange(e)}
+                onBlur={(e) => this.handleLabelBlur(e)}
+              />
+            </div>
+            : <div styleName='header-label'
+              onClick={(e) => this.handleLabelClick(e)}
+            >
+              <i className='fa fa-folder-open'/>&nbsp;
+              {storage.name}&nbsp;
+              <span styleName='header-label-path'>({storage.path})</span>&nbsp;
+              <i styleName='header-label-editButton' className='fa fa-pencil'/>
+            </div>
+          }
          <div styleName='header-control'>
            <button styleName='header-control-button'
              onClick={(e) => this.handleNewFolderButtonClick(e)}
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -10,10 +10,32 @@
  border-bottom $default-border
  margin-bottom 5px

-.header-path
+.header-label
+  float left
+  cursor pointer
+  &:hover
+    .header-label-editButton
+      opacity 1
+
+.header-label-path
  color $ui-inactive-text-color
  font-size 10px
  margin 0 5px
+.header-label-editButton
+  color $ui-text-color
+  opacity 0
+  transition 0.2s
+.header-label--edit
+  @extend .header-label
+
+.header-label-input
+  height 25px
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  padding 0 5px
+

 .header-control
  float right