Skip to content

Commit f36f202

Browse files
Rokt33rRokt33r
committed
change layout
1 parent af7476f commit f36f202

7 files changed

Lines changed: 82 additions & 136 deletions

File tree

‎browser/main/Main.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -94,18 +94,18 @@ class Main extends React.Component {
9494
'location'
9595
])}
9696
/>
97-
<TopBar
98-
{..._.pick(this.props, [
99-
'dispatch',
100-
'storages',
101-
'config',
102-
'params',
103-
'location'
104-
])}
105-
/>
10697
<div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
10798
ref='body'
10899
>
100+
<TopBar style={{width: this.state.listWidth}}
101+
{..._.pick(this.props, [
102+
'dispatch',
103+
'storages',
104+
'config',
105+
'params',
106+
'location'
107+
])}
108+
/>
109109
<NoteList style={{width: this.state.listWidth}}
110110
{..._.pick(this.props, [
111111
'dispatch',

‎browser/main/Main.styl‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
absolute top left bottom right
33

44
.body
5-
absolute right
5+
absolute right top
66
bottom $statusBar-height - 1
7-
top $topBar-height - 1
87
left $sideNav-width
98

109
.body--expanded

‎browser/main/NoteList/NoteList.styl‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.root
2-
absolute top left bottom
2+
absolute left bottom
33
border-top $ui-border
44
border-bottom $ui-border
55
overflow auto
6+
top $topBar-height - 1
67

78
.item
89
position relative

‎browser/main/SideNav/SideNav.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
color $ui-text-color
1010

1111
.top
12-
height 60px
12+
height $topBar-height
1313
border-bottom $ui-border
1414

1515
.top-menu
1616
navButtonColor()
17-
height 59px
17+
height $topBar-height - 1
1818
padding 0 10px
1919
font-size 14px
2020
width 100%

‎browser/main/TopBar/TopBar.styl‎

Lines changed: 35 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,58 @@
11
.root
2-
absolute top right
2+
position relative
3+
width 100%
34
background-color $ui-backgroundColor
4-
left $sideNav-width
5-
height $topBar-height -1
6-
clearfix()
7-
8-
.left
9-
float left
105
height $topBar-height - 1
11-
line-height $topBar-height
126

13-
.left-search
14-
margin-top 12px
15-
margin-left 25px
16-
height 34px
17-
width 200px
18-
float left
19-
border-radius 22px
20-
position relative
21-
background-color white
7+
$control-height = 34px
8+
9+
.control
10+
position absolute
11+
top 8px
12+
left 8px
13+
right 8px
14+
height $control-height
2215
border $ui-border
16+
border-radius 20px
17+
overflow hidden
18+
.control-search
19+
absolute top left bottom
20+
right 40px
21+
background-color white
2322

24-
.left-search-icon
25-
absolute left
26-
width 36px
27-
height 32px
28-
padding 0
23+
.control-search-icon
24+
absolute top bottom left
2925
line-height 32px
26+
width 35px
3027
color $ui-inactive-text-color
3128

32-
.left-search-input
29+
.control-search-input
30+
display block
3331
absolute top bottom right
34-
height 32px
35-
left 34px
36-
border none
37-
outline none
38-
font-size 14px
39-
40-
.left-control
41-
float left
42-
margin-left 15px
32+
left 30px
33+
input
34+
width 100%
35+
height 100%
36+
outline none
37+
border none
4338

44-
.left-control-newPostButton
45-
width 34px
46-
height 34px
47-
margin-top 12px
48-
border-radius 17px
39+
.control-newPostButton
40+
display block
41+
absolute top right bottom
42+
width 40px
43+
height $control-height - 2
4944
navButtonColor()
50-
border $ui-border
45+
border-left $ui-border
5146
font-size 14px
52-
line-height 32px
47+
line-height 28px
5348
padding 0
5449
&:active
5550
border-color $ui-button--active-backgroundColor
5651
&:hover .left-control-newPostButton-tooltip
5752
display block
5853

5954

60-
.left-control-newPostButton-tooltip
55+
.control-newPostButton-tooltip
6156
position fixed
6257
line-height 1.4
6358
background-color $ui-tooltip-backgroundColor
@@ -70,39 +65,3 @@
7065
border-radius 5px
7166
display none
7267
pointer-events none
73-
74-
.right
75-
float right
76-
height $topBar-height -1
77-
clearfix()
78-
79-
.right-helpButton
80-
width 24px
81-
height 24px
82-
border-radius 12px
83-
navButtonColor()
84-
border $ui-border
85-
line-height 22px
86-
font-size 12px
87-
padding 0
88-
float left
89-
margin-top 17px
90-
91-
.right-linksButton
92-
float left
93-
height 44px
94-
width 44px
95-
border-radius 17px
96-
background-color transparent
97-
border none
98-
margin-top 7px
99-
margin-left 5px
100-
margin-right 15px
101-
opacity 0.8
102-
&:hover, &:active
103-
opacity 1
104-
105-
.root--expanded
106-
@extend .root
107-
absolute top right
108-
left $sideNav--folded-width

‎browser/main/TopBar/index.js‎

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import activityRecord from 'browser/lib/activityRecord'
55
import _ from 'lodash'
66
import Commander from 'browser/main/lib/Commander'
77
import dataApi from 'browser/main/lib/dataApi'
8+
import modal from 'browser/main/lib/modal'
9+
import NewNoteModal from 'browser/main/modals/NewNoteModal'
810

911
const OSX = window.process.platform === 'darwin'
1012

@@ -33,77 +35,62 @@ class TopBar extends React.Component {
3335
}
3436

3537
handleNewPostButtonClick (e) {
36-
let { storages, params, dispatch } = this.props
38+
let { storages, params, dispatch, location } = this.props
3739
let storage = _.find(storages, {key: params.storageKey})
3840
if (storage == null) storage = storages[0]
3941
if (storage == null) throw new Error('No storage to create a note')
4042
let folder = _.find(storage.folders, {key: params.folderKey})
4143
if (folder == null) folder = storage.folders[0]
4244
if (folder == null) throw new Error('No folder to craete a note')
43-
// activityRecord.emit('ARTICLE_CREATE')
44-
console.log(storage, folder)
45-
dataApi
46-
.createNote(storage.key, folder.key, {
47-
title: '',
48-
content: ''
49-
})
50-
.then((note) => {
51-
dispatch({
52-
type: 'CREATE_NOTE',
53-
note: note
54-
})
55-
})
45+
46+
modal.open(NewNoteModal, {
47+
storage: storage.key,
48+
folder: folder.key,
49+
dispatch,
50+
location
51+
})
5652
}
5753

5854
handleTutorialButtonClick (e) {
5955
}
6056

6157
render () {
62-
let { config } = this.props
58+
let { config, style } = this.props
6359
return (
6460
<div className='TopBar'
6561
styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
62+
style={style}
6663
>
67-
<div styleName='left'>
68-
<div styleName='left-search'>
69-
<i styleName='left-search-icon' className='fa fa-search fa-fw'/>
70-
<input styleName='left-search-input'
71-
ref='searchInput'
72-
onFocus={(e) => this.handleSearchChange(e)}
73-
onBlur={(e) => this.handleSearchChange(e)}
74-
value={this.state.search}
75-
onChange={(e) => this.handleSearchChange(e)}
76-
placeholder='Search'
77-
type='text'
78-
/>
64+
<div styleName='control'>
65+
<div styleName='control-search'>
66+
<i styleName='control-search-icon' className='fa fa-search fa-fw'/>
67+
<div styleName='control-search-input'>
68+
<input
69+
ref='searchInput'
70+
onFocus={(e) => this.handleSearchChange(e)}
71+
onBlur={(e) => this.handleSearchChange(e)}
72+
value={this.state.search}
73+
onChange={(e) => this.handleSearchChange(e)}
74+
placeholder='Search'
75+
type='text'
76+
/>
77+
</div>
7978
{this.state.search > 0 &&
8079
<button styleName='left-search-clearButton'
8180
onClick={(e) => this.handleSearchClearButton(e)}
8281
>
8382
<i className='fa fa-times'/>
8483
</button>
8584
}
86-
</div>
8785

88-
<div styleName='left-control'>
89-
<button styleName='left-control-newPostButton'
90-
onClick={(e) => this.handleNewPostButtonClick(e)}>
91-
<i className='fa fa-plus'/>
92-
<span styleName='left-control-newPostButton-tooltip'>
93-
New Note {OSX ? '⌘' : '^'} + n
94-
</span>
95-
</button>
9686
</div>
97-
</div>
98-
99-
<div styleName='right'>
100-
<button styleName='right-helpButton'
101-
onClick={(e) => this.handleTutorialButtonClick(e)}
102-
disabled
103-
>
104-
?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
87+
<button styleName='control-newPostButton'
88+
onClick={(e) => this.handleNewPostButtonClick(e)}>
89+
<i className='fa fa-plus'/>
90+
<span styleName='control-newPostButton-tooltip'>
91+
New Note {OSX ? '⌘' : '^'} + n
92+
</span>
10593
</button>
106-
10794
</div>
10895
</div>
10996
)

‎browser/styles/index.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $danger-lighten-color = lighten(#c9302c, 5%)
77
$statusBar-height = 24px
88
$sideNav-width = 200px
99
$sideNav--folded-width = 44px
10-
$topBar-height = 60px
10+
$topBar-height = 50px
1111

1212
// UI default
1313
$ui-text-color = #515151

0 commit comments

Comments
 (0)