acouzens
/
open5gs
1
0
Fork 1
Code Issues Pull Requests 1 Projects Releases Wiki Activity

update it

This commit is contained in:
Sukchan Lee 2017-05-31 23:33:27 +09:00
parent a5b4ee79d1
commit 269c20c8c6
4 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webui/components/App.js
View File

@ -13,10 +13,20 @@ import Session from '../lib/session';
const BodyContainer = styled.div`
display: flex;
${media.mobile`
display: block;
`}
height: calc(100vh - 4rem);
`
const ContentContainer = styled.div`
flex: 1;
${media.mobile`
position: absolute;
top: 4rem;
left: 0;
width: 100%;
z-index: -1;
`}
padding: 1rem;
`;
@ -37,7 +47,9 @@ const HelloWorld = styled.div`
class App extends Component {
state = {
sidebar: true,
sidebar: {
toggled: false
},
error: {
status: false,
message: ''
@ -46,7 +58,10 @@ class App extends Component {
onToogleSidebar = (e) => {
this.setState({
sidebar: !this.state.sidebar
sidebar: {
...this.state.sidebar,
toggled: !this.state.sidebar.toggled
}
})
}
@ -54,19 +69,15 @@ class App extends Component {
const title = 'Next, EPC ' + Package.version;
const session = this.props.session;
const {
onToogleSidebar,
} = this;
return (
<div>
<Head>
<title>{title}</title>
</Head>
<Header onToggleMenuIcon={onToogleSidebar}/>
<Header onMenuClick={this.onToogleSidebar}/>
<BodyContainer>
<Sidebar visible={this.state.sidebar}/>
<Sidebar toggled={this.state.sidebar.toggled}/>
<ContentContainer>
<HelloWorld>
Hello, World

8
webui/components/Header.js
View File

@ -36,7 +36,7 @@ const Title = styled.div`
`;
const Thumbnail = styled.div`
display: flext;
display: flex;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
@ -55,13 +55,9 @@ async function logout (e) {
class Header extends Component {
render() {
const {
handleTest
} = this;
return (
<Wrapper>
<Menu onClick={this.props.onToggleMenuIcon}>
<Menu onClick={this.props.onMenuClick}>
<MenuIcon/>
</Menu>
<Title>

2
webui/components/Login.js
View File

@ -73,7 +73,7 @@ const ErrorBar = ({ visible, message, onClick }) => visible ? (
) : null;
ErrorBar.propTypes = {
visible: PropTypes.boolean,
visible: PropTypes.bool,
message: PropTypes.string,
onClick: PropTypes.func
};

20
webui/components/Sidebar.js
View File

@ -6,25 +6,33 @@ import oc from 'open-color';
const Wrapper = styled.div`
z-index: 1;
width: ${p => p.visible ? p.width : '0'};
width: ${p => p.toggled ? '0' : p.width };
transition: width .2s ease-in-out;
${media.mobile`
width: 100%;
height: ${p => p.toggled ? '100%' : '0'};
transition: height .2s ease-in-out;
`}
background-color: ${oc.indigo[3]};
border-right: 1px solid ${oc.indigo[4]};
box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
`;
const Sidebar = ({ visible, width }) =>
(<Wrapper visible={visible} width={width}> </Wrapper>)
const Sidebar = ({ toggled, width }) => (
<Wrapper toggled={toggled} width={width}>
</Wrapper>
)
Sidebar.propTypes = {
visible: PropTypes.bool,
toggled: PropTypes.bool,
width: PropTypes.string
};
Sidebar.defaultProps = {
visible: true,
width: '16rem'
toggled: false,
width: '16rem'
};
export default Sidebar;