From 8447fb3343be073c049fbbee551af522a12e3f4a Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sat, 28 Jul 2018 20:25:25 -0700
Subject: [PATCH] Make deleting and unlinking tags require confirmation.

Added text inside the delete buttons and made them confirm.
---
 etiquette/photodb.py                          |  2 +-
 .../etiquette_flask/static/css/common.css     |  8 +-
 frontends/etiquette_flask/templates/tags.html | 84 ++++++++++++++-----
 3 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/etiquette/photodb.py b/etiquette/photodb.py
index ad631f0..a13d724 100644
--- a/etiquette/photodb.py
+++ b/etiquette/photodb.py
@@ -1224,7 +1224,7 @@ class PDBUtilMixin:
             tag = self.get_tag(name=tagname)
             old_name = tag.name
             tag.rename(rename_to)
-            note = ('rename', f'{old_name}={tag.name}')
+            note = ('rename_tag', f'{old_name}={tag.name}')
             output_notes.append(note)
         else:
             tag_parts = tagname.split('.')
diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index ad2146e..6a4dd8a 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -97,10 +97,11 @@ button:active
     /*position: absolute;*/
     top: 3px;
     vertical-align: middle;
+    font-size: 7pt;
 
-    width:  18px;
-    height: 14px;
-    padding: 0;
+    min-width:  18px;
+    min-height: 14px;
+    /*padding: 0;*/
 
 }
 /*
@@ -111,6 +112,7 @@ is hovered over.
 {
     display: none;
 }
+.tag_object:hover + * .remove_tag_button,
 .tag_object:hover + .remove_tag_button,
 .remove_tag_button:hover,
 .remove_tag_button_perm:hover
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index e11d964..352d854 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -130,20 +130,56 @@ body
     {% endif %}
     <ul>
         {% for (qualified_name, tag) in tags %}
-        <li>
-            {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
-            {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)}}<!--
-            --><button class="remove_tag_button red_button" onclick="delete_tag('{{qualified_name}}', receive_callback);"></button>
-        </li>
-        {% if include_synonyms %}
-        {% for synonym in tag.get_synonyms() %}
-        <li>
-            {{tag_object.tag_object(tag, innertext='(+)', link=none)}}
-            {{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)}}<!--
-            --><button class="remove_tag_button red_button" onclick="delete_tag_synonym('{{synonym}}', receive_callback);"></button>
-        </li>
-        {% endfor %}
-        {% endif %}
+            {% if "." in qualified_name %}
+            <li>
+                {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
+                {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
+                <button
+                class="remove_tag_button red_button button_with_confirm"
+                data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
+                data-prompt="Unlink Tags?"
+                data-confirm="Unlink"
+                data-confirm-class="remove_tag_button_perm red_button"
+                data-cancel-class="remove_tag_button_perm gray_button"
+                >
+                unlink
+                </button>
+            </li>
+            {% else %}
+            <li>
+                {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
+                {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
+                <button
+                class="remove_tag_button red_button button_with_confirm"
+                data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
+                data-prompt="Delete Tag?"
+                data-confirm="Delete"
+                data-confirm-class="remove_tag_button_perm red_button"
+                data-cancel-class="remove_tag_button_perm gray_button"
+                >
+                delete
+                </button>
+            </li>
+            {% endif %}
+
+            {% if include_synonyms %}
+            {% for synonym in tag.get_synonyms() %}
+            <li>
+                {{tag_object.tag_object(tag, innertext='(+)', link=none)}}
+                {{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)-}}
+                <button
+                class="remove_tag_button red_button button_with_confirm"
+                data-onclick="delete_tag_synonym('{{synonym}}', receive_callback);"
+                data-prompt="Remove Synonym?"
+                data-confirm="Remove"
+                data-confirm-class="remove_tag_button_perm red_button"
+                data-cancel-class="remove_tag_button_perm gray_button"
+                >
+                remove
+                </button>
+            </li>
+            {% endfor %}
+            {% endif %}
         {% endfor %}
     </ul>
 </div>
@@ -202,6 +238,8 @@ function receive_callback(response)
     {
         var response = responses[index];
         var tagname = response["tagname"];
+        var message_positivity;
+        var message_text;
         if ("error_type" in response)
         {
             message_positivity = "message_negative";
@@ -212,28 +250,28 @@ function receive_callback(response)
             var action = response["action"];
             message_positivity = "message_positive";
             if (action == "new_tag")
-            {message_text = "Created tag " + tagname;}
+            {message_text = `Created tag ${tagname}`;}
 
             else if (action == "new_synonym")
-            {message_text = "New synonym " + tagname;}
+            {message_text = `New synonym ${tagname}`;}
 
             else if (action == "existing_tag")
-            {message_text = "Existing tag " + tagname;}
+            {message_text = `Existing tag ${tagname}`;}
 
             else if (action == "join_group")
-            {message_text = "Grouped " + tagname;}
+            {message_text = `Grouped ${tagname}`;}
 
-            else if (action == "rename")
-            {message_text = "Renamed " + tagname;}
+            else if (action == "rename_tag")
+            {message_text = `Renamed ${tagname}`;}
 
             else if (action == "delete_tag")
-            {message_text = "Deleted tag " + tagname;}
+            {message_text = `Deleted tag ${tagname}`;}
 
             else if (action == "delete_synonym")
-            {message_text = "Deleted synonym " + response["synonym"];}
+            {message_text = `Deleted synonym ${response["synonym"]}`;}
 
             else if (action == "unlink_tag")
-            {message_text = "Unlinked tags " + tagname;}
+            {message_text = `Unlinked tags ${tagname}`;}
 
         }
         common.create_message_bubble(message_area, message_positivity, message_text, 8000);