poll: make locks clickable

www/poll/main.js

@@ -15,8 +15,6 @@ define([
 
     $(function () {
 
-    var unlockHTML = '<i class="fa fa-unlock" aria-hidden="true"></i>';
-    var lockHTML = '<i class="fa fa-lock" aria-hidden="true"></i>';
     var HIDE_INTRODUCTION_TEXT = "hide_poll_text";
     var defaultName;
 
@@ -100,12 +98,10 @@ define([
         // Enable the checkboxes for the user's column (committed or not)
         $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
         $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
-        $('[data-rt-id="' + id + '"] ~ .edit').css('visibility', 'hidden');
-        $('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked);
+        $('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
 
         if (isOwnColumnCommitted()) { return; }
         $('[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", Messages.poll_userPlaceholder);
     };
@@ -118,8 +114,7 @@ define([
         APP.editable.col.forEach(function (id) {
             $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
             $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
-            $('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden');
-            $('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked);
+            $('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
         });
     };
 
@@ -276,7 +271,6 @@ define([
         switch (type) {
             case 'text':
                 debug("text[rt-id='%s'] [%s]", id, input.value);
-                if (!input.value) { return void debug("Hit enter?"); }
                 Render.setValue(object, id, input.value);
                 change(null, null, null, 50);
                 break;
@@ -295,12 +289,26 @@ define([
         }
     };
 
+    var hideInputs = function (target, isKeyup) {
+        if (!isKeyup && $(target).is('[type="text"]')) {
+            return;
+        }
+        $('.lock[data-rt-id!="' + APP.userid + '"]').addClass('fa-lock').removeClass('fa-unlock').attr('title', Messages.poll_locked);
+        var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
+        $cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
+        $('.edit[data-rt-id!="' + APP.userid + '"]').css('visibility', 'visible');
+        APP.editable.col = [APP.userid];
+        APP.editable.row = [];
+    };
+
     /*  Called whenever an event is fired on a span */
     var handleSpan = function (span) {
         var id = span.getAttribute('data-rt-id');
         var type = Render.typeofId(id);
         var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1;
         var isEdit = span.className && span.className.split(' ').indexOf('edit') !== -1;
+        var isLock = span.className && span.className.split(' ').indexOf('lock') !== -1;
+        var isLocked = span.className && span.className.split(' ').indexOf('fa-lock') !== -1;
         if (type === 'row') {
             if (isRemove) {
                 Cryptpad.confirm(Messages.poll_removeOption, function (res) {
@@ -310,6 +318,7 @@ define([
                     });
                 });
             } else if (isEdit) {
+                hideInputs(span);
                 unlockRow(id, function () {
                     change(null, null, null, null, function() {
                         $('input[data-rt-id="' + id + '"]').focus();
@@ -324,7 +333,8 @@ define([
                         change();
                     });
                 });
-            } else if (isEdit) {
+            } else if (isLock && isLocked) {
+                hideInputs(span);
                 unlockColumn(id, function () {
                     change(null, null, null, null, function() {
                         $('input[data-rt-id="' + id + '"]').focus();
@@ -338,48 +348,34 @@ define([
         }
     };
 
-    var hideInputs = function (e, isKeyup) {
-        if (!isKeyup && $(e.target).is('[type="text"]')) {
-            return;
-        }
-        $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML).attr('title', Messages.poll_lock);
-        var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
-        $cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
-        $('.edit[data-rt-id!="' + APP.userid + '"]').css('visibility', 'visible');
-        APP.editable.col = [APP.userid];
-        APP.editable.row = [];
-    };
-
-    $(window).click(hideInputs);
-
     var handleClick = function (e, isKeyup) {
         e.stopPropagation();
 
         if (!APP.ready) { return; }
         var target = e && e.target;
 
-        if (isKeyup) {
-            debug("Keyup!");
-        }
-
         if (!target) { return void debug("NO TARGET"); }
 
         var nodeName = target && target.nodeName;
+        var shouldLock = $(target).hasClass('fa-unlock');
 
-        if (!$(target).parents('#table tbody').length || $(target).hasClass('edit')) {
+        if ((!$(target).parents('#table tbody').length && $(target).hasClass('lock'))) {
             hideInputs(e);
         }
 
         switch (nodeName) {
             case 'INPUT':
                 if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) {
-                    hideInputs(e, isKeyup);
-                    return;
+                    hideInputs(target, isKeyup);
+                    break;
                 }
                 handleInput(target);
                 break;
             case 'SPAN':
             //case 'LABEL':
+                if (shouldLock) {
+                    break;
+                }
                 handleSpan(target);
                 break;
             case undefined:
@@ -459,7 +455,6 @@ var ready = function (info, userid, readOnly) {
 
     var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
     APP.$createRow = $('#create-option').click(function () {
-        //console.error("BUTTON CLICKED! LOL");
         Render.createRow(proxy, function (empty, id) {
             change(null, null, null, null, function() {
                 $('.edit[data-rt-id="' + id + '"]').click();
@@ -470,7 +465,7 @@ var ready = function (info, userid, readOnly) {
     APP.$createCol = $('#create-user').click(function () {
         Render.createColumn(proxy, function (empty, id) {
             change(null, null, null, null, function() {
-                $('.edit[data-rt-id="' + id + '"]').click();
+                $('.lock[data-rt-id="' + id + '"]').click();
             });
         });
     });
@@ -532,6 +527,8 @@ var ready = function (info, userid, readOnly) {
         .click(handleClick)
         .on('keyup', function (e) { handleClick(e, true); });
 
+    $(window).click(hideInputs);
+
     proxy
         .on('change', ['info'], function (o, n, p) {
             if (p[1] === 'title') {

www/poll/poll.css

@@ -266,23 +266,37 @@ div.realtime table input[type="text"] {
   border: 1px solid #fff;
   width: 80%;
 }
+form.realtime table span,
+div.realtime table span {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
 form.realtime table thead td,
 div.realtime table thead td {
   padding: 0px 5px;
   background: #aaa;
   border-radius: 20px 20px 0 0;
-  text-align: center;
+}
+form.realtime table thead td:nth-of-type(2),
+div.realtime table thead td:nth-of-type(2) {
+  background: #999;
+}
+form.realtime table thead td:nth-of-type(2) .lock,
+div.realtime table thead td:nth-of-type(2) .lock {
+  cursor: default;
 }
 form.realtime table thead td input[type="text"],
 div.realtime table thead td input[type="text"] {
   width: 100%;
   box-sizing: border-box;
+  padding: 1px 5px;
 }
 form.realtime table thead td input[type="text"][disabled],
 div.realtime table thead td input[type="text"][disabled] {
   color: #000;
-  padding: 1px 5px;
-  border: none;
+  border: 1px solid transparent;
 }
 form.realtime table tbody .text-cell,
 div.realtime table tbody .text-cell {
@@ -302,10 +316,6 @@ div.realtime table tbody .text-cell .remove {
   float: left;
   margin: 0 0 0 10px;
 }
-form.realtime table tbody tr td:nth-child(2),
-div.realtime table tbody tr td:nth-child(2) {
-  border-left: 1px solid #555;
-}
 form.realtime table tbody tr:not(:first-child) td:not(:first-child) label,
 div.realtime table tbody tr:not(:first-child) td:not(:first-child) label {
   border-top: 1px solid #555;
@@ -317,6 +327,13 @@ div.realtime table .edit {
   float: left;
   margin-left: 10px;
 }
+form.realtime table .lock,
+div.realtime table .lock {
+  margin-left: calc(50% - 0.5em);
+  cursor: pointer;
+  width: 1em;
+  text-align: center;
+}
 form.realtime table .remove,
 div.realtime table .remove {
   float: right;

www/poll/poll.less

@@ -2,6 +2,7 @@
 @import "../../customize.dist/src/less/mixins.less";
 
 @poll-th-bg: #aaa;
+@poll-th-user-bg: #999;
 @poll-td-bg: #aaa;
 @poll-placeholder: #666;
 @poll-border-color: #555;
@@ -293,20 +294,32 @@ form.realtime, div.realtime {
                 width: 80%;
             }
         }
+        span {
+            user-select: none;
+            -moz-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+        }
         thead {
             td {
                 padding: 0px 5px;
                 background: @poll-th-bg;
                 border-radius: 20px 20px 0 0;
-                text-align: center;
+                //text-align: center;
+                &:nth-of-type(2) {
+                    background: @poll-th-user-bg;
+                    .lock {
+                        cursor: default;
+                    }
+                }
                 input {
                     &[type="text"] {
                         width: 100%;
                         box-sizing: border-box;
+                        padding: 1px 5px;
                         &[disabled] {
                             color: @poll-fg;
-                            padding: 1px 5px;
-                            border: none;
+                            border: 1px solid transparent;
                         }
                     }
                 }
@@ -344,6 +357,12 @@ form.realtime, div.realtime {
             margin-left: 10px;
         }
 
+        .lock {
+            margin-left: ~"calc(50% - 0.5em)";
+            cursor: pointer;
+            width: 1em;
+            text-align: center;
+        }
         .remove {
             float: right;
             margin-right: 10px;

www/poll/render.js

@@ -269,12 +269,8 @@ var Renderer = function (Cryptpad) {
         return ['SPAN', {
             'data-rt-id': id,
             'title': Cryptpad.Messages.poll_locked,
-            class: 'lock',
-        }, [['i', {
-                class: 'fa fa-lock',
-                'aria-hidden': true,
-            }, []]
-        ]];
+            class: 'lock fa fa-lock',
+        }, []];
     };
 
     var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
@@ -284,7 +280,6 @@ var Renderer = function (Cryptpad) {
             if (!readOnly) {
                 elements.unshift(makeRemoveElement(cell['data-rt-id']));
                 elements.unshift(makeLockElement(cell['data-rt-id']));
-                elements.unshift(makeEditElement(cell['data-rt-id']));
             }
             return ['TD', {}, elements];
         }