From 5d533d2c08bf30dc09cf7edd52d1484542da1809 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Mon, 25 Dec 2017 10:50:03 +0100 Subject: [PATCH] More connect improvements * Use extra route for disconnected/initial state * Style connect screen properly * Hide widget when connected in favor of custom UI * Show account info in sidebar header --- .scss-lint.yml | 2 +- app/controllers/application.js | 7 +- app/router.js | 1 + app/routes/application.js | 4 +- app/routes/connect.js | 33 +++++ app/routes/index.js | 9 +- app/services/storage.js | 11 +- app/styles/_colors.scss | 12 +- app/styles/_layout.scss | 52 +++++-- app/templates/application.hbs | 9 +- app/templates/connect.hbs | 1 + package-lock.json | 226 ++++++++++++++++++++++++++++++ package.json | 1 + tests/unit/routes/connect-test.js | 11 ++ 14 files changed, 354 insertions(+), 25 deletions(-) create mode 100644 app/routes/connect.js create mode 100644 app/templates/connect.hbs create mode 100644 tests/unit/routes/connect-test.js diff --git a/.scss-lint.yml b/.scss-lint.yml index c94b52c..ade4eb7 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -199,7 +199,7 @@ linters: style: one_space # or 'at_least_one_space', or 'no_space' SpaceBeforeBrace: - enabled: true + enabled: false style: space # or 'new_line' allow_single_line_padding: false diff --git a/app/controllers/application.js b/app/controllers/application.js index cbd3e2c..e1f6352 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -1,6 +1,6 @@ import Controller from '@ember/controller'; import EmberObject from '@ember/object'; -import { observer } from '@ember/object'; +import { computed, observer } from '@ember/object'; import { inject as service } from '@ember/service'; import { alias } from '@ember/object/computed'; import { isEmpty } from '@ember/utils'; @@ -11,9 +11,14 @@ export default Controller.extend({ connecting: alias('storage.connecting'), connected: alias('storage.connected'), + userAddress: alias('storage.userAddress'), rootListing: alias('storage.rootListing'), currentDirPath: null, + connectedClass: computed('connected', function() { + return this.get('connected') ? 'connected' : 'disconnected'; + }), + categories: function() { let categories = []; let rootListing = this.get('rootListing'); diff --git a/app/router.js b/app/router.js index 14bd061..3bafc47 100644 --- a/app/router.js +++ b/app/router.js @@ -8,6 +8,7 @@ const Router = EmberRouter.extend({ Router.map(function() { this.route('inspect'); + this.route('connect'); }); export default Router; diff --git a/app/routes/application.js b/app/routes/application.js index 6b04222..0593b58 100644 --- a/app/routes/application.js +++ b/app/routes/application.js @@ -1,5 +1,5 @@ import Route from '@ember/routing/route'; +import BodyClassMixin from 'ember-body-class/mixins/body-class'; -export default Route.extend({ - +export default Route.extend(BodyClassMixin, { }); diff --git a/app/routes/connect.js b/app/routes/connect.js new file mode 100644 index 0000000..d04cb64 --- /dev/null +++ b/app/routes/connect.js @@ -0,0 +1,33 @@ +import Route from '@ember/routing/route'; +import { inject as service } from '@ember/service'; +import { later } from '@ember/runloop'; +import { Promise } from 'rsvp'; + +export default Route.extend({ + + storage: service(), + + beforeModel() { + return this.waitForConnectionState().then(() => { + if (this.get('storage.connected')) { + this.transitionTo('index'); + } + }); + }, + + waitForConnectionState() { + let self = this; + + return new Promise(resolve => { + function checkConnectingDone() { + if (self.get('storage.connecting')) { + later(checkConnectingDone, 20); + } else { + resolve(); + } + } + checkConnectingDone(); + }); + } + +}); diff --git a/app/routes/index.js b/app/routes/index.js index 501bf23..79530d6 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -15,12 +15,14 @@ export default Route.extend({ }, beforeModel() { - return this.waitForConnectionState(); + return this.waitForConnectionState().then(() => { + if (this.get('storage.disconnected')) { + this.transitionTo('connect'); + } + }); }, model(params) { - if (this.get('storage.disconnected')) { return null; } - let path = params.path; if (isEmpty(params.path)) { return null; } @@ -35,7 +37,6 @@ export default Route.extend({ setupController(controller, model) { this._super(controller, model); - if (this.get('storage.disconnected')) { return true; } if (isEmpty(this.get('storage.categories')) && this.get('storage.connected')) { this.get('storage').fetchRootListing(); diff --git a/app/services/storage.js b/app/services/storage.js index 230645b..b18e260 100644 --- a/app/services/storage.js +++ b/app/services/storage.js @@ -11,6 +11,7 @@ export default Service.extend({ widget: null, connecting: true, connected: false, + userAddress: null, disconnected: computed.not('connected'), client: null, rootListing: null, @@ -43,6 +44,7 @@ export default Service.extend({ console.debug('rs.on connected'); this.set('connecting', false); this.set('connected', true); + this.set('userAddress', this.get('rs').remote.userAddress); }); rs.on('not-connected', () => { @@ -78,10 +80,17 @@ export default Service.extend({ if (this.get('connected')) { this.fetchRootListing(); } else { - this.set('rootListing', null); + this.clearLocalData(); } }), + clearLocalData() { + this.setProperties({ + userAddress: null, + rootListing: null + }); + }, + fetchRootListing() { this.fetchListing('').then(items => { this.set('rootListing', items.sortBy('name')); diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss index 5151557..97281a9 100644 --- a/app/styles/_colors.scss +++ b/app/styles/_colors.scss @@ -4,7 +4,14 @@ $dark-grey-3: #aaa; $light-grey-1: #b5c3d1; $light-grey-2: #ececec; +body { + background-color: #fff; + transition: background-color 0.2s linear; +} + #app-container { + background-color: #fff; + > aside { background-color: $dark-grey-1; color: $light-grey-1; @@ -19,7 +26,6 @@ $light-grey-2: #ececec; } > main { - // background-color: $dark-grey-2; background-color: #fff; > header { @@ -32,4 +38,8 @@ $light-grey-2: #ececec; } } } + + &.disconnected main { + background-color: $light-grey-2; + } } diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 7ec976f..6c1ef0a 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -3,12 +3,23 @@ } #remotestorage-widget { - position: fixed; - top: 1rem; - right: 3rem; - z-index: 1; + z-index: 23; + display: none; + top: 20%; + left: 50%; + margin-left: -200px; } +.connect #remotestorage-widget { + display: block; +} + +// .index #remotestorage-widget { +// position: fixed; +// top: 1rem; +// right: 3rem; +// } + #app-container { position: absolute; top: 0; @@ -21,17 +32,34 @@ justify-content: flex-start; align-items: stretch; - > aside { - flex: 0 0 16rem; - overflow: auto; - padding: 2rem; - - nav { - margin-top: 5rem; - margin-bottom: 4rem; + &.disconnected { + > aside { + flex: 0; + overflow: hidden; } } + &.connected { + > aside { + flex: 0 0 16rem; + overflow: auto; + padding: 3rem 2rem; + } + } + + > aside { + transition: flex 0.2s ease-in; + + #account { + height: 4em; + } + + // nav { + // margin-top: 5rem; + // margin-bottom: 4rem; + // } + } + > main { flex: 1; overflow: auto; diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 7ca3cbc..13653f2 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,18 +1,21 @@ -
+
{{#if connecting}} - + {{else}} {{#if connected}} {{breadcrumb-nav currentDirPath=currentDirPath}} {{else}} - Not connected. + {{/if}} {{/if}}
diff --git a/app/templates/connect.hbs b/app/templates/connect.hbs new file mode 100644 index 0000000..e2147ca --- /dev/null +++ b/app/templates/connect.hbs @@ -0,0 +1 @@ +{{outlet}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 42ac9a8..855e6b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3563,6 +3563,232 @@ "ember-cli-babel": "6.8.2" } }, + "ember-body-class": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/ember-body-class/-/ember-body-class-0.4.0.tgz", + "integrity": "sha1-CZQkP51JeMyuwofP2+3LeLRuKMU=", + "dev": true, + "requires": { + "ember-cli-babel": "5.2.4" + }, + "dependencies": { + "babel-core": { + "version": "5.8.38", + "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-5.8.38.tgz", + "integrity": "sha1-H8ruedfmG3ULALjlT238nQr4ZVg=", + "dev": true, + "requires": { + "babel-plugin-constant-folding": "1.0.1", + "babel-plugin-dead-code-elimination": "1.0.2", + "babel-plugin-eval": "1.0.1", + "babel-plugin-inline-environment-variables": "1.0.1", + "babel-plugin-jscript": "1.0.4", + "babel-plugin-member-expression-literals": "1.0.1", + "babel-plugin-property-literals": "1.0.1", + "babel-plugin-proto-to-assign": "1.0.4", + "babel-plugin-react-constant-elements": "1.0.3", + "babel-plugin-react-display-name": "1.0.3", + "babel-plugin-remove-console": "1.0.1", + "babel-plugin-remove-debugger": "1.0.1", + "babel-plugin-runtime": "1.0.7", + "babel-plugin-undeclared-variables-check": "1.0.2", + "babel-plugin-undefined-to-void": "1.1.6", + "babylon": "5.8.38", + "bluebird": "2.11.0", + "chalk": "1.1.3", + "convert-source-map": "1.5.0", + "core-js": "1.2.7", + "debug": "2.6.9", + "detect-indent": "3.0.1", + "esutils": "2.0.2", + "fs-readdir-recursive": "0.1.2", + "globals": "6.4.1", + "home-or-tmp": "1.0.0", + "is-integer": "1.0.7", + "js-tokens": "1.0.1", + "json5": "0.4.0", + "lodash": "3.10.1", + "minimatch": "2.0.10", + "output-file-sync": "1.1.2", + "path-exists": "1.0.0", + "path-is-absolute": "1.0.1", + "private": "0.1.8", + "regenerator": "0.8.40", + "regexpu": "1.3.0", + "repeating": "1.1.3", + "resolve": "1.5.0", + "shebang-regex": "1.0.0", + "slash": "1.0.0", + "source-map": "0.5.7", + "source-map-support": "0.2.10", + "to-fast-properties": "1.0.3", + "trim-right": "1.0.1", + "try-resolve": "1.0.1" + } + }, + "babylon": { + "version": "5.8.38", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-5.8.38.tgz", + "integrity": "sha1-7JsSCxG/bM1Bc6GL8hfmC3mFn/0=", + "dev": true + }, + "bluebird": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz", + "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=", + "dev": true + }, + "broccoli-babel-transpiler": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-5.7.2.tgz", + "integrity": "sha512-vFQ+aSR9J81fm3MXXQGgDxswYINHl2p5duLvRLVnpmgPDNdpdsa30gh3xnmhzR/GwWFBfUNle7aYxthlgvsN0w==", + "dev": true, + "requires": { + "babel-core": "5.8.38", + "broccoli-funnel": "1.2.0", + "broccoli-merge-trees": "1.2.4", + "broccoli-persistent-filter": "1.4.3", + "clone": "0.2.0", + "hash-for-dep": "1.2.2", + "heimdalljs-logger": "0.1.9", + "json-stable-stringify": "1.0.1", + "rsvp": "3.6.2", + "workerpool": "2.3.0" + }, + "dependencies": { + "clone": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz", + "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=", + "dev": true + } + } + }, + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", + "dev": true + }, + "detect-indent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-3.0.1.tgz", + "integrity": "sha1-ncXl3bzu+DJXZLlFGwK8bVQIT3U=", + "dev": true, + "requires": { + "get-stdin": "4.0.1", + "minimist": "1.2.0", + "repeating": "1.1.3" + } + }, + "ember-cli-babel": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-5.2.4.tgz", + "integrity": "sha1-XOT0awjtb20h6Hhhn7aJcZ1ujhM=", + "dev": true, + "requires": { + "broccoli-babel-transpiler": "5.7.2", + "broccoli-funnel": "1.2.0", + "clone": "2.1.1", + "ember-cli-version-checker": "1.3.1", + "resolve": "1.5.0" + } + }, + "ember-cli-version-checker": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-1.3.1.tgz", + "integrity": "sha1-C8LRNMgwFC2mS/lieg7e0QthrnI=", + "dev": true, + "requires": { + "semver": "5.4.1" + } + }, + "globals": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/globals/-/globals-6.4.1.tgz", + "integrity": "sha1-hJgDKzttHMge68X3lpDY/in6v08=", + "dev": true + }, + "home-or-tmp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-1.0.0.tgz", + "integrity": "sha1-S58eQIAMPlDGwn94FnavzOcfOYU=", + "dev": true, + "requires": { + "os-tmpdir": "1.0.2", + "user-home": "1.1.1" + } + }, + "js-tokens": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-1.0.1.tgz", + "integrity": "sha1-zENaXIuUrRWst5gxQPyAGCyJrq4=", + "dev": true + }, + "json5": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.4.0.tgz", + "integrity": "sha1-BUNS5MTIDIbAkjh31EneF2pzLI0=", + "dev": true + }, + "lodash": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", + "dev": true + }, + "minimatch": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz", + "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "path-exists": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-1.0.0.tgz", + "integrity": "sha1-1aiZjrce83p0w06w2eum6HjuoIE=", + "dev": true + }, + "repeating": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/repeating/-/repeating-1.1.3.tgz", + "integrity": "sha1-PUEUIYh3U3SU+X93+Xhfq4EPpKw=", + "dev": true, + "requires": { + "is-finite": "1.0.2" + } + }, + "source-map-support": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz", + "integrity": "sha1-6lo5AKHByyUJagrozFwrSxDe09w=", + "dev": true, + "requires": { + "source-map": "0.1.32" + }, + "dependencies": { + "source-map": { + "version": "0.1.32", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz", + "integrity": "sha1-yLbBZ3l7pHQKjqMyUhYv8IWRsmY=", + "dev": true, + "requires": { + "amdefine": "1.0.1" + } + } + } + } + } + }, "ember-browserify": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/ember-browserify/-/ember-browserify-1.2.0.tgz", diff --git a/package.json b/package.json index 72eb6e8..7c682cf 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^3.0.0", + "ember-body-class": "^0.4.0", "ember-browserify": "^1.2.0", "ember-cli": "~2.16.2", "ember-cli-app-version": "^3.0.0", diff --git a/tests/unit/routes/connect-test.js b/tests/unit/routes/connect-test.js new file mode 100644 index 0000000..0f7962b --- /dev/null +++ b/tests/unit/routes/connect-test.js @@ -0,0 +1,11 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('route:connect', 'Unit | Route | connect', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +test('it exists', function(assert) { + let route = this.subject(); + assert.ok(route); +});