From d347adcf3336edebd544fc3114528ed04c5209c5 Mon Sep 17 00:00:00 2001 From: John Lyon-Smith Date: Fri, 2 Mar 2018 14:20:51 -0800 Subject: [PATCH] Home screen and PanelButtons --- website/src/Home/Home.js | 23 ++++++++++++++- website/src/Users/Users.js | 8 ++---- website/src/assets/icons/system.svg | 18 ++++++++++++ website/src/assets/icons/teams.png | Bin 0 -> 4636 bytes website/src/assets/icons/teams.svg | 28 ++++++++++++++++++ website/src/assets/icons/users.png | Bin 0 -> 1665 bytes website/src/assets/icons/users.svg | 27 +++++++++++++++++ website/src/ui/HeaderButton.js | 2 +- website/src/ui/Icon.js | 3 ++ website/src/ui/PanelButton.js | 43 ++++++++++++++++++++++++++++ website/src/ui/PanelButton.style.js | 22 ++++++++++++++ website/src/ui/index.js | 1 + website/src/ui/style.js | 18 ++++++++++-- 13 files changed, 182 insertions(+), 11 deletions(-) create mode 100644 website/src/assets/icons/system.svg create mode 100644 website/src/assets/icons/teams.png create mode 100644 website/src/assets/icons/teams.svg create mode 100644 website/src/assets/icons/users.png create mode 100644 website/src/assets/icons/users.svg create mode 100644 website/src/ui/PanelButton.js create mode 100644 website/src/ui/PanelButton.style.js diff --git a/website/src/Home/Home.js b/website/src/Home/Home.js index 296063c..4939e0c 100644 --- a/website/src/Home/Home.js +++ b/website/src/Home/Home.js @@ -1,9 +1,30 @@ import React from 'react' +import { Row, Column, PanelButton } from 'ui' export class Home extends React.Component { render() { return ( -
+ + + + + + + + + + + + + + + + + + + + + ) } } diff --git a/website/src/Users/Users.js b/website/src/Users/Users.js index 5a80447..06b3b31 100644 --- a/website/src/Users/Users.js +++ b/website/src/Users/Users.js @@ -1,5 +1,5 @@ import React from 'react' -import { autoBind } from 'auto-bind2' +import { reactAutoBind } from 'auto-bind2' import { UserList } from './UserList' import { UserForm } from './UserForm' import { UserFormPlaceholder } from './UserFormPlaceholder' @@ -10,7 +10,7 @@ import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '.. export class Users extends React.Component { constructor() { super() - autoBind(this, (name) => (name.startsWith('handle'))) + reactAutoBind(this) this.state = { selectedUser: null, users: [], @@ -239,16 +239,12 @@ export class Users extends React.Component { return (
Users
- - {/* User List - Displayed on left hand side. */} - - {/* User Info - Displayed on right hand side. */} { this.state.selectedUser diff --git a/website/src/assets/icons/system.svg b/website/src/assets/icons/system.svg new file mode 100644 index 0000000..9380d82 --- /dev/null +++ b/website/src/assets/icons/system.svg @@ -0,0 +1,18 @@ + + + + system + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/assets/icons/teams.png b/website/src/assets/icons/teams.png new file mode 100644 index 0000000000000000000000000000000000000000..191de46477c208156609ce17aff745080ca21ffc GIT binary patch literal 4636 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 + + + teams + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/assets/icons/users.png b/website/src/assets/icons/users.png new file mode 100644 index 0000000000000000000000000000000000000000..372bb2f5e15c7b0d62e8c33aee2088dd01e25604 GIT binary patch literal 1665 zcmV-{27dX8P)X$c6vw@lWtLroFug?Gh#(3dEPBhgz_N_&p`c!T=$8`p z5`+(dNPj@}P!xtgpdbV_DoK2?QV67ahUc$sskqYv@=I`j^75*l?2X7(B2 zlG!*oY=n+Nrw0`4J_Rj=M$v+qJ?n0ntp$rIXwb!@>m5ehN9;U{ZV}Av>2t|!9yn}; z^rDdEBY6ICN4%EL^!3YlJ|FUI!OWgrx6IB5ivy5e2rTb|?uQmb+IWx8_Cej+zK8o> z7g8`oa*gJe*%&}@S$vffvE7?)MiS<&nl6y40q9-k!RHA^QtvcHpj=9Rv^g zF0s_kr*8}Tlzp(zk}a6ov*()Gx8NZsc#iKY^eOvbpCwx`vuDpWGr6gd^Yk@+R||=K zmTbYyp1mTN)%{NNli+aWaabm}+UC zx=)j{7F5>p>+z)sQTx<=rs!jsK6Lzgd?{klK6Rgc`>4B!zEGZ5sB((pEy~H4s$5zz znAtPtn%Ujpaa!noJDA*STM6^(KWM6!Q&VtC;MKM<&K&a8Qao_ z^vRRrORSDsT0fZC6XTxQ<6t5uJg?t^F1E9pZo{_P-xD=_wYf_3aUA-K- z1M2m+xIe%%{$Y}Lp_9<4TQIZFfM8~47A=B65C{T6AP5A3AP@xpBT(l%(b;Hz6SNAt z2I7&N31|^i_oo$T`mdeB)sN73&>@I_gYFGzKlB$=q6IU1)?6~X796%hQ_!HhZYk@r zU-o|;REh;Nd!}46yBr)gLw`dl7e!rPjDztouC`h*vuCDQX8k_StpSVYp_xt(aBG?$ zzkY^JL9;b}B)kOT$HTcZIOA`O)CV-7@28YdH~lGT=r#pGI2ngt*?hB~T{Ghr zvRp*m-Y&_WMzAt|jwiPTGdp3o%;tl|Z%{P}c_N^xZESm5&a{}s3*SAfF>pK_S1t=? zcCxOS-31=iv5$VhxV=ePT5yZUpj6*u9SUi-@5OVedY9}%o`}@wgGPs_08O-ct-7@5=x literal 0 HcmV?d00001 diff --git a/website/src/assets/icons/users.svg b/website/src/assets/icons/users.svg new file mode 100644 index 0000000..b2d963c --- /dev/null +++ b/website/src/assets/icons/users.svg @@ -0,0 +1,27 @@ + + + + users + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/ui/HeaderButton.js b/website/src/ui/HeaderButton.js index 1326988..c53ae8b 100644 --- a/website/src/ui/HeaderButton.js +++ b/website/src/ui/HeaderButton.js @@ -9,7 +9,7 @@ class HeaderButton extends Component { static propTypes = { onClick: PropTypes.func, icon: PropTypes.string, - image: PropTypes.object, + image: PropTypes.string, } render() { diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js index b81c08e..ee1c353 100644 --- a/website/src/ui/Icon.js +++ b/website/src/ui/Icon.js @@ -18,6 +18,9 @@ export default class Icon extends Component { logout: require('icons/logout.svg'), profile: require('icons/profile.svg'), hold: require('icons/hold.svg'), + users: require('icons/users.svg'), + teams: require('icons/teams.svg'), + system: require('icons/system.svg'), placeholder: require('icons/placeholder.svg'), } diff --git a/website/src/ui/PanelButton.js b/website/src/ui/PanelButton.js new file mode 100644 index 0000000..ea48488 --- /dev/null +++ b/website/src/ui/PanelButton.js @@ -0,0 +1,43 @@ +import Radium from 'radium' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import style from './PanelButton.style' +import { Icon } from '.' +import { sizeInfo, fontInfo } from 'ui/style' + +class PanelButton extends Component { + static propTypes = { + onClick: PropTypes.func, + icon: PropTypes.string.isRequired, + text: PropTypes.string.isRequired, + } + + render() { + const { onClick, icon, text } = this.props + + return ( + + ) + } +} + +export default Radium(PanelButton) diff --git a/website/src/ui/PanelButton.style.js b/website/src/ui/PanelButton.style.js new file mode 100644 index 0000000..2596154 --- /dev/null +++ b/website/src/ui/PanelButton.style.js @@ -0,0 +1,22 @@ +import { colorInfo } from './style' + +export default { + button: { + borderWidth: 2, + borderRadius: '10px', + padding: '0 0 0 0', + background: colorInfo.panelButtonBackground, + verticalAlign: 'middle', + outline: 'none', + ':hover': { + background: colorInfo.panelButtonBackgroundHover, + }, + ':disabled': { + background: colorInfo.disabledPanelButtonBackground, + }, + ':active': { + borderWidth: 0, + background: colorInfo.panelButtonBackgroundActive, + } + } +} diff --git a/website/src/ui/index.js b/website/src/ui/index.js index cf6195d..06e0c77 100644 --- a/website/src/ui/index.js +++ b/website/src/ui/index.js @@ -2,6 +2,7 @@ export { default as Anime } from './Anime' export { default as Box } from './Box' export { default as Button } from './Button' export { default as HeaderButton } from './HeaderButton' +export { default as PanelButton } from './PanelButton' export { default as Checkbox } from './Checkbox' export { default as Input } from './Input' export { default as Image } from './Image' diff --git a/website/src/ui/style.js b/website/src/ui/style.js index 8528c70..be23456 100644 --- a/website/src/ui/style.js +++ b/website/src/ui/style.js @@ -1,4 +1,4 @@ -export const colorInfo = { +let colorInfo = { text: '#000000', textInverse: '#FFFFFF', textPlaceholder: '#EEEEEE', @@ -15,7 +15,14 @@ export const colorInfo = { uncheckedCheckboxHover: '#808080', } -export const sizeInfo = { +Object.assign(colorInfo, { + panelButtonBackground: colorInfo.headerButtonBackground, + panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover, + panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive, + disabledPanelButtonBackground: colorInfo.disabledButtonBackground, +}) + +const sizeInfo = { headerHeight: 60, imageMargin: 5, // The margin around images iconMargin: 10, // The margin around icons @@ -23,9 +30,12 @@ export const sizeInfo = { buttonHeight: 40, minButtonWidth: 100, checkboxSize: 25, + panelButtonSize: 200, + panelIconSize: 170, + panelTextOffset: 130, } -export const fontInfo = { +const fontInfo = { family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind size: { small: '10pt', @@ -40,3 +50,5 @@ export const fontInfo = { 'dimmed': colorInfo.grayText, } } + +export { colorInfo, sizeInfo, fontInfo }