Show listings of a path
This commit is contained in:
parent
ff2f44df18
commit
0607d82e50
|
@ -2,7 +2,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
{{#each categories as |category|}}
|
||||
<li><a>{{category}}</a></li>
|
||||
<li>{{#link-to "index" (query-params path=category)}}{{category}}{{/link-to}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -6,4 +6,8 @@ export default Component.extend({
|
|||
|
||||
type: null,
|
||||
|
||||
isFolder: function() {
|
||||
return this.get('type') === 'folder';
|
||||
}.property('type')
|
||||
|
||||
});
|
||||
|
|
|
@ -1 +1,5 @@
|
|||
<img src="/img/file-icons/{{type}}.svg">
|
||||
{{#if isFolder}}
|
||||
<img src="/img/file-icons/folder.svg">
|
||||
{{else}}
|
||||
<img src="/img/file-icons/file.svg">
|
||||
{{/if}}
|
|
@ -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.[]')
|
||||
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -10,6 +10,9 @@ $light-grey-1: #b5c3d1;
|
|||
a {
|
||||
color: $light-grey-1;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -11,5 +11,6 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
@import "components/categories-nav";
|
||||
@import "components/directory-listing";
|
||||
@import "components/item-icon";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.item-icon {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
enable-background="new 0 0 156 212"
|
||||
viewBox="0 0 156 212"
|
||||
y="0px"
|
||||
x="0px"
|
||||
id="filecss"
|
||||
version="1.1"><metadata
|
||||
id="metadata15"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs13" /><g
|
||||
id="g8"><path
|
||||
id="path2"
|
||||
d="M154.826,40.2969L115.6504,1.168c-0.75-0.7459-1.7656-1.168-2.826-1.168H4C1.7912,0,0,1.7893,0,4v204 c0,2.2109,1.7912,4,4,4h148c2.2088,0,4-1.7891,4-4V43.1289C156,42.0665,155.578,41.0509,154.826,40.2969z M142.3436,40H116V13.6565 L142.3436,40z M8,204V8h100v36c0,2.2109,1.7912,4,4,4h36v156H8z" /></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in New Issue