lock options by default

add edit button for modifying options
fix bug where committing didn't clear the active column
minor style fixes

customize.dist/main.css

@@ -288,10 +288,15 @@ form.realtime table tr td div.text-cell {
   height: 100%;
 }
 form.realtime table tr td div.text-cell input {
-  width: 90%;
+  width: 80%;
   height: 100%;
   border: 0px;
 }
+form.realtime table tr td div.text-cell input[disabled] {
+  background-color: transparent;
+  color: #fafafa;
+  font-weight: bold;
+}
 form.realtime table tr td.checkbox-cell {
   margin: 0px;
   padding: 0px;
@@ -337,6 +342,18 @@ form.realtime table input[type="text"] {
   width: 80%;
   border: 3px solid #302B28;
 }
+form.realtime table .edit {
+  color: #46E981;
+  cursor: pointer;
+  width: 10%;
+  font-size: 20px;
+}
+form.realtime table .edit:after {
+  content: '✐';
+}
+form.realtime table .edit.editable {
+  display: none;
+}
 form.realtime table thead tr th input[type="text"][disabled] {
   background-color: transparent;
   color: #fafafa;
@@ -346,18 +363,6 @@ form.realtime table thead tr th .remove {
   cursor: pointer;
   font-size: 20px;
 }
-form.realtime table thead tr th .edit {
-  color: #46E981;
-  cursor: pointer;
-  width: 10%;
-  font-size: 20px;
-}
-form.realtime table thead tr th .edit:after {
-  content: '✐';
-}
-form.realtime table thead tr th .edit.editable {
-  display: none;
-}
 form.realtime table tfoot tr td {
   text-align: center;
 }

customize.dist/src/cryptpad.less

@@ -346,9 +346,14 @@ form.realtime {
                     margin: 0px;
                         height: 100%;
                     input {
-                        width: 90%;
+                        width: 80%;
                         height: 100%;
                         border: 0px;
+                        &[disabled] {
+                            background-color: transparent;
+                            color: @fore;
+                            font-weight: bold;
+                        }
                     }
                 }
 
@@ -409,6 +414,14 @@ form.realtime {
                 border: 3px solid @base;
             }
         }
+        .edit {
+            color: @cp-green;
+            cursor: pointer;
+            width: 10%;
+            font-size: 20px;
+            &:after { content: '✐'; }
+            &.editable { display: none; }
+        }
 
         thead {
             tr {
@@ -422,14 +435,6 @@ form.realtime {
                         cursor: pointer;
                         font-size: 20px;
                     }
-                    .edit {
-                        color: @cp-green;
-                        cursor: pointer;
-                        width: 10%;
-                        font-size: 20px;
-                        &:after { content: '✐'; }
-                        &.editable { display: none; }
-                    }
                 }
             }
         }

www/poll/main.js

@@ -125,9 +125,14 @@ define([
         items.forEach(function ($item) {
             $item.attr('disabled', !bool);
         });
+
+        if (!bool) {
             $('input[id^="y"]').each(function (i, e) {
-            $(this).attr('disabled', !bool);
+                var $option = $(this);
+                $option.attr('disabled', true);
+                console.log($option.val());
             });
+        }
     };
 
     var coluid = Uid('x');
@@ -209,6 +214,7 @@ define([
                 })
                 .text('COMMIT') // TODO translate
                 .click(function () {
+                    module.activeColumn = '';
                     makeUserEditable(id, false);
                 });
                 $target.append($save);
@@ -287,6 +293,20 @@ define([
         });
     };
 
+    var makeOptionEditable = function (id, bool) {
+        if (bool) {
+            module.rt.proxy.table.rowsOrder.forEach(function (rowuid) {
+                $('#' + rowuid)
+                    .attr('disabled', rowuid !== id)
+                    .closest('td')
+                    .find('.edit')
+                    .removeClass('editable');
+            });
+            return;
+        }
+        $('input[id^="y"]').attr('disabled', true);
+    };
+
     var makeOption = function (proxy, id, value) {
         var $option = Input({
             type: 'text',
@@ -294,6 +314,22 @@ define([
             id: id,
         }).on('keyup change', function () {
             proxy.table.rows[id] = $option.val();
+        }).attr('disabled', true);
+
+        var $edit = $('<span>', {
+            'class': 'edit',
+            title: 'edit option', // TODO translate
+        })
+        .click(function () {
+            if ($edit.hasClass('editable')) { return; }
+            Cryptpad.confirm("Are you sure you'd like to edit this option?",
+                function (yes) {
+                    if (!yes) { return; }
+                    makeOptionEditable(id, true);
+                    $edit.addClass('editable');
+                    $edit.text("");
+                    module.activeOption = id;
+                });
         });
 
         var $remove = $('<span>', {
@@ -312,6 +348,7 @@ define([
         var $wrapper = $('<div>', {
             'class': 'text-cell',
         })
+            .append($edit)
             .append($option)
             .append($remove);
 
@@ -339,7 +376,13 @@ define([
     $('#addoption').click(function () {
         if (!module.isEditable) { return; }
         var id = rowuid();
-        makeOption(module.rt.proxy, id).focus();
+
+        var msg = "Propose an option";
+        Cryptpad.prompt(msg, "", function (option) {
+            if (option === null) { return; }
+            makeOption(module.rt.proxy, id, option).val(option).focus();
+        });
+        //makeOption(module.rt.proxy, id).focus();
     });
 
     Wizard.$getOptions.click(function () {