From c2eeccb66f882c5b94cb741e21b61209f626ac31 Mon Sep 17 00:00:00 2001 From: John Lyon-Smith Date: Wed, 28 Feb 2018 10:53:32 -0800 Subject: [PATCH] Fixed message dialog --- mobile/.expo/packager-info.json | 6 +-- website/src/Auth/Login.js | 12 ++--- website/src/Modal/MessageModal.js | 49 ++++++++++++++------- website/src/assets/icons/folder-icon.png | Bin 2271 -> 0 bytes website/src/assets/icons/folder-open-2.png | Bin 3192 -> 0 bytes website/src/assets/icons/hold.svg | 14 ++++++ website/src/assets/icons/open-folder.png | Bin 5608 -> 0 bytes website/src/ui/BoundButton.js | 5 +-- website/src/ui/Button.js | 6 +-- website/src/ui/Column.js | 12 +++-- website/src/ui/Icon.js | 1 + website/src/ui/Modal.js | 15 +++++-- website/src/ui/Modal.style.js | 8 ++-- website/src/ui/Row.js | 7 +-- website/src/ui/Text.js | 13 ++++-- website/src/ui/style.js | 5 ++- 16 files changed, 101 insertions(+), 52 deletions(-) delete mode 100644 website/src/assets/icons/folder-icon.png delete mode 100644 website/src/assets/icons/folder-open-2.png create mode 100644 website/src/assets/icons/hold.svg delete mode 100644 website/src/assets/icons/open-folder.png diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json index dd224fa..24e8ec3 100644 --- a/mobile/.expo/packager-info.json +++ b/mobile/.expo/packager-info.json @@ -1,5 +1,5 @@ { - "expoServerPort": 19000, - "packagerPort": 19001, - "packagerPid": 12109 + "expoServerPort": null, + "packagerPort": null, + "packagerPid": null } \ No newline at end of file diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js index 54aec8b..c0abdd8 100644 --- a/website/src/Auth/Login.js +++ b/website/src/Auth/Login.js @@ -8,6 +8,7 @@ import headerLogo from 'images/deighton.png' import { versionInfo } from '../version' import { FormBinder } from 'react-form-binder' import { reactAutoBind } from 'auto-bind2' +import { sizeInfo } from 'ui/style' export class Login extends React.Component { static propTypes = { @@ -38,7 +39,7 @@ export class Login extends React.Component { reactAutoBind(this) this.state = { waitModal: false, - messageModal: null, + messageModal: { icon: 'hold', message: 'Wait there just a second', detail: 'This is just a test' }, binder: new FormBinder({}, Login.bindings) } } @@ -77,7 +78,7 @@ export class Login extends React.Component { this.setState({ binder: new FormBinder({ email: this.state.binder.getFieldValue('email').value }, Login.bindings), waitModal: false, - messageModal: { title: 'Login Error...', message: `Unable to login. ${error.message}` } + messageModal: { icon: 'hold', message: `Unable to login`, detail: error.message } }) }) } @@ -126,11 +127,11 @@ export class Login extends React.Component { - + - + @@ -148,8 +149,9 @@ export class Login extends React.Component { ) diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js index 0f1a1e2..9169e8d 100644 --- a/website/src/Modal/MessageModal.js +++ b/website/src/Modal/MessageModal.js @@ -1,31 +1,50 @@ import React from 'react' import PropTypes from 'prop-types' -import { Modal, Button, Column, Text } from 'ui' +import { Modal, Button, Column, Row, Text, Icon } from 'ui' +import { sizeInfo } from 'ui/style' export class MessageModal extends React.Component { static propTypes = { open: PropTypes.bool, - title: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, message: PropTypes.string.isRequired, + detail: PropTypes.string, onDismiss: PropTypes.func } render() { - const { onDismiss, open } = this.props + const { onDismiss, open, icon, message, detail } = this.props return ( - - - - {this.props.title} - - - {this.props.message} - - - - - + + + + + + + + + + {message} + + + {detail} + + + + + + + + + + + + + + + + ) } diff --git a/website/src/assets/icons/folder-icon.png b/website/src/assets/icons/folder-icon.png deleted file mode 100644 index 7d9376632982901918e6ac808b3510e38210fe5f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2271 zcmds3dsGs57XIPee5LkK6WOMcCT%qxUqgbuCLc|-n)xV&VA9POIwGcsqUUIu&vJZ} zlhh|ghO=iGC?bG~!G@7}Ug zCy!fga@qs{unGx28V&$N-$HN=kAgx8Df=rTFL!ZPTOD@H;-4{fFt@9pSdA z+jn{I*|&4T=Z=@ea+^-HI^MZ!0Qs^zLKT=f|D$(=ad7ej zwK-Tc1G`;8O(O`x8GthL{{(!$0&;w-VC-pC6?9BvaE8~(g5#wRwN|f<5&J ze!I|D;QO&>utgK8C}*hz@fRsx9no4X7U@s=i{gs-Dg#Y?zIJfsjaWGbHz+@V0kXKY zMOGyPon8@WkASb7lG_&+-*5wPzVZqqneu%bZ<#fMx9LLKMwh;V_}?WKT$jwLR4`U8 z4$Vf|IwU24u^*I5MFs<%v^Do238%m?&_*SVj?^9av$3=n`$)-(qA@t+$O+RK@i674 z_SP8u=Yco}ZLYkQ%Droto~W1{gL^~bOQA6G19e#t%m-X`G*-%eMbPFv=f)zHm z^ulSFCFA@-EH5=byqjss6SqOc&K$aQN&Sj2&S%#vF&s9T}mc9lVcR!WAMoray$Z0fTlOu@bkqQ{&}Pi@DNxlG88c^ax5(!4{uNw2T@>K z)*=>~qt$tG`^%3-;3I{iz0Wd@rM-9f6uJ=aA{ieP*gtfLFz`G_8TiNyTbtWC$2Xm;NsVg|`ylQ0WYFQmum!p{9+_a)Dm;7+G(Thw3#-iUj(wi8p*HO3`{jY*B)x zi>jB}@KJR!FqJ_E5gFGV75evIG=13&J1RXw=icY2{i}Xs*6&SA@$!#0M%as^<7RoS zmgIc!utn4CqCS?SqkPc>+bBQH0US)jlH;oJ1+Ks|C#{t7K$y|D6*L}HL+`QG{%O^K_cjN;5Z~l= zP2UCVAr;UJje%?RAMl>uqT;_9&-4%X-b|;AU(I6q2%63v4jY+v$%|T;de@o%OjG;J z%V=gwTq53a7IVOpiE2mI8PFPU(8kcGBRVUf$=(i!!MoUQ|rD z2p8KSVq3&*VShE>m(BIUwp_-;SNziwt$1v4PGG@oY`y#}2I|QS3)PWjUE?67N;14` z!sNG?rB?R7(1hyO*O!!|@Man2PR$oNQJ>(4_|{JEQLpXE_lVUnMJi>kM!b`ir9URg zCX?;RPX!_o7dGjL=u+1Kw*+#^2oY3O2A(OASb#IF8m4ZE1#eAQdt1rc&ls|dCiw}F zF*oJ~jJ z#*)bHh9B?`JPiz<72kt9bw?xhyCS^;2dV0_Pji;IO zY6dbo4T~A#Pt93SsG~BwCE(YTwRtk}+z1=7C+CMP!T6e0OMs!}37v`eJnB96!1>Z` z;=E=}ob$Qam36T?Qw!xcs@wv&MgpR4n;DR`Prcw#i`kPK#mby(JSz005i~A{(y*9# zp51TBG2u~h@XDG^;_hZm4l&%yk0EgcS5|{vHJ4n&mzn=I9yoZT@(&nqvk&anWra!- zM9Dv9RoPcf!mKfPt+RE~AbUK-E>Ixa3okv~2O`U427#>`IVu#Vj2=Q`EXeeYKHu3o z_^0kU5)k)p<47}l@McOlGc7OXK_h|E>r(`_q%lKLsLx_Z62LWh*5vR>pAx-7K=eBU zGRcD2%8USQI3XGlw2X$B6L7{)mM4Pcd-)`q z{jN1^jy739Y>fd0jL%S)=8+27X0y)(kX5qw;XRoFGAxrVf#705#R;Hb3!ij|Big{D z9`B@sj_d6UTKko?R|<$C1E|tUP*mWvXKcG9!EZzr%z4}tJLjzb>)OCU%{M0~qqW_y z0?Peu0hp6j5oT+B{-AH&2_@k7rll7gOzYJCOoKqCmRo(d_7FfuT`ONS@XD=aI6N@( zlI6ZuyVAQAfMU9@$vUA@WM?J-fend)A!M2_IkIgy0X|hGdk`b6AIKO#VE*RTPPn5L zkL3+&JkMczGQ6JtgG}bXZJ{84nXd6nOnl>%zi^vmsF?~LcaeEIh20@y4cPqFTJzN~w_GF7^ zo6hgXU~0usVKZZnUt&^Cc^>nlof|GkI1+tbmI7tIZK2eAwrNX^f$Wx^FZoz55I0)m zd|ni_b!LMyW`&R34kx-Il?VNxSn%LBXuMiA>Y!u9US)c|w5~A9%?&qb&e6%R@&tQ* z42qiyD~jPWu}vntB=yS7c8e1keJ}UJ?7J!Bj*@G$%)}}QpWl!7mnj3m?9Nx{A!>bo zXnr(;Zs3>kWlhi`)^$;tR)0pA8VI_$S7Q#^$y#d-~mbR~Fws3vvkf4p!h> zGURPAR85B1BvrqLPKq=npPx}G#I}oV#4D@irzlD9W+Te3r&H>+`gP79T}Pb}rs>rt zr|Sw*G!bE0vhMDFueQYKG~a`Wn*GggeLhV^ZKjYUp&N~tD{VOXbG@gKkV_3!KqHbk zE42D2Ny$AmDyU%j?djRo;olAIGM*ekLm#-D| z1yG_`aFhA*2+{66o?W3Zc(IwG?6)-pnIbl6`w~C6QQGGTYf$=z3R2^93ia!>imscE z>WDagmS${-I5{#FPs<7znfsSJ)^UzKHVs9q;sldk{wW=91+SAAb&7@@nkhF z(-)f}H9(*iXn9KGX`^-fzZWb+r$~&jy2!n<#8$Kv3taKed8l`Ww+Ok;Xf=}f1lcl9 zc2ZBu6134G={eGxiKzc~ixG#xklJBZ!pSN!r>Nl!hZ!FeYx1MsTsA^O86lz2q;|T% zNuhRKzX>OWIn@Lw^&J}dDx8HrYK^T%j0?&dh$BOJX_$6zyfX$gd^7`eIy3|1ejp{s zV=lo!HLNuepyiA$(<$Rma!+-jtc5VE5EWPJikF`i>8Gmu&zN!Ow1{eG@&xrBscHtr z`cjE13XC`({{@H`+g>}6iEM;JAz{dS;F%l#k*9dXehx-9%p>GtP$y@i-P5l;h!gGT zdFGpO0bEXrD%PV2-T>9BuNLF7b;eBXwDHK73VSgN5f*A8_Z^%uW??OyG1gsh@v`eC zau2LRF(Z1gk0@rq9`-R4&He2P=$NCJd;jUT>5jnYm;T?*HKOOzcH^C|UTQDTM-E@k z)zw2=Dgd?u1rF50R$xHbiUX;owWE4V(LAf&@LeQUmed~OJN<(2k%yZ*0BgmphFe`D zVBQ#452M0ukezl^G^$sDc?S2@-$$_ONiXq4vf-y$==&6AHG>c}p8P47gPE!SQ&%MpM2&XvQzN;*?i5O5NC + + + hold + Created with Sketch. + + + + + + + + + diff --git a/website/src/assets/icons/open-folder.png b/website/src/assets/icons/open-folder.png deleted file mode 100644 index d05a0781a611b6b3f163bc60e6756ac4380b1c5f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5608 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 LVUVTgaN+*|^+~ + onClick={onClick} name={name} visible={visible}> {content} ) diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js index 46887b4..0b0edae 100644 --- a/website/src/ui/Button.js +++ b/website/src/ui/Button.js @@ -2,12 +2,12 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' import style from './Button.style' +import { sizeInfo } from './style' class Button extends Component { static propTypes = { submit: PropTypes.bool, children: PropTypes.node, - width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), visible: PropTypes.bool, disabled: PropTypes.bool, name: PropTypes.string, @@ -15,11 +15,11 @@ class Button extends Component { } render() { - const { name, children, submit, width, visible, disabled, onClick } = this.props + const { name, children, submit, visible, disabled, onClick } = this.props return ( ) diff --git a/website/src/ui/Column.js b/website/src/ui/Column.js index b6d6ed6..e9977f5 100644 --- a/website/src/ui/Column.js +++ b/website/src/ui/Column.js @@ -6,13 +6,14 @@ class Column extends Component { static propTypes = { children: PropTypes.node, minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), } render() { - const { children, minHeight } = this.props + const { children, minHeight, height } = this.props return ( -
{children}
+
{children}
) } } @@ -22,18 +23,15 @@ Column.Item = Radium(class StackLayoutItem extends Component { children: PropTypes.node, minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), - paddingTop: PropTypes.number, - paddingBottom: PropTypes.number, - padding: PropTypes.number, grow: PropTypes.bool } render() { - const { children, grow, height, minHeight, padding, paddingTop, paddingBottom } = this.props + const { children, grow, height, minHeight } = this.props const flexGrow = grow ? 1 : null return ( -
+
{children}
) diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js index fc8f09e..b81c08e 100644 --- a/website/src/ui/Icon.js +++ b/website/src/ui/Icon.js @@ -17,6 +17,7 @@ export default class Icon extends Component { static svgs = { logout: require('icons/logout.svg'), profile: require('icons/profile.svg'), + hold: require('icons/hold.svg'), placeholder: require('icons/placeholder.svg'), } diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js index 409192d..111cd9b 100644 --- a/website/src/ui/Modal.js +++ b/website/src/ui/Modal.js @@ -8,16 +8,23 @@ class Modal extends Component { static propTypes = { children: PropTypes.node, open: PropTypes.bool, - // TODO: onCancel: PropTypes.func, + width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + // TODO: onCancel: PropTypes.func <- for handling ESC & enter key + } + + static defaultProps = { + width: '60%', } // TODO: Capture ESC key https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery render() { + const { open, children, width } = this.props + return ( - -
- {this.props.children} + +
+ {children}
) diff --git a/website/src/ui/Modal.style.js b/website/src/ui/Modal.style.js index 4b632f6..1a1cc83 100644 --- a/website/src/ui/Modal.style.js +++ b/website/src/ui/Modal.style.js @@ -1,11 +1,9 @@ +import { colorInfo } from './style' + export default { modal: { zIndex: 101, - background: '#FFFFFF', - margin: 0, - padding: '18px 24px', - width: '80%', - border: '1px solid $border-primary', + background: colorInfo.modalBackground, borderRadius: 4, boxShadow: '0 0 25px #000000' } diff --git a/website/src/ui/Row.js b/website/src/ui/Row.js index 63250fb..01c8958 100644 --- a/website/src/ui/Row.js +++ b/website/src/ui/Row.js @@ -5,14 +5,15 @@ import PropTypes from 'prop-types' class Row extends Component { static propTypes = { children: PropTypes.node, - minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]) + minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), } render() { - const { children, minWidth } = this.props + const { children, width, minWidth } = this.props return ( -
{children}
+
{children}
) } } diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js index 625e9b2..5f174d7 100644 --- a/website/src/ui/Text.js +++ b/website/src/ui/Text.js @@ -8,23 +8,30 @@ class Text extends Component { size: PropTypes.string, margin: PropTypes.number, children: PropTypes.node, - tone: PropTypes.string + tone: PropTypes.string, + width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + align: PropTypes.string, } static defaultProps = { size: 'medium', tone: 'normal', - margin: 0 + margin: 0, + align: 'left', } render() { + const { margin, width, align } = this.props + return ( {this.props.children} ) } diff --git a/website/src/ui/style.js b/website/src/ui/style.js index 13e5280..41a1aea 100644 --- a/website/src/ui/style.js +++ b/website/src/ui/style.js @@ -7,13 +7,16 @@ export const colorInfo = { headerButtonBackground: '#FAFAFA', headerButtonBackgroundHover: '#DADADA', disabledButtonBackground: '#A0A0A0', + modalBackground: '#FFFFFF', } export const sizeInfo = { headerHeight: 60, imageMargin: 5, // The margin around images iconMargin: 10, // The margin around icons - headerBorderWidth: 1 + headerBorderWidth: 1, + buttonHeight: 40, + minButtonWidth: 100, } export const fontInfo = {