mirror of
https://github.com/goharbor/harbor.git
synced 2025-01-31 03:51:23 +01:00
update for loading-progress.
This commit is contained in:
kunw
parent
1cf9e198ab
commit
07b1e0c40e
@ -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
|
||||
|
||||
@ -113,3 +113,15 @@ nav .container-custom {
|
||||
-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;
|
||||
}
|
||||
@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
|
||||
vm.searchReplicationPolicy = searchReplicationPolicy;
|
||||
vm.searchReplicationJob = searchReplicationJob;
|
||||
vm.refreshReplicationJob = refreshReplicationJob;
|
||||
|
||||
vm.retrievePolicy = retrievePolicy;
|
||||
vm.retrieveJob = retrieveJob;
|
||||
@ -56,12 +57,23 @@
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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() {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 : '.');
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,7 +90,7 @@ var locale_messages = {
|
||||
'from': '起始',
|
||||
'to': '结束',
|
||||
'timestamp': '时间戳',
|
||||
'dashboard': '消息中心',
|
||||
'dashboard': '控制面板',
|
||||
'admin_options': '管理员选项',
|
||||
'account_setting': '个人设置',
|
||||
'log_out': '注销',
|
||||
|
||||
2
static/vendors/spinner/spinner.min.js
vendored
2
static/vendors/spinner/spinner.min.js
vendored
@ -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});
|
||||
@ -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"-->
|
||||
|
||||
@ -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 }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user