diff --git a/build/css/main.css b/build/css/main.css index 666b25d3..4b872a6e 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -6465,9 +6465,15 @@ body { * See the License for the specific language governing permissions and * limitations under the License. */ +.modal-warning-modal .modal-content { + width: 350px; } + .modal-warning-modal .modal-title .glyphicon, .modal-warning-modal .modal-title .tick { color: #d9534f; } +.modal-warning-modal .button, .modal-warning-modal .progress-button { + text-transform: uppercase; } + /* * Copyright 2016 resin.io * diff --git a/lib/gui/components/drive-selector/controllers/drive-selector.js b/lib/gui/components/drive-selector/controllers/drive-selector.js index 05a1c4fe..3d54f107 100644 --- a/lib/gui/components/drive-selector/controllers/drive-selector.js +++ b/lib/gui/components/drive-selector/controllers/drive-selector.js @@ -67,11 +67,14 @@ module.exports = function($uibModalInstance, DrivesModel, SelectionStateModel, W return; } - WarningModalService.display([ - `This image recommends a ${SelectionStateModel.getImageRecommendedDriveSize()}`, - `bytes drive, however ${drive.device} is only ${drive.size} bytes.`, - 'Are you sure you want to continue?' - ].join(' ')).then((userAccepted) => { + WarningModalService.display({ + confirmationLabel: 'Yes, continue', + description: [ + `This image recommends a ${SelectionStateModel.getImageRecommendedDriveSize()}`, + `bytes drive, however ${drive.device} is only ${drive.size} bytes.`, + 'Are you sure you want to continue?' + ].join(' ') + }).then((userAccepted) => { if (userAccepted) { SelectionStateModel.toggleSetDrive(drive.device); } diff --git a/lib/gui/components/warning-modal/controllers/warning-modal.js b/lib/gui/components/warning-modal/controllers/warning-modal.js index 572524ae..254cd62e 100644 --- a/lib/gui/components/warning-modal/controllers/warning-modal.js +++ b/lib/gui/components/warning-modal/controllers/warning-modal.js @@ -16,14 +16,14 @@ 'use strict'; -module.exports = function($uibModalInstance, message) { +module.exports = function($uibModalInstance, options) { /** - * @summary Modal message + * @summary Modal options * @property * @public */ - this.message = message; + this.options = options; /** * @summary Reject the warning prompt diff --git a/lib/gui/components/warning-modal/services/warning-modal.js b/lib/gui/components/warning-modal/services/warning-modal.js index 0ef2bb57..c3ec7676 100644 --- a/lib/gui/components/warning-modal/services/warning-modal.js +++ b/lib/gui/components/warning-modal/services/warning-modal.js @@ -25,20 +25,25 @@ module.exports = function(ModalService) { * @function * @public * - * @param {String} message - danger message + * @param {Object} options - options + * @param {String} options.description - danger message + * @param {String} options.confirmationLabel - danger message * @fulfil {Boolean} - whether the user accepted or rejected the warning * @returns {Promise} * * @example - * WarningModalService.display('Don\'t do this!'); + * WarningModalService.display({ + * description: 'Don\'t do this!', + * confirmationLabel: 'Yes, continue!' + * }); */ - this.display = (message) => { + this.display = (options = {}) => { return ModalService.open({ template: './components/warning-modal/templates/warning-modal.tpl.html', controller: 'WarningModalController as modal', size: 'warning-modal', resolve: { - message: _.constant(message) + options: _.constant(options) } }).result; }; diff --git a/lib/gui/components/warning-modal/styles/_warning-modal.scss b/lib/gui/components/warning-modal/styles/_warning-modal.scss index ae5528ee..687f1fac 100644 --- a/lib/gui/components/warning-modal/styles/_warning-modal.scss +++ b/lib/gui/components/warning-modal/styles/_warning-modal.scss @@ -14,6 +14,13 @@ * limitations under the License. */ +.modal-warning-modal .modal-content { + width: 350px; +} + .modal-warning-modal .modal-title .glyphicon { color: $palette-theme-danger-background; } +.modal-warning-modal .button { + text-transform: uppercase; +} diff --git a/lib/gui/components/warning-modal/templates/warning-modal.tpl.html b/lib/gui/components/warning-modal/templates/warning-modal.tpl.html index 1e72acfc..0a67df77 100644 --- a/lib/gui/components/warning-modal/templates/warning-modal.tpl.html +++ b/lib/gui/components/warning-modal/templates/warning-modal.tpl.html @@ -3,20 +3,17 @@ Warning! +
{{ ::modal.message }}
+{{ ::modal.options.description }}