small improvements (#4452)

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2021-10-31 21:21:24 -05:00 committed by GitHub
parent a87c66885c
commit 4cb7240f9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 197 additions and 74 deletions

View file

@ -1,3 +1,20 @@
.KnownHosts {
width: 100%;
}
.KnownHosts-item__label {
position: relative;
}
.KnownHosts-item__label svg {
display: none;
position: absolute;
left: -.1em;
top: 50%;
transform: translate(-100%, -50%);
font-size: .9em;
}
.Mui-selected .KnownHosts-item__label svg {
display: block;
}

View file

@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import IconButton from '@material-ui/core/IconButton';
import InputLabel from '@material-ui/core/InputLabel';
import Check from '@material-ui/icons/Check';
import EditRoundedIcon from '@material-ui/icons/Edit';
import { HostDTO } from 'services';
@ -64,10 +65,16 @@ const KnownHosts = ({ onChange }) => {
{
state.hosts.map((host, index) => (
<MenuItem className='KnownHosts-item' value={index} key={index}>
<span>{host.name} ({ getHostPort(state.hosts[index]).host }:{getHostPort(state.hosts[index]).port})</span>
<IconButton size='small' color='primary' disabled={!host.editable} onClick={() => editKnownHost(index)}>
<EditRoundedIcon fontSize='small' />
</IconButton>
<div className='KnownHosts-item__label'>
<Check />
<span>{host.name} ({ getHostPort(state.hosts[index]).host }:{getHostPort(state.hosts[index]).port})</span>
</div>
{ host.editable && (
<IconButton size='small' color='primary' onClick={() => editKnownHost(index)}>
<EditRoundedIcon fontSize='small' />
</IconButton>
) }
</MenuItem>
))
}