feat(app\ui\modals): add progress dialog

src/app/pages/ui/modals/ModalsPageCtrl.js

@@ -9,7 +9,7 @@
     .controller('ModalsPageCtrl', ModalsPageCtrl);
 
   /** @ngInject */
-  function ModalsPageCtrl($scope, $uibModal) {
+  function ModalsPageCtrl($scope, $uibModal, baProgressModal) {
     $scope.open = function (page, size) {
       $uibModal.open({
         animation: true,
@@ -22,6 +22,7 @@
         }
       });
     };
+    $scope.openProgressDialog = baProgressModal.open;
   }
 
 

src/app/pages/ui/modals/modals.html

@@ -42,5 +42,17 @@
       <div ng-include="'app/pages/ui/modals/notifications/notifications.html'"></div>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Progress dialogs"
+         ba-panel-class="with-scroll">
+      <div class="modal-buttons same-width clearfix">
+        <button type="button" class="btn btn-info" data-toggle="modal" ng-click="openProgressDialog()">
+          Progress dialog
+        </button>
+      </div>
+    </div>
+  </div>
 
 </div>

src/app/pages/ui/modals/progressModal/ProgressModalCtrl.js

@@ -0,0 +1,25 @@
+/**
+ * Created by n.poltoratsky
+ * on 24.06.2016.
+ */
+(function () {
+    'use strict';
+
+    angular.module('BlurAdmin.pages.ui.modals')
+        .controller('ProgressModalCtrl', ProgressModalCtrl);
+
+    function ProgressModalCtrl($timeout, baProgressModal) {
+
+        baProgressModal.setProgress(0);
+
+        (function changeValue() {
+            if (baProgressModal.getProgress() >= 100) {
+                baProgressModal.close();
+            } else {
+                baProgressModal.setProgress(baProgressModal.getProgress() + 10);
+                $timeout(changeValue, 300);
+            }
+        })();
+    }
+
+})();

src/app/pages/ui/modals/progressModal/progressModal.html

@@ -0,0 +1,8 @@
+<div class="modal-content" ng-controller="ProgressModalCtrl">
+    <div class="modal-body">
+        <progress-bar-round>
+        </progress-bar-round>
+    </div>
+    <div class="modal-footer">
+    </div>
+</div>

src/app/theme/components/progressBarRound/progressBarRound.directive.js

@@ -0,0 +1,30 @@
+/**
+ * Created by n.poltoratsky
+ * on 28.06.2016.
+ */
+(function () {
+    'use strict';
+
+    angular.module('BlurAdmin.theme.components')
+        .directive('progressBarRound', progressBarRound);
+
+    /** @ngInject */
+    function progressBarRound(baProgressModal) {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/theme/components/progressBarRound/progressBarRound.html',
+            link:function($scope, element, attrs) {
+                $scope.baProgressDialog = baProgressModal;
+                $scope.$watch(function () {
+                    return baProgressModal.getProgress();
+                }, animateBar);
+
+                function animateBar() {
+                    var circle = element.find('#loader')[0];
+                    circle.setAttribute("stroke-dasharray", baProgressModal.getProgress() * 180 * Math.PI / 100 + ", 20000");
+                    $scope.progress = baProgressModal.getProgress();
+                }
+            }
+        }
+    }
+})();

src/app/theme/components/progressBarRound/progressBarRound.html

@@ -0,0 +1,8 @@
+<svg class="center-block progress-bar-round" width="200" height="200">
+    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
+    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
+            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
+            transform="rotate(-90,100,100)" stroke-linecap="round"/>
+    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
+    <text class="percentage" text-anchor="middle" x="100" y="130">{{progress}}%</text>
+</svg>

src/app/theme/services/baProgressModal.js

@@ -0,0 +1,55 @@
+/**
+ * @author n.poltoratsky
+ * created on 27.06.2016
+ */
+(function () {
+    'use strict';
+
+    angular.module('BlurAdmin.theme')
+        .factory('baProgressModal', baProgressModal);
+
+    /** @ngInject */
+    function baProgressModal($uibModal) {
+        var methods = {};
+        var progress = 0;
+        var max = 100;
+        var opened = false;
+
+        return {
+            setProgress: function (value) {
+                if (value > max) {
+                    throw Error('Progress can\'t be greater than max');
+                }
+                progress = value;
+            },
+            getProgress: function () {
+                return progress;
+            },
+            open: function() {
+                if (!opened) {
+                    methods = $uibModal.open({
+                        animation: true,
+                        templateUrl: 'app/pages/ui/modals/progressmodal/progressModal.html',
+                        size: 'sm',
+                        keyboard: false,
+                        backdrop: 'static'
+                    });
+                    opened = true;
+                } else {
+                    throw Error('Progress modal opened now');
+                }
+
+            },
+            close: function() {
+                if (opened) {
+                    methods.close();
+                    opened = false;
+                } else {
+                    throw Error('Progress modal is not active');
+                }
+
+            }
+        };
+    }
+
+})();

src/sass/theme/components/_progressRound.scss

@@ -0,0 +1,12 @@
+svg.progress-bar-round circle {
+  transition: 0.5s;
+}
+.percentage {
+  font-size: 46px;
+}
+.loading {
+  font-size: 16px;
+}
+.progress-bar-round {
+  margin-top: 15px;
+}