From 1fb4f2946a36c0f3d436ddd67750cdc3b690c16b Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 21 Jun 2018 10:06:32 -0400
Subject: [PATCH] submit button spinners

---
 jslib                                        |  2 +-
 src/app/settings/account.component.html      |  6 ++---
 src/app/vault/add-edit.component.html        |  8 +++----
 src/app/vault/attachments.component.html     |  6 ++---
 src/app/vault/bulk-delete.component.html     |  7 +++---
 src/app/vault/bulk-move.component.html       |  6 ++---
 src/app/vault/bulk-share.component.html      |  6 ++---
 src/app/vault/folder-add-edit.component.html |  6 ++---
 src/app/vault/share.component.html           |  6 ++---
 src/scss/styles.scss                         | 25 ++++++++++++++++++++
 10 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/jslib b/jslib
index 6e501dddb9..d98aeab0c8 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 6e501dddb9411c51ae2377523171d65f67884226
+Subproject commit d98aeab0c87a944f4f6e086e01ab0eb44bda7d53
diff --git a/src/app/settings/account.component.html b/src/app/settings/account.component.html
index 631046d8f4..33bcbc7d13 100644
--- a/src/app/settings/account.component.html
+++ b/src/app/settings/account.component.html
@@ -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">
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 138fec18b8..6f57dfa599 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -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">
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 9009f0a805..67bbb1b57f 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -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>
diff --git a/src/app/vault/bulk-delete.component.html b/src/app/vault/bulk-delete.component.html
index be51815063..a09baf30c3 100644
--- a/src/app/vault/bulk-delete.component.html
+++ b/src/app/vault/bulk-delete.component.html
@@ -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>
diff --git a/src/app/vault/bulk-move.component.html b/src/app/vault/bulk-move.component.html
index ae79af8ffb..7af391b90a 100644
--- a/src/app/vault/bulk-move.component.html
+++ b/src/app/vault/bulk-move.component.html
@@ -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>
diff --git a/src/app/vault/bulk-share.component.html b/src/app/vault/bulk-share.component.html
index 6e9a4ca204..0441f5b7f1 100644
--- a/src/app/vault/bulk-share.component.html
+++ b/src/app/vault/bulk-share.component.html
@@ -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>
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index d4aba57197..1159897e4f 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -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">
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index 0a6c74ba1c..fe4b5ca96f 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -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>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index cba070815c..f427d88b1f 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -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 {