From 9221f93ea3f6b270739f5ac9bd7449a35cef7af9 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Wed, 8 Nov 2017 02:06:16 +0100 Subject: [PATCH] Basic layout and categories nav --- app/components/categories-nav/component.js | 7 +++ app/components/categories-nav/template.hbs | 9 ++++ app/controllers/application.js | 14 +++++- app/controllers/index.js | 8 ++++ app/services/storage.js | 2 + app/styles/_colors.scss | 20 ++++++++ app/styles/_layout.scss | 46 +++++++++++++++++++ app/styles/app.scss | 12 ++--- app/templates/application.hbs | 23 ++++------ app/templates/index.hbs | 12 +++-- .../categories-nav/component-test.js | 24 ++++++++++ 11 files changed, 153 insertions(+), 24 deletions(-) create mode 100644 app/components/categories-nav/component.js create mode 100644 app/components/categories-nav/template.hbs create mode 100644 app/styles/_colors.scss create mode 100644 app/styles/_layout.scss create mode 100644 tests/integration/components/categories-nav/component-test.js diff --git a/app/components/categories-nav/component.js b/app/components/categories-nav/component.js new file mode 100644 index 0000000..61fd54a --- /dev/null +++ b/app/components/categories-nav/component.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; + +export default Component.extend({ + + categories: null + +}); diff --git a/app/components/categories-nav/template.hbs b/app/components/categories-nav/template.hbs new file mode 100644 index 0000000..beed2aa --- /dev/null +++ b/app/components/categories-nav/template.hbs @@ -0,0 +1,9 @@ +{{#if categories}} + +{{/if}} \ No newline at end of file diff --git a/app/controllers/application.js b/app/controllers/application.js index 8fbab32..330f3e0 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -1,12 +1,24 @@ import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; import { alias } from '@ember/object/computed'; +import { observer } from '@ember/object'; export default Controller.extend({ storage: service(), connecting: alias('storage.connecting'), - connected: alias('storage.connected') + connected: alias('storage.connected'), + + categories: null, + + handleConnected: observer('connected', function() { + const client = this.get('storage.client'); + + client.getListing('').then(listing => { + let dirnames = Object.keys(listing); + this.set('categories', dirnames.map(i => i.replace('/', ''))); + }); + }) }); diff --git a/app/controllers/index.js b/app/controllers/index.js index d630f31..8fbab32 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,4 +1,12 @@ import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; +import { alias } from '@ember/object/computed'; export default Controller.extend({ + + storage: service(), + + connecting: alias('storage.connecting'), + connected: alias('storage.connected') + }); diff --git a/app/services/storage.js b/app/services/storage.js index 32abc84..dde00dc 100644 --- a/app/services/storage.js +++ b/app/services/storage.js @@ -8,6 +8,7 @@ export default Service.extend({ widget: null, connecting: true, connected: false, + client: null, setup: function() { const rs = new RemoteStorage({ @@ -65,6 +66,7 @@ export default Service.extend({ this.set('rs', rs); this.set('widget', widget); + this.set('client', rs.scope('/')); }.on('init') }); diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss new file mode 100644 index 0000000..2e8c255 --- /dev/null +++ b/app/styles/_colors.scss @@ -0,0 +1,20 @@ +$dark-grey-1: #2a3743; +$dark-grey-2: #344453; +$light-grey-1: #b5c3d1; + +#app-container { + > aside { + background-color: $dark-grey-1; + color: $light-grey-1; + + a { + color: $light-grey-1; + text-decoration: none; + } + } + + > main { + // background-color: $dark-grey-2; + background-color: #fff; + } +} diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss new file mode 100644 index 0000000..7edc6f7 --- /dev/null +++ b/app/styles/_layout.scss @@ -0,0 +1,46 @@ +* { + box-sizing: border-box; +} + +#remotestorage-widget { + position: fixed; + top: 0.5rem; + right: 0.5rem; +} + +#app-container { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow: hidden; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + + > aside { + flex: 0 0 16rem; + padding: 2rem; + overflow: auto; + + nav { + ul { + list-style: none; + margin: 0; + padding: 0; + } + a { + display: block; + padding: 0.2rem 0; + } + } + } + + > main { + flex: 1; + padding: 2rem; + overflow: auto; + } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index 4a1cc43..66d0d35 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,14 +1,12 @@ @import "bourbon"; +@import "colors"; +@import "layout"; body { background-color: white; font-size: 16px; - font-family: sans-serif; + font-family: Open Sans, sans-serif; color: #222; -} - -#remotestorage-widget { - position: fixed; - top: 0.5rem; - right: 0.5rem; + margin: 0; + padding: 0; } diff --git a/app/templates/application.hbs b/app/templates/application.hbs index ba8647a..f29fd1c 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,13 +1,10 @@ -

Inspektor

- -{{#if connecting}} - Connecting... -{{else}} - {{#if connected}} - Connected. - {{else}} - Not connected. - {{/if}} -{{/if}} - -{{outlet}} \ No newline at end of file +
+ +
+ {{outlet}} +
+
\ No newline at end of file diff --git a/app/templates/index.hbs b/app/templates/index.hbs index e1a799a..c05bfb3 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,3 +1,9 @@ -index.hbs - -{{outlet}} \ No newline at end of file +{{#if connecting}} + Connecting... +{{else}} + {{#if connected}} + Connected. + {{else}} + Not connected. + {{/if}} +{{/if}} \ No newline at end of file diff --git a/tests/integration/components/categories-nav/component-test.js b/tests/integration/components/categories-nav/component-test.js new file mode 100644 index 0000000..376c4c4 --- /dev/null +++ b/tests/integration/components/categories-nav/component-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('categories-nav', 'Integration | Component | categories nav', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{categories-nav}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#categories-nav}} + template block text + {{/categories-nav}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +});