summaryrefslogtreecommitdiff
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/addressbook/addressbook.less34
-rw-r--r--ui/app/components/addressbook/index.js80
-rw-r--r--ui/app/components/layout/index.js62
-rw-r--r--ui/app/components/layout/layout.less32
-rw-r--r--ui/app/components/main_panel/email_section.js26
-rw-r--r--ui/app/components/main_panel/main_panel.less1
-rw-r--r--ui/app/components/panel_switcher.js2
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)}
}