Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #34 from Unleash/feature-list-fullwidth-link

Browse Source 
make link to feature toggle span full width of list
This commit is contained in:
Sveinung Røsaker 2017-01-02 09:26:48 +01:00 committed by GitHub
commit a595204d5a
3 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/component/feature/feature-list-item-component.jsx
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>
); );
}; };

6
frontend/src/component/feature/feature.scss
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;
} }

2
frontend/src/component/feature/list-component.jsx
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}