diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js index c527085a..ed1908e9 100644 --- a/browser/main/HomePage/ArticleDetail/index.js +++ b/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 = ( - - Edit / Delete a post - press `e`/`d` - - - - - - - -) - const tagSelectTutorialElement = ( Attach some tags here! @@ -311,8 +292,7 @@ export default class ArticleDetail extends React.Component { - {status.isTutorialOpen ? editDeleteTutorialElement : null} - + 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} - {status.isTutorialOpen ? modeSelectTutorialElement : null} ) -const newPostTutorialElement = ( - - Create a new post!! - - - - - - - - -) - const newFolderTutorialElement = ( - Create a new folder!! - - - + Create a new folder!! + {OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`'} + + + ) @@ -183,16 +164,16 @@ export default class ArticleNavigator extends React.Component { */} + + + {status.isTutorialOpen ? newFolderTutorialElement : null} Folders this.handleNewFolderButton(e)} className='addBtn'> Create a new folder ({OSX ? '⌘' : '^'} + Shift + n) - - {status.isTutorialOpen ? newFolderTutorialElement : null} - this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js index cca7a104..76b7eeaf 100644 --- a/browser/main/HomePage/ArticleTopBar.js +++ b/browser/main/HomePage/ArticleTopBar.js @@ -14,26 +14,37 @@ const OSX = global.process.platform === 'darwin' const BRAND_COLOR = '#18AF90' const searchTutorialElement = ( - - Search some posts!! - {'- Search by tag : #{string}'} - + + Search some posts!! + {'- Search by tag : #{string}'} + {'- Search by folder : /{folder_name}\n'} - + {'exact match : //{folder_name}'} - - - + + + + + +) + +const newPostTutorialElement = ( + + Create a new post!! + + + + + ) @@ -202,6 +213,7 @@ export default class ArticleTopBar extends React.Component { New Post ({OSX ? '⌘' : '^'} + n) + {status.isTutorialOpen ? newPostTutorialElement : null} @@ -232,7 +244,7 @@ export default class ArticleTopBar extends React.Component { this.handleTutorialButtonClick(e)} className='clickJammer'/> Also, you can open Finder!! - with pressing `Control` + `shift` + `tab` + Hope you to enjoy our app :D diff --git a/browser/styles/main/ArticleDetail.styl b/browser/styles/main/ArticleDetail.styl index 0efb419e..0bfff606 100644 --- a/browser/styles/main/ArticleDetail.styl +++ b/browser/styles/main/ArticleDetail.styl @@ -185,89 +185,93 @@ infoButton() line-height 16px - - .TagSelect - margin-top 5px - .TagSelect-tags - white-space nowrap - overflow-x auto - position relative - noSelect() - z-index 30 - background-color #E6E6E6 - clearfix() - .TagSelect-tags-item - background-color transparent - color white - margin 0 2px - padding 0 - height 17px - float left - button.TagSelect-tags-item-remove - display block + .ArticleDetail-info-row2 + .tutorial + position fixed + z-index 35 + font-style italic + .TagSelect + margin-top 5px + .TagSelect-tags + white-space nowrap + overflow-x auto + position relative + noSelect() + z-index 30 + background-color #E6E6E6 + clearfix() + .TagSelect-tags-item + background-color transparent + color white + margin 0 2px + 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 - 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%) + border-bottom 1px solid transparent + outline none + margin 0 2px + transition 0.15s + height 18px &: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 - border-bottom 1px solid transparent - outline none - margin 0 2px - transition 0.15s - height 18px - &:focus - border-color focusBorderColor - .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%) + .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 diff --git a/browser/styles/main/ArticleNavigator.styl b/browser/styles/main/ArticleNavigator.styl index 651c4301..35fbb378 100644 --- a/browser/styles/main/ArticleNavigator.styl +++ b/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 diff --git a/browser/styles/main/ArticleTopBar.styl b/browser/styles/main/ArticleTopBar.styl index bd7b1d11..37857c84 100644 --- a/browser/styles/main/ArticleTopBar.styl +++ b/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