From 417499134596190eafea1e49f40b807c4883efcf Mon Sep 17 00:00:00 2001 From: Jonas Hermsmeier Date: Wed, 2 May 2018 23:21:02 +0200 Subject: [PATCH] feat(gui): Add simple confirmation modal --- .../components/confirm-modal/confirm-modal.js | 32 ++++++++++++ .../controllers/confirm-modal.js | 50 ++++++++++++++++++ .../confirm-modal/services/confirm-modal.js | 52 +++++++++++++++++++ .../confirm-modal/styles/confirm-modal.scss | 28 ++++++++++ .../templates/confirm-modal.tpl.html | 36 +++++++++++++ 5 files changed, 198 insertions(+) create mode 100644 lib/gui/app/components/confirm-modal/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/controllers/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/services/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/styles/confirm-modal.scss create mode 100644 lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html diff --git a/lib/gui/app/components/confirm-modal/confirm-modal.js b/lib/gui/app/components/confirm-modal/confirm-modal.js new file mode 100644 index 00000000..c5c09a89 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/confirm-modal.js @@ -0,0 +1,32 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +/** + * @module Etcher.Components.ConfirmModal + */ + +const angular = require('angular') +const MODULE_NAME = 'Etcher.Components.ConfirmModal' +const ConfirmModal = angular.module(MODULE_NAME, [ + require('../modal/modal') +]) + +ConfirmModal.controller('ConfirmModalController', require('./controllers/confirm-modal')) +ConfirmModal.service('ConfirmModalService', require('./services/confirm-modal')) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js b/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js new file mode 100644 index 00000000..983f7db7 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js @@ -0,0 +1,50 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +module.exports = function ($uibModalInstance, options) { + /** + * @summary Modal options + * @type {Object} + * @public + */ + this.options = options + + /** + * @summary Reject the warning prompt + * @function + * @public + * + * @example + * WarningModalController.reject(); + */ + this.reject = () => { + $uibModalInstance.close(false) + } + + /** + * @summary Accept the warning prompt + * @function + * @public + * + * @example + * WarningModalController.accept(); + */ + this.accept = () => { + $uibModalInstance.close(true) + } +} diff --git a/lib/gui/app/components/confirm-modal/services/confirm-modal.js b/lib/gui/app/components/confirm-modal/services/confirm-modal.js new file mode 100644 index 00000000..497b98e1 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/services/confirm-modal.js @@ -0,0 +1,52 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +const _ = require('lodash') + +module.exports = function ($sce, ModalService) { + /** + * @summary show the confirm modal + * @function + * @public + * + * @param {Object} options - options + * @param {String} options.description - danger message + * @param {String} options.confirmationLabel - confirmation button text + * @param {String} options.rejectionLabel - rejection button text + * @fulfil {Boolean} - whether the user accepted or rejected the confirm + * @returns {Promise} + * + * @example + * ConfirmModalService.show({ + * description: 'Don\'t do this!', + * confirmationLabel: 'Yes, continue!' + * }); + */ + this.show = (options = {}) => { + options.description = $sce.trustAsHtml(options.description) + return ModalService.open({ + name: 'confirm', + template: require('../templates/confirm-modal.tpl.html'), + controller: 'ConfirmModalController as modal', + size: 'confirm-modal', + resolve: { + options: _.constant(options) + } + }).result + } +} diff --git a/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss b/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss new file mode 100644 index 00000000..b13cafa7 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss @@ -0,0 +1,28 @@ +/* + * Copyright 2016 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.modal-confirm-modal .modal-content { + width: 350px; +} + +.modal-confirm-modal .modal-title .glyphicon { + color: $palette-theme-danger-background; +} + +.modal-confirm-modal .modal-body { + max-height: 200px; + overflow-y: auto; +} diff --git a/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html b/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html new file mode 100644 index 00000000..d0f5cf04 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html @@ -0,0 +1,36 @@ + + + + + +