submit button spinners

This commit is contained in:
Kyle Spearrin 2018-06-21 10:06:32 -04:00
parent d73b01674f
commit 1fb4f2946a
10 changed files with 51 additions and 27 deletions

2
jslib

@ -1 +1 @@
Subproject commit 6e501dddb9411c51ae2377523171d65f67884226
Subproject commit d98aeab0c87a944f4f6e086e01ab0eb44bda7d53

View File

@ -21,9 +21,9 @@
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" appBlurClick [disabled]="profileForm.loading">
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!profileForm.loading"></i>
{{'save' | i18n}}
<button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="profileForm.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
</form>
<div class="secondary-header">

View File

@ -348,11 +348,11 @@
</div>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">
<button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{'cancel' | i18n}}
</button>
<div class="ml-auto" *ngIf="cipher">

View File

@ -39,9 +39,9 @@
<small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">{{'close' | i18n}}</button>
</div>

View File

@ -13,10 +13,9 @@
{{'deleteSelectedItemsDesc' | i18n: cipherIds.length}}
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-danger" title="{{'delete' | i18n}}" [disabled]="form.loading">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
{{'delete' | i18n}}
<button appBlurClick type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'delete' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
</div>

View File

@ -19,9 +19,9 @@
</div>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
</div>

View File

@ -43,9 +43,9 @@
</table>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
</div>

View File

@ -12,9 +12,9 @@
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="folder.name">
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
<div class="ml-auto">

View File

@ -43,9 +43,9 @@
</table>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
</div>

View File

@ -185,6 +185,31 @@ label:not(.form-check-label) {
}
}
.btn-submit {
position: relative;
.fa-spinner {
position: absolute;
display: none;
align-items: center;
justify-content: center;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
&:disabled {
.fa-spinner {
display: flex;
}
span {
visibility: hidden;
}
}
}
.table.table-list {
tr:first-child {
td {