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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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