This commit is contained in:
snoop 2017-07-11 12:26:05 +09:00
parent 16f89e544c
commit 1ee657e2eb
3 changed files with 29 additions and 31 deletions

View File

@ -11,13 +11,13 @@ export interface Props {
} }
const osNames = ["Windows","Debian","Ubuntu","Fedora"]; const osNames = ["Windows","Debian","Ubuntu","Fedora", "CentOS"];
export class ProbeDown extends React.Component<any, any> { export class ProbeDown extends React.Component<any, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = { activeItem: 'Windows' } this.state = { activeItem: osNames[0] }
} }
@ -35,10 +35,14 @@ const { activeItem } = this.state
<Grid> <Grid>
<Grid.Column width={4}> <Grid.Column width={4}>
<Menu fluid vertical tabular> <Menu fluid vertical tabular>
<Menu.Item name='Windows' active={activeItem === 'Windows'} onClick={this.handleItemClick} /> {osNames.map((os: string) => {
<Menu.Item name='Debian' active={activeItem === 'Debian'} onClick={this.handleItemClick} /> return (
<Menu.Item name='Ubuntu' active={activeItem === 'Ubuntu'} onClick={this.handleItemClick} /> <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
<Menu.Item name='Fedora' active={activeItem === 'Fedora'} onClick={this.handleItemClick} /> )
})}
</Menu> </Menu>
</Grid.Column> </Grid.Column>

View File

@ -15,12 +15,16 @@ export class SignIn 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 = {
forgotPopup: false, forgotPopup: false,
}; };
} }
forgotPopupOpen = () => this.setState({ forgotPopup: true });
forgotPopupClose = () => this.setState({ forgotPopup: false });
render() { render() {
@ -35,7 +39,8 @@ export class SignIn extends React.Component<any, any> {
<Label> Password </Label> <Label> Password </Label>
<Input placeholder='Password' type='password' /> <Input placeholder='Password' type='password' />
<br /> <br />
<Modal trigger={<Button>Forgot Password</Button>}> <Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
<Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
<Modal.Header>Change your password Enter email address.</Modal.Header> <Modal.Header>Change your password Enter email address.</Modal.Header>
<Modal.Content > <Modal.Content >
<Label> Email </Label> <Label> Email </Label>
@ -43,14 +48,14 @@ export class SignIn extends React.Component<any, any> {
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button basic color='blue' > Submit </Button> <Button basic color='blue' > Submit </Button>
<Button > Cancel </Button> <Button onClick={this.forgotPopupClose}> Cancel </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
<br /> <br />
<Button> Sign In </Button> <Button> Sign In </Button>
<Button> Sign Up </Button> <Button href='/#/test2'> Sign Up </Button>

View File

@ -46,31 +46,20 @@ export class TopBar extends React.Component<any, any> {
return ( return (
<div> <div>
<Menu> <Menu>
<Menu.Item> Home </Menu.Item> <Menu.Item href='//google.com' target='_blank'> Home </Menu.Item>
<Dropdown text='Monitoring' pointing className='link item'> <Dropdown text='Monitoring' pointing className='link item'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Header>Monitoring</Dropdown.Header> <Dropdown.Item> Probe </Dropdown.Item>
<Dropdown.Item>
<Icon name='dropdown' />
<span className='text'>Probe</span>
<Dropdown.Menu>
<Dropdown.Header>Mens</Dropdown.Header>
<Dropdown.Item>Shirts</Dropdown.Item>
<Dropdown.Item>Pants</Dropdown.Item>
<Dropdown.Item>Jeans</Dropdown.Item>
<Dropdown.Item>Shoes</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>Womens</Dropdown.Header>
<Dropdown.Item>Dresses</Dropdown.Item>
<Dropdown.Item>Shoes</Dropdown.Item>
<Dropdown.Item>Bags</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>Sensors</Dropdown.Item> <Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<Menu.Item> Infrastructure </Menu.Item>
<Dropdown text='Infrastructure' pointing className='link item'>
<Dropdown.Menu>
<Dropdown.Item> Maps </Dropdown.Item>
<Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Menu.Item> Dashboard </Menu.Item> <Menu.Item> Dashboard </Menu.Item>
<Menu.Item> Metrics </Menu.Item> <Menu.Item> Metrics </Menu.Item>
<Menu.Item> Alert </Menu.Item> <Menu.Item> Alert </Menu.Item>