Skip to content

Commit 6e0def3

Browse files
Rokt33rRokt33r
committed
update design of Note List
add list style remove folder info enhance design
1 parent 823da07 commit 6e0def3

7 files changed

Lines changed: 343 additions & 167 deletions

File tree

‎browser/finder/NoteDetail.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,24 @@
2727
border-bottom $ui-border
2828
display flex
2929
background-color $ui-backgroundColor
30+
3031
.tabList-item
3132
position relative
3233
flex 1
3334
border-right $ui-border
35+
3436
.tabList-item--active
3537
@extend .tabList-item
3638
.tabList-item-button
3739
border-color $brand-color
40+
3841
.tabList-item-button
3942
width 100%
4043
height 29px
4144
navButtonColor()
4245
outline none
4346
border-left 4px solid transparent
47+
4448
.tabList-item-deleteButton
4549
position absolute
4650
top 5px

‎browser/finder/NoteItem.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class NoteItem extends React.Component {
2222
let tagList = _.isArray(note.tags)
2323
? note.tags.map((tag) => {
2424
return (
25-
<span styleName='item-tagList-item'
25+
<span styleName='bottom-tagList-item'
2626
key={tag}>
2727
{tag}
2828
</span>
@@ -37,9 +37,7 @@ class NoteItem extends React.Component {
3737
key={note.storage + '-' + note.key}
3838
onClick={(e) => this.handleClick(e)}
3939
>
40-
<div styleName='border'/>
4140
<div styleName='info'>
42-
4341
<div styleName='info-left'>
4442
<span styleName='info-left-folder'
4543
style={{borderColor: folder.color}}
@@ -48,11 +46,6 @@ class NoteItem extends React.Component {
4846
<span styleName='info-left-folder-surfix'>in {storage.name}</span>
4947
</span>
5048
</div>
51-
52-
<div styleName='info-right'>
53-
{moment(note.updatedAt).fromNow()}
54-
</div>
55-
5649
</div>
5750

5851
<div styleName='title'>
@@ -66,14 +59,20 @@ class NoteItem extends React.Component {
6659
}
6760
</div>
6861

69-
<div styleName='tagList'>
70-
<i styleName='tagList-icon'
62+
<div styleName='bottom'>
63+
<i styleName='bottom-tagIcon'
7164
className='fa fa-tags fa-fw'
7265
/>
73-
{tagList.length > 0
74-
? tagList
75-
: <span styleName='tagList-empty'>Not tagged yet</span>
76-
}
66+
<div styleName='bottom-tagList'>
67+
{tagList.length > 0
68+
? tagList
69+
: <span styleName='bottom-tagList-empty'>Not tagged yet</span>
70+
}
71+
</div>
72+
73+
<div styleName='bottom-time'>
74+
{moment(note.updatedAt).fromNow()}
75+
</div>
7776
</div>
7877
</div>
7978
)

‎browser/finder/NoteItem.styl‎

Lines changed: 80 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
.root
22
position relative
3-
height 80px
43
border-bottom $ui-border
5-
padding 0 5px
4+
padding 2px 5px
65
user-select none
76
cursor pointer
87
transition background-color 0.15s
98
&:hover
10-
background-color alpha($ui-active-color, 10%)
9+
background-color alpha($ui-active-color, 20%)
1110

1211
.root--active
1312
@extend .root
14-
.border
15-
border-color $ui-active-color
13+
background-color $ui-active-color
14+
&:hover
15+
background-color $ui-active-color
16+
color white
17+
.info-left-folder
18+
.info-left-folder-surfix
19+
.title
20+
.title-icon
21+
.title-empty
22+
.bottom-tagIcon
23+
.bottom-tagList-item
24+
.bottom-tagList-empty
25+
.bottom-time
26+
color white
27+
.bottom-tagList-item
28+
color white
29+
background-color transparent
30+
1631

1732
.border
1833
absolute top bottom left right
@@ -22,11 +37,11 @@
2237
transition 0.15s
2338

2439
.info
25-
height 30px
40+
height 20px
2641
clearfix()
2742
font-size 12px
2843
color $ui-inactive-text-color
29-
line-height 30px
44+
line-height 20px
3045
overflow-y hidden
3146

3247
.info-left
@@ -45,77 +60,120 @@
4560
float right
4661

4762
.title
63+
height 24px
64+
box-sizing border-box
65+
line-height 24px
4866
height 20px
4967
line-height 20px
5068
padding 0 5px 0 0
51-
font-weight bold
5269
overflow ellipsis
5370
color $ui-text-color
71+
5472
.title-icon
5573
font-size 12px
5674
color $ui-inactive-text-color
5775
padding-right 3px
76+
5877
.title-empty
5978
font-weight normal
6079
color $ui-inactive-text-color
6180

62-
.tagList
63-
height 30px
81+
.bottom
82+
margin-top 2px
83+
height 20px
6484
font-size 12px
65-
line-height 30px
85+
line-height 20px
6686
overflow ellipsis
87+
display flex
6788

68-
.tagList-icon
89+
.bottom-tagIcon
6990
vertical-align middle
7091
color $ui-button-color
92+
height 20px
93+
line-height 20px
7194

72-
.tagList-item
95+
.bottom-tagList
96+
flex 1
97+
overflow ellipsis
98+
line-height 20px
99+
100+
.bottom-tagList-item
73101
margin 0 4px
74102
padding 0 4px
75103
height 20px
104+
box-sizing border-box
76105
border-radius 3px
77106
vertical-align middle
78107
border-style solid
79108
border-color $ui-button--focus-borderColor
80109
border-width 0 0 0 3px
81110
background-color $ui-backgroundColor
111+
color $ui-text-color
112+
transition 0.15s
82113

83-
.tagList-empty
114+
.bottom-tagList-empty
84115
color $ui-inactive-text-color
85116
vertical-align middle
117+
font-size 10px
118+
119+
.bottom-time
120+
color $ui-inactive-text-color
121+
margin-left 5px
122+
font-size 10px
86123

87124
body[data-theme="dark"]
88125
.root
89126
border-color $ui-dark-borderColor
90-
&:hover
91-
background-color alpha($ui-active-color, 20%)
92127

93128
.root--active
94129
@extend .root
95-
.border
96-
border-color $ui-active-color
130+
border-color $ui-dark-borderColor
131+
&:hover
132+
background-color $ui-active-color
133+
.info-left-folder
134+
.info-left-folder-surfix
135+
.title
136+
.title-icon
137+
.title-empty
138+
.bottom-tagIcon
139+
.bottom-tagList-item
140+
.bottom-tagList-empty
141+
.bottom-time
142+
color white
143+
.bottom-tagList-item
144+
color white
145+
background-color transparent
97146

98147
.info
99148
color $ui-dark-inactive-text-color
100149

101150
.info-left-folder
102151
color $ui-dark-text-color
152+
103153
.info-left-folder-surfix
104154
color $ui-dark-inactive-text-color
105155

106156
.title
107157
color $ui-dark-text-color
158+
108159
.title-icon
109160
color $ui-dark-inactive-text-color
161+
110162
.title-empty
111163
color $ui-dark-inactive-text-color
112164

113-
.tagList-icon
165+
.tagList-empty
166+
color $ui-dark-inactive-text-color
167+
168+
.bottom-tagIcon
114169
color $ui-dark-button-color
115170

116-
.tagList-item
117-
border-color $ui-dark-button--focus-borderColor
171+
.bottom-tagList-item
172+
color $ui-dark-text-color
118173
background-color $ui-dark-backgroundColor
119174

120-
.tagList-empty
175+
.bottom-tagList-empty
176+
color $ui-dark-inactive-text-color
177+
178+
.bottom-time
121179
color $ui-dark-inactive-text-color

‎browser/finder/store.js‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,6 @@
11
import { combineReducers, createStore } from 'redux'
22
import { routerReducer } from 'react-router-redux'
3-
4-
const OSX = global.process.platform === 'darwin'
5-
const defaultConfig = {
6-
zoom: 1,
7-
isSideNavFolded: false,
8-
listWidth: 250,
9-
hotkey: {
10-
toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
11-
toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
12-
},
13-
ui: {
14-
theme: 'default',
15-
disableDirectWrite: false
16-
},
17-
editor: {
18-
theme: 'xcode',
19-
fontSize: '14',
20-
fontFamily: 'Monaco, Consolas',
21-
indentType: 'space',
22-
indentSize: '4',
23-
switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
24-
},
25-
preview: {
26-
fontSize: '14',
27-
fontFamily: 'Lato',
28-
codeBlockTheme: 'xcode',
29-
lineNumber: true
30-
}
31-
}
3+
import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
324

335
let defaultData = {
346
storageMap: {},
@@ -48,7 +20,7 @@ function data (state = defaultData, action) {
4820
return state
4921
}
5022

51-
function config (state = defaultConfig, action) {
23+
function config (state = DEFAULT_CONFIG, action) {
5224
switch (action.type) {
5325
case 'INIT_CONFIG':
5426
case 'SET_CONFIG':

0 commit comments

Comments
 (0)