From 9b0aef9171389aa9cdc39e8434df0f912ee5bdae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20HULARD?= <s.hulard@chstudio.fr>
Date: Wed, 24 Jan 2018 17:29:26 +0100
Subject: Update tag list template to allow renaming.

* Add a form on each tag to handle rename action.
* Add JavaScript to handle action on the corresponding page inside the global index.js file.
* Add support for the 2 active themes : material / baggy

The form solution is cleaner than an Ajax one because it let the browser validate input data and make the POST easier without the need to handle JSON response.
---
 app/Resources/static/themes/_global/index.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

(limited to 'app/Resources/static')

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index ae598e56..bb3e95b6 100644
--- a/app/Resources/static/themes/_global/index.js
+++ b/app/Resources/static/themes/_global/index.js
@@ -70,4 +70,23 @@ $(document).ready(() => {
       retrievePercent(x.entryId, true);
     });
   }
+
+  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
+    const current = item;
+    current.wallabag_edit_mode = false;
+    current.onclick = (event) => {
+      const target = event.currentTarget;
+
+      if (target.wallabag_edit_mode === false) {
+        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
+        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
+        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
+        target.querySelector('.material-icons').innerHTML = 'done';
+
+        target.wallabag_edit_mode = true;
+      } else {
+        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
+      }
+    };
+  });
 });
-- 
cgit v1.2.3


From 32968bd30e907dcb681831c149a9afcc12a664da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20HULARD?= <s.hulard@chstudio.fr>
Date: Wed, 24 Jan 2018 17:30:06 +0100
Subject: Add specific styles for the card tag form element.

Also add a `.hidden` class in the baggy theme to have consistency with material.
---
 app/Resources/static/themes/baggy/css/layout.scss   | 11 ++++++++++-
 app/Resources/static/themes/material/css/cards.scss | 11 +++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

(limited to 'app/Resources/static')

diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss
index cb14e62d..0293ebe5 100644
--- a/app/Resources/static/themes/baggy/css/layout.scss
+++ b/app/Resources/static/themes/baggy/css/layout.scss
@@ -295,6 +295,15 @@ div.pagination ul {
   }
 }
 
-.hide {
+.card-tag-form {
+  display: inline-block;
+}
+
+.card-tag-form input[type="text"] {
+  min-width: 20em;
+}
+
+.hide,
+.hidden {
   display: none;
 }
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 8f7f8f7b..f3319f3d 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -180,6 +180,17 @@ a.original:not(.waves-effect) {
   flex-grow: 1;
 }
 
+.card-tag-form {
+  display: flex;
+  min-width: 100px;
+  flex-grow: 1;
+}
+
+.card-tag-form input {
+  margin-bottom: 0;
+  height: 2rem;
+}
+
 .card-tag-rss {
   display: flex;
 }
-- 
cgit v1.2.3