diff --git a/app/components/file-table-item.js b/app/components/file-table-item.js index 7e46b17..fddedfb 100644 --- a/app/components/file-table-item.js +++ b/app/components/file-table-item.js @@ -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'; + }), }); diff --git a/app/components/file-table.js b/app/components/file-table.js index 830d03c..b223e11 100644 --- a/app/components/file-table.js +++ b/app/components/file-table.js @@ -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() { diff --git a/app/styles/app.css b/app/styles/app.css index fbe211a..93efc51 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -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; diff --git a/app/templates/components/file-table-item.hbs b/app/templates/components/file-table-item.hbs index e5905f2..bb80f2d 100644 --- a/app/templates/components/file-table-item.hbs +++ b/app/templates/components/file-table-item.hbs @@ -1,5 +1,10 @@ - {{if isSelected "Selected"}} + +   + {{file.name}} diff --git a/app/templates/components/file-table.hbs b/app/templates/components/file-table.hbs index 0e4a020..d0e64a2 100644 --- a/app/templates/components/file-table.hbs +++ b/app/templates/components/file-table.hbs @@ -24,11 +24,12 @@ {{action "toggleSelectAll"}} >   + Selected {{selectedFilePaths.length}}