overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
sunny 2017-07-19 19:09:29 +09:00
parent 3cb739c197
commit 73510d9920
4 changed files with 38 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ts/containers/test/layout/Header.tsx
View File

@ -16,9 +16,7 @@ export class Header extends React.Component<any, any> {
return ( return (
<Container fluid> <Container fluid>
<LogoBar /> <LogoBar />
<Divider />
<TitleBar /> <TitleBar />
<Divider />
</Container> </Container>
// <TopBar onSidebar={this.props.onSidebar}/> // <TopBar onSidebar={this.props.onSidebar}/>
); );

32
src/ts/containers/test/layout/Layout.tsx
View File

@ -15,41 +15,35 @@ export class Layout extends React.Component<any, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = { this.state = {
sidebar_visible: true,
notification_visible: false, notification_visible: false,
}; };
} }
onSidebar = () => { onSidebar = () => {
this.setState({ notification_visible: !this.state.notification_visible }); this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
} }
render() { render() {
return ( return (
<Container fluid> <Container fluid>
<Grid> <Sidebar.Pushable as={Segment} vertical>
<Grid.Row> <Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
<Grid.Column width='2' style={{margin:'0px'}}>
<LeftMenu /> <LeftMenu />
</Grid.Column> </Sidebar>
<Grid.Column width='14'> <Sidebar.Pusher>
<Grid.Row> <Segment vertical style={{margin:'0 0 0 150px', padding:'0'}}>
<Grid.Column>
<Header /> <Header />
</Grid.Column>
<Grid.Column>
<Router history={history} > <Router history={history} >
<Routes /> <Routes />
</Router> </Router>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Footer /> <Footer />
</Grid.Column>
</Grid.Row> </Segment>
</Grid.Column> </Sidebar.Pusher>
</Grid.Row> </Sidebar.Pushable>
</Grid>
{/* <Header onSidebar={this.onSidebar.bind(this)} /> {/* <Header onSidebar={this.onSidebar.bind(this)} />
<Sidebar.Pushable as={Segment} vertical > <Sidebar.Pushable as={Segment} vertical >
<Sidebar <Sidebar

2
src/ts/containers/test/layout/LeftMenu.tsx
View File

@ -21,7 +21,7 @@ export class LeftMenu extends React.Component<any, any> {
render() { render() {
return ( return (
<Container fluid className='fullHeight'> <Container fluid className='fullHeight'>
<Segment inverted className='fullHeight'> <Segment inverted vertical className='fullHeight'>
<Menu inverted secondary vertical fluid icon='labeled' > <Menu inverted secondary vertical fluid icon='labeled' >
<Menu.Item name='User' href='/' > <Menu.Item name='User' href='/' >

14
src/ts/containers/test/layout/TitleBar.tsx
View File

@ -25,12 +25,11 @@ export class TitleBar extends React.Component<any, any> {
}, },
]; ];
return ( return (
<Grid> <Menu basic fluid style={{'border-left':'0px', 'border-right':'0px', 'box-shadow':'none', 'border-radius':'0'}}>
<Grid.Row> <Menu.Item name='Page Title' style={{width:'250px'}}>
<Grid.Column width='3'>
<Header as='h3'>Page Title <Header as='h3'>Page Title
<Header.Subheader> <Header.Subheader>
<Breadcrumb size='tiny'> <Breadcrumb size='mini' left bottom>
<Breadcrumb.Section link>Home</Breadcrumb.Section> <Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider /> <Breadcrumb.Divider />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section> <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
@ -39,16 +38,11 @@ export class TitleBar extends React.Component<any, any> {
</Breadcrumb> </Breadcrumb>
</Header.Subheader> </Header.Subheader>
</Header> </Header>
</Grid.Column> </Menu.Item>
<Grid.Column width='13'>
<Menu secondary borderless>
{subMenus.map((menu: any, index: number) => ( {subMenus.map((menu: any, index: number) => (
<Menu.Item key={index} name={menu.name} href={menu.href} /> <Menu.Item key={index} name={menu.name} href={menu.href} />
))} ))}
</Menu> </Menu>
</Grid.Column>
</Grid.Row>
</Grid>
); );
} }
} }