overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
insanity 2017-07-20 19:41:12 +09:00
parent 61e036803d
commit 4fe77c58e8
4 changed files with 67 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/ts/@overflow/app/views/layout/Layout.tsx
View File

@ -34,72 +34,16 @@ export class Layout extends React.Component<any, any> {
public render(): JSX.Element {
return (
<Container fluid>
<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' }}>
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
<Header />
{/*<Router history={history} >
{routes}
</Router>*/}
<Provider store={store}>
<ConnectedRouter history={history}>
{routes}
</ConnectedRouter>
</Provider>
<Footer />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
{/* <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>
</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>
</Container>
<Footer />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable> */}
</Container >
);
}

89
src/ts/@overflow/app/views/layout/LeftMenu.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
import { Container, Menu, Dropdown, Segment, Icon, Header, Image } from 'semantic-ui-react';
import { LogoBar } from './LogoBar';
import { TitleBar } from './TitleBar';
@ -20,68 +20,57 @@ export class LeftMenu extends React.Component<any, any> {
public render(): JSX.Element {
return (
<Container fluid className='fullHeight'>
<Segment inverted vertical className='fullHeight'>
<Menu inverted secondary vertical fluid icon='labeled' >
<Menu.Item name='User' href='/' >
<Icon name='user' />
<Menu fixed='left' inverted vertical borderless>
<Menu.Item name='User'>
<Header textAlign='center'>
<Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg'
size='mini' shape='circular' href='/' />
</Header>
</Menu.Item>
<Menu.Item name='Home' href='/' >
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='Monitoring' href='/' >
<Icon name='bar graph' />
Monitoring
{/*
<Dropdown text='Monitoring' pointing>
<Dropdown.Menu>
<Dropdown.Header>Monitoring</Dropdown.Header>
<Dropdown.Item>Probe</Dropdown.Item>
<Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
*/}
<Header inverted sub icon='home' content='Home' />
</Menu.Item>
<Menu.Item name='Infrastructure' href='/' >
<Icon name='sitemap' />
Infrastructure
{/*
<Dropdown text='Infrastructure' >
<Dropdown.Menu>
<Dropdown.Header>Infrastructure</Dropdown.Header>
<Dropdown.Item>Maps</Dropdown.Item>
<Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
*/}
<Menu.Item>
<Menu.Header name='Monitoring' >
<Header inverted sub icon='bar graph' content='Monitoring' />
</Menu.Header>
<Menu.Menu>
<Menu.Item href='#/test14' style={{ 'margin-left': '30px' }}>Probe</Menu.Item>
<Menu.Item href='/' style={{ 'margin-left': '30px' }}>Sensors</Menu.Item>
</Menu.Menu>
</Menu.Item>
<Menu.Item>
<Menu.Header name='Infrastructure' >
<Header inverted sub icon='sitemap' content='Infrastructure' />
</Menu.Header>
<Menu.Menu>
<Menu.Item href='/' style={{ 'margin-left': '30px' }}>Maps</Menu.Item>
<Menu.Item href='/' style={{ 'margin-left': '30px' }}>Targets</Menu.Item>
</Menu.Menu>
</Menu.Item>
<Menu.Item name='Dashboard' href='/' >
<Icon name='industry' />
Dashboard
<Header inverted sub icon='industry' content='Dashboard' />
</Menu.Item>
<Menu.Item name='Metrics' href='/'>
<Icon name='tasks' />
Metrics
<Header inverted sub icon='tasks' content='Metrics' />
</Menu.Item>
<Menu.Item name='Alerts' href='/' >
<Icon name='alarm' />
Alerts
<Header inverted sub icon='alarm' content='Alerts' />
</Menu.Item>
<Menu.Item name='History' href='/'>
<Icon name='book' />
History
<Header inverted sub icon='book' content='History' />
</Menu.Item>
<Menu.Item href='/'>
<Icon name='play circle' />
<Menu.Item name='Custom'>
<Header inverted sub><Icon name='play circle' />
<Header.Content>
<Dropdown text='Custom'>
<Dropdown.Menu>
<Dropdown.Header>Custom</Dropdown.Header>
@ -95,16 +84,14 @@ export class LeftMenu extends React.Component<any, any> {
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
<Menu.Item name='Settings' href='/' >
<Icon name='setting' />
Settings
</Header.Content>
</Header>
</Menu.Item>
<Menu.Item name='Settings' href='/' >
<Header inverted sub icon='setting' content='Settings' />
</Menu.Item>
</Menu>
</Segment>
</Container>
// <TopBar onSidebar={this.props.onSidebar}/>
);
}
}

10
src/ts/@overflow/app/views/layout/LogoBar.tsx
View File

@ -19,13 +19,11 @@ export class LogoBar extends React.Component<any, any> {
public render(): JSX.Element {
return (
<Container fluid>
<Container fluid style={{background:'#f8f8f8', 'padding-right':'7px'}}>
<Menu borderless secondary >
<Menu.Item
name='logo'
onClick={this.handleLogoClick}
>
<Header as='h3' icon='stack overflow' content='overFlow' />
<Menu.Item name='logo'>
{/* <Image src='https://lh3.googleusercontent.com/EaEViB7RYr3Rhhez8zY0TYsNsS5Rv2i63kyiQ5ym0rhQh38KRXBh7BDFo4mjDTDU_Hm6FAVg35247ZM1wE6cO-TuBP4wxYW2SG4hYoojqkUomu587xg3t50VGUSceK17-LUZhM-5XoCsXUXBHtfXVMqMZ2rUb23tgm7Kuv7eTgZZz0o9_dB0lApoi57EBVBNX8_qIDSH3YmGfvqhnKeh5AYnnBG_QXlTg1JExwtMehCe8KgXs4-vLuVicPCCuJ2AXSoWFpVXL9TVhrrMOkeuGd-6PGAFiNxeTG6NylQKwbQikx3Mx7KmGq3iSc8mqp0AmwjptG2DtS7nqwNaAZAi1DtraHYgJcE_tfpEgnZfFSWmVYQYcUe98pfZR11OfJErdJxE3w-mL1b4MoyufB0VkSlFM1BpMlfP3OsnnDIdNAXthT6MuLtI2iLv_CNeoDKi3fdH-zIcSmoArgAFrAo0-9oYUfvQDdaC_8MMddc97b_L78fzFOPRGIf52Ajr-Ia6sjdyDFdJ46-wPKfMW8XHnFfA96NsIcA-HYRZ7GTteJOzVq6HEabwnurZdTxdmCjzGHcb7OEu00DkVMhM6WbWZ0L8HWpIk92sy-sKbprHe-9oh_9WaxJzPrlG=w180-h30-no'
style={{width:'120px'}} onClick={this.handleLogoClick} /> */}
</Menu.Item>
<Menu.Item
position='right'

4
src/ts/@overflow/app/views/layout/TitleBar.tsx
View File

@ -25,11 +25,11 @@ export class TitleBar extends React.Component<any, any> {
},
];
return (
<Menu basic fluid style={{ 'border-left': '0px', 'border-right': '0px', 'box-shadow': 'none', 'border-radius': '0' }}>
<Menu 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 size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>