From 61c2358b420c4b08c992d5070643c2bf0cea1984 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 18 Jul 2018 11:42:11 -0400
Subject: [PATCH] Add "help" to the modal for device connection flow
---
.../connection-modal/connection-modal.jsx | 2 ++
src/components/modal/modal.css | 11 +++++++++
src/components/modal/modal.jsx | 22 ++++++++++++++++++
src/lib/assets/icon--help.svg | Bin 0 -> 2042 bytes
4 files changed, 35 insertions(+)
create mode 100644 src/lib/assets/icon--help.svg
diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx
index 8d3a0d047..c6566e954 100644
--- a/src/components/connection-modal/connection-modal.jsx
+++ b/src/components/connection-modal/connection-modal.jsx
@@ -27,6 +27,7 @@ const ConnectionModalComponent = props => (
contentLabel={props.name}
headerClassName={styles.header}
headerImage={props.smallDeviceImage}
+ onHelp={props.onHelp}
onRequestClose={props.onCancel}
>
<Box className={styles.body}>
@@ -43,6 +44,7 @@ ConnectionModalComponent.propTypes = {
connectingMessage: PropTypes.node,
name: PropTypes.node,
onCancel: PropTypes.func.isRequired,
+ onHelp: PropTypes.func.isRequired,
phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
smallDeviceImage: PropTypes.string,
title: PropTypes.string.isRequired
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 9a5a035a7..8bf2b6cb8 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -122,3 +122,14 @@ $sides: 20rem;
font-weight: normal;
padding-left: 0;
}
+
+.header-item-help {
+ padding: 0;
+ margin-right: -4.75rem;
+}
+
+.help-button {
+ font-weight: normal;
+ padding-right: 0;
+ font-size: 0.75rem;
+}
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 940af7558..acce21993 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -9,6 +9,7 @@ import Button from '../button/button.jsx';
import CloseButton from '../close-button/close-button.jsx';
import backIcon from '../../lib/assets/icon--back.svg';
+import helpIcon from '../../lib/assets/icon--help.svg';
import styles from './modal.css';
@@ -27,6 +28,26 @@ const ModalComponent = props => (
grow={1}
>
<div className={classNames(styles.header, props.headerClassName)}>
+ {props.onHelp ? (
+ <div
+ className={classNames(
+ styles.headerItem,
+ styles.headerItemHelp
+ )}
+ >
+ <Button
+ className={styles.helpButton}
+ iconSrc={helpIcon}
+ onClick={props.onHelp}
+ >
+ <FormattedMessage
+ defaultMessage="Help"
+ description="Help button in modal"
+ id="gui.modal.help"
+ />
+ </Button>
+ </div>
+ ) : null}
<div
className={classNames(
styles.headerItem,
@@ -82,6 +103,7 @@ ModalComponent.propTypes = {
fullScreen: PropTypes.bool,
headerClassName: PropTypes.string,
headerImage: PropTypes.string,
+ onHelp: PropTypes.func,
onRequestClose: PropTypes.func
};
diff --git a/src/lib/assets/icon--help.svg b/src/lib/assets/icon--help.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2938e8340ebb54dd699f80eaf48794bd383a96a4
GIT binary patch
literal 2042
zcmZuyO>ZJc5WVlO=u9q&1WkSPS6POYg0#78PDw6%bIdFtW3Yf2|NOijK4wUQEP3Wl
z_3Nrvueu*Uf4pwod%HiZciU;ho*LI~pLdJ(b~$bS{Nu~GG@oam9uMzJcUmuwt7#+j
z_R+XiyI!u2*SGg|d-`SfF>T0^lls>TNx5;@W_y@6tK;$QVKO<LPX45Rw_i?#h$f)F
zggks~*4vl=3uH5!bYGj<Cx_qT596`>wcWP+r{iw_;C_E;kIyR?$&33bMhf|7H+F*^
z|JtqE*Y(q-Jpa6VogB_<#^Vd+aedshvsJr!dz_q~&s#0p!}DyuZ=a6s0zw>Dm)-p1
zr2BM@`hJ*I1pm&+(ybRL27HY>9QV7IcG_%r+xGf4zK9BizOOf%>&N;$-v7Npbo<_J
zcZ<cP=C1CyC+rW}-^@c3iXqsDi<?Iu3n#K1>Z^=6_`q31;`%}!N?VBP<}#|GlA;>B
z!76bBMsf3wps10K#Bmv}!rPFszV^Ef)*+DrC*Hm}q+Oy)OpL6=YvL#=xw&~s#iY<3
zTzsLJ1eMj`qKT528=~ri2nP*reh-@|nFS=!6C=r#lg0$J&!R`?s4A$19MAe)f`J+b
z7EL2osD38CM{ijS;XdUdabNW?iyrMnLf;B&RfByB%7oT^1q(+@BxrdL*Q_;^Oc8zP
zVW3e$%#5rVk7`zut7tNdNh_*>&<IAe$){L~hFm*qnJ8wf!MDQ6gDJBWhjkJ|q=GD<
zSK?qSNRAN^O$fb0p2A!b?1sLD5KGK)WIkpw&VgO+re#zZN5#X%5njzhG<(QQ1d@*8
z8l134Km*}w>}O2L5?5=g<RH)pe$%2TJPc8I1GAA!$eoX`!Pzr$p`s)3YNnvc^;owi
zMUm*{cc_(+)VfH8ma3=$=8zm?{1=*|<qRb&0V`u#GlGL<#+QI#DMmuVKvOOdxMZM_
zNiwA>PAW+>K;Pm~m<gr<D0&fUnbq}40u|&@VTq=&OC1p|&>sdW5C@LU#P_I}R4c<)
zcfkVMKxk;4rz=OshM2;@R_95v5E6_~lNxkO-I!lxAE2GBurVYa2BUMR7^YF6iI~(1
zj+h=To}gt;gsHxR)szj=4~*F>1Q0%>5;{*Qykj^PzQPgE3Wq>7APAI&?hhP9aAcNJ
zPYcq75FDalgTNS@A;@q{AvmR;ShrB1kz>@V18EVF(2W;cB+d0;9inJwR)eVkV?IlY
zvCbkq6>y>>_$DyW>+D+{wEvt4-<sPMGhRRMw%3c~$1mNl!F^Qki_3j9S>iIU*X`^d
DG8@UV
literal 0
HcmV?d00001
--
GitLab