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 (
<Container fluid>
<LogoBar />
<Divider />
<TitleBar />
<Divider />
</Container>
// <TopBar onSidebar={this.props.onSidebar}/>
);

44
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) {
super(props, context);
this.state = {
sidebar_visible: true,
notification_visible: false,
};
}
onSidebar = () => {
this.setState({ notification_visible: !this.state.notification_visible });
this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
}
render() {
return (
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column width='2' style={{margin:'0px'}}>
<LeftMenu />
</Grid.Column>
<Grid.Column width='14'>
<Grid.Row>
<Grid.Column>
<Header />
</Grid.Column>
<Grid.Column>
<Router history={history} >
<Routes />
</Router>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Footer />
</Grid.Column>
</Grid.Row>
</Grid.Column>
</Grid.Row>
</Grid>
<Sidebar.Pushable as={Segment} vertical>
<Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
<LeftMenu />
</Sidebar>
<Sidebar.Pusher>
<Segment vertical style={{margin:'0 0 0 150px', padding:'0'}}>
<Header />
<Router history={history} >
<Routes />
</Router>
<Footer />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
{/* <Header onSidebar={this.onSidebar.bind(this)} />
<Sidebar.Pushable as={Segment} vertical >
<Sidebar

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

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

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

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