Skip to content

Commit 0bfc923

Browse files
Rokt33rRokt33r
committed
update overlay tutorial
1 parent 32e6394 commit 0bfc923

6 files changed

Lines changed: 139 additions & 155 deletions

File tree

‎browser/main/HomePage/ArticleDetail/index.js‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,6 @@ const ipc = electron.ipcRenderer
3838
const BRAND_COLOR = '#18AF90'
3939
const OSX = global.process.platform === 'darwin'
4040

41-
const editDeleteTutorialElement = (
42-
<svg width='300' height='500' className='tutorial'>
43-
<text x='50' y='220' fill={BRAND_COLOR} fontSize='24'>Edit / Delete a post</text>
44-
<text x='90' y='245' fill={BRAND_COLOR} fontSize='18'>press `e`/`d`</text>
45-
46-
<svg x='150' y='35'>
47-
<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
48-
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
49-
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
50-
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'/>
51-
<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
52-
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
53-
L11.9,89.7z'/>
54-
<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
55-
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'/>
56-
</svg>
57-
</svg>
58-
)
59-
6041
const tagSelectTutorialElement = (
6142
<svg width='500' height='500' className='tutorial'>
6243
<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 {
311292
</button>
312293
</div>
313294
</div>
314-
{status.isTutorialOpen ? editDeleteTutorialElement : null}
315-
<div>
295+
<div className='ArticleDetail-info-row2'>
316296
<TagSelect
317297
tags={activeArticle.tags}
318298
onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
@@ -341,8 +321,8 @@ export default class ArticleDetail extends React.Component {
341321
value={activeArticle.mode}
342322
className='ArticleDetail-panel-header-mode'
343323
/>
324+
{status.isTutorialOpen ? modeSelectTutorialElement : null}
344325
</div>
345-
{status.isTutorialOpen ? modeSelectTutorialElement : null}
346326
<ArticleEditor
347327
ref='editor'
348328
article={activeArticle}

‎browser/main/HomePage/ArticleNavigator.js‎

Lines changed: 11 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,35 +28,16 @@ c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
2828
</svg>
2929
)
3030

31-
const newPostTutorialElement = (
32-
<svg width='900' height='900' className='tutorial'>
33-
<text x='290' y='155' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
34-
<text x='300' y='180' fill={BRAND_COLOR} fontSize='16' children={`press \`${OSX === 'darwin' ? '⌘' : '^'} + Enter\` or \`a\``}/>
35-
<svg x='130' y='-20' width='400' height='400'>
36-
<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
37-
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
38-
C53.6,130.1,54.4,133,56.2,132.5L56.2,132.5 z'/>
39-
</svg>
40-
<svg x='130' y='-120' width='400' height='400'>
41-
<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
42-
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
43-
C85.7,219.7,84.2,217.1,82.6,218L82.6,218z'/>
44-
</svg>
45-
</svg>
46-
)
47-
4831
const newFolderTutorialElement = (
4932
<svg width='800' height='500' className='tutorial'>
50-
<text x='145' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
51-
<svg x='115' y='-10' width='300' height='400'>
52-
<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
53-
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
54-
L36.6,3.7z'/>
55-
<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
56-
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
57-
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
58-
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
59-
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'/>
33+
<text x='30' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
34+
<text x='50' y='135' fill={BRAND_COLOR} fontSize='16'>{OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`'}</text>
35+
<svg x='50' y='10' width='300' height='400'>
36+
<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
37+
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'/>
38+
<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
39+
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
40+
C87.5,9,79.6,7.4,71.8,5.9C70,5.4,69.2,8.3,71.1,8.6L71.1,8.6z'/>
6041
</svg>
6142
</svg>
6243
)
@@ -183,16 +164,16 @@ export default class ArticleNavigator extends React.Component {
183164
</div>
184165
</div>*/}
185166

167+
168+
186169
<div className={'ArticleNavigator-folders expand'}>
170+
{status.isTutorialOpen ? newFolderTutorialElement : null}
187171
<div className='ArticleNavigator-folders-header'>
188172
<div className='title'>Folders</div>
189173
<button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
190174
<i className='fa fa-fw fa-plus'/>
191175
<span className='tooltip'>Create a new folder ({OSX ? '⌘' : '^'} + Shift + n)</span>
192176
</button>
193-
194-
{status.isTutorialOpen ? newFolderTutorialElement : null}
195-
196177
</div>
197178
<div className='folderList'>
198179
<button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>

‎browser/main/HomePage/ArticleTopBar.js‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,37 @@ const OSX = global.process.platform === 'darwin'
1414
const BRAND_COLOR = '#18AF90'
1515

1616
const searchTutorialElement = (
17-
<svg width='750' height='120' className='tutorial'>
18-
<text x='450' y='33' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
19-
<text x='450' y='60' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
20-
<text x='450' y='85' fill={BRAND_COLOR} fontSize='18'>
17+
<svg width='750' height='300' className='tutorial'>
18+
<text x='125' y='63' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
19+
<text x='125' y='90' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
20+
<text x='125' y='115' fill={BRAND_COLOR} fontSize='18'>
2121
{'- Search by folder : /{folder_name}\n'}</text>
22-
<text x='465' y='105' fill={BRAND_COLOR} fontSize='14'>
22+
<text x='140' y='135' fill={BRAND_COLOR} fontSize='14'>
2323
{'exact match : //{folder_name}'}</text>
2424

25-
<svg width='500' height='300'>
26-
<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
27-
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
28-
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
29-
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
30-
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
31-
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
32-
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
33-
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
34-
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'/>
35-
<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
36-
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'/>
25+
<svg x='90' width='500' height='300'>
26+
<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
27+
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
28+
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
29+
c2-1.5,3.6-2.6,4.7-4.9C30.6,6.7,28,5.2,27.2,6.9L27.2,6.9z'/>
30+
<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
31+
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
32+
C6.1,23.7,8.2,25.9,9.5,24.4L9.5,24.4z'/>
33+
</svg>
34+
</svg>
35+
)
36+
37+
const newPostTutorialElement = (
38+
<svg width='900' height='900' className='tutorial'>
39+
<text x='470' y='50' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
40+
<text x='490' y='75' fill={BRAND_COLOR} fontSize='16' children={`press \`${OSX ? '⌘' : '^'} + n\``}/>
41+
<svg x='415' y='20' width='400' height='400'>
42+
<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
43+
C14.1,12,11.3,12.8,11.6,14.7L11.6,14.7z'/>
44+
<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
45+
L16.8,17.1z'/>
46+
<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
47+
C12.7,14.1,11.9,17,13.8,17.6L13.8,17.6z'/>
3748
</svg>
3849
</svg>
3950
)
@@ -202,6 +213,7 @@ export default class ArticleTopBar extends React.Component {
202213
<i className='fa fa-plus'/>
203214
<span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
204215
</button>
216+
{status.isTutorialOpen ? newPostTutorialElement : null}
205217
</div>
206218
</div>
207219

@@ -232,7 +244,7 @@ export default class ArticleTopBar extends React.Component {
232244
<div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
233245
<svg width='500' height='250' className='finder'>
234246
<text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
235-
<text x='120' y='55' fontSize='18' fill={BRAND_COLOR}>with pressing `Control` + `shift` + `tab`</text>
247+
<text x='150' y='55' fontSize='18' fill={BRAND_COLOR} children={'with pressing ' + (OSX ? '`⌘ + Alt + s`' : '`Win + Shift + s`')}/>
236248
</svg>
237249
<svg width='450' className='global'>
238250
<text x='100' y='45' fontSize='24' fill={BRAND_COLOR}>Hope you to enjoy our app :D</text>

‎browser/styles/main/ArticleDetail.styl‎

Lines changed: 82 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -185,89 +185,93 @@ infoButton()
185185
line-height 16px
186186

187187

188-
189-
.TagSelect
190-
margin-top 5px
191-
.TagSelect-tags
192-
white-space nowrap
193-
overflow-x auto
194-
position relative
195-
noSelect()
196-
z-index 30
197-
background-color #E6E6E6
198-
clearfix()
199-
.TagSelect-tags-item
200-
background-color transparent
201-
color white
202-
margin 0 2px
203-
padding 0
204-
height 17px
205-
float left
206-
button.TagSelect-tags-item-remove
207-
display block
208-
float left
188+
.ArticleDetail-info-row2
189+
.tutorial
190+
position fixed
191+
z-index 35
192+
font-style italic
193+
.TagSelect
194+
margin-top 5px
195+
.TagSelect-tags
196+
white-space nowrap
197+
overflow-x auto
198+
position relative
199+
noSelect()
200+
z-index 30
201+
background-color #E6E6E6
202+
clearfix()
203+
.TagSelect-tags-item
209204
background-color transparent
210-
border none
211-
font-size 8px
212205
color white
213-
width 15px
214-
height 17px
215-
text-align center
216-
line-height 12px
206+
margin 0 2px
217207
padding 0
218-
margin 0
219-
border-top solid 1px darken(brandColor, 5%)
220-
border-bottom solid 1px darken(brandColor, 5%)
221-
border-left solid 1px darken(brandColor, 5%)
222-
border-right solid 1px transparent
223-
border-radius left 2px
224-
background-color brandColor
225-
&:hover
226-
background-color lighten(brandColor, 10%)
227-
border-color lighten(brandColor, 10%)
208+
height 17px
209+
float left
210+
button.TagSelect-tags-item-remove
211+
display block
212+
float left
213+
background-color transparent
214+
border none
215+
font-size 8px
216+
color white
217+
width 15px
218+
height 17px
219+
text-align center
220+
line-height 12px
221+
padding 0
222+
margin 0
223+
border-top solid 1px darken(brandColor, 5%)
224+
border-bottom solid 1px darken(brandColor, 5%)
225+
border-left solid 1px darken(brandColor, 5%)
226+
border-right solid 1px transparent
227+
border-radius left 2px
228+
background-color brandColor
229+
&:hover
230+
background-color lighten(brandColor, 10%)
231+
border-color lighten(brandColor, 10%)
232+
&:focus
233+
background-color lighten(brandColor, 10%)
234+
border-color focusBorderColor
235+
.TagSelect-tags-item-label
236+
background-color brandColor
237+
float left
238+
font-size 12px
239+
border-top solid 1px darken(brandColor, 5%)
240+
border-bottom solid 1px darken(brandColor, 5%)
241+
border-right solid 1px darken(brandColor, 5%)
242+
line-height 15px
243+
padding 0 5px
244+
border-radius right 2px
245+
input.TagSelect-input
246+
background-color transparent
247+
border none
248+
border-bottom 1px solid transparent
249+
outline none
250+
margin 0 2px
251+
transition 0.15s
252+
height 18px
228253
&:focus
229-
background-color lighten(brandColor, 10%)
230254
border-color focusBorderColor
231-
.TagSelect-tags-item-label
232-
background-color brandColor
233-
float left
234-
font-size 12px
235-
border-top solid 1px darken(brandColor, 5%)
236-
border-bottom solid 1px darken(brandColor, 5%)
237-
border-right solid 1px darken(brandColor, 5%)
238-
line-height 15px
239-
padding 0 5px
240-
border-radius right 2px
241-
input.TagSelect-input
242-
background-color transparent
243-
border none
244-
border-bottom 1px solid transparent
245-
outline none
246-
margin 0 2px
247-
transition 0.15s
248-
height 18px
249-
&:focus
250-
border-color focusBorderColor
251-
.TagSelect-suggest
252-
position fixed
253-
width 150px
254-
max-height 150px
255-
background-color white
256-
z-index 5
257-
border 1px solid borderColor
258-
border-radius 5px
259-
&>button
260-
width 100%
261-
display block
262-
padding 0 15px
263-
height 33px
264-
line-height 33px
265-
background-color transparent
266-
border none
267-
text-align left
268-
font-size 14px
269-
&:hover
270-
background-color darken(white, 10%)
255+
.TagSelect-suggest
256+
position fixed
257+
width 150px
258+
max-height 150px
259+
background-color white
260+
z-index 5
261+
border 1px solid borderColor
262+
border-radius 5px
263+
&>button
264+
width 100%
265+
display block
266+
padding 0 15px
267+
height 33px
268+
line-height 33px
269+
background-color transparent
270+
border none
271+
text-align left
272+
font-size 14px
273+
&:hover
274+
background-color darken(white, 10%)
271275
.ArticleDetail-panel
272276
position absolute
273277
top 70px

‎browser/styles/main/ArticleNavigator.styl‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@ articleCount = #999
146146
width 100%
147147
transition top 0.15s ease-in-out
148148
background-color articleNavBgColor
149+
.tutorial
150+
position fixed
151+
z-index 35
152+
font-style italic
149153
&.expand
150154
top 100px
151155
.ArticleNavigator-folders-header
@@ -183,11 +187,6 @@ articleCount = #999
183187
&:active
184188
background-color brandColor
185189
border-color brandColor
186-
.tutorial
187-
position fixed
188-
z-index 35px
189-
top 200px
190-
font-style italic
191190
.folderList
192191
absolute bottom
193192
top 33px

0 commit comments

Comments
 (0)