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