update for loading-progress.

This commit is contained in:
kunw 2016-07-03 12:10:42 +08:00
parent 1cf9e198ab
commit 07b1e0c40e
14 changed files with 112 additions and 75 deletions

View File

@ -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

View File

@ -25,14 +25,14 @@ nav .container-custom {
}
.navbar-form {
margin-top: 0;
padding-right: 0;
margin-top: 0;
padding-right: 0;
}
.search-icon {
background: url("/static/resources/img/magnitude-glass.jpg") no-repeat 97% 6px;
background-size: 1.5em;
background-color: #FFFFFF;
background: url("/static/resources/img/magnitude-glass.jpg") no-repeat 97% 6px;
background-size: 1.5em;
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;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
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%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-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;
}

View File

@ -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>')
.css({'display': 'inline-block'})
.css({'position': 'relative'})
.css({'background-image': 'url(/static/resources/img/loading.gif)'})
.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 spinner = $('<span class="loading-progress">');
function convertToBoolean(val) {
return val === 'true' ? true : false;
}
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;
element.show();
element.find('div').remove();
if(hideTarget) {
element.html(pristine);
}else{
element.find('.loading-progress').remove();
}
element.removeAttr('disabled');
}
});

View File

@ -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>

View File

@ -42,8 +42,8 @@
vm.pingAvailable = true;
vm.pingMessage = '';
vm.toggleInProgress0 = false;
vm.toggleInProgress1 = false;
vm.pingTIP = 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;
}
}

View File

@ -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">

View File

@ -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() {

View File

@ -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';

View File

@ -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">

View File

@ -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 : '.');
}
}

View File

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

View File

@ -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});

View File

@ -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"-->

View File

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