Turn dir listings into UL, so we can use normal links
This commit is contained in:
parent
d924303c32
commit
93d8c68949
|
@ -100,7 +100,7 @@ linters:
|
|||
|
||||
NestingDepth:
|
||||
enabled: true
|
||||
max_depth: 5
|
||||
max_depth: 7
|
||||
ignore_parent_selectors: false
|
||||
|
||||
PlaceholderInExtend:
|
||||
|
@ -144,7 +144,7 @@ linters:
|
|||
enabled: true
|
||||
|
||||
QualifyingElement:
|
||||
enabled: true
|
||||
enabled: false
|
||||
allow_element_with_attribute: false
|
||||
allow_element_with_class: false
|
||||
allow_element_with_id: false
|
||||
|
|
|
@ -1,17 +1,11 @@
|
|||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Type</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each items as |item|}}
|
||||
<tr>
|
||||
<td class="icon">{{item-icon type=item.type}}</td>
|
||||
<td class="name">{{item.name}}</td>
|
||||
<td class="type">{{item.type}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="listing">
|
||||
{{#each items as |item|}}
|
||||
<li>
|
||||
{{#link-to "index"}}
|
||||
<span class="icon">{{item-icon type=item.type}}</span>
|
||||
<span class="name">{{item.name}}</span>
|
||||
<span class="type">{{item.type}}</span>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
|
@ -2,12 +2,27 @@ import Component from '@ember/component';
|
|||
|
||||
export default Component.extend({
|
||||
|
||||
tagName: 'img',
|
||||
classNames: ['item-icon'],
|
||||
attributeBindings: ['src:src'],
|
||||
|
||||
type: null,
|
||||
|
||||
isFolder: function() {
|
||||
return this.get('type') === 'folder';
|
||||
}.property('type')
|
||||
}.property('type'),
|
||||
|
||||
src: function() {
|
||||
let prefix = '/img/file-icons/';
|
||||
let filename;
|
||||
|
||||
if (this.get('isFolder')) {
|
||||
filename = 'folder.svg';
|
||||
} else {
|
||||
filename = 'file.svg';
|
||||
}
|
||||
|
||||
return prefix + filename;
|
||||
}.property()
|
||||
|
||||
});
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
{{#if isFolder}}
|
||||
<img src="/img/file-icons/folder.svg">
|
||||
{{else}}
|
||||
<img src="/img/file-icons/file.svg">
|
||||
{{/if}}
|
|
@ -1,40 +1,51 @@
|
|||
.directory-listing {
|
||||
|
||||
table {
|
||||
ul.listing {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 6rem;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid #ececec;
|
||||
li {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid #ececec;
|
||||
&:first-of-type {
|
||||
border-top: 1px solid #ececec;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
a {
|
||||
display: table-row;
|
||||
text-decoration: none;
|
||||
color: $dark-grey-1;
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&.icon {
|
||||
width: 1rem;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
&.name {
|
||||
width: 60%;
|
||||
}
|
||||
&.type {
|
||||
width: 40%;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&.icon {
|
||||
width: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
&.type {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.item-icon {
|
||||
ul.listing span.icon {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
|
|
|
@ -13,6 +13,7 @@ test('it renders directory items', function(assert) {
|
|||
|
||||
this.render(hbs`{{directory-listing items=items}}`);
|
||||
|
||||
assert.equal(this.$('table tbody tr:first td:nth-of-type(2)').text(), 'documents');
|
||||
assert.equal(this.$('table tbody tr:first td:nth-of-type(3)').text(), 'folder');
|
||||
assert.equal(this.$('ul li:nth-of-type(1) span.name').text(), 'documents');
|
||||
assert.equal(this.$('ul li:nth-of-type(1) span.type').text(), 'folder');
|
||||
assert.equal(this.$('ul li:nth-of-type(2) span.name').text(), 'public');
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue