diff --git a/build/css/main.css b/build/css/main.css index f9fa0c2e..e919b26f 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -6231,6 +6231,10 @@ button.btn:focus, button.progress-button:focus { * See the License for the specific language governing permissions and * limitations under the License. */ +.modal-content { + display: flex; + flex-direction: column; } + .modal-header { display: flex; align-items: baseline; @@ -6243,9 +6247,11 @@ button.btn:focus, button.progress-button:focus { .modal-header { color: #b3b3b3; - padding: 11px 10px 9px 20px; } + padding: 11px 20px; + flex-grow: 0; } .modal-body { + flex-grow: 1; color: #666; padding: 0 20px; max-height: 250px; @@ -6282,6 +6288,13 @@ button.btn:focus, button.progress-button:focus { .modal-open { padding-right: 0 !important; } +.modal-footer { + flex-grow: 0; + border: 0; } + +.modal .btn-primary[disabled], .modal [disabled].progress-button--primary { + background-color: #d5d5d5; } + /* * Copyright 2016 Resin.io * diff --git a/lib/browser/components/drive-selector/services/drive-selector-state.js b/lib/browser/components/drive-selector/services/drive-selector-state.js index e3759af9..30c95827 100644 --- a/lib/browser/components/drive-selector/services/drive-selector-state.js +++ b/lib/browser/components/drive-selector/services/drive-selector-state.js @@ -72,4 +72,18 @@ module.exports = function(SelectionStateModel) { */ this.getSelectedDrive = SelectionStateModel.getDrive; + /** + * @summary Has a selected drive + * @function + * @public + * + * @returns {Boolean} whether there is a selected drive + * + * @example + * if (DriveSelectorStateService.hasSelectedDrive()) { + * console.log('There is a selected drive'); + * } + */ + this.hasSelectedDrive = SelectionStateModel.hasDrive; + }; diff --git a/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html index eaf2b185..a1ea310d 100644 --- a/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html +++ b/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html @@ -1,6 +1,6 @@ + + diff --git a/lib/scss/components/_modal.scss b/lib/scss/components/_modal.scss index 63928da4..4f6b25c7 100644 --- a/lib/scss/components/_modal.scss +++ b/lib/scss/components/_modal.scss @@ -14,6 +14,11 @@ * limitations under the License. */ +.modal-content { + display: flex; + flex-direction: column; +} + .modal-header { display: flex; align-items: baseline; @@ -28,10 +33,12 @@ .modal-header { color: $btn-default-color; - padding: 11px 10px 9px 20px; + padding: 11px 20px; + flex-grow: 0; } .modal-body { + flex-grow: 1; color: #666; padding: 0 20px; max-height: 250px; @@ -85,3 +92,12 @@ .modal-open { padding-right: 0 !important; } + +.modal-footer { + flex-grow: 0; + border: 0; +} + +.modal .btn-primary[disabled] { + background-color: darken($gray-lighter, 10%); +} diff --git a/tests/browser/components/drive-selector.spec.js b/tests/browser/components/drive-selector.spec.js index ef7337b6..ccb7d4db 100644 --- a/tests/browser/components/drive-selector.spec.js +++ b/tests/browser/components/drive-selector.spec.js @@ -148,6 +148,33 @@ describe('Browser: DriveSelector', function() { }); + describe('.hasSelectedDrive()', function() { + + it('should return false if no selected drive', function() { + SelectionStateModel.removeDrive(); + const hasDrive = DriveSelectorStateService.hasSelectedDrive(); + m.chai.expect(hasDrive).to.be.false; + }); + + it('should return false if the selected drive is an empty object', function() { + SelectionStateModel.setDrive({}); + const hasDrive = DriveSelectorStateService.hasSelectedDrive(); + m.chai.expect(hasDrive).to.be.false; + }); + + it('should return true if there is a selected drive', function() { + DriveSelectorStateService.toggleSelectDrive({ + device: '/dev/disk2', + name: 'USB Drive', + size: '16GB' + }); + + const hasDrive = DriveSelectorStateService.hasSelectedDrive(); + m.chai.expect(hasDrive).to.be.true; + }); + + }); + }); });