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 { Container } from 'semantic-ui-react';
import { TopBar } from '../TopBar';
import { LogoBar } from './LogoBar';
import { TitleBar } from './TitleBar';
export class Header extends React.Component<any, any> {
@ -12,7 +14,11 @@ export class Header extends React.Component<any, any> {
render() {
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) {
super(props, context);
this.state = {
notification_visible:false,
notification_visible: false,
};
}
onSidebar = () => {
this.setState({notification_visible:!this.state.notification_visible})
this.setState({ notification_visible: !this.state.notification_visible });
}
render() {
@ -27,66 +27,73 @@ export class Layout extends React.Component<any, any> {
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column>
<Grid.Column width='2'>
Left menu
</Grid.Column>
<Grid.Column>
<Grid.Column width='14'>
<Grid.Row>
<Grid.Column>
Logo
<Header />
</Grid.Column>
<Grid.Column>
Page Content
<Router history={history} >
<Routes />
</Router>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Footer />
</Grid.Column>
</Grid.Row>
</Grid.Column>
</Grid.Row>
</Grid>
<Header onSidebar={this.onSidebar.bind(this)}/>
<Sidebar.Pushable as={Segment} vertical >
<Sidebar
as={Menu}
animation='overlay'
width='thin'
direction='right'
visible={this.state.notification_visible}
icon='labeled'
vertical
inverted
>
<Menu.Item name='home'>
Notification 1
{/* <Header onSidebar={this.onSidebar.bind(this)} />
<Sidebar.Pushable as={Segment} vertical >
<Sidebar
as={Menu}
animation='overlay'
width='thin'
direction='right'
visible={this.state.notification_visible}
icon='labeled'
vertical
inverted
>
<Menu.Item name='home'>
Notification 1
</Menu.Item>
<Menu.Item name='gamepad'>
Notification 2
<Menu.Item name='gamepad'>
Notification 2
</Menu.Item>
</Sidebar>
</Sidebar>
<Sidebar.Pusher >
<Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
<Breadcrumb size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb>
</Container>
<Segment vertical>
<Container>
<Router history={history} >
<Routes />
</Router>
<Sidebar.Pusher >
<Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
<Breadcrumb size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb>
</Container>
<Footer />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
<Segment vertical>
<Container>
<Router history={history} >
<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,
contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
publicPath: '/' ,// match the output `publicPath`
host: '192.168.1.230',
host: '192.168.1.105',
port: 9091,
stats: {
colors: true