update for loading-progress.

static/i18n/locale_zh-CN.ini

@@ -2,7 +2,7 @@ reset_email_hint = 请点击下面的链接进行重置密码操作
 reset_email_subject = 重置您的密码
 
 page_title_index = Harbor
-page_title_dashboard = 消息中心 - Harbor
+page_title_dashboard = 控制面板 - Harbor
 page_title_account_setting = 个人设置 - Harbor
 page_title_reset_password = 重置密码 - Harbor
 page_title_change_password = 修改密码 - Harbor

static/resources/css/header.css

@@ -25,14 +25,14 @@ nav .container-custom {
 }
 
 .navbar-form {
-    margin-top: 0;
+  margin-top: 0;
-    padding-right: 0;
+  padding-right: 0;
 }
 
 .search-icon {
-    background: url("/static/resources/img/magnitude-glass.jpg") no-repeat 97% 6px;
+  background: url("/static/resources/img/magnitude-glass.jpg") no-repeat 97% 6px;
-    background-size: 1.5em;
+  background-size: 1.5em;
-    background-color: #FFFFFF;
+  background-color: #FFFFFF;
 }
 
 .nav-custom li {
@@ -67,49 +67,61 @@ nav .container-custom {
 }
 
 .dropdown-submenu {
-    position: relative;
+  position: relative;
 }
 
 .dropdown-submenu>.dropdown-menu {
-    top: 0;
+  top: 0;
-    left: 100%;
+  left: 100%;
-    margin-top: -6px;
+  margin-top: -6px;
-    margin-left: -1px;
+  margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
+  -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px;
+  -moz-border-radius: 0 6px 6px;
-    border-radius: 0 6px 6px 6px;
+  border-radius: 0 6px 6px 6px;
 }
 
 .dropdown-submenu:hover>.dropdown-menu {
-    display: block;
+  display: block;
 }
 
 .dropdown-submenu>a:after {
-    display: block;
+  display: block;
-    content: " ";
+  content: " ";
-    float: right;
+  float: right;
-    width: 0;
+  width: 0;
-    height: 0;
+  height: 0;
-    border-color: transparent;
+  border-color: transparent;
-    border-style: solid;
+  border-style: solid;
-    border-width: 5px 0 5px 5px;
+  border-width: 5px 0 5px 5px;
-    border-left-color: #ccc;
+  border-left-color: #ccc;
-    margin-top: 5px;
+  margin-top: 5px;
-    margin-right: -10px;
+  margin-right: -10px;
 }
 
 .dropdown-submenu:hover>a:after {
-    border-left-color: #fff;
+  border-left-color: #fff;
 }
 
 .dropdown-submenu.pull-left {
-    float: none;
+  float: none;
 }
 
 .dropdown-submenu.pull-left>.dropdown-menu {
-    left: -100%;
+  left: -100%;
-    margin-left: 10px;
+  margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
+  -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
-}
+}
+
+.loading-progress {
+  display: inline-block;
+  position: relative;
+  background-image: url('/static/resources/img/loading.gif');
+  background-position: center;
+  background-size: 107px;
+  width: 1em;
+  height: 1.2em;
+  margin-bottom: 2px;
+  vertical-align: middle;
+}  

static/resources/js/components/loading-progress/loading-progress.directive.js

@@ -11,7 +11,7 @@
       'restrict': 'EA',
       'scope': {
         'toggleInProgress': '=',
-        'hideTarget': '='
+        'hideTarget': '@'
       },
       'link': link
     };
@@ -19,29 +19,33 @@
     return directive;
     
     function link(scope, element, attrs) {
-      var spinner = $('<div>')
+      var spinner = $('<span class="loading-progress">');
-        .css({'display': 'inline-block'})
+
-        .css({'position': 'relative'}) 
+      function convertToBoolean(val) {
-        .css({'background-image': 'url(/static/resources/img/loading.gif)'}) 
+        return val === 'true' ? true : false;
-        .css({'background-position': 'center'})
+      }
-        .css({'background-size': '107px'})
-        .css({'width': '1.2em'})
-        .css({'height': '1.2em'})
-        .css({'margin': '0 0 1px 8px'})
-        .css({'vertical-align': 'middle'});  
       
+      var hideTarget = convertToBoolean(scope.hideTarget);
+      
+      console.log('loading-progress, toggleInProgress:' + scope.toggleInProgress + ', hideTarget:' + hideTarget);
+      
+      var pristine = element.html();
+                 
       scope.$watch('toggleInProgress', function(current) {
         if(scope.toggleInProgress) {
-          element.append(spinner);
           element.attr('disabled', 'disabled');
-          if(scope.hideTarget) {
+          if(hideTarget) {
+            element.html(spinner);
+          }else{
+            spinner = spinner.css({'margin-left': '5px'});
             element.append(spinner);
-            element.hide();     
           }
         }else{
-          scope.hideTarget = false;
+          if(hideTarget) {
-          element.show();
+            element.html(pristine);
-          element.find('div').remove();
+          }else{
+            element.find('.loading-progress').remove();
+          }
           element.removeAttr('disabled');
         }
       });

static/resources/js/components/replication/create-policy.directive.html

@@ -85,7 +85,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <div class="col-md-3"></div>
               <div class="col-md-9">
-                <button type="button" class="btn btn-default" ng-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="vm.pingDestination()" loading-progress hide-target="false" toggle-in-progress="vm.toggleInProgress0">// 'test_connection' | tr //</button>
+                <button type="button" class="btn btn-default" ng-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="vm.pingDestination()" loading-progress hide-target="false" toggle-in-progress="vm.pingTIP">// 'test_connection' | tr //</button>
               </div>
             </div>
             <div class="form-group col-md-12 form-group-custom">
@@ -97,7 +97,7 @@
           </div>
         </div>
         <div class="modal-footer">
-          <button ng-show="vm.targetEditable" type="submit" class="btn btn-primary" ng-click="form.$valid && vm.save(replication)" loading-progress hide-target="false" toggle-in-progress="vm.toggleInProgress1">// 'ok' | tr //</button>
+          <button ng-show="vm.targetEditable" type="submit" class="btn btn-primary" ng-click="form.$valid && vm.save(replication)" loading-progress hide-target="false" toggle-in-progress="vm.saveTIP">// 'ok' | tr //</button>
           <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
         </div>
       </form>

static/resources/js/components/replication/create-policy.directive.js

@@ -42,8 +42,8 @@
     vm.pingAvailable = true;
     vm.pingMessage = '';
     
-    vm.toggleInProgress0 = false;
+    vm.pingTIP = false;
-    vm.toggleInProgress1 = false;
+    vm.saveTIP = false;
     
     vm.closeError = closeError;
     vm.toggleErrorMessage = false;
@@ -149,7 +149,7 @@
     }
     
     function saveOrUpdatePolicy() {
-      vm.toggleInProgress1 = true;
+      vm.saveTIP = true;
       
       switch(vm.action) {
       case 'ADD_NEW':
@@ -163,7 +163,7 @@
           .error(updateReplicationPolicyFailed);
         break;
       default:
-        vm.toggleInProgress = false;
+        vm.saveTIP = false;
       }
     }
     
@@ -189,7 +189,7 @@
       
       vm.pingAvailable = false;
       vm.pingMessage = $filter('tr')('pinging_target');
-      vm.toggleInProgress0 = true;
+      vm.pingTIP = true;
       
       PingDestinationService(target)
         .success(pingDestinationSuccess)
@@ -257,12 +257,12 @@
       console.log('Failed list replication policy:' + data);
     }
     function createReplicationPolicySuccess(data, status) {
-      vm.toggleInProgress1 = false;
+      vm.saveTIP = false;
       console.log('Successful create replication policy.');
       vm.reload();
     }
     function createReplicationPolicyFailed(data, status) {
-      vm.toggleInProgress1 = false;
+      vm.saveTIP = false;
       if(status === 409) {
         vm.errorMessages.push($filter('tr')('policy_already_exists'));
       }else{
@@ -271,12 +271,12 @@
       console.log('Failed create replication policy.');
     }
     function updateReplicationPolicySuccess(data, status) {
-      vm.toggleInProgress1 = false;
       console.log('Successful update replication policy.');
       vm.reload();
+      vm.saveTIP = false;
     }
     function updateReplicationPolicyFailed(data, status) {
-      vm.toggleInProgress1 = false;
+      vm.saveTIP = false;
       if(status === 409) {
         vm.errorMessages.push($filter('tr')('policy_already_exists')); 
       }else{
@@ -307,12 +307,12 @@
     function pingDestinationSuccess(data, status) {
       vm.pingAvailable = true;
       vm.pingMessage = $filter('tr')('successful_ping_target', []);
-      vm.toggleInProgress0 = false;
+      vm.pingTIP = false;
     }
     function pingDestinationFailed(data, status) {
       vm.pingAvailable = true;
       vm.pingMessage = $filter('tr')('failed_ping_target', []) + (data && data.length > 0 ? ':' + data : '.');
-      vm.toggleInProgress0 = false;
+      vm.pingTIP = false;
     }
   }
   

static/resources/js/components/replication/list-replication.directive.html

@@ -63,7 +63,7 @@
       <div class="input-group">
         <input type="text" class="form-control" placeholder="" ng-model="vm.replicationJobName" size="30">
         <span class="input-group-btn">
-          <button class="btn btn-primary" type="button" ng-click="vm.searchReplicationJob()" ng-disabled="vm.refreshPending"><span class="glyphicon glyphicon-search"></span></button>
+          <button class="btn btn-primary" type="button" ng-click="vm.searchReplicationJob()" loading-progress hide-target = "true" toggle-in-progress="vm.searchJobTIP"><span class="glyphicon glyphicon-search"></span></button>
         </span>
       </div>
       <div class="input-group">
@@ -91,7 +91,7 @@
         </div>
       </div>		
       <div class="input-group">
-        <button type="button" class="btn btn-success" ng-click="vm.searchReplicationJob()"><span class="glyphicon glyphicon-refresh"></span></button>
+        <button type="button" class="btn btn-success" ng-click="vm.refreshReplicationJob()" loading-progress hide-target = "true" toggle-in-progress="vm.refreshJobTIP" ><span class="glyphicon glyphicon-refresh"></span></button>
       </div>
     </div> 
     <div class="pane-split" id="down-pane">   

static/resources/js/components/replication/list-replication.directive.js

@@ -39,6 +39,7 @@
     
     vm.searchReplicationPolicy = searchReplicationPolicy;
     vm.searchReplicationJob = searchReplicationJob;
+    vm.refreshReplicationJob = refreshReplicationJob;
     
     vm.retrievePolicy = retrievePolicy;
     vm.retrieveJob = retrieveJob;
@@ -56,15 +57,26 @@
    
     vm.pickUp = pickUp;
     
+    vm.searchJobTIP = false;
+    vm.refreshJobTIP = false;
+    
     function searchReplicationPolicy() {
       vm.retrievePolicy();
     }   
     
     function searchReplicationJob() {
       if(vm.lastPolicyId !== -1) {
+        vm.searchJobTIP = true;
         vm.retrieveJob(vm.lastPolicyId);
       }
     }            
+    
+    function refreshReplicationJob() {
+      if(vm.lastPolicyId !== -1) {
+        vm.refreshJobTIP = true;
+        vm.retrieveJob(vm.lastPolicyId);
+      }
+    }
    
     function retrievePolicy() {
       ListReplicationPolicyService('', vm.projectId, vm.replicationPolicyName)
@@ -102,11 +114,14 @@
           }
         }
       });
+      vm.searchJobTIP = false;
+      vm.refreshJobTIP = false;
     }
     
     function listReplicationJobFailed(data, status) {
       console.log('Failed list replication job:' + data);
-      vm.refreshPending = false;
+      vm.searchJobTIP = false;
+      vm.refreshJobTIP = false;
     }
 
     function addReplication() {

static/resources/js/components/sign-in/sign-in.directive.js

@@ -21,6 +21,8 @@
     vm.doContinue = doContinue;
     vm.doLogOut = doLogOut;
     
+    vm.signInTIP = false;
+    
     function reset() {
       vm.hasError = false;
       vm.errorMessage = '';
@@ -28,6 +30,7 @@
       
     function doSignIn(user) {  
       if(user && angular.isDefined(user.principal) && angular.isDefined(user.password)) {
+        vm.signInTIP = true;
         SignInService(user.principal, user.password)
           .success(signedInSuccess)
           .error(signedInFailed);
@@ -39,6 +42,7 @@
     }
     
     function signedInFailed(data, status) {
+      vm.signInTIP = false;
       if(status === 401) {
         vm.hasError = true;
         vm.errorMessage = 'username_or_password_is_incorrect';

static/resources/js/components/system-management/create-destination.directive.html

@@ -49,7 +49,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <div class="col-md-3"></div>
               <div class="col-md-9">
-              <button type="submit" class="btn btn-default" ng-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="form.$valid && vm.pingDestination()">// 'test_connection' | tr //</button>
+              <button type="submit" class="btn btn-default" ng-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="form.$valid && vm.pingDestination()" loading-progress hide-target="false" toggle-in-progress="vm.pingTIP">// 'test_connection' | tr //</button>
               </div>
             </div>
             <div class="form-group col-md-12 form-group-custom">

static/resources/js/components/system-management/create-destination.directive.js

@@ -29,6 +29,8 @@
     vm.toggleErrorMessage = false;
     vm.errorMessages = [];            
         
+    vm.pingTIP = false;
+    
     $scope.$watch('destination.endpoint', function(current) {
       if(current) {
         vm.notAvailable = false;
@@ -124,6 +126,8 @@
     }
     
     function pingDestination() {
+      
+      vm.pingTIP = true;
       vm.pingAvailable = false;
       
       var target = {
@@ -143,10 +147,12 @@
     
     function pingDestinationSuccess(data, status) {
       vm.pingAvailable = true;
+      vm.pingTIP = false;
       vm.pingMessage = $filter('tr')('successful_ping_target', []);
     }
     function pingDestinationFailed(data, status) {
-      vm.pingAvailable = true;
+
+      vm.pingTIP = false;
       vm.pingMessage = $filter('tr')('failed_ping_target', []) + (data && data.length > 0 ? ':' + data : '.');
     }
   }

static/resources/js/services/i18n/locale_messages_zh-CN.js

@@ -90,7 +90,7 @@ var locale_messages = {
   'from': '起始',
   'to': '结束',
   'timestamp': '时间戳',
-  'dashboard': '消息中心',
+  'dashboard': '控制面板',
   'admin_options': '管理员选项',
   'account_setting': '个人设置',
   'log_out': '注销',

static/vendors/spinner/spinner.min.js

@@ -1,2 +0,0 @@
-// http://spin.js.org/#v2.3.2
-!function(a,b){"object"==typeof module&&module.exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return m[e]||(k.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",k.cssRules.length),m[e]=1),e}function d(a,b){var c,d,e=a.style;if(b=b.charAt(0).toUpperCase()+b.slice(1),void 0!==e[b])return b;for(d=0;d<l.length;d++)if(c=l[d]+b,void 0!==e[c])return c}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a,b){return"string"==typeof a?a:a[b%a.length]}function h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}k.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" "+-j}),{width:k,height:k})}function h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.scale*d.width,left:d.scale*d.radius,top:-d.scale*d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var i,j=d.scale*(d.length+d.width),k=2*d.scale*j,l=-(d.width+d.length)*d.scale*2+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.lines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k,l=["webkit","Moz","ms","O"],m={},n={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",opacity:.25,rotate:0,direction:1,speed:1,trail:100,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:!1,hwaccel:!1,position:"absolute"};if(h.defaults={},f(h.prototype,{spin:function(b){this.stop();var c=this,d=c.opts,f=c.el=a(null,{className:d.className});if(e(f,{position:d.position,width:0,zIndex:d.zIndex,left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function o(){h++;for(var a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function h(b,c){return e(a(),{position:"absolute",width:f.scale*(f.length+f.width)+"px",height:f.scale*f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg) translate("+f.scale*f.radius+"px,0)",borderRadius:(f.corners*f.scale*f.width>>1)+"px"})}for(var i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.scale*f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px #000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}}),"undefined"!=typeof document){k=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}();var o=e(a("group"),{behavior:"url(#default#VML)"});!d(o,"transform")&&o.adj?i():j=d(o,"animation")}return h});

views/sections/header-include.htm

@@ -8,8 +8,6 @@
 <script src="/static/vendors/moment/min/moment-with-locales.min.js"></script>
 <script src="/static/vendors/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
 <link rel="stylesheet" href="/static/vendors/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
-<script src="/static/vendors/spinner/spinner.min.js"></script>
-
 
 <!-- Latest compiled and minified CSS -->
 <!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"-->

views/sign-in.htm

@@ -31,7 +31,7 @@
   <div class="form-group">
     <div class="col-sm-offset-1 col-sm-10">
       <div class="pull-right">
-        <button type="submit" class="btn btn-default" ng-click="vm.doSignIn(user)">// 'sign_in' | tr //</button>
+        <button type="submit" class="btn btn-default" ng-click="vm.doSignIn(user)" loading-progress hide-target="false" toggle-in-progress="vm.signInTIP">// 'sign_in' | tr //</button>
         {{ if eq .AuthMode "db_auth" }}
         <button type="button" class="btn btn-success" ng-click="vm.doSignUp()">// 'sign_up' | tr //</button>   
         {{ end }}