Display own column at the beginning, add uncommitted column

customize.dist/main.css

@@ -337,9 +337,11 @@ form.realtime table tr td div.text-cell {
   padding: 0px;
   margin: 0px;
   height: 100%;
+  width: 500px;
 }
 form.realtime table tr td div.text-cell input {
   width: 80%;
+  width: 90%;
   height: 100%;
   border: 0px;
 }
@@ -351,9 +353,10 @@ form.realtime table tr td div.text-cell input[disabled] {
 form.realtime table tr td.checkbox-cell {
   margin: 0px;
   padding: 0px;
+  height: 100%;
 }
 form.realtime table tr td.checkbox-cell div.checkbox-contain {
-  display: block;
+  display: inline-block;
   height: 100%;
   width: 100%;
   position: relative;
@@ -376,6 +379,9 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbo
   color: #302B28;
   display: block;
 }
+form.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 {
   content: "✖";
 }

www/poll/test/main.js

@@ -21,6 +21,18 @@ define([
         //$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }),
     };
 
+    var sortColumns = function (order, firstcol) {
+        var colsOrder = order.slice();
+        colsOrder.sort(function (a, b) {
+            return (a === firstcol) ? -1 :
+                        ((b === firstcol) ? 1 : 0);
+        });
+        if (colsOrder.indexOf(firstcol) === -1) {
+            colsOrder.unshift(firstcol);
+        }
+        return colsOrder;
+    };
+
     /*  Any time the realtime object changes, call this function */
     var change = function (o, n, path) {
         if (path && path.join) {
@@ -29,7 +41,13 @@ define([
         }
 
         var table = APP.$table[0];
-        Render.updateTable(table, APP.proxy);
+
+        var colsOrder = sortColumns(APP.proxy.table.colsOrder, APP.userid);
+        var conf = {
+            cols: colsOrder
+        };
+
+        Render.updateTable(table, APP.proxy, conf);
 
         /*  FIXME browser autocomplete fills in new fields sometimes
             calling updateTable twice removes the autofilled in values
@@ -38,7 +56,7 @@ define([
             https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
         */
         window.setTimeout(function () {
-            Render.updateTable(table, APP.proxy);
+            Render.updateTable(table, APP.proxy, conf);
         });
     };
 
@@ -53,6 +71,8 @@ define([
 
         console.log(input);
 
+        if ($(input).hasClass("uncommitted-cell")) { console.log('do nothing'); return; }
+
         switch (type) {
             case 'text':
                 console.log("text[rt-id='%s'] [%s]", id, input.value);
@@ -151,7 +171,9 @@ define([
 
         prepareProxy(proxy, Render.Example);
 
-        var $table = APP.$table = $(Render.asHTML(proxy));
+        var colsOrder = sortColumns(proxy.table.colsOrder, userid);
+
+        var $table = APP.$table = $(Render.asHTML(proxy, null, colsOrder));
         var $createRow = APP.$createRow = $('#create-option').click(function () {
             // 
             console.error("BUTTON CLICKED! LOL");
@@ -227,6 +249,7 @@ define([
             Cryptpad.getPadAttribute('userid', function (e, userid) {
                 if (e) { console.error(e); }
                 if (userid === null) { userid = Render.coluid(); }
+                APP.userid = userid;
                 Cryptpad.setPadAttribute('userid', userid, function (e) {
                     ready(info, userid);
                 });

www/poll/test/render.js

@@ -194,11 +194,16 @@ by maintaining indexes in rowsOrder and colsOrder
         return [null].concat(rows).map(function (row, i) {
             if (i === 0) {
                 return [null].concat(cols.map(function (col) {
-                    return {
+                    var result = {
                         'data-rt-id': col,
                         type: 'text',
-                        value: getColumnValue(obj, col) || "",
+                        value: getColumnValue(obj, col) || ""
                     };
+                    if (getColumnValue(obj, col) === false) {
+                        result.placeholder = 'new column here'; //TODO translate
+                        result['class'] = 'uncommitted';
+                    }
+                    return result;
                 }));
             }
 
@@ -215,7 +220,9 @@ by maintaining indexes in rowsOrder and colsOrder
                     type: 'checkbox',
                     autocomplete: 'nope'
                 };
-
+                if (getColumnValue(obj, col) === false) {
+                    result['class'] = 'uncommitted-cell';
+                }
                 if (val) { result.checked = true; }
                 return result;
             }));
@@ -232,9 +239,10 @@ by maintaining indexes in rowsOrder and colsOrder
     var makeHeadingCell = Render.makeHeadingCell = function (cell) {
         if (!cell) { return ['TD', {}, []]; }
         if (cell.type === 'text') {
+            var removeElement = cell['class'] !== "uncommitted" ? makeRemoveElement(cell['data-rt-id']) : '';
             return ['TD', {}, [
                 ['INPUT', cell, []],
-                makeRemoveElement(cell['data-rt-id'])
+                removeElement
             ]];
         }
         return ['TD', cell, []];
@@ -294,8 +302,8 @@ by maintaining indexes in rowsOrder and colsOrder
         return ['TABLE', {id:'table'}, [head, body]];
     };
 
-    var asHTML = Render.asHTML = function (obj) {
+    var asHTML = Render.asHTML = function (obj, rows, cols) {
-        return Hyperjson.toDOM(toHyperjson(cellMatrix(obj)));
+        return Hyperjson.toDOM(toHyperjson(cellMatrix(obj, rows, cols)));
     };
 
     var diffIsInput = Render.diffIsInput = function (info) {
@@ -369,7 +377,9 @@ by maintaining indexes in rowsOrder and colsOrder
     var updateTable = Render.updateTable = function (table, obj, conf) {
         var DD = new DiffDOM(diffOptions);
 
-        var matrix = cellMatrix(obj);
+        var rows = conf ? conf.rows : null;
+        var cols = conf ? conf.cols : null;
+        var matrix = cellMatrix(obj, rows, cols);
 
         var hj = toHyperjson(matrix);