john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added icon to team dropdown

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-26 10:53:30 -07:00
parent bc051e3551
commit ca7e72fc2d
4 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/Users/UserForm.js
View File

@@ -156,7 +156,8 @@ export class UserForm extends React.Component {
</Column.Item>
<Column.Item>
<DropdownList items={teams} render={(item) => (
<DropdownList.Item key={item.id} style={{ paddingLeft: 8 }}>
<DropdownList.Item key={item.id}>
<DropdownList.Icon name='teams' size={sizeInfo.dropdownIconSize} />
<DropdownList.Text>{item.name}</DropdownList.Text>
</DropdownList.Item>
)} />

39
website/src/assets/icons/teams.svg
View File

@@ -1,26 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<svg width="66px" height="66px" viewBox="0 0 66 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<title>teams</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Home" transform="translate(-542.000000, -107.000000)">
<g id="Teams" transform="translate(506.000000, 94.000000)">
<g id="teams" transform="translate(36.000000, 13.000000)">
<path d="M98.4272551,60.0797683 C77.9834796,67.9435298 62.8014647,86.4110654 59.6183969,108.745189 C59.210846,111.604786 59.1513672,112.057555 59.1513672,115.029785 M142.151367,59.0797683 C162.595143,66.9435298 177.777158,85.4110654 180.960225,107.745189 C181.367776,110.604786 181.427255,111.057555 181.427255,114.029785 M88.0761719,170.292522 C97.3037305,175.821624 108.960094,179 120.5,179 C131.434308,179 145.889336,175.295527 154.786621,170.292522" id="Oval" stroke="#000000" stroke-width="5" stroke-dasharray="5,4"></path>
<g id="Profile-1" transform="translate(144.000000, 114.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="Profile-1" transform="translate(40.000000, 114.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="Profile-1" transform="translate(94.000000, 33.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="Home" transform="translate(-837.000000, -486.000000)">
<g id="teams" transform="translate(837.000000, 486.000000)">
<g id="Head-Copy-2" transform="translate(0.000000, 5.000000)">
<path d="M23.203125,24.3666667 C29.80301,24.3666667 35.15625,18.9019457 35.15625,12.1646185 C35.15625,5.42729135 29.80301,0 23.203125,0 C16.60324,0 11.25,5.46472094 11.25,12.1646185 C11.25,18.8645161 16.60324,24.3666667 23.203125,24.3666667 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M23.203125,3.18151562 C28.0430406,3.18151562 32.0029716,7.22391193 32.0029716,12.1646185 C32.0029716,17.1053251 28.0430406,21.1477215 23.203125,21.1477215 C18.3632094,21.1477215 14.4032784,17.1053251 14.4032784,12.1646185 C14.4032784,7.22391193 18.3632094,3.18151562 23.203125,3.18151562 Z" id="Path" fill="#FAFAFA"></path>
<path d="M1.58866995,43 L43.41133,43 C44.2980296,43 45,42.2769912 45,41.3637168 C45,32.8017699 38.2389163,25.8 29.8891626,25.8 L15.1108374,25.8 C6.79802956,25.8 0,32.7637168 0,41.3637168 C-4.92217105e-16,42.2769912 0.701970443,43 1.58866995,43 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M15.1108374,29.0725664 L29.8891626,29.0725664 C35.9482759,29.0725664 40.9359606,33.7150442 41.7118227,39.7274336 L3.28817734,39.7274336 C4.06403941,33.7530973 9.05172414,29.0725664 15.1108374,29.0725664 Z" id="Path" fill="#FFFFFF"></path>
</g>
<g id="Head-Copy" transform="translate(9.000000, 13.000000)">
<path d="M23.203125,24.3666667 C29.80301,24.3666667 35.15625,18.9019457 35.15625,12.1646185 C35.15625,5.42729135 29.80301,0 23.203125,0 C16.60324,0 11.25,5.46472094 11.25,12.1646185 C11.25,18.8645161 16.60324,24.3666667 23.203125,24.3666667 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M23.203125,3.18151562 C28.0430406,3.18151562 32.0029716,7.22391193 32.0029716,12.1646185 C32.0029716,17.1053251 28.0430406,21.1477215 23.203125,21.1477215 C18.3632094,21.1477215 14.4032784,17.1053251 14.4032784,12.1646185 C14.4032784,7.22391193 18.3632094,3.18151562 23.203125,3.18151562 Z" id="Path" fill="#FAFAFA"></path>
<path d="M1.58866995,43 L43.41133,43 C44.2980296,43 45,42.2769912 45,41.3637168 C45,32.8017699 38.2389163,25.8 29.8891626,25.8 L15.1108374,25.8 C6.79802956,25.8 0,32.7637168 0,41.3637168 C-4.92217105e-16,42.2769912 0.701970443,43 1.58866995,43 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M15.1108374,29.0725664 L29.8891626,29.0725664 C35.9482759,29.0725664 40.9359606,33.7150442 41.7118227,39.7274336 L3.28817734,39.7274336 C4.06403941,33.7530973 9.05172414,29.0725664 15.1108374,29.0725664 Z" id="Path" fill="#FFFFFF"></path>
</g>
<g id="Head" transform="translate(21.000000, 20.000000)">
<path d="M23.203125,24.3666667 C29.80301,24.3666667 35.15625,18.9019457 35.15625,12.1646185 C35.15625,5.42729135 29.80301,0 23.203125,0 C16.60324,0 11.25,5.46472094 11.25,12.1646185 C11.25,18.8645161 16.60324,24.3666667 23.203125,24.3666667 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M23.203125,3.18151562 C28.0430406,3.18151562 32.0029716,7.22391193 32.0029716,12.1646185 C32.0029716,17.1053251 28.0430406,21.1477215 23.203125,21.1477215 C18.3632094,21.1477215 14.4032784,17.1053251 14.4032784,12.1646185 C14.4032784,7.22391193 18.3632094,3.18151562 23.203125,3.18151562 Z" id="Path" fill="#FAFAFA"></path>
<path d="M1.58866995,43 L43.41133,43 C44.2980296,43 45,42.2769912 45,41.3637168 C45,32.8017699 38.2389163,25.8 29.8891626,25.8 L15.1108374,25.8 C6.79802956,25.8 0,32.7637168 0,41.3637168 C-4.92217105e-16,42.2769912 0.701970443,43 1.58866995,43 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M15.1108374,29.0725664 L29.8891626,29.0725664 C35.9482759,29.0725664 40.9359606,33.7150442 41.7118227,39.7274336 L3.28817734,39.7274336 C4.06403941,33.7530973 9.05172414,29.0725664 15.1108374,29.0725664 Z" id="Path" fill="#FFFFFF"></path>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

18
website/src/ui/DropdownList.js
View File

@@ -87,8 +87,8 @@ export class DropdownList extends Component {
<img src={open ? upArrowImage : downArrowImage}
style={{
verticalAlign: 'middle',
width: sizeInfo.dropDownIconSize,
height: sizeInfo.dropDownIconSize,
width: sizeInfo.dropdownIconSize,
height: sizeInfo.dropdownIconSize,
margin: sizeInfo.dropdownIconMargin,
}}
onClick={this.handleClick} />
@@ -114,8 +114,8 @@ DropdownList.Item = Radium(class ListItem extends Component {
return (
<div
style={[
{ width: '100%', background: active ? colorInfo.listBackgroundActive : 'transparent' },
hover && { ':hover': { background: colorInfo.listBackgroundHover } },
{ width: '100%', background: active ? colorInfo.dropdownBackgroundActive : 'transparent' },
hover && { ':hover': { background: colorInfo.dropdownBackgroundHover } },
]}
onClick={onClick}>
{children}
@@ -124,12 +124,16 @@ DropdownList.Item = Radium(class ListItem extends Component {
}
})
DropdownList.Icon = Radium(class ListIcon extends Component {
DropdownList.Icon = Radium(class DropdownIcon extends Component {
static propTypes = {
name: PropTypes.string,
size: PropTypes.number,
}
static defaultProps = {
size: sizeInfo.dropdownIconSize
}
render() {
const { size, name } = this.props
let source = Icon.svgs[name] || Icon.svgs['placeholder']
@@ -139,13 +143,13 @@ DropdownList.Icon = Radium(class ListIcon extends Component {
verticalAlign: 'middle',
width: size,
height: size,
margin: sizeInfo.listIconMargin,
margin: sizeInfo.dropdownIconMargin,
}} />
)
}
})
DropdownList.Text = Radium(class ListText extends Component {
DropdownList.Text = Radium(class DropdownText extends Component {
static propTypes = {
children: PropTypes.node,
}

8
website/src/ui/style.js
View File

@@ -43,6 +43,9 @@ Object.assign(colorInfo, {
listBorder: colorInfo.headerBorder,
dropdownBorder: colorInfo.headerBorder,
dropdownBackground: colorInfo.listBackground,
dropdownBackgroundActive: colorInfo.listBackgroundActive,
dropdownBackgroundHover: colorInfo.headerButtonBackgroundHover,
})
const sizeInfo = {
@@ -85,10 +88,11 @@ const sizeInfo = {
listIcon: 25,
listIconMargin: '5px 10px 5px 10px',
dropDownIconSize: 20,
dropdownIconMargin: 5,
dropdownIconSize: 20,
dropdownItems: 6,
dropdownBorderWidth: 1,
dropdownIcon: 25,
dropdownIconMargin: '5px 10px 5px 10px',
modalWidth: 450,
modalShadowWidth: 25,