MetaMask

From 0cd11915cec52408472fc6424e6680b6266526dd Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 1 Jul 2016 14:23:37 -0700 Subject: Improved Ui Dev Mode Dev mode now reloads on file changes (although it seems to sometimes reload too soon, not getting the update... we can tune the timeout interval in development/index.html) Dev mode now reloads on all non-`node_modules` file changes, so the `ui` and `app` folders are both being watched for live reloading. --- development/fonts | 1 - development/images | 1 - development/index.html | 38 ++++++++++++++++++++++++++++ development/mocker.js | 68 -------------------------------------------------- fonts | 1 + images | 1 + package.json | 2 +- ui-dev.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 109 insertions(+), 71 deletions(-) delete mode 120000 development/fonts delete mode 120000 development/images delete mode 100644 development/mocker.js create mode 120000 fonts create mode 120000 images create mode 100644 ui-dev.js diff --git a/development/fonts b/development/fonts deleted file mode 120000 index 77c7651c1..000000000 --- a/development/fonts +++ /dev/null @@ -1 +0,0 @@ -../app/fonts \ No newline at end of file diff --git a/development/images b/development/images deleted file mode 120000 index 38cd3b8d4..000000000 --- a/development/images +++ /dev/null @@ -1 +0,0 @@ -../app/images \ No newline at end of file diff --git a/development/index.html b/development/index.html index aca074f3e..00cfb96c8 100644 --- a/development/index.html +++ b/development/index.html @@ -3,6 +3,7 @@ MetaMask + @@ -23,4 +24,41 @@ html, body, #app-content, .super-dev-container { background: #F7F7F7; } + + diff --git a/development/mocker.js b/development/mocker.js deleted file mode 100644 index 0656e66ea..000000000 --- a/development/mocker.js +++ /dev/null @@ -1,68 +0,0 @@ -const render = require('react-dom').render -const h = require('react-hyperscript') -const Root = require('../ui/app/root') -const configureStore = require('./mockStore') -const states = require('./states') -const Selector = require('./selector') - -// Query String -const qs = require('qs') -let queryString = qs.parse(window.location.href.split('#')[1]) -let selectedView = queryString.view || 'account detail' -const firstState = states[selectedView] -updateQueryParams(selectedView) - -// CSS -const MetaMaskUiCss = require('../ui/css') -const injectCss = require('inject-css') - - -function updateQueryParams(newView) { - queryString.view = newView - const params = qs.stringify(queryString) - window.location.href = window.location.href.split('#')[0] + `#${params}` -} - -const actions = { - _setAccountManager(){}, - update: function(stateName) { - selectedView = stateName - updateQueryParams(stateName) - const newState = states[selectedView] - return { - type: 'GLOBAL_FORCE_UPDATE', - value: newState, - } - }, -} - -var css = MetaMaskUiCss() -injectCss(css) - -const container = document.querySelector('#app-content') - -// parse opts -var store = configureStore(states[selectedView]) - -// start app -render( - h('.super-dev-container', [ - - h(Selector, { actions, selectedKey: selectedView, states, store }), - - h('.mock-app-root', { - style: { - height: '500px', - width: '360px', - boxShadow: '2px 2px 5px grey', - margin: '20px', - }, - }, [ - h(Root, { - store: store, - }), - ]), - - ] -), container) - diff --git a/fonts b/fonts new file mode 120000 index 000000000..043d139a9 --- /dev/null +++ b/fonts @@ -0,0 +1 @@ +app/fonts \ No newline at end of file diff --git a/images b/images new file mode 120000 index 000000000..2a4dbe892 --- /dev/null +++ b/images @@ -0,0 +1 @@ +app/images \ No newline at end of file diff --git a/package.json b/package.json index 00cc4c23a..413c19ca5 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "start": "gulp dev", "test": "mocha --require test/helper.js --compilers js:babel-register --recursive", "watch": "mocha watch --compilers js:babel-register --recursive", - "ui": "beefy development/mocker.js:bundle.js --live --open --cwd development --index=./development/index.html" + "ui": "beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./" }, "browserify": { "transform": [ diff --git a/ui-dev.js b/ui-dev.js new file mode 100644 index 000000000..7498ff8ea --- /dev/null +++ b/ui-dev.js @@ -0,0 +1,68 @@ +const render = require('react-dom').render +const h = require('react-hyperscript') +const Root = require('./ui/app/root') +const configureStore = require('./development/mockStore') +const states = require('./development/states') +const Selector = require('./development/selector') + +// Query String +const qs = require('qs') +let queryString = qs.parse(window.location.href.split('#')[1]) +let selectedView = queryString.view || 'account detail' +const firstState = states[selectedView] +updateQueryParams(selectedView) + +// CSS +const MetaMaskUiCss = require('./ui/css') +const injectCss = require('inject-css') + + +function updateQueryParams(newView) { + queryString.view = newView + const params = qs.stringify(queryString) + window.location.href = window.location.href.split('#')[0] + `#${params}` +} + +const actions = { + _setAccountManager(){}, + update: function(stateName) { + selectedView = stateName + updateQueryParams(stateName) + const newState = states[selectedView] + return { + type: 'GLOBAL_FORCE_UPDATE', + value: newState, + } + }, +} + +var css = MetaMaskUiCss() +injectCss(css) + +const container = document.querySelector('#app-content') + +// parse opts +var store = configureStore(states[selectedView]) + +// start app +render( + h('.super-dev-container', [ + + h(Selector, { actions, selectedKey: selectedView, states, store }), + + h('.mock-app-root', { + style: { + height: '500px', + width: '360px', + boxShadow: '2px 2px 5px grey', + margin: '20px', + }, + }, [ + h(Root, { + store: store, + }), + ]), + + ] +), container) + -- cgit v1.2.3