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";