Add file type icons
This commit is contained in:
parent
939dce2b1f
commit
ff2f44df18
|
@ -8,6 +8,7 @@
|
|||
<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>
|
||||
|
|
9
app/components/item-icon/component.js
Normal file
9
app/components/item-icon/component.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
|
||||
classNames: ['item-icon'],
|
||||
|
||||
type: null,
|
||||
|
||||
});
|
1
app/components/item-icon/template.hbs
Normal file
1
app/components/item-icon/template.hbs
Normal file
|
@ -0,0 +1 @@
|
|||
<img src="/img/file-icons/{{type}}.svg">
|
|
@ -11,4 +11,5 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
@import "components/directory_listing";
|
||||
@import "components/directory-listing";
|
||||
@import "components/item-icon";
|
||||
|
|
|
@ -18,6 +18,10 @@
|
|||
td {
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&.icon {
|
||||
width: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
&.type {
|
||||
color: #aaa;
|
||||
}
|
8
app/styles/components/_item-icon.scss
Normal file
8
app/styles/components/_item-icon.scss
Normal file
|
@ -0,0 +1,8 @@
|
|||
.item-icon {
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
8
public/img/file-icons/folder.svg
Normal file
8
public/img/file-icons/folder.svg
Normal file
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 216 180" enable-background="new 0 0 216 180" xml:space="preserve">
|
||||
<path fill="#333" d="M212,24H94.1408L79.328,1.7813C78.586,0.668,77.338,0,76,0H4C1.7912,0,0,1.7893,0,4v24v16v116.0117
|
||||
C0,171.0353,8.9608,180,19.9764,180h176.0472C207.0392,180,216,171.0353,216,160.0117V44V28C216,25.7893,214.2088,24,212,24z
|
||||
M208,40H8v-8h84h116V40z M8,8h65.8592l10.666,16H8V8z M208,160.0117C208,166.6213,202.6268,172,196.0236,172H19.9764
|
||||
C13.3732,172,8,166.6213,8,160.0117V48h200V160.0117z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 651 B |
|
@ -13,6 +13,6 @@ test('it renders directory items', function(assert) {
|
|||
|
||||
this.render(hbs`{{directory-listing items=items}}`);
|
||||
|
||||
assert.equal(this.$('table tbody tr:first td:first').text(), 'documents');
|
||||
assert.equal(this.$('table tbody tr:first td:last').text(), 'folder');
|
||||
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');
|
||||
});
|
||||
|
|
12
tests/integration/components/item-icon/component-test.js
Normal file
12
tests/integration/components/item-icon/component-test.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import { moduleForComponent, test } from 'ember-qunit';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
moduleForComponent('item-icon', 'Integration | Component | item icon', {
|
||||
integration: true
|
||||
});
|
||||
|
||||
test('it renders', function(assert) {
|
||||
this.render(hbs`{{item-icon type='folder'}}`);
|
||||
|
||||
assert.equal(this.$('img').attr('src'), '/img/file-icons/folder.svg');
|
||||
});
|
Loading…
Reference in New Issue
Block a user