Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +01: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

24
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,15 +14,14 @@ 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" />
<div style={{ overflowX: 'scroll' }}>
{ {
archive.length > 0 ? archive.length > 0 ?
<div className={commonStyles.horisontalScroll}>
<DataTable <DataTable
rows={archive} rows={archive}
style={{ width: '100%' }}> className={commonStyles.fullwidth}
style={{ border: 0 }}>
<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>
@ -30,15 +29,14 @@ class ArchiveList extends Component {
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 style={{ textAlign: 'center' }}> </div> :
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br /> <div className={commonStyles.emptyState}>
<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> </Card>
</Cell>
</Grid>
); );
} }
} }

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>