use Tagify in edit view close #394

for a smoother tag experience !

Author: vincent-peugnet

app/class/Controllerpage.php

@@ -234,6 +234,14 @@ public function edit($page)
                 exit;
             }
 
+            $servicetags = new Servicetags();
+
+            try {
+                $datas['taglist'] = $servicetags->taglist();
+            } catch (Filesystemexception $e) {
+                Logger::errorex($e);
+            }
+
             $datas['faviconlist'] = $this->mediamanager->listfavicon();
             $datas['thumbnaillist'] = $this->mediamanager->listthumbnail();
             $datas['pagelist'] = $this->pagemanager->list();

app/view/templates/edit.php

@@ -1,6 +1,10 @@
 <?php
 
-$this->layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [$css . 'edit.css', Wcms\Model::jspath() . 'edit.bundle.css'], 'favicon' => $page->favicon()]) ?>
+$this->layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [
+    Wcms\Model::jspath() . 'edit.bundle.css',
+    $css . 'edit.css',
+    $css . 'tagcolors.css'
+], 'favicon' => $page->favicon()]) ?>
 
 
 
@@ -33,6 +37,7 @@
     const pageid = '<?= $this->e($page->id()) ?>';
     let pagetitle = '<?= $this->e($page->title()) ?>';
     let theme = '<?= $this->e($workspace->highlighttheme()) ?>';
+    const taglist = <?= json_encode($taglist) ?>;
 </script>
 <script type="module" src="<?= Wcms\Model::jspath() ?>edit.bundle.js" async></script>
 

app/view/templates/editleftbar.php

@@ -21,7 +21,7 @@ class="toggle"
             <label for="description">Description :</label>
             <input type="text" name="description" id="description" value="<?= $page->description(); ?>" form="update">
             <label for="tag">Tag(s) :</label>
-            <input type="text" name="tag" id="tag" value="<?= $page->tag('string'); ?>" form="update">
+            <input type="text" name="tag" class="field" id="tag" value="<?= $page->tag('string'); ?>" form="update">
             <label for="secure">Privacy level :</label>
             <select name="secure" id="secure" form="update">
                 <option value="0" <?= $page->secure() == Wcms\Page::PUBLIC ? 'selected' : '' ?>>public</option>

assets/css/base.css

@@ -8,6 +8,10 @@
     color: var(--outline-color);
 }
 
+:focus-visible {
+    outline: ridge 2px var(--outline-background-color);
+}
+
 body {
     margin: 0;
     height: 100%;
@@ -21,12 +25,12 @@ body {
     color: var(--text-color);
 }
 
-input, textarea, button, select {
+input, textarea, button, select, .field {
     border: none;
     accent-color: var(--main-color);
 }
 
-input, textarea {
+input, textarea, .field {
     color: var(--input-color)!important;
     border-color: var(--input-color);
     background-color: var(--input-background-color);
@@ -43,7 +47,7 @@ h1, h2 {
     background-color: var(--main-color);
 }
 
-a, button, input, select, textarea {
+a, button, input, select, textarea, .field {
     text-decoration: none;
     color: var(--text2-color);
 }

assets/css/edit.css

@@ -299,6 +299,48 @@ div#geomap {
     height: 250px;
 }
 
+/* __________ Tags _____________ */
+
+.tagify {
+    --tag-pad: 0 0;
+    --tag-text-color: inherit;
+    --tag-border-radius: 10px;
+    --tag-inset-shadow-size: 0;
+    --loader-size: 0;
+    --tags-focus-border-color: transparent;
+    display: block;
+}
+
+:root {
+	--tagify-dd-color-primary: var(--outline-background-color);
+	--tagify-dd-item-pad: 5px;
+	--tagify-dd-bg-color:  var(--input-background-color);
+}
+
+.tagify__tag {
+    border-radius: 10px;
+    padding-left: 4px;
+    padding-right: 0;
+    padding-bottom: 1px;
+    animation: none;
+}
+
+.tagify__tag__removeBtn {
+    color: inherit;
+    margin-left: 1px;
+}
+
+.tagify__dropdown span.tag {
+    border-radius: 10px;
+	padding: 1px 4px;
+}
+
+.tagify--focus {
+    outline: ridge 2px var(--outline-background-color)
+}
+
+
+
 
 @media (max-width: 550px) {
     .bar{

assets/css/theme/audrey-s-book.css

@@ -17,13 +17,8 @@
     color-scheme: light;
 }
 
-body {
-    /* font-family: serif; */
-    /* font-size: 15.8px; */
-}
-
-input, button, select, textarea {
-    border-radius: 3px;
+input, button, select, textarea, .field {
+    border-radius: 4px;
 }
 
 .block {
@@ -37,4 +32,4 @@ input, button, select, textarea {
 
 .editor #editmain, .editor #editheader, .editor #editnav, .editor #editaside, .editor #editfooter  {
     font-family: serif;
-}
+}

assets/css/theme/blue-whale.css

@@ -17,7 +17,7 @@
     color-scheme: dark;
 }
 
-input, button, select, textarea, legend {
+input, button, select, textarea, legend, .field {
     border-radius: 10px;
 }
 
@@ -29,6 +29,3 @@ button, input[type="submit"] {
 .submenu, .block, nav.bar {
     border-radius: 0 0 10px 10px;
 }
-
-label.toogle {
-}

assets/css/theme/dark-doriphore.css

@@ -17,7 +17,7 @@
     color-scheme: dark;
 }
 
-input, button, select, textarea, .submenu, .block, .bar {
+input, button, select, textarea, .field, .submenu, .block, .bar {
     border-radius: 0px;
     border: solid 1px;
 }

assets/css/theme/default.css

@@ -17,7 +17,7 @@
     color-scheme: light;
 }
 
-input, button, select, textarea {
+input, button, select, textarea, .field {
     border-radius: 3px;
 }
 

assets/css/theme/funky-freddy.css

@@ -17,7 +17,7 @@
     color-scheme: light;      
 }
 
-input, button, select, textarea {
+input, button, select, textarea, .field {
     border-radius: 5px;
 }