From 802dfe10be7ad0ac7a58837917993671862c72be Mon Sep 17 00:00:00 2001
From: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
Date: Fri, 2 Apr 2021 20:55:12 -0700
Subject: [PATCH] Change all delete/edit warnings to tooltips

---
 data/interfaces/default/history.html   | 15 ++++++++++----
 data/interfaces/default/info.html      | 14 +++++++++----
 data/interfaces/default/libraries.html | 13 +++++++++---
 data/interfaces/default/library.html   | 14 +++++++++----
 data/interfaces/default/sync.html      | 14 +++++++++----
 data/interfaces/default/user.html      | 28 ++++++++++++++++++--------
 data/interfaces/default/users.html     | 13 +++++++++---
 7 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index 66e8d2d4..a24215b7 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -21,11 +21,11 @@
         </div>
         <div class="button-bar">
             % if _session['user_group'] == 'admin':
-            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect rows to delete. Data is deleted upon exiting delete mode.</div>
+            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbsp</div>
             <div class="btn-group">
                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                     <i class="fa fa-trash-o"></i> Delete mode
-                </button>&nbsp
+                </button>
             </div>
             % endif
             % if _session['user_group'] == 'admin':
@@ -212,9 +212,9 @@
 
         % if _session['user_group'] == 'admin':
         $('#row-edit-mode').on('click', function() {
-            $('#row-edit-mode-alert').fadeIn(200);
-
             if ($(this).hasClass('active')) {
+                $(this).tooltip('destroy');
+
                 if (history_to_delete.length > 0) {
                     $('#deleteCount').text(history_to_delete.length);
                     $('#confirm-modal-delete').modal();
@@ -239,6 +239,13 @@
                 });
 
             } else {
+                $(this).tooltip({
+                    container: '.body-container',
+                    placement: 'bottom',
+                    title: 'Select rows to delete. Data is deleted upon exiting delete mode.',
+                    trigger: 'manual'
+                }).tooltip('show');
+
                 history_to_delete = [];
                 $('.delete-control').each(function() {
                     $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html
index 42283cf3..5212d4dd 100644
--- a/data/interfaces/default/info.html
+++ b/data/interfaces/default/info.html
@@ -608,11 +608,10 @@ DOCUMENTATION :: END
                                         </div>
                                         <div class="button-bar">
                                             % if _session['user_group'] == 'admin':
-                                            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect rows to delete. Data is deleted upon exiting delete mode.</div>
                                             <div class="btn-group">
                                                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                                                     <i class="fa fa-trash-o"></i> Delete mode
-                                                </button>&nbsp;
+                                                </button>
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
@@ -1003,9 +1002,9 @@ DOCUMENTATION :: END
     });
 
     $('#row-edit-mode').on('click', function() {
-        $('#row-edit-mode-alert').fadeIn(200);
-
         if ($(this).hasClass('active')) {
+            $(this).tooltip('destroy');
+
             if (history_to_delete.length > 0) {
                 $('#deleteCount').text(history_to_delete.length);
                 $('#confirm-modal-delete').modal();
@@ -1030,6 +1029,13 @@ DOCUMENTATION :: END
             });
 
         } else {
+            $(this).tooltip({
+                container: '.body-container',
+                placement: 'bottom',
+                title: 'Select rows to delete. Data is deleted upon exiting delete mode.',
+                trigger: 'manual'
+            }).tooltip('show');
+
             history_to_delete = [];
             $('.delete-control').each(function() {
                 $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
diff --git a/data/interfaces/default/libraries.html b/data/interfaces/default/libraries.html
index 32c2be1e..533154f6 100644
--- a/data/interfaces/default/libraries.html
+++ b/data/interfaces/default/libraries.html
@@ -14,11 +14,10 @@
         </div>
         <div class="button-bar">
             % if _session['user_group'] == 'admin':
-            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect libraries to delete/purge. Data is deleted/purged upon exiting edit mode.</div>
             <div class="btn-group">
                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                     <i class="fa fa-pencil"></i> Edit mode
-                </button>&nbsp
+                </button>
             </div>
             <div class="btn-group">
                 <button class="btn btn-dark refresh-libraries-button" id="refresh-libraries-list"><i class="fa fa-refresh"></i> Refresh libraries</button>
@@ -100,11 +99,12 @@
 
         % if _session['user_group'] == 'admin':
         $('#row-edit-mode').on('click', function () {
-            $('#row-edit-mode-alert').fadeIn(200);
             $('#libraries-to-delete').html('');
             $('#libraries-to-purge').html('');
 
             if ($(this).hasClass('active')) {
+                $(this).tooltip('destroy');
+
                 if (libraries_to_purge.length > 0) {
                     $('.edit-control').each(function () {
                         $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
@@ -163,6 +163,13 @@
                 });
 
             } else {
+                $(this).tooltip({
+                    container: '.body-container',
+                    placement: 'bottom',
+                    title: 'Select libraries to delete/purge. Data is deleted/purged upon exiting edit mode.',
+                    trigger: 'manual'
+                }).tooltip('show');
+
                 libraries_to_delete = [];
                 libraries_to_purge = [];
                 $('.edit-control').each(function () {
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index 3d586102..bca47c74 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -210,11 +210,10 @@ DOCUMENTATION :: END
                                         </div>
                                         <div class="button-bar">
                                             % if _session['user_group'] == 'admin':
-                                            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect rows to delete. Data is deleted upon exiting delete mode.</div>
                                             <div class="btn-group">
                                                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                                                     <i class="fa fa-trash-o"></i> Delete mode
-                                                </button>&nbsp;
+                                                </button>
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
@@ -932,9 +931,9 @@ DOCUMENTATION :: END
     });
 
     $('#row-edit-mode').on('click', function() {
-        $('#row-edit-mode-alert').fadeIn(200);
-
         if ($(this).hasClass('active')) {
+            $(this).tooltip('destroy');
+
             if (history_to_delete.length > 0) {
                 $('#deleteCount').text(history_to_delete.length);
                 $('#confirm-modal-delete').modal();
@@ -959,6 +958,13 @@ DOCUMENTATION :: END
             });
 
         } else {
+            $(this).tooltip({
+                container: '.body-container',
+                placement: 'bottom',
+                title: 'Select rows to delete. Data is deleted upon exiting delete mode.',
+                trigger: 'manual'
+            }).tooltip('show');
+
             history_to_delete = [];
             $('.delete-control').each(function() {
                 $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
diff --git a/data/interfaces/default/sync.html b/data/interfaces/default/sync.html
index 2fd723b1..0415ce53 100644
--- a/data/interfaces/default/sync.html
+++ b/data/interfaces/default/sync.html
@@ -20,11 +20,10 @@
         </div>
         <div class="button-bar">
             % if _session['user_group'] == 'admin':
-            <div class="alert alert-danger alert-edit" role="alert" id="sync-row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect syncs to delete. Data is deleted upon exiting delete mode.</div>
             <div class="btn-group">
                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="sync-row-edit-mode">
                     <i class="fa fa-trash-o"></i> Delete mode
-                </button>&nbsp
+                </button>
             </div>
             % endif
             % if _session['user_group'] == 'admin':
@@ -140,9 +139,9 @@
 
         % if _session['user_group'] == 'admin':
         $('#sync-row-edit-mode').on('click', function() {
-            $('#sync-row-edit-mode-alert').fadeIn(200);
-
             if ($(this).hasClass('active')) {
+                $(this).tooltip('destroy');
+
                 if (syncs_to_delete.length > 0) {
                     $('#deleteCount').text(syncs_to_delete.length);
                     $('#confirm-modal-delete').modal();
@@ -172,6 +171,13 @@
                 });
 
             } else {
+                $(this).tooltip({
+                    container: '.body-container',
+                    placement: 'bottom',
+                    title: 'Select syncs to delete. Data is deleted upon exiting delete mode.',
+                    trigger: 'manual'
+                }).tooltip('show');
+
                 syncs_to_delete = [];
                 $('.delete-control').each(function() {
                     $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html
index 08837f6e..ccc3287d 100644
--- a/data/interfaces/default/user.html
+++ b/data/interfaces/default/user.html
@@ -160,11 +160,10 @@ DOCUMENTATION :: END
                                         </div>
                                         <div class="button-bar">
                                             % if _session['user_group'] == 'admin':
-                                            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect rows to delete. Data is deleted upon exiting delete mode.</div>
                                             <div class="btn-group">
                                                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                                                     <i class="fa fa-trash-o"></i> Delete mode
-                                                </button>&nbsp;
+                                                </button>
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="media_type-selection">
@@ -331,11 +330,10 @@ DOCUMENTATION :: END
                                         </div>
                                         <div class="button-bar">
                                             % if _session['user_group'] == 'admin':
-                                            <div class="alert alert-danger alert-edit" role="alert" id="sync-row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect syncs to delete. Data is deleted upon exiting delete mode.</div>
                                             <div class="btn-group">
                                                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="sync-row-edit-mode">
                                                     <i class="fa fa-trash-o"></i> Delete mode
-                                                </button>&nbsp
+                                                </button>
                                             </div>
                                             % endif
                                             <div class="btn-group">
@@ -873,9 +871,9 @@ DOCUMENTATION :: END
     });
 
     $('#row-edit-mode').on('click', function() {
-        $('#row-edit-mode-alert').fadeIn(200);
-
         if ($(this).hasClass('active')) {
+            $(this).tooltip('destroy');
+
             if (history_to_delete.length > 0) {
                 $('#deleteCount').text(history_to_delete.length);
                 $('#deleteType').text('history');
@@ -901,6 +899,13 @@ DOCUMENTATION :: END
             });
 
         } else {
+            $(this).tooltip({
+                container: '.body-container',
+                placement: 'bottom',
+                title: 'Select rows to delete. Data is deleted upon exiting delete mode.',
+                trigger: 'manual'
+            }).tooltip('show');
+
             history_to_delete = [];
             $('.history_table .delete-control').each(function() {
                 $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
@@ -910,9 +915,9 @@ DOCUMENTATION :: END
     });
 
     $('#sync-row-edit-mode').on('click', function() {
-        $('#sync-row-edit-mode-alert').fadeIn(200);
-
         if ($(this).hasClass('active')) {
+            $(this).tooltip('destroy');
+
             if (syncs_to_delete.length > 0) {
                 $('#deleteCount').text(syncs_to_delete.length);
                 $('#deleteType').text('sync');
@@ -943,6 +948,13 @@ DOCUMENTATION :: END
             });
 
         } else {
+            $(this).tooltip({
+                container: '.body-container',
+                placement: 'bottom',
+                title: 'Select syncs to delete. Data is deleted upon exiting delete mode.',
+                trigger: 'manual'
+            }).tooltip('show');
+
             syncs_to_delete = [];
             $('.sync_table .delete-control').each(function() {
                 $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
diff --git a/data/interfaces/default/users.html b/data/interfaces/default/users.html
index cbc49af6..a0020118 100644
--- a/data/interfaces/default/users.html
+++ b/data/interfaces/default/users.html
@@ -14,11 +14,10 @@
         </div>
         <div class="button-bar">
             % if _session['user_group'] == 'admin':
-            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbspSelect users to delete/purge. Data is deleted/purged upon exiting edit mode.</div>
             <div class="btn-group">
                 <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
                     <i class="fa fa-pencil"></i> Edit mode
-                </button>&nbsp
+                </button>
             </div>
             <div class="btn-group">
                 <button class="btn btn-dark refresh-users-button" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
@@ -103,11 +102,12 @@
 
         % if _session['user_group'] == 'admin':
         $('#row-edit-mode').on('click', function () {
-            $('#row-edit-mode-alert').fadeIn(200);
             $('#users-to-delete').html('');
             $('#users-to-purge').html('');
 
             if ($(this).hasClass('active')) {
+                $(this).tooltip('destroy');
+
                 if (users_to_delete.length > 0 || users_to_purge.length > 0) {
                     $('.edit-control').each(function () {
                         $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
@@ -166,6 +166,13 @@
                 });
                 toggleEditNames();
             } else {
+                $(this).tooltip({
+                    container: '.body-container',
+                    placement: 'bottom',
+                    title: 'Select users to delete/purge. Data is deleted/purged upon exiting edit mode.',
+                    trigger: 'manual'
+                }).tooltip('show');
+
                 users_to_delete = [];
                 users_to_purge = [];
                 $('.edit-control').each(function () {