Fix qr code screen for small screens on desktop (keybase#6237)

* cleanup and scrollable qr codes * parent container fix
adetokunbo · Mar 28, 2017 · a79deed · a79deed
1 parent b7974c0
commit a79deed
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 88 deletions.
diff --git a/shared/login/register/code-page/index.js b/shared/login/register/code-page/index.js
@@ -8,19 +8,9 @@ import RenderCodePage from './index.render'
 import type {Props} from './index.render'
 import {connect} from 'react-redux'
 
-type State = {
-  enterText: string,
-}
-
-class CodePage extends Component<void, Props, State> {
-  state: State;
-
-  constructor (props: Props) {
-    super(props)
-
-    this.state = {
-      enterText: '',
-    }
+class CodePage extends Component<void, Props, {enterText: string}> {
+  state = {
+    enterText: '',
   }
 
   render () {

diff --git a/shared/login/register/code-page/index.render.desktop.js b/shared/login/register/code-page/index.render.desktop.js
@@ -16,126 +16,121 @@ import {getStyle} from '../../../common-adapters/text'
 const SubTitle = ({usePhone}) => (
   <p>
     <Text type='Body'>In the Keybase app on your {usePhone ? 'phone' : 'computer'}, go to</Text>
-    <Icon type='iconfont-identity-devices' style={{paddingLeft: globalMargins.xtiny, paddingRight: globalMargins.xtiny, color: globalColors.black_75}} />
+    <Icon type='iconfont-identity-devices' style={{color: globalColors.black_75, paddingLeft: globalMargins.xtiny, paddingRight: globalMargins.xtiny}} />
     <Text type='Body'>Devices > Add a new device.</Text>
   </p>
 )
 
-class CodePageRender extends Component<void, Props, void> {
-  _renderText () {
-    return (
-      <Container
-        style={stylesContainer}
-        onBack={this.props.onBack}>
-
-        <Text type='Header' style={{marginTop: 60}}>Type in text code</Text>
-        <p style={{marginTop: 10}}>
-          <Text type='Body'>Run&nbsp;</Text><Text type='TerminalInline'>keybase device add</Text><Text type='Body'>&nbsp;on your other device and type this code there: </Text>
-        </p>
-        <Icon type='icon-computer-text-code-48' style={{marginTop: 28}} />
-        <Text type='Body' style={stylesPaperkey}>{this.props.textCode}</Text>
-      </Container>
-    )
-  }
+const CodePageText = ({onBack, textCode}) => (
+  <Container style={stylesContainer} onBack={onBack}>
+    <Text type='Header' style={{marginTop: 60}}>Type in text code</Text>
+    <p style={{marginTop: 10}}>
+      <Text type='Body'>Run&nbsp;</Text><Text type='TerminalInline'>keybase device add</Text><Text type='Body'>&nbsp;on your other device and type this code there: </Text>
+    </p>
+    <Icon type='icon-computer-text-code-48' style={{marginTop: 28}} />
+    <Text type='Body' style={stylesPaperkey}>{textCode}</Text>
+  </Container>
+)
 
-  _otherIsPhone () {
-    return [codePageDeviceRoleExistingPhone, codePageDeviceRoleNewPhone].indexOf(this.props.otherDeviceRole) !== -1
-  }
+const CodePageCode = ({onBack, otherDeviceRole, setCodePageMode, qrCode}) => (
+  <Container
+    style={{...stylesContainer, alignItems: 'stretch'}}
+    onBack={onBack}>
+    <div style={{...globalStyles.flexBoxColumn, alignItems: 'center', flex: 1, overflowY: 'auto'}}>
+      <Text style={{marginBottom: 11, marginTop: 38}} type='Header'>Scan this QR code</Text>
+      <SubTitle usePhone={_otherIsPhone(otherDeviceRole)} />
+      <div style={stylesQrContainer}>
+        <div style={{background: `url("${qrCode}")`, ...stylesQr}} />
+      </div>
+      <p style={{...globalStyles.flexBoxRow, alignItems: 'flex-end'}} onClick={() => setCodePageMode(codePageModeShowText)}>
+        <Icon style={{marginRight: globalMargins.xtiny}} type='icon-phone-text-code-32' />
+        <Text type='BodyPrimaryLink'>Show text code instead</Text>
+      </p>
+    </div>
+  </Container>
+)
 
-  _renderCode () {
-    const qr = {
-      background: `url("${this.props.qrCode}")`,
+const CodePageEnterText = ({onBack, otherDeviceRole, enterText, onChangeText, textEntered, setCodePageMode}) => (
+  <Container
+    style={stylesContainer}
+    onBack={onBack}>
+    <Text style={{marginBottom: 11, marginTop: 38}} type='Header'>Type in text code</Text>
+    <SubTitle usePhone={_otherIsPhone(otherDeviceRole)} />
+    <Icon style={{marginBottom: 40, marginTop: 30}} type='icon-phone-text-code-32' />
+    <Input
+      hintText='opp blezzard tofi pando agg whi pany yaga jocket daubt bruwnstane hubit yas'
+      floatingHintTextOverride='Text code'
+      multiline={true}
+      value={enterText}
+      onChangeText={onChangeText}
+    />
+    <Button
+      type='Primary'
+      style={{alignSelf: 'center', marginBottom: globalMargins.large, marginTop: globalMargins.large}}
+      label='Continue'
+      onClick={() => textEntered(codePageModeEnterText)} />
+    {_otherIsPhone(otherDeviceRole) && <p style={{...globalStyles.flexBoxRow, alignItems: 'flex-end'}} onClick={() => setCodePageMode(codePageModeShowCode)}>
+      <Icon style={{marginRight: globalMargins.xtiny}} type='icon-phone-qr-code-32' />
+      <Text type='BodyPrimaryLink' onClick={() => setCodePageMode(codePageModeShowCode)}>Scan QR code instead</Text>
+    </p>
     }
+  </Container>
+)
 
-    return (
-      <Container
-        style={stylesContainer}
-        onBack={this.props.onBack}>
-        <Text style={{marginTop: 38, marginBottom: 11}} type='Header'>Scan this QR code</Text>
-        <SubTitle usePhone={this._otherIsPhone()} />
-        <div style={stylesQrContainer}>
-          <div style={{...qr, ...stylesQr}} />
-        </div>
-        <p style={{...globalStyles.flexBoxRow, alignItems: 'flex-end'}} onClick={() => this.props.setCodePageMode(codePageModeShowText)}>
-          <Icon style={{marginRight: globalMargins.xtiny}} type='icon-phone-text-code-32' />
-          <Text type='BodyPrimaryLink'>Show text code instead</Text>
-        </p>
-      </Container>
-    )
-  }
-
-  _renderEnterText () {
-    return (
-      <Container
-        style={stylesContainer}
-        onBack={this.props.onBack}>
-        <Text style={{marginTop: 38, marginBottom: 11}} type='Header'>Type in text code</Text>
-        <SubTitle usePhone={this._otherIsPhone()} />
-        <Icon style={{marginTop: 30, marginBottom: 40}} type='icon-phone-text-code-32' />
-        <Input
-          hintText='opp blezzard tofi pando agg whi pany yaga jocket daubt bruwnstane hubit yas'
-          floatingHintTextOverride='Text code'
-          multiline={true}
-          value={this.props.enterText}
-          onChangeText={text => this.props.onChangeText(text)}
-        />
-        <Button type='Primary' style={{alignSelf: 'center', marginTop: globalMargins.large, marginBottom: globalMargins.large}} label='Continue' onClick={() => this.props.textEntered(codePageModeEnterText)} />
-        {this._otherIsPhone() && <p style={{...globalStyles.flexBoxRow, alignItems: 'flex-end'}} onClick={() => this.props.setCodePageMode(codePageModeShowCode)}>
-          <Icon style={{marginRight: globalMargins.xtiny}} type='icon-phone-qr-code-32' />
-          <Text type='BodyPrimaryLink' onClick={() => this.props.setCodePageMode(codePageModeShowCode)}>Scan QR code instead</Text>
-        </p>
-        }
-      </Container>
-    )
-  }
+function _otherIsPhone (otherDeviceRole) {
+  return [codePageDeviceRoleExistingPhone, codePageDeviceRoleNewPhone].indexOf(otherDeviceRole) !== -1
+}
 
+class CodePageRender extends Component<void, Props, void> {
   render () {
     switch (this.props.mode) {
       case codePageModeShowCode:
-        return this._renderCode()
+        return <CodePageCode {...this.props} />
       case codePageModeEnterText:
-        return this._renderEnterText()
+        return <CodePageEnterText {...this.props} />
       case codePageModeShowText:
-        return this._renderText()
+        return <CodePageText {...this.props} />
     }
     console.warn(`No mode prop passed! Mode: ${this.props.mode}`)
     return (<div />)
   }
 }
 
 const stylesContainer = {
-  flex: 1,
   alignItems: 'center',
+  flex: 1,
 }
 const stylesPaperkey = {
   ...getStyle('Header', 'Normal'),
   ...globalStyles.fontTerminal,
   ...globalStyles.selectable,
   color: globalColors.darkBlue,
   display: 'inline-block',
-  maxWidth: 460,
   lineHeight: '20px',
   marginTop: 30,
+  maxWidth: 460,
   textAlign: 'center',
 }
 const stylesQrContainer = {
   ...globalStyles.flexBoxColumn,
   alignItems: 'center',
-  marginTop: 35,
-  marginBottom: 47,
-  padding: 15,
   alignSelf: 'stretch',
+  backgroundColor: globalColors.blue2,
+  marginBottom: 47,
   marginLeft: -65,
   marginRight: -65,
-  backgroundColor: globalColors.blue2,
+  marginTop: 35,
+  minHeight: 220,
+  minWidth: 220,
+  padding: 15,
 }
 const stylesQr = {
-  width: 190,
-  height: 190,
   backgroundPosition: '-22px -22px',
   backgroundRepeat: 'no-repeat',
   backgroundSize: '234px 234px',
+  height: 190,
   imageRendering: 'pixelated',
+  width: 190,
 }
 
 export default CodePageRender