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
2017-12-25 10:50:03 +01:00 · 2017-12-25 10:50:03 +01:00 · 5d533d2c08
parent 07be7dece8
commit 5d533d2c08
14 changed files with 354 additions and 25 deletions
--- 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

--- 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');
--- 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;
--- 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, {
 });
--- a/app/routes/connect.js
+++ 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();
+    });
+  }
+
+});
--- 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();
--- 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'));
--- 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;
+  }
 }
--- 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;

+  &.disconnected {
+    > aside {
+      flex: 0;
+      overflow: hidden;
+    }
+  }
+
+  &.connected {
    > aside {
      flex: 0 0 16rem;
      overflow: auto;
-    padding: 2rem;
-
-    nav {
-      margin-top: 5rem;
-      margin-bottom: 4rem;
+      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;
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@ -1,6 +1,9 @@
-<div id="app-container">
+<div id="app-container" class={{connectedClass}}>
  <aside>
    {{#if connected}}
+      <div id="account">
+        <span class="user-address">{{userAddress}}</span>
+      </div>
      {{categories-nav categories=categories}}
    {{/if}}
  </aside>
@ -12,7 +15,7 @@
        {{#if connected}}
          {{breadcrumb-nav currentDirPath=currentDirPath}}
        {{else}}
-          Not connected.
+          <!-- Please connect. -->
        {{/if}}
      {{/if}}
    </header>
--- a/app/templates/connect.hbs
+++ b/app/templates/connect.hbs
@ -0,0 +1 @@
+{{outlet}}
--- 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",
--- 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",
--- a/tests/unit/routes/connect-test.js
+++ 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);
+});