From 740b6e955e6748b8ee40b62d672049758b11668e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 6 Dec 2016 18:55:10 +0100
Subject: [PATCH] Improve UI, fix issues with the table

---
 customize.dist/main.css                    | 146 +++++++++++++++------
 customize.dist/src/cryptpad.less           |  62 +++++++--
 customize.dist/src/variables.less          |   1 +
 customize.dist/translations/messages.fr.js |   6 +
 customize.dist/translations/messages.js    |   6 +
 www/poll/test/index.html                   |  31 +++--
 www/poll/test/main.js                      |  68 +++++-----
 www/poll/test/render.js                    |  10 +-
 8 files changed, 231 insertions(+), 99 deletions(-)

diff --git a/customize.dist/main.css b/customize.dist/main.css
index f34dacb58..99b5eea7f 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -318,58 +318,68 @@ tbody td:last-child {
   color: #FF0073;
   cursor: pointer !important;
 }
-form.realtime {
+form.realtime,
+div.realtime {
   padding: 0px;
   margin: 0px;
 }
-form.realtime > textarea {
+form.realtime > textarea,
+div.realtime > textarea {
   width: 50%;
   height: 15vh;
 }
-form.realtime table {
+form.realtime table,
+div.realtime table {
   border-collapse: collapse;
-  width: calc(99%);
+  width: calc(100% - 1px);
 }
-form.realtime table tr td:first-child {
+form.realtime table tr td:first-child,
+div.realtime table tr td:first-child {
   position: absolute;
   left: 29px;
   top: auto;
-  width: 400px;
+  width: calc(30% - 50px);
 }
-form.realtime table tr td {
+form.realtime table tr td,
+div.realtime table tr td {
   padding: 0px;
   margin: 0px;
 }
-form.realtime table tr td div.text-cell {
+form.realtime table tr td div.text-cell,
+div.realtime table tr td div.text-cell {
   padding: 0px;
   margin: 0px;
   height: 100%;
-  width: 400px;
 }
-form.realtime table tr td div.text-cell input {
+form.realtime table tr td div.text-cell input,
+div.realtime table tr td div.text-cell input {
   width: 80%;
   width: 90%;
   height: 100%;
   border: 0px;
 }
-form.realtime table tr td div.text-cell input[disabled] {
+form.realtime table tr td div.text-cell input[disabled],
+div.realtime table tr td div.text-cell input[disabled] {
   background-color: transparent;
   color: #fafafa;
   font-weight: bold;
 }
-form.realtime table tr td.checkbox-cell {
+form.realtime table tr td.checkbox-cell,
+div.realtime table tr td.checkbox-cell {
   margin: 0px;
   padding: 0px;
   height: 100%;
   min-width: 150px;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain {
+form.realtime table tr td.checkbox-cell div.checkbox-contain,
+div.realtime table tr td.checkbox-cell div.checkbox-contain {
   display: inline-block;
   height: 100%;
   width: 100%;
   position: relative;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain label {
+form.realtime table tr td.checkbox-cell div.checkbox-contain label,
+div.realtime table tr td.checkbox-cell div.checkbox-contain label {
   background-color: transparent;
   display: block;
   position: absolute;
@@ -378,82 +388,136 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain label {
   height: 100%;
   width: 100%;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable),
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) {
   display: none;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover {
   font-weight: bold;
   background-color: #FF0073;
   color: #302B28;
   display: block;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
   height: 100%;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
   content: "✖";
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes {
   background-color: #46E981;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after {
   content: "✔";
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted {
   background: #ddd;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine,
+div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine {
   display: none;
 }
-form.realtime table input[type="text"] {
+form.realtime table input[type="text"],
+div.realtime table input[type="text"] {
   height: 100%;
-  width: 70%;
-  border: 3px solid #302B28;
+  border: 1px solid #302B28;
+  width: 80%;
+}
+form.realtime table thead td,
+div.realtime table thead td {
+  padding: 0px 5px;
+  background: #4c443f;
+  border-radius: 20px 20px 0 0;
+}
+form.realtime table thead td input[type="text"],
+div.realtime table thead td input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+form.realtime table thead td input[type="text"][disabled],
+div.realtime table thead td input[type="text"][disabled] {
+  color: white;
+  padding: 1px 5px;
+}
+form.realtime table tbody .text-cell,
+div.realtime table tbody .text-cell {
+  background: #4c443f;
+}
+form.realtime table tbody .text-cell input[type="text"],
+div.realtime table tbody .text-cell input[type="text"] {
+  width: calc(100% - 50px);
+}
+form.realtime table tbody .text-cell .edit,
+div.realtime table tbody .text-cell .edit {
+  float: right;
+  margin: 0 10px 0 0;
+}
+form.realtime table tbody .text-cell .remove,
+div.realtime table tbody .text-cell .remove {
+  float: left;
+  margin: 0 0 0 10px;
 }
-form.realtime table .edit {
+form.realtime table .edit,
+div.realtime table .edit {
   color: #46E981;
   cursor: pointer;
-  width: 10%;
-  font-size: 20px;
-}
-form.realtime table .edit:after {
-  content: '✐';
+  float: left;
+  margin-left: 10px;
+  /*&:after { content: '✐'; }*/
+  /*&.editable { display: none; }*/
 }
-form.realtime table .edit.editable {
-  display: none;
+form.realtime table .remove,
+div.realtime table .remove {
+  float: right;
+  margin-right: 10px;
 }
-form.realtime table thead tr th input[type="text"][disabled] {
+form.realtime table thead tr th input[type="text"][disabled],
+div.realtime table thead tr th input[type="text"][disabled] {
   background-color: transparent;
   color: #fafafa;
   font-weight: bold;
 }
-form.realtime table thead tr th .remove {
+form.realtime table thead tr th .remove,
+div.realtime table thead tr th .remove {
   cursor: pointer;
   font-size: 20px;
 }
-form.realtime table tfoot tr {
+form.realtime table tfoot tr,
+div.realtime table tfoot tr {
   border: none;
 }
-form.realtime table tfoot tr td {
+form.realtime table tfoot tr td,
+div.realtime table tfoot tr td {
   border: none;
   text-align: center;
 }
-form.realtime table tfoot tr td .save {
+form.realtime table tfoot tr td .save,
+div.realtime table tfoot tr td .save {
   padding: 15px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 form.realtime #adduser,
-form.realtime #addoption {
+div.realtime #adduser,
+form.realtime #addoption,
+div.realtime #addoption {
   color: #46E981;
   border: 1px solid #46E981;
   padding: 15px;
   cursor: pointer;
 }
-form.realtime #adduser {
+form.realtime #adduser,
+div.realtime #adduser {
   border-top-left-radius: 5px;
 }
-form.realtime #addoption {
+form.realtime #addoption,
+div.realtime #addoption {
   border-bottom-left-radius: 5px;
 }
 div.modal,
diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less
index a54ac78f6..d0a783f3e 100644
--- a/customize.dist/src/cryptpad.less
+++ b/customize.dist/src/cryptpad.less
@@ -359,7 +359,7 @@ tbody {
     cursor: pointer !important;
 }
 
-form.realtime {
+form.realtime, div.realtime {
     > input {
         &[type="text"] {
 
@@ -375,13 +375,13 @@ form.realtime {
 
     table {
         border-collapse: collapse;
-        width: calc(100% - 1px);
+        width: ~"calc(100% - 1px)";
         tr {
             td:first-child {
                 position:absolute;
                 left: 29px;
                 top: auto;
-                width: 400px;
+                width: ~"calc(30% - 50px)";
             }
             td {
                 padding: 0px;
@@ -390,9 +390,7 @@ form.realtime {
                 div.text-cell {
                     padding: 0px;
                     margin: 0px;
-                        height: 100%;
-
-                    width: 400px;
+                    height: 100%;
 
                     input {
                         width: 80%;
@@ -473,17 +471,57 @@ form.realtime {
         input {
             &[type="text"] {
                 height: 100%;
-                width: 70%;
-                border: 3px solid @base;
+                border: 1px solid @base;
+                width: 80%;
+            }
+        }
+        thead {
+            td {
+                padding: 0px 5px;
+                background: @less-light-base;
+                border-radius: 20px 20px 0 0;
+                input {
+                    &[type="text"] {
+                        width: 100%;
+                        box-sizing: border-box;
+                        &[disabled] {
+                            color: white;
+                            padding: 1px 5px;
+                        }
+                    }
+                }
+            }
+        }
+
+        tbody {
+            .text-cell {
+                background: @less-light-base;
+                //border-radius: 20px 0 0 20px;
+                input[type="text"] {
+                    width: ~"calc(100% - 50px)";
+                }
+                .edit {
+                    float:right;
+                    margin: 0 10px 0 0;
+                }
+                .remove {
+                    float: left;
+                    margin: 0 0 0 10px;
+                }
             }
         }
         .edit {
             color: @cp-green;
             cursor: pointer;
-            width: 10%;
-            font-size: 20px;
-            &:after { content: '✐'; }
-            &.editable { display: none; }
+            float: left;
+            margin-left: 10px;
+            /*&:after { content: '✐'; }*/
+            /*&.editable { display: none; }*/
+        }
+
+        .remove {
+            float: right;
+            margin-right: 10px
         }
 
         thead {
diff --git a/customize.dist/src/variables.less b/customize.dist/src/variables.less
index 14e6de373..c6d555219 100644
--- a/customize.dist/src/variables.less
+++ b/customize.dist/src/variables.less
@@ -1,5 +1,6 @@
 @base: #302B28;
 @light-base: lighten(@base, 20%);
+@less-light-base: lighten(@base, 10%);
 @fore: #fafafa;
 
 @cp-green: #46E981;
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 493bd69c9..e8948cafc 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -129,6 +129,12 @@ define(function () {
     out.wizardTitle = "Utiliser l'assistant pour créer votre sondage";
     out.wizardConfirm = "Êtes-vous vraiment prêt à ajouter ces options au sondage ?";
 
+    out.poll_publish_button = "Publier";
+    out.poll_admin_button = "Administrer";
+    out.poll_create_user = "Ajouter un utilisateur";
+    out.poll_create_option = "Ajouter une option";
+    out.poll_commit = "Valider";
+
     out.poll_closeWizardButton = "Fermer l'assistant";
     out.poll_closeWizardButtonTitle = "Fermer l'assistant";
     out.poll_wizardComputeButton = "Générer les options";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 8bde3fb00..65acfb831 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -131,6 +131,12 @@ define(function () {
     out.wizardTitle = "Use the wizard to create your poll";
     out.wizardConfirm = "Are you really ready to add these options to your poll?";
 
+    out.poll_publish_button = "Publish";
+    out.poll_admin_button = "Admin";
+    out.poll_create_user = "Add a new user";
+    out.poll_create_option = "Add a new option";
+    out.poll_commit = "Commit";
+
     out.poll_closeWizardButton = "Close wizard";
     out.poll_closeWizardButtonTitle = "Close wizard";
     out.poll_wizardComputeButton = "Compute Options";
diff --git a/www/poll/test/index.html b/www/poll/test/index.html
index 6fef7493d..77345e52b 100644
--- a/www/poll/test/index.html
+++ b/www/poll/test/index.html
@@ -55,7 +55,7 @@
         #tableContainer {
             position: relative;
             padding: 29px;
-            padding-right: 82px;
+            padding-right: 79px;
         }
         #tableContainer button {
             height: 2rem;
@@ -67,8 +67,8 @@
         #create-user {
             position: absolute;
             display: inline-block;
-            /*left: 0px;
-            top: 31px;*/
+            /*left: 0px;*/
+            top: 55px;
             width: 50px;
             overflow: hidden;
         }
@@ -77,11 +77,20 @@
         }
         #tableScroll {
             overflow-x: auto;
-            margin-left: 400px;
+            margin-left: calc(30% - 50px + 29px);
             max-width: 70%;
             width: auto;
             display: inline-block;
         }
+        #description[disabled] {
+            resize: none;
+        }
+        #description {
+            padding: 5px;
+        }
+        #commit {
+            width: 100%;
+        }
     </style>
 </head>
 <body>
@@ -96,17 +105,17 @@
     <p data-localization="poll_p_encryption"></p>
 </div>
 
-<button id="publish" style="display: none;">publish poll</button>
-<button id="admin" style="display: none;">admin</button>
+<button id="publish" data-localization-title="poll_publish_button" data-localization="poll_publish_button" style="display: none;">publish poll</button>
+<button id="admin" data-localization-title="poll_admin_button" data-localization="poll_admin_button" style="display: none;">admin</button>
 
 
-<form class="realtime">
+<div class="realtime">
     <br />
     <textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
     <div id="tableContainer">
         <div id="tableScroll"></div>
-        <button id="create-user"><span class="fa fa-plus"></span></button>
-        <button id="create-option"><span class="fa fa-plus"></span></button>
-        <button id="commit"><span class="fa fa-check"></span></button>
+        <button data-localization-title="poll_create_user" id="create-user"><span class="fa fa-plus"></span></button>
+        <button data-localization-title="poll_create_option" id="create-option"><span class="fa fa-plus"></span></button>
+        <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
     </div>
-</form>
+</div>
diff --git a/www/poll/test/main.js b/www/poll/test/main.js
index 6d8b468a2..3e9b3d5ee 100644
--- a/www/poll/test/main.js
+++ b/www/poll/test/main.js
@@ -96,7 +96,7 @@ define([
         $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
         $('td.uncommitted .remove, td.uncommitted .edit').css('visibility', 'hidden');
         $('td.uncommitted .cover').addClass("uncommitted");
-        $('.uncommitted input[type="text"]').attr("placeholder", "New column here"); //TODO
+        $('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
     };
 
     var unlockElements = function () {
@@ -114,7 +114,6 @@ define([
     var updateTableButtons = function () {
         if ($('.checkbox-cell').length && !isOwnColumnCommitted()) {
             $('#commit').show();
-            $('#commit').css('width', $($('.checkbox-cell')[0]).width());
         }
 
         var $createOption = APP.$table.find('tfoot tr td:first-child');
@@ -129,10 +128,25 @@ define([
         }
     };
 
+    var setTablePublished = function (bool) {
+        if (bool) {
+            if (APP.$publish) { APP.$publish.hide(); }
+            if (APP.$admin) { APP.$admin.show(); }
+            $('#create-option').hide();
+            $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
+        } else {
+            if (APP.$publish) { APP.$publish.show(); }
+            if (APP.$admin) { APP.$admin.hide(); }
+            $('#create-option').show();
+            $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
+        }
+    };
+
     var updateDisplayedTable = function () {
         styleUncommittedColumn();
         unlockElements();
         updateTableButtons();
+        setTablePublished(APP.proxy.published);
     };
 
     var unlockColumn = function (id, cb) {
@@ -211,7 +225,7 @@ define([
                 break;
             case 'checkbox':
                 console.log("checkbox[tr-id='%s'] %s", id, input.checked);
-                if ($(input).hasClass('enabled')) {
+                if (APP.editable.col.indexOf(x) >= 0 || x === APP.userid) {
                     Render.setValue(object, id, input.checked);
                     change();
                 } else {
@@ -329,18 +343,7 @@ define([
         if (APP.proxy.published !== bool) {
             APP.proxy.published = bool;
         }
-        if (bool) {
-            APP.$publish.hide();
-            APP.$admin.show();
-            $('#create-option').hide();
-            $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
-        } else {
-            APP.$publish.show();
-            APP.$admin.hide();
-            $('#create-option').show();
-            $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
-        }
-
+        setTablePublished(bool);
         ['textarea'].forEach(function (sel) {
             $(sel).attr('disabled', bool);
         });
@@ -456,7 +459,6 @@ define([
 
         var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
         var $createRow = APP.$createRow = $('#create-option').click(function () {
-            //
             console.error("BUTTON CLICKED! LOL");
             Render.createRow(proxy, function () {
                 change();
@@ -479,6 +481,18 @@ define([
             change();
         });
 
+        // #publish button is removed in readonly
+        var $publish = APP.$publish = $('#publish')
+            .click(function () {
+                publish(true);
+            });
+
+        // #publish button is removed in readonly
+        var $admin = APP.$admin = $('#admin')
+            .click(function () {
+                publish(false);
+            });
+
         // Title
         if (APP.proxy.info.defaultTitle) {
             updateDefaultTitle(APP.proxy.info.defaultTitle);
@@ -488,10 +502,16 @@ define([
         updateTitle(APP.proxy.info.title || defaultName);
 
         // Description
+        var resize = function () {
+            var lineCount = $description.val().split('\n').length;
+            $description.css('height', lineCount + 'rem');
+        };
         $description.on('change keyup', function () {
             var val = $description.val();
             proxy.info.description = val;
+            resize();
         });
+        resize();
         if (typeof(proxy.info.description) !== 'undefined') {
             $description.val(proxy.info.description);
         }
@@ -530,18 +550,6 @@ define([
             .on('change', ['table'], change)
             .on('remove', [], change);
 
-        // #publish button is removed in readonly
-        var $publish = APP.$publish = $('#publish')
-            .click(function () {
-                publish(true);
-            });
-
-        // #publish button is removed in readonly
-        var $admin = APP.$admin = $('#admin')
-            .click(function () {
-                publish(false);
-            });
-
         addToUserData(APP.proxy.info.userData);
 
         getLastName(function (err, lastName) {
@@ -686,10 +694,10 @@ define([
         })
         .on('disconnect', disconnect);
 
-        Cryptpad.getPadAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
+        Cryptpad.getAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
             if (e) { console.error(e); }
             if (value === null) {
-                Cryptpad.setPadAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
+                Cryptpad.setAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
                     if (e) { console.error(e) }
                 });
             } else if (value === "1") {
diff --git a/www/poll/test/render.js b/www/poll/test/render.js
index 0b9fe790e..826a867a9 100644
--- a/www/poll/test/render.js
+++ b/www/poll/test/render.js
@@ -205,7 +205,7 @@ by maintaining indexes in rowsOrder and colsOrder
                         'data-rt-id': col,
                         type: 'text',
                         value: getColumnValue(obj, col) || "",
-                        placeholder: 'User', //TODO translate
+                        placeholder: Cryptpad.Messages.poll_userPlaceholder,
                         disabled: 'disabled'
                     };
                     return result;
@@ -223,7 +223,7 @@ by maintaining indexes in rowsOrder and colsOrder
                 'data-rt-id': row,
                 value: getRowValue(obj, row),
                 type: 'text',
-                placeholder: 'Option', //TODO translate
+                placeholder: Cryptpad.Messages.poll_optionPlaceholder,
                 disabled: 'disabled'
             }].concat(cols.map(function (col) {
                 var id = [col, rows[i-1]].join('_');
@@ -253,7 +253,7 @@ by maintaining indexes in rowsOrder and colsOrder
         return ['SPAN', {
             'data-rt-id': id,
             class: 'edit',
-        }, ['']];
+        }, ['✐']];
     };
 
     var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
@@ -263,8 +263,8 @@ by maintaining indexes in rowsOrder and colsOrder
             var editElement = makeEditElement(cell['data-rt-id']);
             var elements = [['INPUT', cell, []]];
             if (!readOnly) {
-                elements.push(removeElement);
-                elements.push(editElement);
+                elements.unshift(removeElement);
+                elements.unshift(editElement);
             }
             return ['TD', {}, elements];
         }