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

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

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

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

@ -8,12 +8,12 @@
width: 100%;
}
.horizontalScroll {
.horisontalScroll {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.horizontalScroll::-webkit-scrollbar {
.horisontalScroll::-webkit-scrollbar {
display: none;
}
@ -64,4 +64,12 @@
display: inline-block;
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
</SwitchWithLabel>
}/>
<div className={commonStyles.horizontalScroll}>
<div className={commonStyles.horisontalScroll}>
{entries}
</div>
</div>