Use modal from Angular-Strap instead of the one in angular-ui-bootstrap.

src/main.less

@@ -21,3 +21,21 @@
 .c3-ygrid-line.overdraft line {
     stroke: #FF0000;
 }
+
+// Needed for modal backdrop opacity.
+.modal-backdrop.am-fade {
+  opacity: .5;
+  transition: opacity .15s linear;
+  &.ng-enter {
+    opacity: 0;
+    &.ng-enter-active {
+      opacity: .5;
+    }
+  }
+  &.ng-leave {
+    opacity: .5;
+    &.ng-leave-active {
+      opacity: 0;
+    }
+  }
+}

src/operations/index.js

@@ -31,14 +31,12 @@ var balanceChartModule  = require('./balance-chart.component.js'),
 
 var ngResource       = require('angular-resource'),
     ngMessages       = require('angular-messages'),
-    ngUiBootstrap    = require('angular-ui-bootstrap'),
     ngUiNotification = require('angular-ui-notification'),
     ngStrap          = require('angular-strap');
 
 module.exports = angular.module('accountant.operations', [
     ngResource,
     ngMessages,
-    ngUiBootstrap,
     ngUiNotification,
     ngStrap,
     accountModule,
@@ -62,8 +60,8 @@ module.exports = angular.module('accountant.operations', [
     /*
      * Controller for the operations.
      */
-    .controller('OperationController', function($routeParams, $uibModal,
+    .controller('OperationController', function($routeParams, $modal,
-        Notification, Operation, Account, $log, $q) {
+        Notification, Operation, Account, $log) {
 
         var vm = this;
 
@@ -130,25 +128,36 @@ module.exports = angular.module('accountant.operations', [
                 Notification.error(
                     'Error while saving operation: ' + result.message
                 );
-
-                return $q.reject(result);
             });
         };
 
         /*
          * Delete an operation and return a promise.
          */
+        vm.confirmDelete = function(operation) {
+            var title = "Delete operation #" + operation.id;
+
+            $modal({
+                templateUrl: operationDeleteTmpl,
+                controller: function($scope, title, operation, $delete) {
+                    $scope.title = title;
+                    $scope.operation = operation;
+                    $scope.$delete = function() {
+                        $scope.$hide();
+                        $delete($scope.operation);
+                    };
+                },
+                locals: {
+                    title: title,
+                    operation: operation,
+                    $delete: vm.delete
+                }
+            });
+        };
+
         vm.delete = function(operation) {
             var id = operation.id;
 
-            $uibModal.open({
-                component: 'operationDeleteModalComponent',
-                resolve: {
-                    operation: function() {
-                        return operation;
-                    }
-                }
-            }).result.then(function(operation) {
             return operation.$delete().then(function() {
                 Notification.success('Operation #' + id + ' deleted.');
 
@@ -160,11 +169,6 @@ module.exports = angular.module('accountant.operations', [
                     'An error occurred while trying to delete operation #' +
                     id + ':<br />' + result
                 );
-
-                    return $q.reject(result);
-                });
-            }, function() {
-                return false;
             });
         };
 
@@ -173,17 +177,28 @@ module.exports = angular.module('accountant.operations', [
          * @returns a promise.
          */
         vm.modify = function(operation) {
-            return $uibModal.open({
+            // FIXME Alexis Lahouze 2017-06-15 i18n
-                component: 'operationModifyModalComponent',
+            var title = "Operation";
-                resolve: {
+
-                    operation: function() {
+            if (operation.id) {
-                        return operation;
+                title = title + " #" + operation.id;
             }
+
+            $modal({
+                templateUrl: operationFormTmpl,
+                controller: function($scope, title, operation, $save) {
+                    $scope.title = title;
+                    $scope.operation = operation;
+                    $scope.$save = function() {
+                        $scope.$hide();
+                        $save($scope.operation);
+                    };
+                },
+                locals: {
+                    title: title,
+                    operation: operation,
+                    $save: vm.save
                 }
-            }).result.then(function(operation) {
-                return vm.save(operation);
-            }, function() {
-                return false;
             });
         };
 
@@ -194,78 +209,4 @@ module.exports = angular.module('accountant.operations', [
         vm.account = Account.get({id: $routeParams.accountId});
     })
 
-    .component('operationModifyModalComponent', {
-        templateUrl: operationFormTmpl,
-        bindings: {
-            resolve: '<',
-            close: '&',
-            dismiss: '&'
-        },
-        controller: function() {
-            var vm = this;
-
-            vm.$onInit = function() {
-                vm.operation = vm.resolve.operation;
-            };
-
-            vm.ok = function() {
-                vm.close({
-                    $value: vm.operation
-                });
-            };
-
-            vm.cancel = function() {
-                vm.dismiss({
-                    $value: 'cancel'
-                });
-            };
-
-            vm.title = function() {
-                // FIXME Alexis Lahouze 2017-06-15 i18n
-                if (vm.operation.id) {
-                    return "Operation #" + vm.operation.id;
-                } else {
-                    return "Operation";
-                }
-            };
-        }
-    })
-
-    .component('operationDeleteModalComponent', {
-        templateUrl: operationDeleteTmpl,
-        bindings: {
-            resolve: '<',
-            close: '&',
-            dismiss: '&'
-        },
-        controller: function() {
-            var vm = this;
-
-            vm.$onInit = function() {
-                vm.operation = vm.resolve.operation;
-            };
-
-            vm.ok = function() {
-                vm.close({
-                    $value: vm.operation
-                });
-            };
-
-            vm.cancel = function() {
-                vm.dismiss({
-                    $value: 'cancel'
-                });
-            };
-
-            vm.title = function() {
-                // FIXME Alexis Lahouze 2017-06-15 i18n
-                if (vm.operation.id) {
-                    return "Operation #" + vm.operation.id;
-                } else {
-                    return "Operation";
-                }
-            };
-        }
-    })
-
     .name;

src/operations/operation.delete.tmpl.html

@@ -1,16 +1,24 @@
-<div class="modal-header">
+<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
+  <div class="modal-dialog">
-</div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
+      </div>
 
-<div class="modal-body" id="modal-body">
+      <div class="modal-body" id="modal-body">
-    <p>Voulez-vous supprimer l'opération #{{ $ctrl.operation.id }} ayant pour libellé :<br/>{{ $ctrl.operation.label }}
+        <p>Voulez-vous supprimer l'opération #{{ operation.id }} ayant pour libellé :<br/>{{ operation.label }}
         </p>
-<div class="modal-footer">
+      </div>
-  <button class="btn btn-danger" type="button" ng-click="$ctrl.ok()">
+
+      <div class="modal-footer">
+        <button class="btn btn-danger" type="button" ng-click="$delete()">
           Supprimer
         </button>
-  <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
+
+        <button class="btn btn-default" type="button" ng-click="$hide()">
           Annuler
         </button>
+      </div>
+    </div>
+  </div>
 </div>
-

src/operations/operation.form.tmpl.html

@@ -1,3 +1,5 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
 <!--
     This file is part of Accountant.
 
@@ -14,19 +16,20 @@
     You should have received a copy of the GNU Affero General Public License
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
+  <div class="modal-dialog">
-<div class="modal-header">
+    <div class="modal-content">
-    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
+      <div class="modal-header">
-</div>
+        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
+      </div>
 
-<div class="modal-body" id="modal-body">
+      <div class="modal-body" id="modal-body">
         <form class="form-horizontal simple-form">
           <div class="form-group">
             <label class="col-sm-4 control-label" for="operation-date">Date</label>
             <div class="col-sm-8">
               <input class="form-control" id="operation-date" name="operation_date"
-          type="text" ng-model="$ctrl.operation.operation_date"
+                type="text" ng-model="operation.operation_date"
                 bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
                 placeholder="Operation date">
             </div>
@@ -36,7 +39,7 @@
             <label class="col-sm-4 control-label" for="label">Label</label>
             <div class="col-sm-8">
               <input class="form-control" id="label" name="label"
-          ng-model="$ctrl.operation.label" type="text" placeholder="Label">
+                ng-model="operation.label" type="text" placeholder="Label">
               </input>
             </div>
           </div>
@@ -45,7 +48,7 @@
             <label class="col-sm-4 control-label" for="value">Montant</label>
             <div class="col-sm-8">
               <input class="form-control" id="value" name="value"
-          ng-model="$ctrl.operation.value" type="number" placeholder="Value">
+                ng-model="operation.value" type="number" placeholder="Value">
               </input>
             </div>
           </div>
@@ -54,18 +57,21 @@
             <label class="col-sm-4 control-label" for="category">Catégorie</label>
             <div class="col-sm-8">
               <input class="form-control" id="category" name="category"
-          ng-model="$ctrl.operation.category" type="text" placeholder="Category">
+                ng-model="operation.category" type="text" placeholder="Category">
               </input>
             </div>
           </div>
         </form>
-</div>
+      </div>
 
-<div class="modal-footer">
+      <div class="modal-footer">
-  <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">
+        <button class="btn btn-primary" type="button" ng-click="$save()">
           OK
         </button>
-  <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
+        <button class="btn btn-default" type="button" ng-click="$hide()">
           Annuler
         </button>
+      </div>
+    </div>
+  </div>
 </div>

src/operations/operations.html

@@ -103,7 +103,7 @@
               <!-- Delete operation, with confirm. -->
               <button type="button" class="btn btn-default"
                 ng-if="operation.id && !operation.scheduled_operation_id"
-                ng-click="operationsCtrl.delete(operation)">
+                ng-click="operationsCtrl.confirmDelete(operation)">
                 <span class="fa fa-trash-o"></span>
               </button>
             </div>