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 17:20:17 +09:00
parent a08b221743
commit c9464b262d
4 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from 'semantic-ui-react'; import { Container, Divider } from 'semantic-ui-react';
import { TopBar } from '../TopBar'; import { TopBar } from '../TopBar';
import { LogoBar } from './LogoBar'; import { LogoBar } from './LogoBar';
import { TitleBar } from './TitleBar'; import { TitleBar } from './TitleBar';
@ -16,7 +16,9 @@ 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}/>
); );

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

@ -28,7 +28,7 @@ export class Layout extends React.Component<any, any> {
<Container fluid> <Container fluid>
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column width='2'> <Grid.Column width='2' style={{margin:'0px'}}>
<LeftMenu /> <LeftMenu />
</Grid.Column> </Grid.Column>
<Grid.Column width='14'> <Grid.Column width='14'>

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

@ -24,15 +24,17 @@ export class LeftMenu extends React.Component<any, any> {
<Segment inverted className='fullHeight'> <Segment inverted className='fullHeight'>
<Menu inverted secondary vertical fluid icon='labeled' > <Menu inverted secondary vertical fluid icon='labeled' >
<Menu.Item name='User' > <Menu.Item name='User' href='/' >
<Icon name='user' /> <Icon name='user' />
</Menu.Item> </Menu.Item>
<Menu.Item name='Home' > <Menu.Item name='Home' href='/' >
<Icon name='home' /> <Icon name='home' />
Home Home
</Menu.Item> </Menu.Item>
<Menu.Item name='Monitoring' > <Menu.Item name='Monitoring' href='/' >
<Icon name='bar graph' /> <Icon name='bar graph' />
Monitoring
{/*
<Dropdown text='Monitoring' pointing> <Dropdown text='Monitoring' pointing>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Header>Monitoring</Dropdown.Header> <Dropdown.Header>Monitoring</Dropdown.Header>
@ -40,42 +42,45 @@ export class LeftMenu extends React.Component<any, any> {
<Dropdown.Item>Sensors</Dropdown.Item> <Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
*/}
</Menu.Item> </Menu.Item>
<Menu.Item name='Infrastructure' > <Menu.Item name='Infrastructure' href='/' >
<Icon name='sitemap' /> <Icon name='sitemap' />
Infrastructure
{/*
<Dropdown text='Infrastructure' > <Dropdown text='Infrastructure' >
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Header>Infrastructure</Dropdown.Header> <Dropdown.Header>Infrastructure</Dropdown.Header>
<Dropdown.Item>Maps</Dropdown.Item> <Dropdown.Item>Maps</Dropdown.Item>
<Dropdown.Item>Targets</Dropdown.Item> <Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
*/}
</Menu.Item> </Menu.Item>
<Menu.Item name='Dashboard' > <Menu.Item name='Dashboard' href='/' >
<Icon name='industry' /> <Icon name='industry' />
Dashboard Dashboard
</Menu.Item> </Menu.Item>
<Menu.Item name='Metrics' > <Menu.Item name='Metrics' href='/' >
<Icon name='tasks' /> <Icon name='tasks' />
Metrics Metrics
</Menu.Item> </Menu.Item>
<Menu.Item name='Alerts' > <Menu.Item name='Alerts' href='/' >
<Icon name='alarm' /> <Icon name='alarm' />
Alerts Alerts
</Menu.Item> </Menu.Item>
<Menu.Item name='History' > <Menu.Item name='History' href='/' >
<Icon name='book' /> <Icon name='book' />
History History
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item href='/'>
<Icon name='play circle' /> <Icon name='play circle' />
<Dropdown text='Custom'> <Dropdown text='Custom'>
<Dropdown.Menu> <Dropdown.Menu>
@ -91,7 +96,7 @@ export class LeftMenu extends React.Component<any, any> {
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Menu.Item> </Menu.Item>
<Menu.Item name='Settings' > <Menu.Item name='Settings' href='/' >
<Icon name='setting' /> <Icon name='setting' />
Settings Settings
</Menu.Item> </Menu.Item>

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

@ -28,15 +28,16 @@ export class TitleBar extends React.Component<any, any> {
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column width='3'> <Grid.Column width='3'>
<Header as='h3'>Page Title<Header.Subheader> <Header as='h3'>Page Title
<Breadcrumb> <Header.Subheader>
<Breadcrumb.Section link>Home</Breadcrumb.Section> <Breadcrumb size='tiny'>
<Breadcrumb.Divider /> <Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section> <Breadcrumb.Divider />
<Breadcrumb.Divider /> <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Section active>Probes</Breadcrumb.Section> <Breadcrumb.Divider />
</Breadcrumb> <Breadcrumb.Section active>Probes</Breadcrumb.Section>
</Header.Subheader> </Breadcrumb>
</Header.Subheader>
</Header> </Header>
</Grid.Column> </Grid.Column>
<Grid.Column width='13'> <Grid.Column width='13'>