Skip to content

Commit

Permalink
New lists design (#820)
Browse files Browse the repository at this point in the history 
* feat: new design for case list items

* feat: new design for open case list

* feat: new design for units list

* feat: "add another unit" bottom list link

* feat: "add case on another unit" bottom list link
  • Loading branch information
@nbiton @franck-boullier
nbiton authored and franck-boullier committed Jun 7, 2019
1 parent 1e1fbe9 commit bb1e95f
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 37 deletions.
4 changes: 4 additions & 0 deletions client/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,10 @@
margin: auto
}

.mb05 {
margin-bottom: 0.125rem;
}

.flex{
display: flex;
}
Expand Down
12 changes: 11 additions & 1 deletion imports/ui/case-explorer/case-explorer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { SORT_BY, sorters, labels } from '../explorer-components/sort-items'
import { RoleFilter } from '../explorer-components/role-filter'
import { Sorter } from '../explorer-components/sorter'
import { finishSearch, startSearch, updateSearch, navigationRequested, navigationGranted } from '../case/case-search.actions'
import FlatButton from 'material-ui/FlatButton'

class CaseExplorer extends Component {
constructor () {
Expand Down Expand Up @@ -68,6 +69,8 @@ class CaseExplorer extends Component {

createCaseUrlGen = bzId => `/case/new?unit=${bzId}`

showSelectionDialog = () => this.setState({ showUnitDialog: true })

expandedCasesRenderer = ({ allItems }) => (
<CaseList
allCases={allItems}
Expand Down Expand Up @@ -243,9 +246,16 @@ class CaseExplorer extends Component {
expandedListRenderer={this.expandedCasesRenderer}
itemType='case'
noItemsIconType='card_travel'
renderAfter={(
<FlatButton primary fullWidth onClick={this.showSelectionDialog}>
<div className='bondi-blue underline b'>
Add case to another unit
</div>
</FlatButton>
)}
/>
<div className='absolute right-1 bottom-2'>
<FloatingActionButton onClick={() => this.setState({ showUnitDialog: true })}>
<FloatingActionButton onClick={this.showSelectionDialog}>
<FontIcon className='material-icons'>add</FontIcon>
</FloatingActionButton>
<UnitSelectDialog
Expand Down
2 changes: 1 addition & 1 deletion imports/ui/case-explorer/case-list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function CaseList ({ allCases }) {
return (
<div>
{allCases.map(caseItem =>
<li key={caseItem.id} className='h2-5 bt b--black-10'>
<li key={caseItem.id} className='h2-5 bb b--black-10'>
<div className='flex items-center'>
<Link
className={
Expand Down
28 changes: 18 additions & 10 deletions imports/ui/explorer-components/unit-group-list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
import { NoItemMsg } from './no-item-msg'

const UNIT_ROW_LIMIT = 25 // How many rows to render at a time - too low shows rendering occur in view, too high is slower
const UNIT_ROW_HEIGHT = 64 // The height of a rendered unit row in pixels
const UNIT_ROW_HEIGHT = 66 // The height of a rendered unit row in pixels
const ITEM_ROW_HEIGHT = 48 // The height of a rendered sub-item row in pixels

// Using "PureComponent" to prevent unnecessary re-renders
Expand All @@ -15,7 +15,8 @@ export class UnitGroupList extends PureComponent {
super(props)
this.state = {
expandedUnits: [],
viewedData: []
viewedData: [],
renderingLast: false
}
this.calculatedHeights = {}
}
Expand Down Expand Up @@ -89,7 +90,8 @@ export class UnitGroupList extends PureComponent {
})

this.setState({
viewedData
viewedData,
renderingLast: viewedData.slice(-1)[0] === unitGroupList.slice(-1)[0]
})
}
})
Expand Down Expand Up @@ -124,12 +126,14 @@ export class UnitGroupList extends PureComponent {
const viewedData = unitGroupList.slice(0, UNIT_ROW_LIMIT)
this.viewedHeight = this.calcHeightForData(viewedData)
this.setState({
viewedData
viewedData,
renderingLast: viewedData.slice(-1)[0] === unitGroupList.slice(-1)[0]
})
} else {
this.viewedHeight = 0
this.setState({
viewedData: []
viewedData: [],
renderingLast: true
})
}
}
Expand All @@ -145,8 +149,10 @@ export class UnitGroupList extends PureComponent {
}

render () {
const { unitGroupList, itemType, expandedListRenderer, creationUrlGenerator, noItemsIconType } = this.props
const { expandedUnits, viewedData } = this.state
const {
unitGroupList, itemType, expandedListRenderer, creationUrlGenerator, noItemsIconType, renderAfter
} = this.props
const { expandedUnits, viewedData, renderingLast } = this.state
const isExpanded = (unitTitle) => expandedUnits.includes(unitTitle)

return (
Expand All @@ -159,8 +165,8 @@ export class UnitGroupList extends PureComponent {
{viewedData.map(unitItem => {
const { unitTitle, unitType, bzId, items, hasUnread, isActive } = unitItem
return (
<div key={unitTitle}>
<div className='flex items-center h3 bt b--light-gray bg-white'
<div key={unitTitle} className='mb05'>
<div className='flex items-center h3 bg-white card-shadow-1'
onClick={evt => this.handleExpandUnit(evt, unitItem)}
>
<div className='mh3'>
Expand Down Expand Up @@ -200,6 +206,7 @@ export class UnitGroupList extends PureComponent {
</div>
)
})}
{renderingLast && renderAfter}
</div>
)
: (<NoItemMsg item={itemType} iconType={noItemsIconType} buttonOption />)
Expand All @@ -214,5 +221,6 @@ UnitGroupList.propTypes = {
itemType: PropTypes.string.isRequired,
expandedListRenderer: PropTypes.func.isRequired,
creationUrlGenerator: PropTypes.func.isRequired,
noItemsIconType: PropTypes.string.isRequired
noItemsIconType: PropTypes.string.isRequired,
renderAfter: PropTypes.element
}
34 changes: 18 additions & 16 deletions imports/ui/unit-explorer/filtered-units.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,25 @@ export default class FilteredUnits extends Component {
return (
<div className='flex-grow flex flex-column overflow-auto'>
{filteredUnits.map(({ id, name, description, metaData }) => (
<MenuItem key={id} innerDivStyle={resetMenuItemDivStyle} onClick={() => handleUnitClicked(id)} >
<div className='mt2 ph2 bb b--very-light-gray br1 w-100 flex items-center pa2'>
<UnitTypeIcon unitType={metaData ? metaData.unitType : ''} />
<div className='ml3 mv1 semi-dark-gray lh-copy flex-grow overflow-hidden'>
<div className='ti1 ellipsis'>{(metaData && metaData.displayName) || name}</div>
<div className='ti1 ellipsis silver'>{ (metaData && metaData.moreInfo) || description}&nbsp;</div>
</div>
{ showAddBtn && (
<div
onClick={(evt) => { evt.stopPropagation(); handleAddCaseClicked(id) }}
className='f6 ellipsis ml3 pl1 mv1 bondi-blue fw5 no-shrink'
>
Add case
<div key={id} className='bg-white mb05 card-shadow-1'>
<MenuItem innerDivStyle={resetMenuItemDivStyle} onClick={() => handleUnitClicked(id)} >
<div className='mt2 ph2 br1 w-100 flex items-center pa2'>
<UnitTypeIcon unitType={metaData ? metaData.unitType : ''} />
<div className='ml3 mv1 semi-dark-gray lh-copy flex-grow overflow-hidden'>
<div className='ti1 ellipsis'>{(metaData && metaData.displayName) || name}</div>
<div className='ti1 ellipsis silver'>{ (metaData && metaData.moreInfo) || description}&nbsp;</div>
</div>
)}
</div>
</MenuItem>
{ showAddBtn && (
<div
onClick={(evt) => { evt.stopPropagation(); handleAddCaseClicked(id) }}
className='f6 ellipsis ml3 pl1 mv1 bondi-blue fw5 no-shrink'
>
Add case
</div>
)}
</div>
</MenuItem>
</div>
))
}
</div>
Expand Down
28 changes: 19 additions & 9 deletions imports/ui/unit-explorer/unit-explorer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { connect } from 'react-redux'
import { createContainer } from 'meteor/react-meteor-data'
import { push } from 'react-router-redux'
import FontIcon from 'material-ui/FontIcon'
import FlatButton from 'material-ui/FlatButton'
import { Link } from 'react-router-dom'
import RootAppBar from '../components/root-app-bar'
import Preloader from '../preloader/preloader'
import { setDrawerState } from '../general-actions'
Expand Down Expand Up @@ -164,18 +166,26 @@ class UnitExplorer extends Component {
/>
</div>
<div className='flex-grow flex flex-column overflow-auto'>
<div className='flex-grow bb b--very-light-gray bg-white pb6'>
<div className='flex-grow bb b--very-light-gray bg-very-light-gray pb6'>
{ units.length === 0 ? (
<NoItemMsg item={'unit'} iconType={'location_on'} />
) : (
<FilteredUnits
filteredUnits={units}
handleUnitClicked={this.handleUnitClicked}
handleAddCaseClicked={this.handleAddCaseClicked}
showAddBtn
/>
)
}
<div className='flex flex-grow flex-column'>
<FilteredUnits
filteredUnits={units}
handleUnitClicked={this.handleUnitClicked}
handleAddCaseClicked={this.handleAddCaseClicked}
showAddBtn
/>
<Link to='/unit/new'>
<FlatButton primary fullWidth>
<div className='bondi-blue underline b'>
Add another unit
</div>
</FlatButton>
</Link>
</div>
)}
</div>
</div>
</div>
Expand Down

0 comments on commit bb1e95f

Please sign in to comment.