From 141702748572a977133ae60ea8b39ce76342d7ce Mon Sep 17 00:00:00 2001 From: elijah Date: Mon, 5 Sep 2016 17:34:11 -0700 Subject: webkit support: get the js and css working in older webkit engines --- src/leap/bitmask_js/app/components/center.js | 23 ++------- src/leap/bitmask_js/app/components/login.js | 2 +- .../app/components/main_panel/email_section.js | 48 +++++++++++++++++ .../bitmask_js/app/components/main_panel/index.js | 27 +++++++++- .../app/components/main_panel/main_panel.less | 60 ++++++++++++---------- .../bitmask_js/app/components/panel_switcher.js | 4 +- .../bitmask_js/app/components/spinner/spinner.css | 20 +++++++- .../bitmask_js/app/components/wizard/wizard.less | 8 +++ 8 files changed, 140 insertions(+), 52 deletions(-) (limited to 'src/leap/bitmask_js/app/components') diff --git a/src/leap/bitmask_js/app/components/center.js b/src/leap/bitmask_js/app/components/center.js index a3b6409a..6fa62128 100644 --- a/src/leap/bitmask_js/app/components/center.js +++ b/src/leap/bitmask_js/app/components/center.js @@ -4,22 +4,6 @@ import React from 'react' -const CONTAINER_CSS = { - position: 'absolute', - display: 'flex', - justifyContent: 'center', - alignContent: 'center', - alignItems: 'center', - top: "0px", - left: "0px", - height: "100%", - width: "100%" -} - -const ITEM_CSS = { - flex: "0 1 auto" -} - class Center extends React.Component { static get defaultProps() {return{ @@ -31,9 +15,12 @@ class Center extends React.Component { } render() { - let style = this.props.width ? Object.assign({width: this.props.width + 'px'}, ITEM_CSS) : ITEM_CSS + let style = null + if (this.props.width) { + style = {width: this.props.width + 'px'} + } return ( -
+
{this.props.children}
diff --git a/src/leap/bitmask_js/app/components/login.js b/src/leap/bitmask_js/app/components/login.js index a1af5498..856bf88f 100644 --- a/src/leap/bitmask_js/app/components/login.js +++ b/src/leap/bitmask_js/app/components/login.js @@ -274,7 +274,7 @@ class Login extends React.Component { if (!this.maySubmit()) { return } this.setState({loading: true}) - let account = new Account(this.state.username) + let account = Account.find(this.state.username) account.login(this.state.password).then( account => { this.setState({loading: false}) diff --git a/src/leap/bitmask_js/app/components/main_panel/email_section.js b/src/leap/bitmask_js/app/components/main_panel/email_section.js index e69de29b..a6525d92 100644 --- a/src/leap/bitmask_js/app/components/main_panel/email_section.js +++ b/src/leap/bitmask_js/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/src/leap/bitmask_js/app/components/main_panel/index.js b/src/leap/bitmask_js/app/components/main_panel/index.js index 910d58b6..3cc6c11f 100644 --- a/src/leap/bitmask_js/app/components/main_panel/index.js +++ b/src/leap/bitmask_js/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/src/leap/bitmask_js/app/components/main_panel/main_panel.less b/src/leap/bitmask_js/app/components/main_panel/main_panel.less index 3172bba5..4e0ecb05 100644 --- a/src/leap/bitmask_js/app/components/main_panel/main_panel.less +++ b/src/leap/bitmask_js/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 } diff --git a/src/leap/bitmask_js/app/components/panel_switcher.js b/src/leap/bitmask_js/app/components/panel_switcher.js index f4f32cf6..aaf2dc5b 100644 --- a/src/leap/bitmask_js/app/components/panel_switcher.js +++ b/src/leap/bitmask_js/app/components/panel_switcher.js @@ -53,4 +53,6 @@ export default class PanelSwitcher extends React.Component { render_splash(props) {return elem(Splash, props)} render_wizard(props) {return elem(Wizard, props)} render_greeter(props) {return elem(GreeterPanel, props)} - render_main(props) {return elem(MainPanel, props)}} + render_main(props) {return elem(MainPanel, props)} + +} diff --git a/src/leap/bitmask_js/app/components/spinner/spinner.css b/src/leap/bitmask_js/app/components/spinner/spinner.css index 4e7f3ee8..5e8535c9 100644 --- a/src/leap/bitmask_js/app/components/spinner/spinner.css +++ b/src/leap/bitmask_js/app/components/spinner/spinner.css @@ -10,12 +10,28 @@ vertical-align: middle; border-radius: 100%; display: inline-block; + -webkit-animation: bouncedelay 1.5s infinite ease-in-out; animation: bouncedelay 1.5s infinite ease-in-out; + -webkit-animation-fill-mode: both; animation-fill-mode: both; } -.spinner .spin1 { animation-delay: -.46s } -.spinner .spin2 { animation-delay: -.24s } +.spinner .spin1 { + -webkit-animation-delay: -.46s; + animation-delay: -.46s; +} +.spinner .spin2 { + -webkit-animation-delay: -.24s; + animation-delay: -.24s; +} + +@-webkit-keyframes bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0.5); + } 40% { + -webkit-transform: scale(0.9); + } +} @keyframes bouncedelay { 0%, 80%, 100% { diff --git a/src/leap/bitmask_js/app/components/wizard/wizard.less b/src/leap/bitmask_js/app/components/wizard/wizard.less index 3336ffb8..29efc20e 100644 --- a/src/leap/bitmask_js/app/components/wizard/wizard.less +++ b/src/leap/bitmask_js/app/components/wizard/wizard.less @@ -3,12 +3,16 @@ height: 100%; width: 100%; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-flex: 1; flex: 1; } .wizard .stage .footer { + -webkit-flex: 0 0 auto; flex: 0 0 auto; background-color: #ddd; padding: 20px; @@ -16,6 +20,7 @@ } .wizard .stage .header { + -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 20px; background-color: #333; @@ -28,9 +33,12 @@ } .wizard .stage .body { + -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 20px; overflow: auto; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } \ No newline at end of file -- cgit v1.2.3