feat(gui): Add simple confirmation modal

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

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)
+  }
+}

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
+  }
+}

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;
+}

lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html

@@ -0,0 +1,36 @@
+<div class="modal-header">
+  <h4 class="modal-title">
+    <span>{{ ::modal.options.title }}</span>
+  </h4>
+  <button class="close"
+    tabindex="11"
+    ng-click="modal.reject()">&times;</button>
+</div>
+
+<div class="modal-body">
+  <p>{{ ::modal.options.message }}</p>
+</div>
+
+<div class="modal-footer">
+  <div class="modal-menu">
+    <button ng-if="modal.options.rejectionLabel" class="button button-block"
+      tabindex="12"
+      ng-class="{
+        'button-default': modal.options.cancelButton === 'default',
+        'button-primary': modal.options.cancelButton === 'primary',
+        'button-warning': modal.options.cancelButton === 'warning',
+        'button-danger': modal.options.cancelButton === 'danger',
+      }"
+      ng-click="modal.reject()">{{ ::modal.options.rejectionLabel }}</button>
+    <button class="button button-block"
+      tabindex="13"
+      ng-class="{
+        'button-default': modal.options.confirmButton === 'default',
+        'button-primary': modal.options.confirmButton === 'primary',
+        'button-warning': modal.options.confirmButton === 'warning',
+        'button-danger': modal.options.confirmButton === 'danger',
+      }"
+      ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
+  </div>
+</div>
+