Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-19 01:17:18 +02:00
Code Issues Projects Releases Wiki Activity

adds a card layout and empty state styling to the archived toggles page (#58)

Browse Source 
* adds a card layout and empty state styling to the archived toogles page

* changed empty state icon for archive page
This commit is contained in:
Vegard Sandvold 2017-01-30 22:15:35 +01:00 committed by GitHub
parent fae7e6e55b
commit 452d22047e
3 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/component/archive/archive-list-component.jsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { DataTable, TableHeader, IconButton, Icon, Grid, Cell } from 'react-mdl'; import { DataTable, TableHeader, IconButton, Icon, Card } from 'react-mdl';
import { HeaderTitle } from '../common'; import { styles as commonStyles } from '../common';
class ArchiveList extends Component { class ArchiveList extends Component {
componentDidMount () { componentDidMount () {
@ -14,31 +14,29 @@ class ArchiveList extends Component {
e.reviveName = e.name; e.reviveName = e.name;
}); });
return ( return (
<Grid className="mdl-color--white"> <Card shadow={0} className={commonStyles.fullwidth}>
<Cell col={12}> {
<HeaderTitle title="Toggle Archive" /> archive.length > 0 ?
<div style={{ overflowX: 'scroll' }}> <div className={commonStyles.horisontalScroll}>
{ <DataTable
archive.length > 0 ? rows={archive}
<DataTable className={commonStyles.fullwidth}
rows={archive} style={{ border: 0 }}>
style={{ width: '100%' }}> <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
<TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => ( <IconButton colored name="undo" onClick={() => revive(reviveName)} />
<IconButton colored name="undo" onClick={() => revive(reviveName)} /> )}>Revive</TableHeader>
)}>Revive</TableHeader> <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
<TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}> Enabled</TableHeader>
Enabled</TableHeader> <TableHeader name="name">Toggle name</TableHeader>
<TableHeader name="name">Toggle name</TableHeader> <TableHeader numeric name="createdAt">Created</TableHeader>
<TableHeader numeric name="createdAt">Created</TableHeader> </DataTable>
</DataTable> : </div> :
<div style={{ textAlign: 'center' }}> <div className={commonStyles.emptyState}>
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br /> <Icon name="archive" className="mdl-color-text--grey-300" style={{ fontSize: '56px' }}/><br />
No archived feature toggles, go see <Link to="/features">active toggles here</Link> No archived feature toggles, go see <Link to="/features">active toggles here</Link>
</div>
}
</div> </div>
</Cell> }
</Grid> </Card>
); );
} }
} }

12
frontend/src/component/common/common.scss
View File

@ -8,12 +8,12 @@
width: 100%; width: 100%;
} }
.horizontalScroll { .horisontalScroll {
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.horizontalScroll::-webkit-scrollbar { .horisontalScroll::-webkit-scrollbar {
display: none; display: none;
} }
@ -65,3 +65,11 @@
padding-right: 8px; padding-right: 8px;
} }
} }
.emptyState {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
min-height: 200px;
}

2
frontend/src/component/history/history-list-component.jsx
View File

@ -49,7 +49,7 @@ class HistoryList extends Component {
Full events Full events
</SwitchWithLabel> </SwitchWithLabel>
}/> }/>
<div className={commonStyles.horizontalScroll}> <div className={commonStyles.horisontalScroll}>
{entries} {entries}
</div> </div>
</div> </div>