diff --git a/www/poll/main.js b/www/poll/main.js index 96012b7da..6e42ca75c 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -15,8 +15,6 @@ define([ $(function () { - var unlockHTML = ''; - var lockHTML = ''; 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') { diff --git a/www/poll/poll.css b/www/poll/poll.css index 8016a10c4..3e534d5e2 100644 --- a/www/poll/poll.css +++ b/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; diff --git a/www/poll/poll.less b/www/poll/poll.less index 1ddcaa2f0..699e96e03 100644 --- a/www/poll/poll.less +++ b/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; diff --git a/www/poll/render.js b/www/poll/render.js index ecd94159d..8399d5b71 100644 --- a/www/poll/render.js +++ b/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]; }