Skip to content

Commit 7a4052e

Browse files
sota1235sota1235
authored
Merge pull request #922 from sosukesuzuki/feature-tag-area
Feature tag area
2 parents c429fc6 + 35beec3 commit 7a4052e

10 files changed

Lines changed: 271 additions & 63 deletions

File tree

‎browser/components/NavToggleButton.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @fileoverview Micro component for toggle SideNav
3+
*/
4+
import React, { PropTypes } from 'react'
5+
import styles from './NavToggleButton.styl'
6+
import CSSModules from 'browser/lib/CSSModules'
7+
8+
/**
9+
* @param {boolean} isFolded
10+
* @param {Function} handleToggleButtonClick
11+
*/
12+
13+
const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
14+
<button styleName='navToggle'
15+
onClick={(e) => handleToggleButtonClick(e)}
16+
>
17+
{isFolded
18+
? <i className='fa fa-angle-double-right' />
19+
: <i className='fa fa-angle-double-left' />
20+
}
21+
</button>
22+
)
23+
24+
NavToggleButton.propTypes = {
25+
isFolded: PropTypes.bool.isRequired,
26+
handleToggleButtonClick: PropTypes.func.isRequired
27+
}
28+
29+
export default CSSModules(NavToggleButton, styles)

‎browser/components/NavToggleButton.styl‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.navToggle
2+
navButtonColor()
3+
display block
4+
position absolute
5+
right 5px
6+
bottom 5px
7+
border-radius 16.5px
8+
height 34px
9+
width 34px
10+
line-height 32px
11+
padding 0
12+
13+
body[data-theme="dark"]
14+
.navToggle
15+
&:hover
16+
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
17+
transition 0.15s
18+
color $ui-dark-text-color
19+

‎browser/components/StorageList.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @fileoverview Micro component for showing StorageList
3+
*/
4+
import React, { PropTypes } from 'react'
5+
import styles from './StorgaeList.styl'
6+
import CSSModules from 'browser/lib/CSSModules'
7+
8+
/**
9+
* @param {Array} storgaeList
10+
*/
11+
12+
const StorageList = ({storageList}) => (
13+
<div styleName='storageList'>
14+
{storageList.length > 0 ? storageList : (
15+
<div styleName='storgaeList-empty'>No storage mount.</div>
16+
)}
17+
</div>
18+
)
19+
20+
StorageList.propTypes = {
21+
storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
22+
}
23+
export default CSSModules(StorageList, styles)

‎browser/components/StorgaeList.styl‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.storageList
2+
absolute left right
3+
bottom 37px
4+
top 160px
5+
overflow-y auto
6+
7+
.storageList-empty
8+
padding 0 10px
9+
margin-top 15px
10+
line-height 24px
11+
color $ui-inactive-text-color
12+
13+
body[data-theme="dark"]
14+
.storageList-empty
15+
color $ui-dark-inactive-text-color
16+
17+
.root-folded
18+
.storageList-empty
19+
white-space nowrap
20+
transform rotate(90deg)

‎browser/components/TagListItem.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @fileoverview Micro component for showing TagList.
3+
*/
4+
import React, { PropTypes } from 'react'
5+
import styles from './TagListItem.styl'
6+
import CSSModules from 'browser/lib/CSSModules'
7+
8+
/**
9+
* @param {string} name
10+
* @param {Function} handleClickTagListItem
11+
* @param {bool} isActive
12+
*/
13+
14+
const TagListItem = ({name, handleClickTagListItem, isActive}) => (
15+
<button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
16+
<span styleName='tagList-item-name'>
17+
{`# ${name}`}
18+
</span>
19+
</button>
20+
)
21+
22+
TagListItem.propTypes = {
23+
name: PropTypes.string.isRequired,
24+
handleClickTagListItem: PropTypes.func.isRequired
25+
}
26+
27+
export default CSSModules(TagListItem, styles)

‎browser/components/TagListItem.styl‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.tagList-item
2+
display flex
3+
width 100%
4+
height 26px
5+
background-color transparent
6+
color $ui-inactive-text-color
7+
padding 0
8+
margin-bottom 5px
9+
text-align left
10+
border none
11+
overflow ellipsis
12+
font-size 12px
13+
&:first-child
14+
margin-top 0
15+
&:hover
16+
color $ui-text-color
17+
background-color alpha($ui-button--active-backgroundColor, 20%)
18+
transition background-color 0.15s
19+
&:active
20+
color $ui-text-color
21+
background-color $ui-button--active-backgroundColor
22+
23+
.tagList-item-active
24+
background-color $ui-button--active-backgroundColor
25+
display flex
26+
width 100%
27+
height 26px
28+
padding 0
29+
margin-bottom 5px
30+
text-align left
31+
border none
32+
overflow ellipsis
33+
font-size 12px
34+
35+
.tagList-item-name
36+
display block
37+
flex 1
38+
padding 0 25px
39+
height 26px
40+
line-height 26px
41+
border-width 0 0 0 2px
42+
border-style solid
43+
border-color transparent
44+
overflow hidden
45+
text-overflow ellipsis

‎browser/main/NoteList/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ class NoteList extends React.Component {
229229
let { data, params, location } = this.props
230230
let { router } = this.context
231231

232-
if (location.pathname.match(/\/home/)) {
232+
if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) {
233233
const allNotes = data.noteMap.map((note) => note)
234234
this.contextNotes = allNotes
235235
return allNotes
@@ -255,6 +255,14 @@ class NoteList extends React.Component {
255255
return trashedNotes
256256
}
257257

258+
if (location.pathname.match(/\/tags/)) {
259+
return data.noteMap.map(note => {
260+
return note
261+
}).filter(note => {
262+
return note.tags.includes(params.tagname)
263+
})
264+
}
265+
258266
return this.getContextNotes()
259267
}
260268

‎browser/main/SideNav/SideNav.styl‎

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,48 +13,33 @@
1313
height $topBar-height
1414
padding 0 15px
1515
font-size 12px
16-
width 100%
17-
text-align left
16+
width 33%
17+
text-align center
1818
&:hover
1919
color $ui-text-color
2020
&:active, &:active:hover
2121
color $ui-text-color
2222
background-color alpha($ui-button--active-backgroundColor, 20%)
2323

24+
.active-button
25+
background-color $ui-button--active-color
26+
27+
.non-active-button
28+
background-color $ui-button-color
29+
2430
.top-menu-label
2531
margin-left 5px
2632
overflow ellipsis
2733

28-
.storageList
34+
.tagList
2935
absolute left right
3036
bottom 37px
31-
top 160px
37+
top 80px
3238
overflow-y auto
3339

34-
.storageList-empty
35-
padding 0 10px
36-
margin-top 15px
37-
line-height 24px
38-
color $ui-inactive-text-color
39-
40-
.navToggle
41-
navButtonColor()
42-
display block
43-
position absolute
44-
right 5px
45-
bottom 5px
46-
border-radius 16.5px
47-
height 34px
48-
width 34px
49-
line-height 32px
50-
padding 0
51-
5240
.root--folded
5341
@extend .root
5442
width 44px
55-
.storageList-empty
56-
white-space nowrap
57-
transform rotate(90deg)
5843
.top-menu
5944
width 44px - 1
6045
text-align center
@@ -119,12 +104,3 @@ body[data-theme="dark"]
119104
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
120105
&:hover
121106
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
122-
123-
.storageList-empty
124-
color $ui-dark-inactive-text-color
125-
126-
.navToggle
127-
&:hover
128-
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
129-
transition 0.15s
130-
color $ui-dark-text-color

0 commit comments

Comments
 (0)