diff --git a/app/components/categories-nav/template.hbs b/app/components/categories-nav/template.hbs index beed2aa..af9a302 100644 --- a/app/components/categories-nav/template.hbs +++ b/app/components/categories-nav/template.hbs @@ -2,7 +2,7 @@ diff --git a/app/components/item-icon/component.js b/app/components/item-icon/component.js index b32642a..3fb6163 100644 --- a/app/components/item-icon/component.js +++ b/app/components/item-icon/component.js @@ -6,4 +6,8 @@ export default Component.extend({ type: null, + isFolder: function() { + return this.get('type') === 'folder'; + }.property('type') + }); diff --git a/app/components/item-icon/template.hbs b/app/components/item-icon/template.hbs index 82d3970..4030b59 100644 --- a/app/components/item-icon/template.hbs +++ b/app/components/item-icon/template.hbs @@ -1 +1,5 @@ - \ No newline at end of file +{{#if isFolder}} + +{{else}} + +{{/if}} \ No newline at end of file diff --git a/app/controllers/index.js b/app/controllers/index.js index 53dd22a..1be1e30 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -2,6 +2,7 @@ import Controller from '@ember/controller'; import EmberObject from '@ember/object'; import { inject as service } from '@ember/service'; import { alias } from '@ember/object/computed'; +import { isPresent } from '@ember/utils'; export default Controller.extend({ @@ -11,18 +12,24 @@ export default Controller.extend({ connected: alias('storage.connected'), categories: alias('storage.categories'), + queryParams: ['path'], + currentListing: function() { + if (isPresent(this.get('model'))) { + return this.get('model'); + } + if (!this.get('categories')) { return null; } const listing = []; this.get('categories').forEach(categoryName => { - listing.pushObject(EmberObject.create({ + listing.push(EmberObject.create({ name: categoryName, type: 'folder' })); }); return listing; - }.property('categories.[]') + }.property('categories.[]', 'model.[]') }); diff --git a/app/routes/index.js b/app/routes/index.js index 0774ee1..d77473f 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -1,8 +1,39 @@ import Route from '@ember/routing/route'; +import EmberObject from '@ember/object'; import { inject as service } from '@ember/service'; +import { isEmpty } from '@ember/utils'; export default Route.extend({ - storage: service() + storage: service(), + + queryParams: { + path: { + refreshModel: true + } + }, + + model(params) { + let path = params.path; + let items = []; + + if (isEmpty(params.path)) { return null; } + + if (path.substr(-1) !== '/') { path += '/'; } + + return this.get('storage.client').getListing(path).then(listing => { + Object.keys(listing).forEach(name => { + let item = listing[name]; + + items.push(EmberObject.create({ + name: name, + type: item['Content-Type'] || 'folder', + size: item['Content-Length'] || null + })); + }); + + return items; + }); + } }); diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss index 2e8c255..1af033c 100644 --- a/app/styles/_colors.scss +++ b/app/styles/_colors.scss @@ -10,6 +10,9 @@ $light-grey-1: #b5c3d1; a { color: $light-grey-1; text-decoration: none; + &:hover { + color: #fff; + } } } diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 4adef20..2cab22a 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -24,21 +24,6 @@ flex: 0 0 16rem; overflow: auto; padding: 2rem; - - nav { - margin-top: 6rem; - margin-bottom: 6rem; - - ul { - list-style: none; - margin: 0; - padding: 0; - } - a { - display: block; - padding: 0.2rem 0; - } - } } > main { diff --git a/app/styles/app.css b/app/styles/app.css deleted file mode 100644 index e69de29..0000000 diff --git a/app/styles/app.scss b/app/styles/app.scss index 7b9388f..55c660f 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -11,5 +11,6 @@ body { padding: 0; } +@import "components/categories-nav"; @import "components/directory-listing"; @import "components/item-icon"; diff --git a/app/styles/components/_categories-nav.scss b/app/styles/components/_categories-nav.scss new file mode 100644 index 0000000..0a1a0e2 --- /dev/null +++ b/app/styles/components/_categories-nav.scss @@ -0,0 +1,18 @@ +#app-container { + > aside { + nav { + margin-top: 6rem; + margin-bottom: 6rem; + + ul { + list-style: none; + margin: 0; + padding: 0; + } + a { + display: block; + padding: 0.2rem 0; + } + } + } +} diff --git a/app/styles/components/_directory-listing.scss b/app/styles/components/_directory-listing.scss index ada968c..dfe148d 100644 --- a/app/styles/components/_directory-listing.scss +++ b/app/styles/components/_directory-listing.scss @@ -11,9 +11,17 @@ tbody { tr { border-bottom: 1px solid #ececec; - } - tr:first-of-type { - border-top: 1px solid #ececec; + + &:first-of-type { + border-top: 1px solid #ececec; + } + + &:hover { + td { + opacity: 0.7; + cursor: pointer; + } + } } td { padding: 1rem 1.5rem; diff --git a/app/styles/components/_item-icon.scss b/app/styles/components/_item-icon.scss index 572f379..fc13612 100644 --- a/app/styles/components/_item-icon.scss +++ b/app/styles/components/_item-icon.scss @@ -1,4 +1,5 @@ .item-icon { + text-align: center; img { height: 1.2rem; diff --git a/public/img/file-icons/file.svg b/public/img/file-icons/file.svg new file mode 100644 index 0000000..8c98577 --- /dev/null +++ b/public/img/file-icons/file.svg @@ -0,0 +1,21 @@ + +image/svg+xml \ No newline at end of file