update overlay tutorial

browser/main/HomePage/ArticleDetail/index.js

@@ -38,25 +38,6 @@ const ipc = electron.ipcRenderer
 const BRAND_COLOR = '#18AF90'
 const OSX = global.process.platform === 'darwin'
 
-const editDeleteTutorialElement = (
-  <svg width='300' height='500' className='tutorial'>
-    <text x='50' y='220' fill={BRAND_COLOR} fontSize='24'>Edit / Delete a post</text>
-    <text x='90' y='245' fill={BRAND_COLOR} fontSize='18'>press `e`/`d`</text>
-
-    <svg x='150' y='35'>
-      <path fill='white' d='M87.5,93.6c-16.3-5.7-30.6-16.7-39.9-31.4c-5.5-8.7-9-19.1-3.4-28.7c4.8-8.2,13.6-12.8,22.4-15.3
-        c15.7-4.5,34.4-6.2,49.7,0.4c17.3,7.4,25.6,26.3,25.7,44.4c0.1,10.4-3.4,20.9-13.1,26c-8.6,4.5-19,4.1-28.4,3.7
-        c-1.9-0.1-1.9,2.9,0,3c9.3,0.4,19.2,0.6,27.9-3.2c8.5-3.7,13.8-11.2,15.7-20.2c3.6-17.9-2.9-40.2-17.7-51.4
-        C110.8,9.1,89,9.9,70.8,14c-17.9,4-37.4,16.8-31.3,37.9C45.6,73,66.7,89.5,86.7,96.5C88.6,97.1,89.4,94.2,87.5,93.6L87.5,93.6z'/>
-      <path fill='white' d='M11.9,89.7c14.8-3.4,29.7-6,44.8-7.9c-0.5-0.6-1-1.3-1.4-1.9c-2.6,6.3-2.8,12.7-0.7,19.2
-        c0.6,1.8,3.5,1,2.9-0.8c-1.9-6-1.7-11.8,0.7-17.6c0.3-0.8-0.5-2-1.4-1.9c-15.3,1.9-30.6,4.5-45.6,8C9.3,87.3,10.1,90.2,11.9,89.7
-        L11.9,89.7z'/>
-      <path fill='white' d='M48.6,81.5c-9.4,10.4-17,22.3-22.2,35.3c-5.5,13.6-9.3,28.9-6,43.4c0.4,1.9,3.3,1.1,2.9-0.8
-        c-3.2-14,0.7-28.8,6-41.8c5.1-12.5,12.4-24,21.5-34C52,82.2,49.9,80,48.6,81.5L48.6,81.5z'/>
-    </svg>
-  </svg>
-)
-
 const tagSelectTutorialElement = (
   <svg width='500' height='500' className='tutorial'>
     <text x='155' y='50' fill={BRAND_COLOR} fontSize='24'>Attach some tags here!</text>
@@ -311,8 +292,7 @@ export default class ArticleDetail extends React.Component {
               </button>
             </div>
           </div>
-          {status.isTutorialOpen ? editDeleteTutorialElement : null}
+          <div className='ArticleDetail-info-row2'>
-          <div>
             <TagSelect
               tags={activeArticle.tags}
               onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
@@ -341,8 +321,8 @@ export default class ArticleDetail extends React.Component {
               value={activeArticle.mode}
               className='ArticleDetail-panel-header-mode'
             />
+            {status.isTutorialOpen ? modeSelectTutorialElement : null}
           </div>
-          {status.isTutorialOpen ? modeSelectTutorialElement : null}
           <ArticleEditor
             ref='editor'
             article={activeArticle}

browser/main/HomePage/ArticleNavigator.js

@@ -28,35 +28,16 @@ c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
   </svg>
 )
 
-const newPostTutorialElement = (
-  <svg width='900' height='900' className='tutorial'>
-    <text x='290' y='155' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
-    <text x='300' y='180' fill={BRAND_COLOR} fontSize='16' children={`press \`${OSX === 'darwin' ? '⌘' : '^'} + Enter\` or \`a\``}/>
-    <svg x='130' y='-20' width='400' height='400'>
-      <path fill='white' d='M56.2,132.5c11.7-2.9,23.9-6,36.1-4.1c8.7,1.4,16.6,5.5,23.7,10.5c13.3,9.4,24.5,21.5,40.2,27
-  c1.8,0.6,2.6-2.3,0.8-2.9c-17.1-6-28.9-20.3-44-29.7c-7-4.4-14.8-7.4-23-8.2c-11.7-1.1-23.3,1.7-34.5,4.5
-  C53.6,130.1,54.4,133,56.2,132.5L56.2,132.5 z'/>
-    </svg>
-    <svg x='130' y='-120' width='400' height='400'>
-      <path fill='white' d='M82.6,218c-7.7,4.5-15.3,9.3-22.7,14.3c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
-        c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3
-        C85.7,219.7,84.2,217.1,82.6,218L82.6,218z'/>
-    </svg>
-  </svg>
-)
-
 const newFolderTutorialElement = (
   <svg width='800' height='500' className='tutorial'>
-    <text x='145' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
+    <text x='30' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
-    <svg x='115' y='-10' width='300' height='400'>
+    <text x='50' y='135' fill={BRAND_COLOR} fontSize='16'>{OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`'}</text>
-      <path fill='white' d='M36.6,3.7C28.8,8.2,21.3,13,13.9,18c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
+    <svg x='50' y='10' width='300' height='400'>
-c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3C39.7,5.3,38.2,2.7,36.6,3.7
+      <path fill='white' d='M94.1,10.9C77.7,15.6,62,22.7,47.8,32.1c-13.6,9-27.7,20.4-37.1,33.9c-1.1,1.6,1.5,3.1,2.6,1.5
-L36.6,3.7z'/>
+        C22.6,54.1,37,42.7,50.6,33.8c13.7-8.8,28.6-15.5,44.2-20C96.7,13.3,95.9,10.4,94.1,10.9L94.1,10.9z'/>
-      <path fill='white' d='M16.8,21.5c13.3-6.9,29.5-7,42.6,0.6c5.6,3.2,10.4,7.7,14.1,13c3.8,5.4,10.3,16.2,2.2,20.6
+      <path fill='white' d='M71.1,8.6c7.9,1.6,15.8,3.2,23.6,4.7c-0.1-0.9-0.2-1.8-0.4-2.7c-4.6,3.4-5.4,7.7-4.4,13.2
-c-1.2,0.7-2.5,1.2-3.9,1.6c-1.1,0.4-2.3,0.5-3.4,0.5c-1.3-1.4-2.6-2.8-3.9-4.2c-0.2-4.6,7.5-6,10.5-5.8
+        c0.8,4.4,0.8,10.9,5.6,12.8c1.8,0.7,2.6-2.2,0.8-2.9c-2.3-1-2.6-6.2-3-8.3c-0.9-4.5-1.7-9,2.5-12.1c0.9-0.7,1-2.5-0.4-2.7
-c7.4,0.7,13.7,6.2,18.4,11.6c9.4,10.7,14.7,24.3,15.6,38.5c0.1,1.9,3.1,1.9,3,0c-0.9-15.5-6.9-30.4-17.5-41.8
+        C87.5,9,79.6,7.4,71.8,5.9C70,5.4,69.2,8.3,71.1,8.6L71.1,8.6z'/>
-c-6.8-7.3-25.8-19.1-32.3-4.8c-1.9,4.1,0.3,8.5,4.8,9.4c4.6,0.8,11.6-1.8,14.3-5.7c3.6-5.3-0.1-12.8-2.8-17.6
-c-3.4-6.1-8.2-11.3-13.8-15.4C50.2,11.6,31,10.9,15.3,19C13.6,19.8,15.1,22.4,16.8,21.5L16.8,21.5z'/>
     </svg>
   </svg>
 )
@@ -183,16 +164,16 @@ export default class ArticleNavigator extends React.Component {
           </div>
         </div>*/}
 
+
+
         <div className={'ArticleNavigator-folders expand'}>
+          {status.isTutorialOpen ? newFolderTutorialElement : null}
           <div className='ArticleNavigator-folders-header'>
             <div className='title'>Folders</div>
             <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
               <i className='fa fa-fw fa-plus'/>
               <span className='tooltip'>Create a new folder ({OSX ? '⌘' : '^'} + Shift + n)</span>
             </button>
-
-            {status.isTutorialOpen ? newFolderTutorialElement : null}
-
           </div>
           <div className='folderList'>
             <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>

browser/main/HomePage/ArticleTopBar.js

@@ -14,26 +14,37 @@ const OSX = global.process.platform === 'darwin'
 const BRAND_COLOR = '#18AF90'
 
 const searchTutorialElement = (
-  <svg width='750' height='120' className='tutorial'>
+  <svg width='750' height='300' className='tutorial'>
-    <text x='450' y='33' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
+    <text x='125' y='63' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
-    <text x='450' y='60' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
+    <text x='125' y='90' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
-    <text x='450' y='85' fill={BRAND_COLOR} fontSize='18'>
+    <text x='125' y='115' fill={BRAND_COLOR} fontSize='18'>
     {'- Search by folder : /{folder_name}\n'}</text>
-    <text x='465' y='105' fill={BRAND_COLOR} fontSize='14'>
+    <text x='140' y='135' fill={BRAND_COLOR} fontSize='14'>
     {'exact match : //{folder_name}'}</text>
 
-    <svg width='500' height='300'>
+    <svg x='90' width='500' height='300'>
-      <path fill='white' d='M54.5,51.5c-12.4,3.3-27.3-1.4-38.4-7C11.2,42,5,38.1,5.6,31.8c0.7-6.9,8.1-11.2,13.8-13.7
+      <path fill='white' d='M27.2,6.9c-1.7,3.5-6,4.8-8,8.2c-1.8,3.1-2.1,6.8-1.8,10.2c0.7,7,4.2,16.7,10.3,20.7c0.5,0.4,1.4,0.2,1.8-0.2
-c12.3-5.4,26.4-6.8,39.7-7.7C72.4,9.6,85.7,9.7,99,9.8c55.2,0.3,110.4,2.2,165.5-1.5C291,6.5,317.7,3.8,344.1,7
+        c0.1-0.1,0.2-0.2,0.3-0.3c0.6-0.6,0.6-1.5,0-2.1c-0.2-0.2-0.3-0.4-0.5-0.5c-1.3-1.4-3.2,0.7-1.9,2.1c0.2,0.2-0.3,0.4,0.7,0.5
-c12.8,1.6,25.8,4.4,37.5,10c1.2,0.6,2.4,1.1,3.5,1.8c2.4,1.4,3.2,1.5,3.3,4.5c0.1,3.6-2.3,5.9-4.8,8.3c-3.9,3.8-8.6,6.8-13.5,9.2
+        c0-0.7,0-1.4,0-2.1c0,0.1-0.4,0.2-0.5,0.3c0.6-0.1,1.1-0.2,1.7-0.2c-5.7-3.7-9.2-14.5-9-20.9c0.1-4,1.6-6.7,4.8-9.1
-c-12.6,6-26.5,7.2-40.3,7.7c-13.7,0.5-27.5,0.6-41.2,1.1c-27.7,0.9-55.3,2.2-82.9,4c-30.8,2-61.6,4.5-92.3,7.6
+        c2-1.5,3.6-2.6,4.7-4.9C30.6,6.7,28,5.2,27.2,6.9L27.2,6.9z'/>
-c-15.4,1.5-30.8,3.7-46.3,4.9c-13.6,1.1-30.7,1.5-41.8-7.8c-1.5-1.2-3.6,0.9-2.1,2.1c8.9,7.5,21.4,9.2,32.7,9.2
+      <path fill='white' d='M9.5,24.4c2.4-2.7,4.9-5.4,7.3-8c2.5-2.8,5.7-7.6,9.9-7.8c-0.5-0.5-1-1-1.5-1.5c0.1,6.8,1.9,13.1,5.3,18.9
-c15.3,0,30.6-2.6,45.8-4.2c31.3-3.3,62.7-6,94.2-8.1c30.9-2.1,61.8-3.7,92.8-4.7c15.7-0.5,31.4-0.5,47-1.3
+        c1,1.7,3.6,0.2,2.6-1.5c-3.2-5.4-4.8-11.1-4.9-17.4c0-0.8-0.7-1.5-1.5-1.5c-3.6,0.2-5.9,2.1-8.3,4.7c-3.7,3.9-7.3,8-11,12
-c13.1-0.7,26.3-2.7,38.1-8.9c4.4-2.3,8.5-5.1,12-8.6c2.8-2.8,7.3-7.3,6.4-11.7c-0.8-4.3-6.4-6.3-9.8-7.9
+        C6.1,23.7,8.2,25.9,9.5,24.4L9.5,24.4z'/>
-c-5.6-2.6-11.4-4.6-17.3-6.2c-28.3-7.5-58.1-5.6-87-3.6c-62.3,4.4-124.5,2.6-187,2.4c-16.4,0-32.8,0-49,2.4
+    </svg>
-C29.9,11,13.4,13.8,5.5,24.6c-7.3,10,0.7,18.4,9.8,22.9c11.9,5.8,26.9,10.4,40,7C57.2,53.9,56.4,51,54.5,51.5L54.5,51.5z'/>
+  </svg>
-      <path fill='white' d='M446.5,21.4c-9.1-1.6-18.1-3.5-27.4-3.5c-10.2,0-20.4,1.4-30.5,2.8c-1.9,0.3-1.9,3.3,0,3
+)
-c9.5-1.3,19.1-2.6,28.8-2.7c9.6-0.2,18.9,1.7,28.3,3.4C447.6,24.7,448.4,21.8,446.5,21.4L446.5,21.4z'/>
+
+const newPostTutorialElement = (
+  <svg width='900' height='900' className='tutorial'>
+    <text x='470' y='50' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
+    <text x='490' y='75' fill={BRAND_COLOR} fontSize='16' children={`press \`${OSX ? '⌘' : '^'} + n\``}/>
+    <svg x='415' y='20' width='400' height='400'>
+      <path fill='white' d='M11.6,14.7c1,5.5,2.9,10.7,5.7,15.5c1,1.7,3.5,0.2,2.6-1.5c-2.6-4.7-4.4-9.6-5.4-14.8
+        C14.1,12,11.3,12.8,11.6,14.7L11.6,14.7z'/>
+      <path fill='white' d='M16.8,17.1c4,0.2,7.6-1.1,10.7-3.6c1.5-1.2-0.6-3.3-2.1-2.1c-2.4,2-5.4,2.9-8.6,2.7C14.9,14,14.9,17,16.8,17.1
+        L16.8,17.1z'/>
+      <path fill='white' d='M13.8,17.6c11.9,3.5,24.1,4.9,36.4,3.9c1.9-0.1,1.9-3.1,0-3c-12.1,0.9-24-0.3-35.6-3.8
+        C12.7,14.1,11.9,17,13.8,17.6L13.8,17.6z'/>
     </svg>
   </svg>
 )
@@ -202,6 +213,7 @@ export default class ArticleTopBar extends React.Component {
               <i className='fa fa-plus'/>
               <span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
             </button>
+            {status.isTutorialOpen ? newPostTutorialElement : null}
           </div>
         </div>
 
@@ -232,7 +244,7 @@ export default class ArticleTopBar extends React.Component {
             <div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
             <svg width='500' height='250' className='finder'>
               <text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
-              <text x='120' y='55' fontSize='18' fill={BRAND_COLOR}>with pressing `Control` + `shift` + `tab`</text>
+              <text x='150' y='55' fontSize='18' fill={BRAND_COLOR} children={'with pressing ' + (OSX ? '`⌘ + Alt + s`' : '`Win + Shift + s`')}/>
             </svg>
             <svg width='450' className='global'>
               <text x='100' y='45' fontSize='24' fill={BRAND_COLOR}>Hope you to enjoy our app :D</text>

browser/styles/main/ArticleDetail.styl

@@ -185,89 +185,93 @@ infoButton()
             line-height 16px
 
 
-
+    .ArticleDetail-info-row2
-    .TagSelect
+      .tutorial
-      margin-top 5px
+        position fixed
-      .TagSelect-tags
+        z-index 35
-        white-space nowrap
+        font-style italic
-        overflow-x auto
+      .TagSelect
-        position relative
+        margin-top 5px
-        noSelect()
+        .TagSelect-tags
-        z-index 30
+          white-space nowrap
-        background-color #E6E6E6
+          overflow-x auto
-        clearfix()
+          position relative
-        .TagSelect-tags-item
+          noSelect()
-          background-color transparent
+          z-index 30
-          color white
+          background-color #E6E6E6
-          margin 0 2px
+          clearfix()
-          padding 0
+          .TagSelect-tags-item
-          height 17px
+            background-color transparent
-          float left
+            color white
-          button.TagSelect-tags-item-remove
+            margin 0 2px
-            display block
+            padding 0
+            height 17px
             float left
+            button.TagSelect-tags-item-remove
+              display block
+              float left
+              background-color transparent
+              border none
+              font-size 8px
+              color white
+              width 15px
+              height 17px
+              text-align center
+              line-height 12px
+              padding 0
+              margin 0
+              border-top solid 1px darken(brandColor, 5%)
+              border-bottom solid 1px darken(brandColor, 5%)
+              border-left solid 1px darken(brandColor, 5%)
+              border-right solid 1px transparent
+              border-radius left 2px
+              background-color brandColor
+              &:hover
+                background-color lighten(brandColor, 10%)
+                border-color lighten(brandColor, 10%)
+              &:focus
+                background-color lighten(brandColor, 10%)
+                border-color focusBorderColor
+            .TagSelect-tags-item-label
+              background-color brandColor
+              float left
+              font-size 12px
+              border-top solid 1px darken(brandColor, 5%)
+              border-bottom solid 1px darken(brandColor, 5%)
+              border-right solid 1px darken(brandColor, 5%)
+              line-height 15px
+              padding 0 5px
+              border-radius right 2px
+          input.TagSelect-input
             background-color transparent
             border none
-            font-size 8px
+            border-bottom 1px solid transparent
-            color white
+            outline none
-            width 15px
+            margin 0 2px
-            height 17px
+            transition 0.15s
-            text-align center
+            height 18px
-            line-height 12px
-            padding 0
-            margin 0
-            border-top solid 1px darken(brandColor, 5%)
-            border-bottom solid 1px darken(brandColor, 5%)
-            border-left solid 1px darken(brandColor, 5%)
-            border-right solid 1px transparent
-            border-radius left 2px
-            background-color brandColor
-            &:hover
-              background-color lighten(brandColor, 10%)
-              border-color lighten(brandColor, 10%)
             &:focus
-              background-color lighten(brandColor, 10%)
               border-color focusBorderColor
-          .TagSelect-tags-item-label
+        .TagSelect-suggest
-            background-color brandColor
+          position fixed
-            float left
+          width 150px
-            font-size 12px
+          max-height 150px
-            border-top solid 1px darken(brandColor, 5%)
+          background-color white
-            border-bottom solid 1px darken(brandColor, 5%)
+          z-index 5
-            border-right solid 1px darken(brandColor, 5%)
+          border 1px solid borderColor
-            line-height 15px
+          border-radius 5px
-            padding 0 5px
+          &>button
-            border-radius right 2px
+            width 100%
-        input.TagSelect-input
+            display block
-          background-color transparent
+            padding 0 15px
-          border none
+            height 33px
-          border-bottom 1px solid transparent
+            line-height 33px
-          outline none
+            background-color transparent
-          margin 0 2px
+            border none
-          transition 0.15s
+            text-align left
-          height 18px
+            font-size 14px
-          &:focus
+            &:hover
-            border-color focusBorderColor
+              background-color darken(white, 10%)
-      .TagSelect-suggest
-        position fixed
-        width 150px
-        max-height 150px
-        background-color white
-        z-index 5
-        border 1px solid borderColor
-        border-radius 5px
-        &>button
-          width 100%
-          display block
-          padding 0 15px
-          height 33px
-          line-height 33px
-          background-color transparent
-          border none
-          text-align left
-          font-size 14px
-          &:hover
-            background-color darken(white, 10%)
   .ArticleDetail-panel
     position absolute
     top 70px

browser/styles/main/ArticleNavigator.styl

@@ -146,6 +146,10 @@ articleCount = #999
     width 100%
     transition top 0.15s ease-in-out
     background-color articleNavBgColor
+    .tutorial
+      position fixed
+      z-index 35
+      font-style italic
     &.expand
       top 100px
     .ArticleNavigator-folders-header
@@ -183,11 +187,6 @@ articleCount = #999
         &:active
           background-color brandColor
           border-color brandColor
-      .tutorial
-        position fixed
-        z-index 35px
-        top 200px
-        font-style italic
     .folderList
       absolute bottom
       top 33px

browser/styles/main/ArticleTopBar.styl

@@ -40,7 +40,8 @@ infoBtnActiveBgColor = #3A3A3A
     float left
     &>.tutorial
       fixed top
-      left 200px
+      left 100px
+      top 30px
       z-index 36
       font-style italic
     &>.ArticleTopBar-left-search
@@ -123,8 +124,14 @@ infoBtnActiveBgColor = #3A3A3A
       height 33px
       margin-top 13.5px
       margin-left 20px
+      .tutorial
+        fixed top
+        left 200px
+        z-index 36
+        font-style italic
       button.ArticleTopBar-left-control-new-post-button
-        background transparent
+        position fixed
+        background bgColor
         font-size 20px
         border none
         outline none
@@ -134,6 +141,7 @@ infoBtnActiveBgColor = #3A3A3A
         border-radius 16.5px
         transition 0.1s
         border 1px solid transparent
+        z-index 30
         &:hover
           color textColor
         &:active