Enable tags in pads

customize.dist/src/less2/include/tokenfield.less

@@ -13,11 +13,12 @@
         height: auto;
         min-height: 34px;
         padding-bottom: 0px;
-        &.focus {
-            border-color: #66afe9;
-            outline: 0;
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
-        }
+        background-color: unset;
+        border: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0 10px;
         .token {
             box-sizing: border-box;
             border-radius: 3px;
@@ -25,8 +26,9 @@
             border: 1px solid #d9d9d9;
             background-color: #ededed;
             white-space: nowrap;
-            margin: -1px 5px 5px 0;
-            vertical-align: center;
+            margin: 10px 5px;
+            height: 24px;
+            vertical-align: middle;
             cursor: default;
 
             color: #222;
@@ -50,17 +52,17 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 padding-left: 4px;
-                vertical-align: center;
+                vertical-align: middle;
             }
             .close {
                 font-family: Arial;
                 display: inline-block;
-                line-height: 100%;
+                line-height: 24px;
                 font-size: 1.1em;
                 margin-left: 5px;
                 float: none;
                 height: 100%;
-                vertical-align: center;
+                vertical-align: middle;
                 padding-right: 4px;
             }
             &.active {
@@ -73,11 +75,10 @@
         }
         .token-input {
             background: none;
-            width: 0%; //60px;
-            min-width: 60px;
+            flex: 1;
             border: 0;
             padding: 0;
-            margin-bottom: 6px;
+            margin: 0 !important; // Override alertify
             box-shadow: none;
             max-width: 100%;
             &:focus {
@@ -86,9 +87,5 @@
                 box-shadow: none;
             }
         }
-        &.disabled {
-            cursor: not-allowed;
-            background-color: #eeeeee;
-        }
     }
 }

customize.dist/translations/messages.fr.js

@@ -157,6 +157,10 @@ define(function () {
     out.filePicker_filter = "Filtrez les fichiers par leur nom";
     out.or = 'ou';
 
+    out.tags_title = "Mots-clés du pad";
+    out.tags_add = "Modifier les mots-clés du pad";
+    out.tags_duplicate = "Mot-clé déjà présent : {0}"
+
     out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
@@ -367,6 +371,7 @@ define(function () {
     out.fm_viewListButton = "Liste";
     out.fm_viewGridButton = "Grille";
     out.fm_renamedPad = "Vous avez renommé ce pad dans votre Drive. Son titre est:<br><b>{0}</b>";
+    out.fm_prop_tagsList = "Mots-clés";
     // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";

customize.dist/translations/messages.js

@@ -159,6 +159,10 @@ define(function () {
     out.filePicker_filter = "Filter files by name";
     out.or = 'or';
 
+    out.tags_title = "Tags";
+    out.tags_add = "Update this pad's tags";
+    out.tags_duplicate = "Duplicate tag: {0}"
+
     out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
@@ -368,6 +372,7 @@ define(function () {
     out.fm_viewListButton = "List view";
     out.fm_viewGridButton = "Grid view";
     out.fm_renamedPad = "You've set a custom name for this pad. Its shared title is:<br><b>{0}</b>";
+    out.fm_prop_tagsList = "Tags";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";

www/common/common-interface.js

@@ -131,13 +131,14 @@ define([
         var $t = t.tokenfield = $(t.element).tokenfield();
         t.getTokens = function () {
             return $t.tokenfield('getTokens').map(function (token) {
-                return token.value;
+                return token.value.toLowerCase();
             });
         };
 
         t.preventDuplicates = function (cb) {
             $t.on('tokenfield:createtoken', function (ev) {
                 var val;
+                ev.attrs.value = ev.attrs.value.toLowerCase();
                 if (t.getTokens().some(function (t) {
                     if (t === ev.attrs.value) { return ((val = t)); }
                 })) {
@@ -152,8 +153,8 @@ define([
             $t.tokenfield('setTokens',
                 tokens.map(function (token) {
                     return {
-                        value: token,
-                        label: token,
+                        value: token.toLowerCase(),
+                        label: token.toLowerCase(),
                     };
                 }));
         };
@@ -171,13 +172,13 @@ define([
         var input = dialog.textInput();
 
         var tagger = dialog.frame([
-            dialog.message('make some tags'), // TODO translate
+            dialog.message(Messages.tags_add),
             input,
             dialog.nav(),
         ]);
 
         var field = UI.tokenField(input).preventDuplicates(function (val) {
-            UI.warn('Duplicate tag: ' + val); // TODO translate
+            UI.warn(Messages._getKey('tags_duplicate', [val]));
         });
 
         var close = Util.once(function () {

www/common/cryptpad-common.js

@@ -536,6 +536,17 @@ define([
         cb(void 0, entry);
     };
 
+    common.resetTags = function (href, tags, cb) {
+        cb = cb || $.noop;
+        if (!Array.isArray(tags)) { return void cb('INVALID_TAGS'); }
+        getFileEntry(href, function (e, entry) {
+            if (e) { return void cb(e); }
+            if (!entry) { cb('NO_ENTRY'); }
+            entry.tags = tags.slice();
+            cb();
+        });
+    };
+
     common.tagPad = function (href, tag, cb) {
         if (typeof(cb) !== 'function') {
             return void console.error('EXPECTED_CALLBACK');

www/common/sframe-common-interface.js

@@ -194,6 +194,24 @@ define([
                 })
                 .click(common.prepareFeedback(type));
                 break;
+            case 'hashtag':
+                button = $('<button>', {
+                    'class': 'fa fa-hashtag',
+                    title: Messages.tags_title,
+                })
+                .click(common.prepareFeedback(type))
+                .click(function () {
+                    sframeChan.query('Q_TAGS_GET', null, function (err, res) {
+                        if (err || res.error) { return void console.error(err || res.error); }
+                        var dialog = Cryptpad.dialog.tagPrompt(res.data, function (tags) {
+                            if (!Array.isArray(tags)) { return; }
+                            console.error(tags);
+                            sframeChan.event('EV_TAGS_SET', tags);
+                        });
+                        document.body.appendChild(dialog);
+                    });
+                });
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",

www/common/sframe-common-outer.js

@@ -370,6 +370,20 @@ define([
                 }
             });
 
+            sframeChan.on('Q_TAGS_GET', function (data, cb) {
+                Cryptpad.getPadTags(null, function (err, data) {
+                    cb({
+                        error: err,
+                        data: data
+                    });
+                });
+            });
+
+            sframeChan.on('EV_TAGS_SET', function (data) {
+                console.log(data);
+                Cryptpad.resetTags(null, data);
+            });
+
             if (cfg.addRpc) {
                 cfg.addRpc(sframeChan, Cryptpad);
             }

www/common/sframe-protocol.js

@@ -130,4 +130,9 @@ define({
 
     // Put one or more entries to the cache which will go in localStorage.
     'EV_CACHE_PUT': true,
+
+    // Set and get the tags using the tag prompt button
+    'Q_TAGS_GET': true,
+    'EV_TAGS_SET': true,
+
 });

www/common/userObject.js

@@ -415,6 +415,7 @@ define([
             var containsSearchedTag = function (T) {
                 if (!tags) { return false; }
                 if (!T.length) { return false; }
+                T = T.map(function (t) { return t.toLowerCase(); });
                 return tags.some(function (tag) {
                     return T.some(function (t) {
                         return t.indexOf(tag) !== -1;

www/drive/main.js

@@ -2408,6 +2408,13 @@ define([
                 }
             }
 
+            if (data.tags && Array.isArray(data.tags)) {
+                $('<label>', {'for': 'cp-drive-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
+                $d.append(Cryptpad.dialog.selectable(data.tags.join(', '), {
+                    id: 'cp-drive-tags',
+                }));
+            }
+
             if (APP.loggedIn && AppConfig.enablePinning) {
                 // check the size of this file...
                 console.log(data.href);

www/pad/app-pad.less

@@ -1,11 +1,13 @@
 @import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
 
 .toolbar_main();
 .alertify_main();
 
 // body
 &.cp-app-pad {
+    .tokenfield_main();
     #cke_1_top {
         overflow: visible;
         padding: 0px;
@@ -38,6 +40,6 @@
         display:none !important;
     }
     &.cp-app-pad .cp-toolbar-userlist-drawer {
-      display:none;
+        display:none;
     }
 }

www/pad/inner.js

@@ -694,6 +694,10 @@ define([
                     };
                     common.openFilePicker(pickerCfg);
                 }).appendTo($rightside);
+
+
+                $tags = common.createButton('hashtag', true);
+                $rightside.append($tags);
             }
         };