ui: add initial addressbook panel

7 files changed, 223 insertions, 14 deletions

diff --git a/ui/app/components/addressbook/addressbook.less b/ui/app/components/addressbook/addressbook.less
new file mode 100644
index 00000000..53e505b6
--- /dev/null
+++ b/ui/app/components/addressbook/addressbook.less
@@ -0,0 +1,34 @@
+
+.body {
+  // background-color: #333;
+}
+
+.darkBg {
+  background-color: #333;
+  padding: 8px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+
+  display: -webkit-flex;
+  display: flex;
+
+  .header {
+    .title {
+      font-weight: bold;
+      color: white;
+      display: inline-block;
+      //margin-left: 8px;
+      font-size: 120%;
+      h1 {
+        margin: 0px;
+      }
+    }
+  }
+}
+
+.lightFg {
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 15px;
+}
\ No newline at end of file
diff --git a/ui/app/components/addressbook/index.js b/ui/app/components/addressbook/index.js
new file mode 100644
index 00000000..74c119d3
--- /dev/null
+++ b/ui/app/components/addressbook/index.js
@@ -0,0 +1,80 @@
+//
+// Interface to the key manager
+//
+
+
+import React from 'react'
+import App from 'app'
+import { ButtonToolbar, Button, Glyphicon, Alert } from 'react-bootstrap'
+
+import {VerticalLayout, Row} from 'components/layout'
+import bitmask from 'lib/bitmask'
+import './addressbook.less'
+
+export default class Addressbook extends React.Component {
+
+  static get defaultProps() {return{
+    account: null
+  }}
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      keys: null,
+      errorMsg: ""
+    }
+    this.close = this.close.bind(this)
+  }
+
+  componentWillMount() {
+    bitmask.keys.list(true).then(keys => {
+      this.setState({keys: keys})
+    }, error => {
+      this.setState({errorMsg: error})
+    })
+  }
+
+  close() {
+    App.show('main', {initialAccount: this.props.account})
+  }
+
+  render() {
+    let alert = null
+    let keyList = null
+
+    if (this.state.errorMsg) {
+      alert = (
+        <Alert bsStyle="danger">{this.state.errorMsg}</Alert>
+      )
+    }
+
+    keyList = <b>list of keys goes here</b>
+
+    let buttons = (
+      <Button onClick={this.close} className="btn-inverse">
+        <Glyphicon glyph="remove" />&nbsp;
+        Close
+      </Button>
+    )
+
+    let page = (
+      <VerticalLayout className="darkBg">
+        <Row className="header" size="shrink" gutter="8px">
+          <div className="pull-right">
+            {buttons}
+          </div>
+          <div className="title">
+            {this.props.account.address}
+            <h1>Addressbook</h1>
+          </div>
+        </Row>
+        <Row className="lightFg" size="expand">
+          {alert}
+          {keyList}
+        </Row>
+      </VerticalLayout>
+    )
+    return page
+  }
+
+}
diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
index 8e7c4b58..b32961a7 100644
--- a/ui/app/components/layout/index.js
+++ b/ui/app/components/layout/index.js
@@ -4,7 +4,8 @@ import './layout.less'
 
 class HorizontalLayout extends React.Component {
   static get defaultProps() {return{
-    equalWidths: false
+    equalWidths: false,
+    className: ''
   }}
 
   constructor(props) {
@@ -12,7 +13,7 @@ class HorizontalLayout extends React.Component {
   }
 
   render() {
-    let className = "horizontal-layout"
+    let className = "horizontal-layout " + this.props.className
     if (this.props.equalWidths) {
       className = className + " equal" + this.props.children.length
     }
@@ -25,17 +26,70 @@ class HorizontalLayout extends React.Component {
 }
 
 class Column extends React.Component {
+  static get defaultProps() {return{
+    className: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let className = "layout-column " + this.props.className
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class VerticalLayout extends React.Component {
+  static get defaultProps() {return{
+    equalWidths: false,
+    className: ''
+  }}
+
   constructor(props) {
     super(props)
   }
 
   render() {
+    let className = "vertical-layout " + this.props.className
+    if (this.props.equalWidths) {
+      className = className + " equal" + this.props.children.length
+    }
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Row extends React.Component {
+  static get defaultProps() {return{
+    className: '',
+    size: 'expand',
+    gutter: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let style = {}
+    if (this.props.gutter) {
+      style = {marginBottom: this.props.gutter}
+    }
+    let className = ["layout-row", this.props.className, this.props.size].join(" ")
     return (
-      <div className="layout-column">
+      <div style={style} className={className}>
         {this.props.children}
       </div>
     )
   }
 }
 
-export {HorizontalLayout, Column}
\ No newline at end of file
+export {HorizontalLayout, VerticalLayout, Column, Row}
\ No newline at end of file
diff --git a/ui/app/components/layout/layout.less b/ui/app/components/layout/layout.less
index dae99aa3..81e61afb 100644
--- a/ui/app/components/layout/layout.less
+++ b/ui/app/components/layout/layout.less
@@ -22,4 +22,34 @@
 .horizontal-layout.equal1 > .layout-column {width: 100%;}
 .horizontal-layout.equal2 > .layout-column {width: 50%;}
 .horizontal-layout.equal3 > .layout-column {width: 33.33%;}
-.horizontal-layout.equal4 > .layout-column {width: 25%;}
\ No newline at end of file
+.horizontal-layout.equal4 > .layout-column {width: 25%;}
+
+.vertical-layout {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  > .layout-row {
+    //display: -webkit-flex;
+    //display: flex;
+    margin-bottom: @gutter;
+    &.expand {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+    }
+    &.shrink {
+      -webkit-flex: 0 1 auto;
+      flex: 0 1 auto;
+    }
+  }
+  > .layout-row:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.vertical-layout.equal1 > .layout-row {width: 100%;}
+.vertical-layout.equal2 > .layout-row {width: 50%;}
+.vertical-layout.equal3 > .layout-row {width: 33.33%;}
+.vertical-layout.equal4 > .layout-row {width: 25%;}
diff --git a/ui/app/components/main_panel/email_section.js b/ui/app/components/main_panel/email_section.js
index 2bb5865d..c86188eb 100644
--- a/ui/app/components/main_panel/email_section.js
+++ b/ui/app/components/main_panel/email_section.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Glyphicon, Alert } from 'react-bootstrap'
+import { Button, Glyphicon, Alert, ButtonToolbar } from 'react-bootstrap'
 
 import SectionLayout from './section_layout'
 import IMAPButton from './imap_button'
@@ -7,6 +7,7 @@ import IMAPButton from './imap_button'
 import Account from 'models/account'
 import Spinner from 'components/spinner'
 import bitmask from 'lib/bitmask'
+import App from 'app'
 
 const GENERAL_NOTICES = [
   "KEYMANAGER_KEY_FOUND",  // (address)
@@ -66,17 +67,17 @@ export default class EmailSection extends React.Component {
       expanded: true
     }
     this.expand    = this.expand.bind(this)
-    this.openKeys  = this.openKeys.bind(this)
+    this.openKeys = this.openKeys.bind(this)
     this.openApp   = this.openApp.bind(this)
     this.openPrefs = this.openPrefs.bind(this)
     this.logEvent  = this.logEvent.bind(this)
   }
 
   componentWillMount() {
-    let events = [].concat(GENERAL_NOTICES, ACCOUNT_NOTICES, STATUSES, STATUS_ERRORS)
-    for (let event of events) {
-      bitmask.events.register(event, this.logEvent)
-    }
+    //let events = [].concat(GENERAL_NOTICES, ACCOUNT_NOTICES, STATUSES, STATUS_ERRORS)
+    //for (let event of events) {
+    //  bitmask.events.register(event, this.logEvent)
+    //}
     bitmask.mail.status().then(status => {
       // either 'running' or 'disabled'
       let newstatus = 'error'
@@ -93,8 +94,12 @@ export default class EmailSection extends React.Component {
     console.log("EVENT: " + event, msg)
   }
 
-  openKeys() {}
+  openKeys() {
+    App.show('addressbook', {account: this.props.account})
+  }
+
   openApp() {}
+
   openPrefs() {}
 
   expand() {
@@ -113,14 +118,17 @@ export default class EmailSection extends React.Component {
     let body = null
     let header = <h1>Mail</h1>
     if (this.state.status == 'on') {
-      button = <Button onClick={this.openApp}>Open Email</Button>
+      // button = <Button onClick={this.openKeys}>Addressbook</Button>
     }
     if (this.state.status == 'disabled') {
       header = <h1>Mail Disabled</h1>
     }
     if (this.state.expanded) {
       body = (
-        <IMAPButton account={this.props.account} />
+        <ButtonToolbar>
+          <IMAPButton account={this.props.account} />
+          <Button onClick={this.openKeys}>Addressbook</Button>
+        </ButtonToolbar>
       )
     }
     return (
diff --git a/ui/app/components/main_panel/main_panel.less b/ui/app/components/main_panel/main_panel.less
index 7383a6c8..2f4156a0 100644
--- a/ui/app/components/main_panel/main_panel.less
+++ b/ui/app/components/main_panel/main_panel.less
@@ -241,6 +241,7 @@
       padding: 0;
       font-size: @icon-size - 10;
       line-height: @icon-size;
+      word-break: break-all;
     }
   }
   .buttons {
diff --git a/ui/app/components/panel_switcher.js b/ui/app/components/panel_switcher.js
index 2746f005..0e3f0dcd 100644
--- a/ui/app/components/panel_switcher.js
+++ b/ui/app/components/panel_switcher.js
@@ -6,6 +6,7 @@ import Splash from './splash'
 import GreeterPanel from './greeter_panel'
 import MainPanel from './main_panel'
 import Wizard from './wizard'
+import Addressbook from './addressbook'
 
 import App from 'app'
 import 'lib/common'
@@ -55,5 +56,6 @@ export default class PanelSwitcher extends React.Component {
   render_wizard(props)  {return elem(Wizard, props)}
   render_greeter(props) {return elem(GreeterPanel, props)}
   render_main(props)    {return elem(MainPanel, props)}
+  render_addressbook(props) {return elem(Addressbook, props)}
 
 }