upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2024-09-20 17:15:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix spiner related issue on helmchart ui

Browse Source 
1. Fix spinner size on upload modal
2. Make the spinner into the center when chart detail page is loading
This commit is contained in:
Deng, Qian 2018-08-01 16:42:42 +08:00
parent 9bcf33212d
commit 0e8e3304ab
6 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.html
View File

@ -15,11 +15,9 @@
(click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
</div>
</div>
<div class="detail-loading" *ngIf="loading">
<span class="spinner">
Loading...
</span>
</div>
<span *ngIf="loading" class="spinner spinner-lg detail-loading">
Loading...
</span>
<div *ngIf="!loading && isChartExist">
<clr-tabs>
<clr-tab>

5
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.scss
View File

@ -13,8 +13,9 @@
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
right: 0;
bottom: 0;
margin: auto;
width: 108px !important;
height: 108px !important;
}

12
src/ui_ng/lib/src/helm-chart/helm-chart.component.html
View File

@ -69,9 +69,9 @@
</div>
</a>
</div>
<div *ngIf="loading" [ngClass]="{'central-block-loading': isFirstPage, 'central-block-loading-more': !isFirstPage}">
<div *ngIf="loading">
<span class="vertical-helper"></span>
<div class="spinner"></div>
<span class="spinner"></span>
</div>
</div>
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
@ -89,11 +89,11 @@
</div>
</section>
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
<span *ngIf="!isUploading">{{'HELM_CHART.UPLOAD' | translate}}</span>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
</button>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
</form>
</div>
</clr-modal>

6
src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
View File

@ -59,10 +59,4 @@
display: inline-block;
height: 100%;
vertical-align: middle;
}
.spinner {
width: 100px;
height: 100px;
vertical-align: middle;
}

12
src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
View File

@ -106,9 +106,9 @@
</div>
</a>
</div>
<div *ngIf="loading" [ngClass]="{'central-block-loading': isFirstPage, 'central-block-loading-more': !isFirstPage}">
<div *ngIf="loading">
<span class="vertical-helper"></span>
<div class="spinner"></div>
<span class="spinner"></span>
</div>
</div>
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
@ -126,11 +126,11 @@
</div>
</section>
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
<span *ngIf="!isUploading">{{'HELM_CHART.UPLOAD' | translate}}</span>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
</button>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
</form>
</div>
</clr-modal>

13
src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss
View File

@ -1,3 +1,5 @@
@import "../../mixin";
.title-container {
display: flex;
.chart-name-span {
@ -14,10 +16,7 @@
.toolbar {
overflow: hidden;
.rightPos {
position: absolute;
z-index: 100;
right: 35px;
margin-top: 4px;
@include grid-left-top-pos;
.filter-divider {
display: inline-block;
height: 16px;
@ -87,10 +86,4 @@
display: inline-block;
height: 100%;
vertical-align: middle;
}
.spinner {
width: 100px;
height: 100px;
vertical-align: middle;
}