From 20c252e5c6f8181bf3e6f8aeced0cc7277030d54 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Fri, 14 Apr 2017 12:45:45 +0200 Subject: [PATCH 1/5] fix placeholder styling in safari --- www/poll/poll.css | 3 +++ www/poll/poll.less | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/www/poll/poll.css b/www/poll/poll.css index 321121b59..030b8898e 100644 --- a/www/poll/poll.css +++ b/www/poll/poll.css @@ -32,6 +32,9 @@ textarea[disabled] { font: white; border: 0px; } +input[type="text"]::placeholder { + color: #333; +} table#table { margin: 0px; } diff --git a/www/poll/poll.less b/www/poll/poll.less index 7292b0e15..2ae85c25c 100644 --- a/www/poll/poll.less +++ b/www/poll/poll.less @@ -3,6 +3,7 @@ @poll-th-bg: #aaa; @poll-td-bg: #aaa; +@poll-placeholder: #333; @poll-border-color: #555; @poll-cover-color: #000; @poll-fg: #000; @@ -42,6 +43,14 @@ input[type="text"][disabled], textarea[disabled] { font: white; border: 0px; } + +// The placeholder color only seems to effect Safari when not set, but +// setting others just in case. + +input[type="text"]::placeholder { + color: @poll-placeholder; +} + table#table { margin: 0px; } From 05785e96ea112435bd5cc1648e79362eaa9abe25 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Fri, 14 Apr 2017 17:47:05 +0200 Subject: [PATCH 2/5] small color change --- www/poll/poll.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/www/poll/poll.less b/www/poll/poll.less index 2ae85c25c..369c44f0f 100644 --- a/www/poll/poll.less +++ b/www/poll/poll.less @@ -3,7 +3,7 @@ @poll-th-bg: #aaa; @poll-td-bg: #aaa; -@poll-placeholder: #333; +@poll-placeholder: #666; @poll-border-color: #555; @poll-cover-color: #000; @poll-fg: #000; @@ -44,8 +44,7 @@ input[type="text"][disabled], textarea[disabled] { border: 0px; } -// The placeholder color only seems to effect Safari when not set, but -// setting others just in case. +// The placeholder color only seems to effect Safari when not set input[type="text"]::placeholder { color: @poll-placeholder; From 7a05462eb3ff312b57b1955478f9170c66c6c366 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Fri, 14 Apr 2017 19:34:58 +0200 Subject: [PATCH 3/5] Some more poll changes <3 --- customize.dist/translations/messages.es.js | 5 +++++ customize.dist/translations/messages.js | 5 +++++ www/poll/main.js | 6 +++--- www/poll/poll.css | 17 ++++++++++++----- www/poll/poll.less | 13 +++++++++---- www/poll/render.js | 18 ++++++++---------- 6 files changed, 42 insertions(+), 22 deletions(-) diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index cfe682c48..9e6c8ceb7 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -356,5 +356,10 @@ define(function () { out.register_warning = "Zero Knowledge significa que no podemos recuperar tus datos si pierdes tu contraseña."; out.register_alreadyRegistered = "Este usuario ya existe, ¿iniciar sesión?"; + out.poll_remove = "Quitar"; + out.poll_edit = "Editar"; + out.poll_locked = "Cerrado"; + out.poll_unlocked = "Abierto"; + return out; }); diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 66f771033..7055a2b86 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -151,6 +151,11 @@ define(function () { out.poll_titleHint = "Title"; out.poll_descriptionHint = "Describe your poll, and use the 'publish' button when you're done. Anyone with the link can change the description, but this is discouraged."; + out.poll_remove = "Remove"; + out.poll_edit = "Edit"; + out.poll_locked = "Locked"; + out.poll_unlocked = "Unlocked"; + // Canvas out.canvas_clear = "Clear"; out.canvas_delete = "Delete selection"; diff --git a/www/poll/main.js b/www/poll/main.js index 8170f7e9d..d6522660f 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -114,7 +114,7 @@ define([ $('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); + $('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked); if (isOwnColumnCommitted()) { return; } $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted"); @@ -132,7 +132,7 @@ define([ $('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); + $('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked); }); }; @@ -369,7 +369,7 @@ define([ if (!isKeyup && $(e.target).is('[type="text"]')) { return; } - $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML); + $('.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'); diff --git a/www/poll/poll.css b/www/poll/poll.css index 030b8898e..8016a10c4 100644 --- a/www/poll/poll.css +++ b/www/poll/poll.css @@ -33,7 +33,7 @@ textarea[disabled] { border: 0px; } input[type="text"]::placeholder { - color: #333; + color: #666; } table#table { margin: 0px; @@ -69,7 +69,7 @@ table#table { #tableScroll { overflow-y: hidden; overflow-x: auto; - margin-left: calc(30% - 50px + 29px); + margin-left: calc(30% - 50px + 31px); max-width: 70%; width: auto; display: inline-block; @@ -107,6 +107,9 @@ table { tbody { border: 1px solid #555; } +tbody * { + box-sizing: border-box; +} tbody tr { text-align: center; } @@ -299,9 +302,13 @@ div.realtime table tbody .text-cell .remove { float: left; margin: 0 0 0 10px; } -form.realtime table tbody td label, -div.realtime table tbody td label { - border: 0.5px solid #555; +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; } form.realtime table .edit, div.realtime table .edit { diff --git a/www/poll/poll.less b/www/poll/poll.less index 369c44f0f..1ddcaa2f0 100644 --- a/www/poll/poll.less +++ b/www/poll/poll.less @@ -83,7 +83,7 @@ table#table { #tableScroll { overflow-y: hidden; overflow-x: auto; - margin-left: calc(~"30% - 50px + 29px"); + margin-left: calc(~"30% - 50px + 31px"); max-width: 70%; width: auto; display: inline-block; @@ -126,6 +126,9 @@ table { } tbody { border: 1px solid @poll-border-color; + * { + box-sizing: border-box; + } tr { text-align: center; &:first-of-type th{ @@ -326,9 +329,11 @@ form.realtime, div.realtime { margin: 0 0 0 10px; } } - td { - label { - border: .5px solid @poll-border-color; + tr:not(:first-child) { + td:not(:first-child) { + label { + border-top: 1px solid @poll-border-color; + } } } } diff --git a/www/poll/render.js b/www/poll/render.js index dcf62079f..c0ca599a0 100644 --- a/www/poll/render.js +++ b/www/poll/render.js @@ -252,6 +252,7 @@ var Renderer = function (Cryptpad) { var makeRemoveElement = Render.makeRemoveElement = function (id) { return ['SPAN', { 'data-rt-id': id, + 'title': Cryptpad.Messages.poll_remove, class: 'remove', }, ['✖']]; }; @@ -259,6 +260,7 @@ var Renderer = function (Cryptpad) { var makeEditElement = Render.makeEditElement = function (id) { return ['SPAN', { 'data-rt-id': id, + 'title': Cryptpad.Messages.poll_edit, class: 'edit', }, ['✐']]; }; @@ -266,6 +268,7 @@ var Renderer = function (Cryptpad) { var makeLockElement = Render.makeLockElement = function (id) { return ['SPAN', { 'data-rt-id': id, + 'title': Cryptpad.Messages.poll_locked, class: 'lock', }, [['i', { class: 'fa fa-lock', @@ -277,14 +280,11 @@ var Renderer = function (Cryptpad) { var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) { if (!cell) { return ['TD', {}, []]; } if (cell.type === 'text') { - var removeElement = makeRemoveElement(cell['data-rt-id']); - var editElement = makeEditElement(cell['data-rt-id']); - var lockElement = makeLockElement(cell['data-rt-id']); var elements = [['INPUT', cell, []]]; if (!readOnly) { - elements.unshift(removeElement); - elements.unshift(lockElement); - elements.unshift(editElement); + elements.unshift(makeRemoveElement(cell['data-rt-id'])); + elements.unshift(makeLockElement(cell['data-rt-id'])); + elements.unshift(makeEditElement(cell['data-rt-id'])); } return ['TD', {}, elements]; } @@ -321,12 +321,10 @@ var Renderer = function (Cryptpad) { var makeBodyCell = Render.makeBodyCell = function (cell, readOnly) { if (cell && cell.type === 'text') { - var removeElement = makeRemoveElement(cell['data-rt-id']); - var editElement = makeEditElement(cell['data-rt-id']); var elements = [['INPUT', cell, []]]; if (!readOnly) { - elements.push(removeElement); - elements.push(editElement); + elements.push(makeRemoveElement(cell['data-rt-id'])); + elements.push(makeEditElement(cell['data-rt-id'])); } return ['TD', {}, [ ['DIV', {class: 'text-cell'}, elements] From f434f002c4707be7362ca98eb5dc77097f347c55 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 29 May 2017 16:32:40 +0200 Subject: [PATCH 4/5] poll: make locks clickable --- www/poll/main.js | 61 ++++++++++++++++++++++------------------------ www/poll/poll.css | 31 +++++++++++++++++------ www/poll/poll.less | 25 ++++++++++++++++--- www/poll/render.js | 9 ++----- 4 files changed, 77 insertions(+), 49 deletions(-) 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]; } From 6518b56945ece824a4ded11c7fb06f8e366311a8 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 29 May 2017 16:50:25 +0200 Subject: [PATCH 5/5] poll: french messages --- customize.dist/translations/messages.fr.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index a112d397e..71227966c 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -193,6 +193,11 @@ define(function () { out.poll_titleHint = "Titre"; out.poll_descriptionHint = "Description"; + out.poll_remove = "Supprimer"; + out.poll_edit = "Modifier"; + out.poll_locked = "Verrouillé"; + out.poll_unlocked = "Déverrouillé"; + // Canvas out.canvas_clear = "Nettoyer"; out.canvas_delete = "Supprimer la sélection";