From 8a09e39f46fb0f9981e08e665851b18bd1a630a0 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 19 Sep 2017 15:30:08 +0200
Subject: [PATCH] Enable tags in pads

---
 .../src/less2/include/tokenfield.less         | 31 +++++++++----------
 customize.dist/translations/messages.fr.js    |  5 +++
 customize.dist/translations/messages.js       |  5 +++
 www/common/common-interface.js                | 11 ++++---
 www/common/cryptpad-common.js                 | 11 +++++++
 www/common/sframe-common-interface.js         | 18 +++++++++++
 www/common/sframe-common-outer.js             | 14 +++++++++
 www/common/sframe-protocol.js                 |  5 +++
 www/common/userObject.js                      |  1 +
 www/drive/main.js                             |  7 +++++
 www/pad/app-pad.less                          |  4 ++-
 www/pad/inner.js                              |  4 +++
 12 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less
index 2479e3330..da048b2fe 100644
--- a/customize.dist/src/less2/include/tokenfield.less
+++ b/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;
-        }
     }
 }
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 71f61d1fb..d167857d3 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/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";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 7ca854c93..b6221103d 100644
--- a/customize.dist/translations/messages.js
+++ b/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";
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index ee11ddbdb..9f0746a90 100644
--- a/www/common/common-interface.js
+++ b/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 () {
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index ae9ef21d5..1d169cd87 100644
--- a/www/common/cryptpad-common.js
+++ b/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');
diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js
index d62bb392f..c3a4757b4 100644
--- a/www/common/sframe-common-interface.js
+++ b/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",
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 6eb370ab4..79ba73842 100644
--- a/www/common/sframe-common-outer.js
+++ b/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);
             }
diff --git a/www/common/sframe-protocol.js b/www/common/sframe-protocol.js
index cab662df0..1955701c0 100644
--- a/www/common/sframe-protocol.js
+++ b/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,
+
 });
diff --git a/www/common/userObject.js b/www/common/userObject.js
index cd1ca032a..3f4ab7dd6 100644
--- a/www/common/userObject.js
+++ b/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;
diff --git a/www/drive/main.js b/www/drive/main.js
index bfdb22e7e..d7766b75f 100644
--- a/www/drive/main.js
+++ b/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);
diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index 85b1605b1..258f4f66a 100644
--- a/www/pad/app-pad.less
+++ b/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;
     }
 }
diff --git a/www/pad/inner.js b/www/pad/inner.js
index ca8cdc225..73b081414 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -694,6 +694,10 @@ define([
                     };
                     common.openFilePicker(pickerCfg);
                 }).appendTo($rightside);
+
+
+                $tags = common.createButton('hashtag', true);
+                $rightside.append($tags);
             }
         };