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

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');

app/router.js

@@ -8,6 +8,7 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('inspect');
+  this.route('connect');
 });
 
 export default Router;

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, {
 });

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();
+    });
+  }
+
+});

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();

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'));

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;
+  }
 }

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;

app/templates/application.hbs

@@ -1,18 +1,21 @@
-<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>
   <main>
     <header>
       {{#if connecting}}
-      <!-- Connecting... -->
+        <!-- Connecting... -->
       {{else}}
         {{#if connected}}
           {{breadcrumb-nav currentDirPath=currentDirPath}}
         {{else}}
-          Not connected.
+          <!-- Please connect. -->
         {{/if}}
       {{/if}}
     </header>

app/templates/connect.hbs

@@ -0,0 +1 @@
+{{outlet}}