Hotkey setting�の時Alertで結果を出す

Folder nameが長すぎ雨時のlayout崩れ解決
ArticleNavigatorの余計なスペースをなくす
Default articleの誤字直し

Author: Rokt33r

browser/main/HomePage/ArticleDetail.js

@@ -132,7 +132,7 @@ export default class ArticleDetail extends React.Component {
             <div className='detailInfo'>
               <div className='left'>
                 <div className='info'>
-                  <FolderMark color={folder.color}/> {folder.name}&nbsp;
+                  <FolderMark color={folder.color}/> <span className='folderName'>{folder.name}</span>&nbsp;
                   Created : {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
                   Updated : {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
                 </div>

browser/main/HomePage/ArticleList.js

@@ -85,7 +85,7 @@ export default class ArticleList extends React.Component {
           <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
             <div className='top'>
               {folder != null
-                ? <span><FolderMark color={folder.color}/>{folder.name}</span>
+                ? <span className='folderName'><FolderMark color={folder.color}/>{folder.name}</span>
                 : <span><FolderMark color={-1}/>Unknown</span>
               }
             <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -44,6 +44,11 @@ iptFocusBorderColor = #369DCD
     .left
       absolute top left bottom
       right 120px
+      .folderName
+        display inline-block
+        max-width 100px
+        overflow ellipsis
+        height 10px
     .right
       absolute top right
   .detailBody

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -26,8 +26,10 @@ articleItemColor = #777
         line-height 20px
         padding 5px 0
         color articleItemColor
-        .profileImage
-          vertical-align middle
+        .folderName
+          overflow ellipsis
+          display inline-block
+          width 120px
         .updatedAt
           float right
           line-height 20px

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -100,9 +100,12 @@ articleNavBgColor = #353535
           background-color brandColor
           border-color brandColor
   .folders
-    margin-bottom 15px
+    absolute bottom
+    top 200px
+    width 100%
     .folderList
-      height 340px
+      absolute bottom
+      top 38px
       overflow-y auto
     .folderList button
       height 33px

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -103,6 +103,11 @@ iptFocusBorderColor = #369DCD
           font-size 14px
           &:hover
             background-color lighten(brandColor, 10%)
+        .alert
+          float right
+          width 250px
+          padding 10px 15px
+          margin 0 10px 0
     .alert
       color infoTextColor
       background-color infoBackgroundColor
@@ -374,6 +379,7 @@ iptFocusBorderColor = #369DCD
             .folderName
               float left
               width 175px
+              overflow ellipsis
               padding-left 15px
             .folderPublic
               float left
@@ -480,6 +486,7 @@ iptFocusBorderColor = #369DCD
                   height 33px
                   width 250px
                   padding-left 15px
+                  overflow ellipsis
                   strong
                     font-size 16px
                     color brandColor

lib/components/modal/Preference/AppSettingTab.js

@@ -9,17 +9,47 @@ export default class AppSettingTab extends React.Component {
     let keymap = remote.getGlobal('keymap')
 
     this.state = {
-      toggleFinder: keymap.toggleFinder
+      toggleFinder: keymap.toggleFinder,
+      alert: null
     }
   }
 
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({alert: {
+        type: 'success',
+        message: 'Successfully done!'
+      }})
+    }
+    this.handleSettingError = err => {
+      this.setState({alert: {
+        type: 'error',
+        message: err.message
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
   handleSaveButtonClick (e) {
     ipc.send('hotkeyUpdated', {
       toggleFinder: this.state.toggleFinder
     })
   }
 
   render () {
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+
     return (
       <div className='AppSettingTab content'>
         <div className='section'>
@@ -30,6 +60,7 @@ export default class AppSettingTab extends React.Component {
           </div>
           <div className='sectionConfirm'>
             <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+            {alertElement}
           </div>
           <div className='description'>
             <ul>

lib/dataStore.js

@@ -1,6 +1,6 @@
 import keygen from 'boost/keygen'
 
-let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyantaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
+let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyntaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
 
 export function init () {
   console.log('initialize data store')

main.js

@@ -138,8 +138,12 @@ app.on('ready', function () {
         }
         finderWindow.show()
       })
+      mainWindow.webContents.send('APP_SETTING_DONE', {})
     } catch (err) {
-      console.log(err.name)
+      console.error(err)
+      mainWindow.webContents.send('APP_SETTING_ERROR', {
+        message: 'Failed to apply hotkey: Invalid format'
+      })
     }
   })