Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-26 20:26:13 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5993 from zhoumeina/remove_jquery

Browse Source 
refactor gauge component using angular way,remove jquery
This commit is contained in:
Qian Deng 2018-10-10 15:05:01 +08:00 committed by GitHub
commit dbe58d24f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 230 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/portal/package-lock.json generated
View File

@ -7728,12 +7728,6 @@
"integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
"dev": true
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"dev": true
},
"js-base64": {
"version": "2.4.8",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",

4
src/portal/package.json
View File

@ -15,7 +15,8 @@
"build_lib": "ng build --prod lib",
"npm_pack": "cd lib/dist && npm pack",
"package": "npm run build_lib && npm run npm_pack",
"link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui"
"link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui",
"build_all":"npm run build_lib && npm run link_lib && npm run build"
},
"private": true,
"dependencies": {
@ -63,7 +64,6 @@
"enhanced-resolve": "^3.0.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^3.3.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "^1.0.1",

4
src/portal/src/app/shared/gauge/gauge.component.html
View File

@ -1,8 +1,8 @@
<div class="{{sizeClass}}">
<div class="esxc-gauge-container esxc-gauge">
<div class="esxc-gauge-circle-bg"></div>
<div #barOne class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
<div #barTwo class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
<div #barOne [style.transform]="'rotate(' + posOne + 'deg)'" [style.background-color]="_colorOne" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
<div #barTwo [style.transform]="'rotate(' + posTwo + 'deg)'" [style.background-color]="_colorTwo" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
<div class="esxc-gauge-circle-inner" [ngStyle]="{'background-color': backgroundColor}">
<div class="esxc-gauge-circle-caption">
<span class="esxc-value">{{used}}</span>

264
src/portal/src/app/shared/gauge/gauge.component.scss
View File

@ -52,239 +52,245 @@
* Small size gauge sizing
*/
.esxc-gauge-small .esxc-gauge-container {
.esxc-gauge-small {
.esxc-gauge-container {
width: 60px;
height: 30px;
top: -8px;
left: 4px;
}
}
.esxc-gauge-small .esxc-gauge-circle-fill {
.esxc-gauge-circle-fill {
height: 60px;
border-radius: 30px;
clip: rect(30px, 60px, 60px, 0);
}
}
.esxc-gauge-small .esxc-gauge-circle-bg {
.esxc-gauge-circle-bg {
height: 60px;
border-radius: 30px;
}
}
.esxc-gauge-small .esxc-gauge-circle-inner {
.esxc-gauge-circle-inner {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 5px;
}
}
.esxc-gauge-small .esxc-gauge-circle-caption {
.esxc-gauge-circle-caption {
margin-top: 6px;
}
}
/*
* Medium size gauge sizing
*/
/*Small size*/
.esxc-gauge-medium .esxc-gauge-container {
width: 130px;
height: 65px;
}
.esxc-gauge-medium .esxc-gauge-circle-fill {
height: 130px;
border-radius: 130px;
clip: rect(65px, 130px, 130px, 0);
}
.esxc-gauge-medium .esxc-gauge-circle-bg {
height: 130px;
border-radius: 65px;
}
.esxc-gauge-medium .esxc-gauge-circle-inner {
height: 120px;
width: 120px;
border-radius: 60px;
margin: 5px;
}
/*
* Large size gauge sizing
*/
.esxc-gauge-large .esxc-gauge-container {
width: 260px;
height: 130px;
}
.esxc-gauge-large .esxc-gauge-circle-fill {
height: 260px;
border-radius: 130px;
clip: rect(130px, 260px, 260px, 0);
}
.esxc-gauge-large .esxc-gauge-circle-bg {
height: 260px;
border-radius: 130px;
}
.esxc-gauge-large .esxc-gauge-circle-inner {
width: 240px;
height: 240px;
border-radius: 120px;
margin: 10px;
}
.esxc-gauge-large .esxc-gauge-circle-caption {
margin-top: 95px;
}
/*Sall size*/
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-value {
.esxc-gauge-circle-caption .esxc-value {
font-size: 16px;
font-weight: 600;
}
}
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-unit {
.esxc-gauge-circle-caption .esxc-unit {
font-size: 10px;
}
}
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-loading {
.esxc-gauge-circle-caption .esxc-loading {
font-size: 10px;
}
}
.esxc-gauge-small .esxc-title {
.esxc-title {
font-size: 10px;
text-align: center;
margin-top: 3px;
position: relative;
bottom: 12px;
}
}
.esxc-gauge-small .esxc-title .esxc-bar-title {
.esxc-title .esxc-bar-title {
float: left;
text-align: right;
width: 70px;
margin-top: 0;
}
}
.esxc-gauge-small .esxc-limit {
.esxc-limit {
text-align: center;
position: relative;
top: -8px;
width: 70px;
}
}
.esxc-gauge-small .esxc-limit .esxc-value {
.esxc-limit .esxc-value {
font-size: 8px;
}
}
.esxc-gauge-small .esxc-limit .esxc-unit {
.esxc-limit .esxc-unit {
font-size: 8px;
}
}
.esxc-gauge-small .esxc-limit .esxc-label {
.esxc-limit .esxc-label {
font-size: 8px;
}
}
.esxc-gauge-small .esxc-limit .esxc-bar-limit {
.esxc-limit .esxc-bar-limit {
text-align: right;
}
}
/*medium size*/
.esxc-gauge-medium .esxc-gauge-circle-caption {
/*
* Medium size gauge sizing
*/
.esxc-gauge-medium {
.esxc-gauge-container {
width: 130px;
height: 65px;
}
.esxc-gauge-circle-fill {
height: 130px;
border-radius: 130px;
clip: rect(65px, 130px, 130px, 0);
}
.esxc-gauge-circle-bg {
height: 130px;
border-radius: 65px;
}
.esxc-gauge-circle-inner {
height: 120px;
width: 120px;
border-radius: 60px;
margin: 5px;
}
/*medium size*/
.esxc-gauge-circle-caption {
margin-top: 40px;
color: #000;
}
}
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-value {
.esxc-gauge-circle-caption .esxc-value {
font-size: 22px;
}
}
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-unit {
.esxc-gauge-circle-caption .esxc-unit {
font-size: 14px;
}
}
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-loading {
.esxc-gauge-circle-caption .esxc-loading {
font-size: 25px;
}
}
.esxc-gauge-medium .esxc-limit {
.esxc-limit {
text-align: center;
color: #565656;
}
}
.esxc-gauge-medium .esxc-limit .esxc-value {
.esxc-limit .esxc-value {
font-size: 12px;
}
}
.esxc-gauge-medium .esxc-limit .esxc-unit {
.esxc-limit .esxc-unit {
font-size: 12px;
}
}
.esxc-gauge-medium .esxc-limit .esxc-label {
.esxc-limit .esxc-label {
font-size: 12px;
}
}
.esxc-gauge-medium .esxc-title {
.esxc-title {
font-size: 13px;
font-weight: 600;
color: #565656;
text-align: center;
margin-top: -8px;
}
}
}
/*large size*/
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-value {
/*
* Large size gauge sizing
*/
.esxc-gauge-large {
.esxc-gauge-container {
width: 260px;
height: 130px;
}
.esxc-gauge-circle-fill {
height: 260px;
border-radius: 130px;
clip: rect(130px, 260px, 260px, 0);
}
.esxc-gauge-circle-bg {
height: 260px;
border-radius: 130px;
}
.esxc-gauge-circle-inner {
width: 240px;
height: 240px;
border-radius: 120px;
margin: 10px;
}
.esxc-gauge-circle-caption {
margin-top: 95px;
}
/*large size*/
.esxc-gauge-circle-caption .esxc-value {
font-size: 40px;
}
}
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-unit {
.esxc-gauge-circle-caption .esxc-unit {
font-size: 18px;
}
}
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-loading {
.esxc-gauge-circle-caption .esxc-loading {
font-size: 30px;
}
}
.esxc-gauge-large .esxc-limit {
.esxc-limit {
text-align: center;
margin-top: 4px;
}
}
.esxc-gauge-large .esxc-limit .esxc-value {
.esxc-limit .esxc-value {
font-size: 14px;
color: #565656;
line-height: 18px;
}
}
.esxc-gauge-large .esxc-limit .esxc-unit {
.esxc-limit .esxc-unit {
font-size: 14px;
}
}
.esxc-gauge-large .esxc-limit .esxc-label {
.esxc-limit .esxc-label {
font-size: 14px;
}
}
.esxc-gauge-large .esxc-limit .esxc-bar-limit {
.esxc-limit .esxc-bar-limit {
text-align: right;
}
}
.esxc-gauge-large .esxc-title {
.esxc-title {
font-size: 18px;
font-weight: 600;
color: #565656;
line-height: 18px;
text-align: center;
margin-top: -2px;
}
.esxc-gauge-large .esxc-title .esxc-bar-title {
.esxc-bar-title {
float: left;
text-align: right;
width: 70px;
margin-top: 0;
}
}
}
}

82
src/portal/src/app/shared/gauge/gauge.component.ts
View File

@ -19,8 +19,6 @@ import {
ElementRef
} from '@angular/core';
import * as $ from 'jquery';
const RESOURCE_COLOR_GREEN_NORMAL: string = '#5DB700';
const RESOURCE_COLOR_ORANGE_NORMAL: string = '#FBBF00';
const RESOURCE_COLOR_RED_NORMAL: string = '#EA400D';
@ -43,6 +41,9 @@ export class GaugeComponent implements AfterViewInit {
_title: string = "UNKNOWN"; // Lang key
_free: number = 0;
_threasHold: number = 0;
posOne = 0;
posTwo = 0;
transition = '';
/**
* Background color of the component. Default is white.
@ -195,7 +196,6 @@ export class GaugeComponent implements AfterViewInit {
this._positionOne = percent;
this.setBars();
this.setColors();
this.setAnimate();
}
@ -204,58 +204,12 @@ export class GaugeComponent implements AfterViewInit {
return;
}
let barOne = $(this.barOne.nativeElement);
let barTwo = $(this.barTwo.nativeElement);
if (!barOne || !barTwo) {
return;
}
let posOne, posTwo;
if (isNaN(this.positionOne)) {
posOne = posTwo = 0;
this.posOne = this.posTwo = 0;
} else {
posOne = (this.positionOne / 100) * 180;
posTwo = (this.positionTwo / 100) * 180;
this.posOne = (this.positionOne / 100) * 180;
this.posTwo = (this.positionTwo / 100) * 180;
}
barOne.css({
'-webkit-transform': 'rotate(' + posOne + 'deg)',
'-moz-transform': 'rotate(' + posOne + 'deg)',
'-ms-transform': 'rotate(' + posOne + 'deg)',
'-o-transform': 'rotate(' + posOne + 'deg)',
'transform': 'rotate(' + posOne + 'deg)'
});
barTwo.css({
'-webkit-transform': 'rotate(' + posTwo + 'deg)',
'-moz-transform': 'rotate(' + posTwo + 'deg)',
'-ms-transform': 'rotate(' + posTwo + 'deg)',
'-o-transform': 'rotate(' + posTwo + 'deg)',
'transform': 'rotate(' + posTwo + 'deg)'
});
}
setColors() {
if (!this.barOne || !this.barTwo) {
return;
}
let barOne = $(this.barOne.nativeElement);
let barTwo = $(this.barTwo.nativeElement);
if (!barOne || !barTwo) {
return;
}
barOne.css({
'background-color': this._colorOne
});
barTwo.css({
'background-color': this._colorTwo
});
}
setAnimate() {
@ -263,29 +217,11 @@ export class GaugeComponent implements AfterViewInit {
return;
}
let barOne = $(this.barOne.nativeElement);
let barTwo = $(this.barTwo.nativeElement);
if (!barOne || !barTwo) {
return;
}
let transition = 'transform 1s ease';
let prefixes = ['webkit', 'moz', 'ms', 'o'];
let css = {
'transition': transition
};
if (!this._animate) {
transition = 'none';
this.transition = 'none';
} else {
this.transition = 'transform 1s ease';
}
for (let prefix of prefixes) {
css['-' + prefix + '-transition'] = transition;
}
barOne.css(css);
barTwo.css(css);
}
}