From 65c2c18653feb5f6485710e9656b19e368bb2826 Mon Sep 17 00:00:00 2001 From: elijah Date: Mon, 5 Sep 2016 17:34:11 -0700 Subject: [feature] webkit support: get the js and css working in older webkit engines --- www/app/components/main_panel/email_section.js | 48 +++++++++++++++++++++ www/app/components/main_panel/index.js | 27 +++++++++++- www/app/components/main_panel/main_panel.less | 60 ++++++++++++++------------ 3 files changed, 105 insertions(+), 30 deletions(-) (limited to 'www/app/components/main_panel') diff --git a/www/app/components/main_panel/email_section.js b/www/app/components/main_panel/email_section.js index e69de29..a6525d9 100644 --- a/www/app/components/main_panel/email_section.js +++ b/www/app/components/main_panel/email_section.js @@ -0,0 +1,48 @@ +import React from 'react' +//import { Button, Glyphicon, Alert } from 'react-bootstrap' +import SectionLayout from './section_layout' +import Account from 'models/account' +import Spinner from 'components/spinner' +import bitmask from 'lib/bitmask' + +export default class EmailSection extends React.Component { + + static get defaultProps() {return{ + account: null + }} + + constructor(props) { + super(props) + this.state = { + status: null + } + this.openKeys = this.openKeys.bind(this) + this.openApp = this.openApp.bind(this) + this.openPrefs = this.openPrefs.bind(this) + + console.log('email constructor') + } + + openKeys() {} + openApp() {} + openPrefs() {} + + render () { + //let message = null + //if (this.state.error) { + // // style may be: success, warning, danger, info + // message = ( + // {this.state.error} + // ) + //} + let button = null + if (this.state.status == 'ready') { + button = + } + return ( + +

inbox:

+ + ) + } +} diff --git a/www/app/components/main_panel/index.js b/www/app/components/main_panel/index.js index 910d58b..3cc6c11 100644 --- a/www/app/components/main_panel/index.js +++ b/www/app/components/main_panel/index.js @@ -7,10 +7,13 @@ import React from 'react' import App from 'app' import Login from 'components/login' +import Account from 'models/account' +import DummyAccount from 'models/dummy_account' import './main_panel.less' import AccountList from './account_list' import UserSection from './user_section' +import EmailSection from './email_section' export default class MainPanel extends React.Component { @@ -29,9 +32,12 @@ export default class MainPanel extends React.Component { componentWillMount() { if (this.props.initialAccount) { + console.log(Account.list) + Account.add(this.props.initialAccount) + Account.add(new DummyAccount(this.props.initialAccount)) this.setState({ account: this.props.initialAccount, - accounts: [this.props.initialAccount] + accounts: Account.list }) } } @@ -39,16 +45,33 @@ export default class MainPanel extends React.Component { activateAccount(account) { this.setState({ account: account, - accounts: [account] + accounts: Account.list }) } + //setAccounts(accounts) { + // this.setState({ + // accounts: accounts + // }) + //} + render() { + let emailSection = null + let vpnSection = null + + if (this.state.account.authenticated) { + if (this.state.account.hasEmail) { + emailSection = + } + } + return (
+ {vpnSection} + {emailSection}
) diff --git a/www/app/components/main_panel/main_panel.less b/www/app/components/main_panel/main_panel.less index 3172bba..4e0ecb0 100644 --- a/www/app/components/main_panel/main_panel.less +++ b/www/app/components/main_panel/main_panel.less @@ -1,5 +1,6 @@ // The space around account entries: @accounts-padding: 8px; +@accounts-corner: 6px; @accounts-width: 200px; // @@ -10,26 +11,26 @@ position: absolute; height: 100%; width: 100%; - display: flex; - flex-direction: row; + display: -webkit-flex; + -webkit-flex-direction: row; > .body { - flex: 1 1 auto; + -webkit-flex: 1 1 auto; overflow: auto; } .accounts { - flex: 0 0 auto; + -webkit-flex: 0 0 auto; overflow-y: auto; overflow-x: hidden; - display: flex; - flex-direction: column; + display: -webkit-flex; + -webkit-flex-direction: column; ul { - flex: 1 1 1000px; + -webkit-flex: 1 1 1000px; } .btn-toolbar { - flex: 0 0 auto; + -webkit-flex: 0 0 auto; } } @@ -40,6 +41,7 @@ // Style // + .main-panel > .body { padding: 20px; } @@ -64,8 +66,8 @@ padding: 15px; background-color: #444; margin-bottom: @accounts-padding; - border-top-left-radius: @accounts-padding; - border-bottom-left-radius: @accounts-padding; + border-top-left-radius: @accounts-corner - 1; + border-bottom-left-radius: @accounts-corner - 1; z-index: 100; } @@ -98,8 +100,8 @@ .main-panel .accounts li.active span.arc { display: block; - height: @accounts-padding; - width: @accounts-padding; + height: @accounts-corner; + width: @accounts-corner; background-color: white; position: absolute; right: 0; @@ -107,11 +109,11 @@ .main-panel .accounts li.active span.arc.top { top: 0; - margin-top: -@accounts-padding; + margin-top: -@accounts-corner; } .main-panel .accounts li.active span.arc.bottom { bottom: 0; - margin-bottom: -@accounts-padding; + margin-bottom: -@accounts-corner; } .main-panel .accounts li.active span.arc:after { display: block; @@ -119,23 +121,23 @@ border-radius: 100%; height: 0px; width: 0px; - margin-left: -@accounts-padding; + margin-left: -@accounts-corner; } .main-panel .accounts li.active span.arc.top:after { - border: @accounts-padding solid transparent; - border-right: @accounts-padding solid #333; - margin-top: -@accounts-padding; + border: @accounts-corner solid transparent; + border-right: @accounts-corner solid #333; + margin-top: -@accounts-corner; + -webkit-transform: rotate(45deg); transform: rotate(45deg); } .main-panel .accounts li.active span.arc.bottom:after { - border: @accounts-padding solid #333; + border: @accounts-corner solid #333; } .main-panel .accounts .btn.expander { margin-right: @accounts-padding; } - // // SECTIONS // @@ -147,22 +149,23 @@ // service sections layout .main-panel .service-section { - display: flex; - flex-direction: row; + display: -webkit-flex; + -webkit-flex-direction: row; > .icon { - flex: 0 0 auto; + -webkit-flex: 0 0 auto; } > .body { - flex: 1 1 auto; + -webkit-flex: 1 1 auto; } > .buttons { - flex: 0 0 auto; + -webkit-flex: 0 0 auto; } > .status { - flex: 0 0 auto; - display: flex; - align-items: center; + -webkit-flex: 0 0 auto; + display: -webkit-flex; + -webkit-align-items: center; } + } .main-panel .service-section div { @@ -175,6 +178,7 @@ background: #f6f6f6; border-radius: 4px; padding: 10px; + margin-bottom: 10px; &.wide-margin { padding: 20px 20px 20px 10px; // arbitrary, looks nice } -- cgit v1.2.3