gaiety/ember-file-download-list-exercise
1
0
Fork 0
Code Activity

Finished styling, faux checkboxes in interest of time

Browse source
This commit is contained in:
Joe Wroten 2018-12-16 16:11:13 -06:00
parent 0544c34d58
commit ccc6eb2ff4
7 changed files with 42 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/file-table-item.js
View file

@ -19,4 +19,8 @@ export default Component.extend({
isSelected: computed('file.path', 'selectedFilePaths.[]', function() {
return this.selectedFilePaths.includes(this.file.path);
}),
checkboxClass: computed('isSelected', function() {
return this.isSelected ? 'on' : 'off';
}),
});

4
app/components/file-table.js
View file

@ -11,8 +11,8 @@ export default Component.extend({
selectAllStatus: computed('selectedFilePaths.[]', 'files.[]', function() {
if (this.selectedFilePaths.length === this.files.length) {
return 'all';
} else return this.selectedFilePaths.length === 0 ? 'none' : 'some';
return 'on';
} else return this.selectedFilePaths.length === 0 ? 'off' : 'some';
}),
selectedFileDownloads: computed('selectedFilePaths.[]', 'files.@each.{status,path}', function() {

19
app/styles/app.css
View file

@ -2,6 +2,25 @@ body {
font-family: sans-serif;
}
.faux-checkbox {
display: inline-block;
width: 1rem;
height: 1rem;
background: white;
border: 2px solid #999;
border-radius: 2px;
}
.faux-checkbox.-on {
background: #428add;
border-color: #428add;
}
.faux-checkbox.-some {
background: #c2c2c2;
border-color: #c2c2c2;
}
.file-table-action {
font-size: 1.25em;
background: none;

7
app/templates/components/file-table-item.hbs
View file

@ -1,5 +1,10 @@
<td data-test-id="file-table-item-selected">
{{if isSelected "Selected"}}
<i
class="faux-checkbox -{{checkboxClass}}"
data-test-id="file-table-item-selected-icon"
>
&nbsp;
</i>
</td>
<td data-test-id="file-table-item-name">
{{file.name}}

3
app/templates/components/file-table.hbs
View file

@ -24,11 +24,12 @@
{{action "toggleSelectAll"}}
>
<i
class="file-table-select-status-{{selectAllStatus}}"
class="faux-checkbox -{{selectAllStatus}}"
data-test-id="file-table-select-status-icon"
>
&nbsp;
</i>
Selected {{selectedFilePaths.length}}
</button>
<button

6
tests/integration/components/file-table-item-test.js
View file

@ -50,12 +50,12 @@ module('Integration | Component | file-table-item', function(hooks) {
this.set('selectedFilePaths', []);
await render(hbs`{{file-table-item file=file selectedFilePaths=selectedFilePaths}}`);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-off'), true, 'Not selected by default');
this.set('selectedFilePaths', [this.file.path]);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Not selected by default');
assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-on'), true, 'Not selected by default');
this.set('selectedFilePaths', []);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'No longer selected');
assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-off'), true, 'No longer selected');
});
});

12
tests/integration/components/file-table-test.js
View file

@ -38,15 +38,15 @@ module('Integration | Component | file-table', function(hooks) {
this.set('files', [genericFile(), genericFile()]);
await render(hbs`{{file-table files=files}}`);
assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), false, 'Not selected by default');
await click('[data-test-action=file-table-item-toggle]');
assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 1');
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Selected after click');
assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), true, 'Selected after click');
await click('[data-test-action=file-table-item-toggle]');
assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Unselected after second click');
assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), false, 'Unselected after second click');
});
test('select all, with none selected', async function(assert) {
@ -79,13 +79,13 @@ module('Integration | Component | file-table', function(hooks) {
this.set('files', [genericFile(), genericFile()]);
this.set('selectedFilePaths', [this.files[0].path]);
await render(hbs`{{file-table files=files selectedFilePaths=selectedFilePaths}}`);
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-some'), true, 'Shows SOME checkbox status icon');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-some'), true, 'Shows SOME checkbox status icon');
await click('[data-test-action=file-table-select-all]');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-all'), true, 'Shows ALL checkbox status icon');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-on'), true, 'Shows ALL checkbox status icon');
await click('[data-test-action=file-table-select-all]');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-none'), true, 'Shows NONE checkbox status icon');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-off'), true, 'Shows NONE checkbox status icon');
});
test('it handles showing download device/path for selected available files', async function(assert) {