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.

Commite896276

Browse files
committed
add themeSelector to account preview
1 parent03a7810 commite896276

File tree

16 files changed

+138
-24
lines changed

16 files changed

+138
-24
lines changed

‎components/ThemeSelector/index.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
*
3+
* ThemeSelector
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
importPropTypesfrom'prop-types'
9+
10+
import{FlexWrapper,ThemeDot}from'./style'
11+
import{makeDebugger}from'../../utils/functions'
12+
/* eslint-disable no-unused-vars */
13+
constdebug=makeDebugger('c:ThemeSelector:index')
14+
/* eslint-enable no-unused-vars */
15+
16+
constThemeSelector=({ themeKeys, curTheme, changeTheme})=>{
17+
return(
18+
<FlexWrapper>
19+
{themeKeys.map(name=>(
20+
<ThemeDot
21+
key={name}
22+
active={curTheme===name}
23+
type={name}
24+
onClick={changeTheme.bind(this,name)}
25+
/>
26+
))}
27+
</FlexWrapper>
28+
)
29+
}
30+
31+
ThemeSelector.propTypes={
32+
themeKeys:PropTypes.array,
33+
curTheme:PropTypes.string,
34+
changeTheme:PropTypes.func.isRequired,
35+
// https://www.npmjs.com/package/prop-types
36+
}
37+
38+
ThemeSelector.defaultProps={
39+
themeKeys:[],
40+
curTheme:'',
41+
}
42+
43+
exportdefaultThemeSelector
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
importstyledfrom'styled-components'
2+
import{lighten,darken}from'polished'
3+
import{selectorColors}from'../../../utils/themes'
4+
5+
constgetBackground=props=>{
6+
constthemeName=props.type
7+
returnthemeName==='yellow'
8+
?darken(0.05,selectorColors[themeName])
9+
:lighten(0.05,selectorColors[themeName])
10+
}
11+
12+
exportconstThemeDot=styled.div`
13+
width: 30px;
14+
height: 30px;
15+
border-radius: 100%;
16+
margin-right: 10px;
17+
background:${props=>getBackground(props)};
18+
position: relative;
19+
cursor: pointer;
20+
color:${props=>
21+
props.active ?lighten(0.4,props.theme.body_bg) :getBackground(props)};
22+
23+
&:after {
24+
content: '✓';
25+
position: absolute;
26+
top: 15%;
27+
left: 35%;
28+
}
29+
`
30+
exportconstFlexWrapper=styled.div`
31+
display: flex;
32+
justify-content: center;
33+
`
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 ThemeSelector from '../index'
5+
6+
describe('<ThemeSelector />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(false)
9+
})
10+
})

‎containers/Header/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class HeaderContainer extends React.Component {
5858
<NotificationonClick={logic.openPreview}>
5959
<HeaderIconpath={getSVGIconPath('notification')}/>
6060
</Notification>
61-
<UseronClick={logic.openPreview.bind(this,'user')}>
61+
<UseronClick={logic.openPreview.bind(this,'account')}>
6262
<HeaderIconpath={getSVGIconPath('header_user')}/>
6363
</User>
6464
</Header>

‎containers/Preview/index.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { inject, observer } from 'mobx-react'
1111

1212
import{makeDebugger,storeSelector}from'../../utils/functions'
1313
import*aslogicfrom'./logic'
14+
15+
importThemeSelectorfrom'../../components/ThemeSelector'
16+
1417
import{
1518
PreviewOverlay,
1619
PreviewWrapper,
@@ -39,16 +42,27 @@ class PreviewContainer extends React.Component {
3942
}
4043

4144
render(){
42-
const{ visible, type}=this.props.preview
43-
// debug('visiblei: ', visible)
45+
const{ visible, type, themeKeys, curTheme}=this.props.preview
46+
4447
return(
4548
<div>
4649
<PreviewOverlayvisible={visible}onClick={logic.closePreview}/>
4750
<PreviewWrappervisible={visible}type={type}>
4851
<CloseBtntype={type}/>
4952
<PreviewContent>
5053
<PreviewHeader>Preview header</PreviewHeader>
51-
<PreviewBody>Preview body</PreviewBody>
54+
<PreviewBody>
55+
<h2>Preview body</h2>
56+
{type==='account' ?(
57+
<ThemeSelector
58+
themeKeys={themeKeys}
59+
curTheme={curTheme}
60+
changeTheme={logic.changeTheme}
61+
/>
62+
) :(
63+
<div>post previewer</div>
64+
)}
65+
</PreviewBody>
5266
</PreviewContent>
5367
</PreviewWrapper>
5468
</div>

‎containers/Preview/logic.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ const debug = makeDebugger('L:Preview')
44

55
letpreview=null
66

7-
exportfunctioninit(selectedStore){
8-
preview=selectedStore
7+
exportfunctionchangeTheme(name){
8+
preview.changeTheme(name)
99
}
1010

1111
exportfunctionclosePreview(){
1212
debug('closePreview')
1313
preview.close()
1414
}
15+
16+
exportfunctioninit(selectedStore){
17+
preview=selectedStore
18+
}

‎containers/Preview/styles/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ export const PreviewOverlay = styled.div`
2323
// visibility: ${props => (props.visible ? 'visible' : 'hidden')};
2424

2525
exportconstPreviewWrapper=styled.div`
26-
color:${theme('drawer.font')};
26+
color:${theme('preview.font')};
2727
box-sizing: border-box;
2828
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
2929
font-family: Roboto, sans-serif;
3030
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3131
border-radius: 0px;
3232
height: 100%;
33-
width:${props=>(props.type==='user' ?'40%' :'70%')};
33+
width:${props=>(props.type==='account' ?'40%' :'70%')};
3434
right: 0;
3535
position: fixed;
3636
transform:${props=>doTransform(props.visible)};
@@ -42,7 +42,7 @@ export const PreviewWrapper = styled.div`
4242
`
4343
exportconstPreviewContent=styled.div`
4444
width: 90%;
45-
background-color:${theme('drawer.bg')};
45+
background-color:${theme('preview.bg')};
4646
height: 100%;
4747
box-shadow: -5px 0px 14px 0px rgba(189, 189, 189, 0.37);
4848
padding: 20px;
@@ -64,7 +64,7 @@ const closeWith = '40px'
6464
exportconstCloserInner=styled.div`
6565
width:${closeWith};
6666
height: 45px;
67-
background-color:${theme('drawer.bg')};
67+
background-color:${theme('preview.bg')};
6868
transform-origin: right center 0;
6969
transform: rotate3d(0, 1, 0, -30deg);
7070
box-shadow: -7px 4px 19px 0px rgba(50, 50, 50, 0.2);
@@ -77,15 +77,15 @@ export const Closer = styled.div`
7777
height:${closeWith};
7878
perspective:${closeWith};
7979
cursor: pointer;
80-
display:${props=>(props.type==='user' ?'none' :'block')};
80+
display:${props=>(props.type==='account' ?'none' :'block')};
8181
8282
&:after {
8383
content: '✕';
8484
position: absolute;
8585
top: 9px;
8686
right: 6px;
8787
font-size: large;
88-
color:${theme('drawer.font')};
88+
color:${theme('preview.font')};
8989
font-weight: lighter;
9090
}
9191
`

‎stores/PreviewStore/index.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,35 @@ import { types as t, getParent } from 'mobx-state-tree'
1212
constPreviewStore=t
1313
.model('PreviewStore',{
1414
visible:t.optional(t.boolean,false),
15-
type:t.optional(t.enumeration('visibleType',['post','user']),'post'),
15+
type:t.optional(t.enumeration('visibleType',['post','account']),'post'),
1616
// header:
1717
// body:
1818
})
1919
.views(self=>({
2020
getroot(){
2121
returngetParent(self)
2222
},
23+
24+
getthemeKeys(){
25+
returnself.root.theme.themeKeys
26+
},
27+
getcurTheme(){
28+
returnself.root.theme.curTheme
29+
},
2330
}))
2431
.actions(self=>({
2532
open(type){
2633
self.visible=!self.visible
27-
self.type=type==='user' ?'user' :'post'
34+
self.type=type==='account' ?'account' :'post'
2835
},
2936

3037
close(){
3138
self.visible=false
3239
},
40+
41+
changeTheme(name){
42+
self.root.changeTheme(name)
43+
},
3344
}))
3445

3546
exportdefaultPreviewStore

‎utils/scripts/generators/component/stateless.js.hbs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import React from 'react'
88
import PropTypes from 'prop-types'
9-
// import styled from 'styled-components'
109

1110
{{#ifwantI18n}}
1211
import { FormattedMessage as I18n } from 'react-intl'
@@ -30,8 +29,8 @@ const {{ properCase name }} = (props) => {
3029

3130
{{properCasename}}.propTypes = {
3231
// https://www.npmjs.com/package/prop-types
33-
};
32+
}
3433

35-
{{properCasename}}.defaultProps = {};
34+
{{properCasename}}.defaultProps = {}
3635

3736
export default{{properCasename}}

‎utils/themes/Brown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Slack = {
2929
text:darken(0.1,fontColor),
3030
active_bg:darken(0.1,fontColor),
3131
},
32-
drawer:{
32+
preview:{
3333
font:fontColor,
3434
bg:mainBg,
3535
},

0 commit comments

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