Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commitd851c19

Browse files
committed
layout wip
1 parent01206f7 commitd851c19

File tree

12 files changed

+289
-6
lines changed

12 files changed

+289
-6
lines changed

‎components/BodyLayout/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
*
3+
* BodyLayout
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
importPropTypesfrom'prop-types'
9+
10+
importstyledfrom'styled-components'
11+
12+
import{makeDebugger}from'../../utils/functions'
13+
import{theme}from'../../utils/themes'
14+
15+
/* eslint-disable no-unused-vars */
16+
constdebug=makeDebugger('c:BodyLayout:index')
17+
/* eslint-enable no-unused-vars */
18+
19+
exportconstBody=styled.div`
20+
padding-left: 56px;
21+
position: relative;
22+
height: 100vh;
23+
background:${theme('body_bg')};
24+
transition: background-color 0.3s;
25+
display: flex;
26+
flex-direction: column;
27+
`
28+
29+
constBodyLayout=({ children})=>{
30+
return<Body>{children}</Body>
31+
}
32+
33+
BodyLayout.propTypes={
34+
children:PropTypes.arrayOf(PropTypes.element),
35+
}
36+
37+
BodyLayout.defaultProps={
38+
children:<div/>,
39+
}
40+
41+
exportdefaultBodyLayout
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import BodyLayout from '../index'
5+
6+
describe('<BodyLayout />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(false)
9+
})
10+
})

‎containers/Header/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
*
3+
* Header
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
import{inject,observer}from'mobx-react'
9+
importkeydownfrom'react-keydown'
10+
11+
// import Link from 'next/link'
12+
import{Button}from'../../components'
13+
14+
import{
15+
makeDebugger,
16+
storeSelector,
17+
getSVGIconPath,
18+
}from'../../utils/functions'
19+
20+
import{
21+
Header,
22+
Router,
23+
Admin,
24+
Search,
25+
Notification,
26+
HeaderIcon,
27+
User,
28+
}from'./styles'
29+
30+
import*aslogicfrom'./logic'
31+
32+
constdebug=makeDebugger('C:Header')
33+
34+
classHeaderContainerextendsReact.Component{
35+
componentWillMount(){
36+
debug('mount')
37+
logic.init(this.props.header)
38+
}
39+
40+
/* eslint-disable class-methods-use-this */
41+
@keydown(['ctrl+p'])
42+
openDoraemon(){
43+
// debug('openDoraemon')
44+
logic.openDoraemon()
45+
}
46+
/* eslint-enable class-methods-use-this */
47+
48+
render(){
49+
return(
50+
<Headerid="whereCallShowDoraemon">
51+
<Router>Javascript / Elixir / go</Router>
52+
<Admin>
53+
<Button>管理页</Button>
54+
</Admin>
55+
<SearchonClick={logic.openDoraemon}>
56+
<HeaderIconpath={getSVGIconPath('header_search')}/>
57+
</Search>
58+
<NotificationonClick={logic.openPreview}>
59+
<HeaderIconpath={getSVGIconPath('notification')}/>
60+
</Notification>
61+
<UseronClick={logic.openPreview.bind(this,'user')}>
62+
<HeaderIconpath={getSVGIconPath('header_user')}/>
63+
</User>
64+
</Header>
65+
)
66+
}
67+
}
68+
69+
exportdefaultinject(storeSelector('header'))(observer(HeaderContainer))

‎containers/Header/lang.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Header Langs
3+
*
4+
* This contains all the text for the Header component.
5+
*/
6+
import{defineMessages}from'react-intl'
7+
8+
exportdefaultdefineMessages({
9+
header:{
10+
id:'containers.Header.header',
11+
defaultMessage:'This is the Header component !',
12+
},
13+
})

‎containers/Header/logic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// import R from 'ramda'
2+
3+
import{makeDebugger}from'../../utils/functions'
4+
5+
/* eslint-disable no-unused-vars */
6+
constdebug=makeDebugger('L:Header')
7+
/* eslint-enable no-unused-vars */
8+
9+
letheader=null
10+
11+
exportfunctionopenPreview(type){
12+
header.openPreview(type)
13+
}
14+
15+
exportfunctionopenDoraemon(){
16+
header.openDoraemon()
17+
}
18+
19+
exportfunctioninit(selectedStore){
20+
header=selectedStore
21+
}

‎containers/Header/styles/index.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
importstyledfrom'styled-components'
2+
3+
importReactSVGfrom'react-svg'
4+
5+
// import { theme } from '../../../utils/themes'
6+
exportconstHeader=styled.div`
7+
padding: 5px;
8+
padding-top: 8px;
9+
line-height: 2vh;
10+
border-bottom: 1px solid tomato;
11+
display: flex;
12+
flex-direction: row;
13+
`
14+
15+
exportconstRouter=styled.div`flex-grow: 1;`
16+
17+
exportconstAdmin=styled.div`
18+
margin-right: 10px;
19+
font-size: xx-small;
20+
`
21+
22+
exportconstSearch=styled.div`
23+
color: grey;
24+
margin-right: 10px;
25+
`
26+
27+
exportconstNotification=styled.div`
28+
color: grey;
29+
margin-right: 10px;
30+
`
31+
exportconstHeaderIcon=styled(ReactSVG)`
32+
fill: grey;
33+
width: 22px;
34+
height: 22px;
35+
cursor: pointer;
36+
`
37+
exportconstUser=styled.div`
38+
color: grey;
39+
margin-right: 20px;
40+
`
41+
42+
exportconstButton=styled.button`
43+
font-size: 1em;
44+
margin: 1em;
45+
padding: 0.25em 1em;
46+
border-radius: 3px;
47+
background: transparent;
48+
cursor: pointer;
49+
50+
/* Color the border and text with theme.main */
51+
color:${props=>props.theme.main};
52+
border: 2px solid${props=>props.theme.main};
53+
&:focus {
54+
outline: 0;
55+
}
56+
`
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import Header from '../index'
5+
6+
describe('<Header />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(false)
9+
})
10+
})

‎pages/index.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import initRootStore from '../stores'
55
importThemeWrapperfrom'../containers/ThemeWrapper'
66
importMultiLanguagefrom'../containers/MultiLanguage'
77
importSidebarfrom'../containers/Sidebar'
8-
importBodyfrom'../containers/Body'
8+
//import Body from '../containers/Body'
99
importPreviewfrom'../containers/Preview'
1010
importDoraemonfrom'../containers/Doraemon'
11+
importHeaderfrom'../containers/Header'
1112
importRoutefrom'../containers/Route'
13+
importBodyLayoutfrom'../components/BodyLayout'
1214

1315
// try to fix safari bug
1416
// see https://github.com/yahoo/react-intl/issues/422
@@ -39,13 +41,25 @@ export default class Index extends React.Component {
3941
<ThemeWrapper>
4042
<Route/>
4143
<MultiLanguage>
42-
<Preview/>
43-
<Body/>
4444
<Sidebar/>
45+
<Preview/>
4546
<Doraemon/>
47+
<BodyLayout>
48+
<Header/>
49+
<h2>hehe</h2>
50+
<h2>hehe</h2>
51+
</BodyLayout>
4652
</MultiLanguage>
4753
</ThemeWrapper>
4854
</Provider>
4955
)
5056
}
5157
}
58+
59+
/*
60+
<Preview />
61+
<Doraemon />
62+
63+
<Body />
64+
<Sidebar />
65+
*/

‎stores/HeaderStore/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* HeaderStore store
3+
*
4+
*/
5+
6+
import{typesast,getParent}from'mobx-state-tree'
7+
// import R from 'ramda'
8+
9+
import{markStates,makeDebugger}from'../../utils/functions'
10+
/* eslint-disable no-unused-vars */
11+
constdebug=makeDebugger('S:HeaderStore')
12+
/* eslint-enable no-unused-vars */
13+
14+
constHeaderStore=t
15+
.model('HeaderStore',{
16+
hehe:t.optional(t.string,''),
17+
})
18+
.views(self=>({
19+
getroot(){
20+
returngetParent(self)
21+
},
22+
}))
23+
.actions(self=>({
24+
openDoraemon(){
25+
self.root.openDoraemon()
26+
},
27+
openPreview(type){
28+
self.root.openPreview(type)
29+
},
30+
31+
markState(sobj){
32+
markStates(sobj,self)
33+
},
34+
}))
35+
36+
exportdefaultHeaderStore
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
* HeaderStore store test
3+
*
4+
*/
5+
6+
// import R from 'ramda'
7+
// import HeaderStore from '../index'
8+
9+
it('HeaderStore todo: 1 + 1 = 2',()=>{
10+
expect(1+1).toBe(2)
11+
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp