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:
insanity 2017-07-17 11:30:47 +09:00
parent c1a81789b2
commit bcd1fb8921
5 changed files with 135 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from 'semantic-ui-react'; import { Container } from 'semantic-ui-react';
import { TopBar } from '../TopBar'; import { TopBar } from '../TopBar';
import { LogoBar } from './LogoBar';
import { TitleBar } from './TitleBar';
export class Header extends React.Component<any, any> { export class Header extends React.Component<any, any> {
@ -12,7 +14,11 @@ export class Header extends React.Component<any, any> {
render() { render() {
return ( return (
<TopBar onSidebar={this.props.onSidebar}/> <Container fluid>
<LogoBar />
<TitleBar />
</Container>
// <TopBar onSidebar={this.props.onSidebar}/>
); );
} }
} }

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

@ -14,12 +14,12 @@ 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 = {
notification_visible:false, notification_visible: false,
}; };
} }
onSidebar = () => { onSidebar = () => {
this.setState({notification_visible:!this.state.notification_visible}) this.setState({ notification_visible: !this.state.notification_visible });
} }
render() { render() {
@ -27,66 +27,73 @@ export class Layout extends React.Component<any, any> {
<Container fluid> <Container fluid>
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column width='2'>
Left menu Left menu
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column width='14'>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column>
Logo <Header />
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
Page Content <Router history={history} >
<Routes />
</Router>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Footer />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </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
as={Menu} as={Menu}
animation='overlay' animation='overlay'
width='thin' width='thin'
direction='right' direction='right'
visible={this.state.notification_visible} visible={this.state.notification_visible}
icon='labeled' icon='labeled'
vertical vertical
inverted inverted
> >
<Menu.Item name='home'> <Menu.Item name='home'>
Notification 1 Notification 1
</Menu.Item> </Menu.Item>
<Menu.Item name='gamepad'> <Menu.Item name='gamepad'>
Notification 2 Notification 2
</Menu.Item> </Menu.Item>
</Sidebar> </Sidebar>
<Sidebar.Pusher > <Sidebar.Pusher >
<Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}> <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
<Breadcrumb size='mini'> <Breadcrumb size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section> <Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' /> <Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section> <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' /> <Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section> <Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb> </Breadcrumb>
</Container>
<Segment vertical>
<Container>
<Router history={history} >
<Routes />
</Router>
</Container> </Container>
<Footer /> <Segment vertical>
</Segment> <Container>
</Sidebar.Pusher> <Router history={history} >
</Sidebar.Pushable> <Routes />
</Router>
</Container>
<Footer />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable> */}
</Container> </Container >
); );
} }
} }

42
src/ts/containers/test/layout/LogoBar.tsx Normal file
View File

@ -0,0 +1,42 @@
import * as React from 'react';
import { Menu, Header } from 'semantic-ui-react';
export class LogoBar extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
handleLogoClick = () => {
alert('handleLogoClick');
}
handleNotiClick = () => {
alert('handleNotiClick');
}
render() {
return (
<div>
<Menu borderless secondary >
<Menu.Item
name='logo'
onClick={this.handleLogoClick}
>
<Header as='h3' icon='stack overflow' content='overFlow' />
</Menu.Item>
<Menu.Item
position='right'
icon='bell outline'
onClick={this.handleNotiClick}
/>
</Menu>
</div>
);
}
}

34
src/ts/containers/test/layout/TitleBar.tsx Normal file
View File

@ -0,0 +1,34 @@
import * as React from 'react';
import { Breadcrumb, Header } from 'semantic-ui-react';
export class TitleBar extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
render() {
return (
<div>
<Header as='h3'>Page Title<Header.Subheader>
<Breadcrumb>
<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>
</div>
);
}
}

2
webpack.config.js
View File

@ -25,7 +25,7 @@ module.exports = {
historyApiFallback: true, historyApiFallback: true,
contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
publicPath: '/' ,// match the output `publicPath` publicPath: '/' ,// match the output `publicPath`
host: '192.168.1.230', host: '192.168.1.105',
port: 9091, port: 9091,
stats: { stats: {
colors: true colors: true