1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

make link to feature toggle span full width of list

This commit is contained in:
vsandvold 2017-01-01 21:26:23 +01:00
parent f73a784ab1
commit e6af858b1a
3 changed files with 11 additions and 17 deletions

View File

@ -32,7 +32,7 @@ const Feature = ({
return ( return (
<li key={name} className="mdl-list__item"> <li key={name} className="mdl-list__item">
<span className="mdl-list__item-primary-content"> <span className="mdl-list__item-secondary-action">
<div style={{ width: '40px', textAlign: 'center' }}> <div style={{ width: '40px', textAlign: 'center' }}>
{ {
isStale ? isStale ?
@ -44,23 +44,23 @@ const Feature = ({
</div> </div>
} }
</div> </div>
</span>
&nbsp; <span className="mdl-list__item-secondary-action" style={{ width: '45px' }} title={`Toggle ${name}`}>
<span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}> <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
<Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} /> </span>
</span> <span className="mdl-list__item-primary-content">
<Link to={`/features/view/${name}`} className={style.link}> <Link to={`/features/view/${name}`} className={style.link} style={{ display: 'inline-block', width: '100%' }}>
{shorten(name, 50)} <small className={style.hideLt960}>{shorten(description, 30) || ''}</small> {shorten(name, 50)} <small className={style.hideLt960}>{shorten(description, 30) || ''}</small>
</Link> </Link>
</span> </span>
<span className="mdl-list__item-secondary-action">
<span className={style.iconList} >
{strategies && strategies.map((s, i) => <Chip className={[style.iconListItemChip, style.hideLt960].join(' ')} key={i}> {strategies && strategies.map((s, i) => <Chip className={[style.iconListItemChip, style.hideLt960].join(' ')} key={i}>
<small>{s.name}</small> <small>{s.name}</small>
</Chip>)} </Chip>)}
</span>
<span className="mdl-list__item-secondary-action">
<IconButton name="delete" onClick={removeToggle} className={style.iconListItem} /> <IconButton name="delete" onClick={removeToggle} className={style.iconListItem} />
</span> </span>
</li> </li>
); );
}; };

View File

@ -25,12 +25,7 @@
color: #000; color: #000;
} }
.iconList {
display: flex;
}
.iconListItem { .iconListItem {
flex: 1;
color: #bbb !important; color: #bbb !important;
} }
.iconListItem *:hover { .iconListItem *:hover {
@ -38,7 +33,6 @@
} }
.iconListItemChip { .iconListItemChip {
flex: 1;
margin-left: 5px !important; margin-left: 5px !important;
} }

View File

@ -97,7 +97,7 @@ export default class FeatureListComponent extends React.PureComponent {
</Link> </Link>
</div> </div>
<ul className="demo-list-item mdl-list"> <ul className="mdl-list">
{features.map((feature, i) => {features.map((feature, i) =>
<Feature key={i} <Feature key={i}
settings={settings} settings={settings}