Make editing more visible

www/poll/main.js

@@ -107,12 +107,15 @@ define([
     };
 
     var unlockElements = function () {
+        var $input;
         APP.editable.row.forEach(function (id) {
-            $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
+            $input = $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
+            $input.parent().parent().addClass('editing');
             $('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden');
         });
         APP.editable.col.forEach(function (id) {
-            $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
+            $input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
+            $input.parent().addClass('editing');
             $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
             $('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
         });
@@ -296,6 +299,7 @@ define([
         $('.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);
+        $cells.removeClass('editing');
         $('.edit[data-rt-id!="' + APP.userid + '"]').css('visibility', 'visible');
         APP.editable.col = [APP.userid];
         APP.editable.row = [];
@@ -352,6 +356,8 @@ define([
         e.stopPropagation();
 
         if (!APP.ready) { return; }
+        if (e.which !== 1) { return; }
+
         var target = e && e.target;
 
         if (!target) { return void debug("NO TARGET"); }

www/poll/poll.css

@@ -170,6 +170,10 @@ div.realtime table {
   border-collapse: collapse;
   width: calc(100% - 1px);
 }
+form.realtime table .editing,
+div.realtime table .editing {
+  background-color: #88b8cc;
+}
 form.realtime table tr td:first-child,
 div.realtime table tr td:first-child {
   position: absolute;
@@ -298,8 +302,8 @@ div.realtime table thead td input[type="text"][disabled] {
   color: #000;
   border: 1px solid transparent;
 }
-form.realtime table tbody .text-cell,
-div.realtime table tbody .text-cell {
+form.realtime table tbody td:not(.editing) .text-cell,
+div.realtime table tbody td:not(.editing) .text-cell {
   background: #aaa;
 }
 form.realtime table tbody .text-cell input[type="text"],

www/poll/poll.less

@@ -4,6 +4,7 @@
 @poll-th-bg: #aaa;
 @poll-th-user-bg: #999;
 @poll-td-bg: #aaa;
+@poll-editing: #88b8cc;
 @poll-placeholder: #666;
 @poll-border-color: #555;
 @poll-cover-color: #000;
@@ -195,6 +196,9 @@ form.realtime, div.realtime {
     table {
         border-collapse: collapse;
         width: ~"calc(100% - 1px)";
+        .editing {
+            background-color: @poll-editing;
+        }
         tr {
             td:first-child {
                 position:absolute;
@@ -327,8 +331,12 @@ form.realtime, div.realtime {
         }
 
         tbody {
+            td:not(.editing) {
+                .text-cell {
+                    background: @poll-td-bg;
+                }
+            }
             .text-cell {
-                background: @poll-td-bg;
                 //border-radius: 20px 0 0 20px;
                 input[type="text"] {
                     width: ~"calc(100% - 50px)";