Frontend for tag system

resources/templates/dashboard/grid.twig

@@ -34,11 +34,13 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="overlay-rows-center">
-                                            <a class="btn btn-link btn-block text-light" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank"><i class="fas fa-external-link-alt fa-2x text-shadow-link"></i></a>
-                                        </div>
-                                        <div class="overlay-rows-bottom">
-                                            bottom
+                                        <a class="btn btn-link btn-block text-light overlay-rows-center" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank">
+                                            <div>
+                                                <i class="fas fa-external-link-alt fa-2x text-shadow-link"></i>
+                                            </div>
+                                        </a>
+                                        <div class="overlay-rows-bottom pl-3 pr-3 pb-1">
+                                            <a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add"><i class="fas fa-plus fa-sm fa-fw"></i></a>
                                         </div>
                                     </div>
                                 </div>

resources/templates/dashboard/list.twig

@@ -40,9 +40,14 @@
                                                     <i class="far {{ mime2font(media.mimetype) }} fa-2x"></i>
                                                 {% endif %}
                                             </td>
-                                            <td><span class="text-maxlen">{{ media.filename }}</span></td>
+                                            <td>
+                                                <span class="text-maxlen">{{ media.filename }}</span>
+                                                <p>
+                                                    <a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add"><i class="fas fa-plus fa-sm fa-fw"></i></a>
+                                                </p>
+                                            </td>
                                             <td>{{ media.size }}</td>
-                                            <td id="published_{{ media.id }}">
+                                            <td id="published_{{ media.id }}" class="text-center">
                                                 {% if media.published %}
                                                     <span class="badge badge-success"><i class="fas fa-check"></i></span>
                                                 {% else %}

resources/templates/user/index.twig

@@ -36,14 +36,14 @@
                                     <pre>{{ user.user_code|default(lang('none')) }}</pre>
                                 </td>
                                 <td>{{ humanFileSize(user.current_disk_quota) }}{% if quota_enabled == 'on' %}/{{ user.max_disk_quota > 0 ? humanFileSize(user.max_disk_quota) : '∞' }}{% endif %}</td>
-                                <td>
+                                <td class="text-center">
                                     {% if user.active %}
                                         <span class="badge badge-success"><i class="fas fa-check"></i></span>
                                     {% else %}
                                         <span class="badge badge-danger"><i class="fas fa-times"></i></span>
                                     {% endif %}
                                 </td>
-                                <td>
+                                <td class="text-center">
                                     {% if user.is_admin %}
                                         <span class="badge badge-success"><i class="fas fa-check"></i></span>
                                     {% else %}

src/css/app.css

@@ -184,4 +184,18 @@ body {
 
 .pt-2d5 {
     padding-top: .8rem
+}
+
+.bg-light {
+    border: 0 !important;
+}
+
+.form-control-verysm {
+    height: calc(1em + .2rem + 2px);
+    font-size: .8rem;
+}
+
+.tag-item {
+    user-select: none;
+    cursor: pointer;
 }

src/js/app.js

@@ -29,6 +29,9 @@ var app = {
         $('.bulk-selector').contextmenu(app.bulkSelect);
         $('#bulk-delete').click(app.bulkDelete);
 
+        $('.tag-add').click(app.addTag);
+        $('.tag-item').dblclick(app.removeTag);
+
         $('.alert').fadeTo(10000, 500).slideUp(500, function () {
             $('.alert').slideUp(500);
         });
@@ -138,6 +141,47 @@ var app = {
             });
         });
         $(this).addClass('disabled');
+    },
+    addTag: function (e) {
+        var $caller = $(this);
+        var $newAddTag = $caller.clone()
+            .click(app.addTag)
+            .appendTo($caller.parent());
+
+        var tagInput = $(document.createElement('input'))
+            .addClass('form-control form-control-verysm tag-input')
+            .keydown(function (e) {
+                if (e.keyCode === 13 || e.keyCode === 32) { // enter -> save tag
+                    app.saveTag.call($(this)); // change context
+                    if (e.keyCode === 32) { // space -> save and add new tag
+                        $newAddTag.click();
+                    }
+                    return false;
+                }
+            })
+            .focusout(app.saveTag);
+
+        $caller.off()
+            .removeClass('badge-success badge-light')
+            .html(tagInput)
+            .children()
+            .focus();
+    },
+    saveTag: function () {
+        var tag = $(this).val();
+        if (tag === '') {
+            $(this).parent().remove();
+        }
+        console.log(tag);
+        var $newTag = $(document.createElement('span'))
+            .addClass('badge badge-pill badge-light shadow-sm tag-item')
+            .dblclick(app.removeTag)
+            .text(tag);
+        $(this).parent().replaceWith($newTag);
+    },
+    removeTag: function (e) {
+        e.preventDefault();
+        $(this).remove();
     }
 };