Suggest tags based on existing ones. Display existing tags in the drive.

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

@@ -1,25 +1,31 @@
 @import (once) "./tools.less";
 
 .tokenfield_main () {
+    .ui-autocomplete {
+        z-index: 100001; // alertify + 1
+    }
     .tokenfield {
         .tools_unselectable();
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
         height: auto;
         min-height: 34px;
         padding-bottom: 0px;
         background-color: unset;
         border: none;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 0 10px;
+        margin: 0 10px;
+        padding: 0;
+        width: ~"calc(100% - 20px)";
         .token {
             box-sizing: border-box;
             border-radius: 3px;
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             border: 1px solid #d9d9d9;
             background-color: #ededed;
             white-space: nowrap;
-            margin: 10px 5px;
+            margin: 2px 0;
             height: 24px;
             vertical-align: middle;
             cursor: default;
@@ -50,7 +56,7 @@
             .close {
                 font-family: Arial;
                 display: inline-block;
-                line-height: 24px;
+                line-height: 1.49em;
                 font-size: 1.1em;
                 margin-left: 5px;
                 float: none;
@@ -73,6 +79,8 @@
             margin: 0 !important; // Override alertify
             box-shadow: none;
             max-width: 100%;
+            width: 100%;
+            min-width: 100% !important;
             &:focus {
                 border-color: transparent;
                 outline: 0;

customize.dist/translations/messages.fr.js

@@ -367,6 +367,7 @@ define(function () {
     out.fm_searchName = "Recherche";
     out.fm_recentPadsName = "Pads récents";
     out.fm_ownedPadsName = "Pads en votre possession";
+    out.fm_tagsName = "Mots-clés";
     out.fm_searchPlaceholder = "Rechercher...";
     out.fm_newButton = "Nouveau";
     out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
@@ -429,6 +430,8 @@ define(function () {
     out.fm_padIsOwned = "Vous êtes le propriétaire de ce pad";
     out.fm_padIsOwnedOther = "Ce pad est la propriété d'un autre utilisateur";
     out.fm_deletedPads = "Ces pads n'existent plus sur le serveur, ils ont été supprimés de votre CryptDrive: {0}";
+    out.fm_tags_name = "Mot-clé";
+    out.fm_tags_used = "Nombre d'utilisations";
     // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";

customize.dist/translations/messages.js

@@ -368,6 +368,7 @@ define(function () {
     out.fm_searchName = "Search";
     out.fm_recentPadsName = "Recent pads";
     out.fm_ownedPadsName = "Owned";
+    out.fm_tagsName = "Tags";
     out.fm_searchPlaceholder = "Search...";
     out.fm_newButton = "New";
     out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
@@ -430,6 +431,8 @@ define(function () {
     out.fm_padIsOwned = "You are the owner of this pad";
     out.fm_padIsOwnedOther = "This pad is owned by another user";
     out.fm_deletedPads = "These pads no longer exist on the server, they've been removed from your CryptDrive: {0}";
+    out.fm_tags_name = "Tag name";
+    out.fm_tags_used = "Number of uses";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";