Browse Source

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
master
raucao 5 years ago
parent
commit
5d533d2c08
  1. 2
      .scss-lint.yml
  2. 7
      app/controllers/application.js
  3. 1
      app/router.js
  4. 4
      app/routes/application.js
  5. 33
      app/routes/connect.js
  6. 9
      app/routes/index.js
  7. 11
      app/services/storage.js
  8. 12
      app/styles/_colors.scss
  9. 48
      app/styles/_layout.scss
  10. 9
      app/templates/application.hbs
  11. 1
      app/templates/connect.hbs
  12. 226
      package-lock.json
  13. 1
      package.json
  14. 11
      tests/unit/routes/connect-test.js

2
.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

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

1
app/router.js

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

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

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

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

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

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

48
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,15 +32,32 @@
justify-content: flex-start;
align-items: stretch;
&.disconnected {
> aside {
flex: 0;
overflow: hidden;
}
}
&.connected {
> aside {
flex: 0 0 16rem;
overflow: auto;
padding: 3rem 2rem;
}
}
> aside {
flex: 0 0 16rem;
overflow: auto;
padding: 2rem;
transition: flex 0.2s ease-in;
nav {
margin-top: 5rem;
margin-bottom: 4rem;
#account {
height: 4em;
}
// nav {
// margin-top: 5rem;
// margin-bottom: 4rem;
// }
}
> main {

9
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>

1
app/templates/connect.hbs

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

226
package-lock.json generated

@ -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",

1
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",

11
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);
});
Loading…
Cancel
Save