From bcd1fb89218e14ca93a3eb38dd4415653f89132f Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 17 Jul 2017 11:30:47 +0900
Subject: [PATCH] layout
---
src/ts/containers/test/layout/Header.tsx | 8 +-
src/ts/containers/test/layout/Layout.tsx | 95 ++++++++++++----------
src/ts/containers/test/layout/LogoBar.tsx | 42 ++++++++++
src/ts/containers/test/layout/TitleBar.tsx | 34 ++++++++
webpack.config.js | 2 +-
5 files changed, 135 insertions(+), 46 deletions(-)
create mode 100644 src/ts/containers/test/layout/LogoBar.tsx
create mode 100644 src/ts/containers/test/layout/TitleBar.tsx
diff --git a/src/ts/containers/test/layout/Header.tsx b/src/ts/containers/test/layout/Header.tsx
index fba00ce..930e903 100644
--- a/src/ts/containers/test/layout/Header.tsx
+++ b/src/ts/containers/test/layout/Header.tsx
@@ -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}/>
);
}
}
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index f965e1e..9de6227 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -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 >
);
}
}
diff --git a/src/ts/containers/test/layout/LogoBar.tsx b/src/ts/containers/test/layout/LogoBar.tsx
new file mode 100644
index 0000000..f1a5665
--- /dev/null
+++ b/src/ts/containers/test/layout/LogoBar.tsx
@@ -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>
+ );
+ }
+}
+
+
+
diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
new file mode 100644
index 0000000..9f3df64
--- /dev/null
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -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>
+ );
+ }
+}
+
+
+
diff --git a/webpack.config.js b/webpack.config.js
index 09533ba..8d1f2dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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