From f11cf8e6ac8cc58902fffffd1cdc9fc03a2bdf5b Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 14:14:12 +0200 Subject: [PATCH 01/10] move poll styles to separate file --- customize.dist/main.css | 259 ----------------- customize.dist/src/less/cryptpad.less | 274 ----------------- customize.dist/src/less/mixins.less | 2 +- customize.dist/src/less/variables.less | 6 - package.json | 2 +- www/poll/index.html | 102 +------ www/poll/poll.css | 357 +++++++++++++++++++++++ www/poll/poll.less | 387 +++++++++++++++++++++++++ 8 files changed, 747 insertions(+), 642 deletions(-) create mode 100644 www/poll/poll.css create mode 100644 www/poll/poll.less diff --git a/customize.dist/main.css b/customize.dist/main.css index 3f2f1e6bd..026649207 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -1074,59 +1074,6 @@ html.cp, .cp .panel { background-color: #cccccc; } -.cp table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -.cp tbody { - border: 1px solid #555; -} -.cp tbody tr { - text-align: center; -} -.cp tbody tr:first-of-type th { - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; -} -.cp tbody tr:first-of-type th.table-refresh { - color: #46E981; - text-decoration: none; - cursor: pointer; -} -.cp tbody tr:nth-child(odd) { - background-color: #ffffff; -} -.cp tbody tr th:first-of-type { - border-left: 0px; -} -.cp tbody tr th { - box-sizing: border-box; - border: 1px solid #555; -} -.cp tbody tr th, -.cp tbody tr td { - color: #555; -} -.cp tbody tr th.remove, -.cp tbody tr td.remove { - cursor: pointer; -} -.cp tbody tr th:last-child { - border-right: 0px; -} -.cp tbody td { - border-right: 1px solid #555; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; -} -.cp tbody td:last-child { - border-right: none; -} .cp .bottom-left { border-bottom-left-radius: 5px; } @@ -1137,212 +1084,6 @@ html.cp, color: #FA5858; cursor: pointer !important; } -.cp form.realtime, -.cp div.realtime { - padding: 0px; - margin: 0px; -} -.cp form.realtime > textarea, -.cp div.realtime > textarea { - width: 50%; - height: 15vh; -} -.cp form.realtime table, -.cp div.realtime table { - border-collapse: collapse; - width: calc(100% - 1px); -} -.cp form.realtime table tr td:first-child, -.cp div.realtime table tr td:first-child { - position: absolute; - left: 29px; - top: auto; - width: calc(30% - 50px); -} -.cp form.realtime table tr td, -.cp div.realtime table tr td { - padding: 0px; - margin: 0px; -} -.cp form.realtime table tr td div.text-cell, -.cp div.realtime table tr td div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; -} -.cp form.realtime table tr td div.text-cell input, -.cp div.realtime table tr td div.text-cell input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; -} -.cp form.realtime table tr td div.text-cell input[disabled], -.cp div.realtime table tr td div.text-cell input[disabled] { - background-color: transparent; - color: #000; - font-weight: bold; -} -.cp form.realtime table tr td.checkbox-cell, -.cp div.realtime table tr td.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain { - display: inline-block; - height: 100%; - width: 100%; - position: relative; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain label, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { - display: none; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { - font-weight: bold; - background-color: #FA5858; - color: #000; - display: block; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - height: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - content: "✖"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { - background-color: #46E981; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { - content: "✔"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { - background: #ddd; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { - display: none; -} -.cp form.realtime table input[type="text"], -.cp div.realtime table input[type="text"] { - height: auto; - border: 1px solid #fff; - width: 80%; -} -.cp form.realtime table thead td, -.cp div.realtime table thead td { - padding: 0px 5px; - background: #aaa; - border-radius: 20px 20px 0 0; - text-align: center; -} -.cp form.realtime table thead td input[type="text"], -.cp div.realtime table thead td input[type="text"] { - width: 100%; - box-sizing: border-box; -} -.cp form.realtime table thead td input[type="text"][disabled], -.cp div.realtime table thead td input[type="text"][disabled] { - color: #000; - padding: 1px 5px; - border: none; -} -.cp form.realtime table tbody .text-cell, -.cp div.realtime table tbody .text-cell { - background: #aaa; -} -.cp form.realtime table tbody .text-cell input[type="text"], -.cp div.realtime table tbody .text-cell input[type="text"] { - width: calc(100% - 50px); -} -.cp form.realtime table tbody .text-cell .edit, -.cp div.realtime table tbody .text-cell .edit { - float: right; - margin: 0 10px 0 0; -} -.cp form.realtime table tbody .text-cell .remove, -.cp div.realtime table tbody .text-cell .remove { - float: left; - margin: 0 0 0 10px; -} -.cp form.realtime table tbody td label, -.cp div.realtime table tbody td label { - border: 0.5px solid #555; -} -.cp form.realtime table .edit, -.cp div.realtime table .edit { - color: #000; - cursor: pointer; - float: left; - margin-left: 10px; -} -.cp form.realtime table .remove, -.cp div.realtime table .remove { - float: right; - margin-right: 10px; -} -.cp form.realtime table thead tr th input[type="text"][disabled], -.cp div.realtime table thead tr th input[type="text"][disabled] { - background-color: transparent; - color: #555; - font-weight: bold; -} -.cp form.realtime table thead tr th .remove, -.cp div.realtime table thead tr th .remove { - cursor: pointer; - font-size: 20px; -} -.cp form.realtime table tfoot tr, -.cp div.realtime table tfoot tr { - border: none; -} -.cp form.realtime table tfoot tr td, -.cp div.realtime table tfoot tr td { - border: none; - text-align: center; -} -.cp form.realtime table tfoot tr td .save, -.cp div.realtime table tfoot tr td .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser, -.cp form.realtime #addoption, -.cp div.realtime #addoption { - color: #46E981; - border: 1px solid #46E981; - padding: 15px; - cursor: pointer; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser { - border-top-left-radius: 5px; -} -.cp form.realtime #addoption, -.cp div.realtime #addoption { - border-bottom-left-radius: 5px; -} #cors-store { display: none; } diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index cbee383bf..db8af27ce 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -520,60 +520,6 @@ noscript { /* Tables * Currently only used by /poll/ */ -table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -tbody { - border: 1px solid @poll-border-color; - tr { - text-align: center; - &:first-of-type th{ - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; - &.table-refresh { - color: @cp-green; - text-decoration: none; - cursor: pointer; - } - - } - &:nth-child(odd) { - background-color: @light-base; - } - th:first-of-type { - border-left: 0px; - } - th { - box-sizing: border-box; - border: 1px solid @poll-border-color; - } - th, td { - color: @fore; - - &.remove { - cursor: pointer; - } - } - th:last-child { - border-right: 0px; - } - } - - td { - border-right: 1px solid @poll-border-color; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; - &:last-child { - border-right: none; - } - } -} // form things .bottom-left { @@ -588,226 +534,6 @@ tbody { color: @cp-red; cursor: pointer !important; } - -form.realtime, div.realtime { - > input { - &[type="text"] { - - } - } - > textarea { - width: 50%; - height: 15vh; - } - - padding: 0px; - margin: 0px; - - table { - border-collapse: collapse; - width: ~"calc(100% - 1px)"; - tr { - td:first-child { - position:absolute; - left: 29px; - top: auto; - width: ~"calc(30% - 50px)"; - } - td { - padding: 0px; - margin: 0px; - - div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; - - input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; - &[disabled] { - background-color: transparent; - color: @poll-fg; - font-weight: bold; - } - } - } - - &.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; - - div.checkbox-contain { - display: inline-block; - height: 100%; - width: 100%; - position: relative; - - label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - } - - input { - &[type="checkbox"] { - &:not(.editable) { - display: none; - - ~ .cover { - display: block; - font-weight: bold; - - background-color: @cp-red; - color: @poll-cover-color; - - &:after { - height: 100%; - } - - &:after { content: "✖"; } - - display: block; - &.yes { - background-color: @cp-green; - &:after { content: "✔"; } - } - - &.uncommitted { - background: #ddd; - } - - - &.mine { - display: none; - } - } - } - } - } - } - } - } - } - - input { - &[type="text"] { - height: auto; - border: 1px solid @base; - width: 80%; - } - } - thead { - td { - padding: 0px 5px; - background: @poll-th-bg; - border-radius: 20px 20px 0 0; - text-align: center; - input { - &[type="text"] { - width: 100%; - box-sizing: border-box; - &[disabled] { - color: @poll-fg; - padding: 1px 5px; - border: none; - } - } - } - } - } - - tbody { - .text-cell { - background: @poll-td-bg; - //border-radius: 20px 0 0 20px; - input[type="text"] { - width: ~"calc(100% - 50px)"; - } - .edit { - float:right; - margin: 0 10px 0 0; - } - .remove { - float: left; - margin: 0 0 0 10px; - } - } - td { - label { - border: .5px solid @poll-border-color; - } - } - } - .edit { - color: @poll-cover-color; - cursor: pointer; - float: left; - margin-left: 10px; - } - - .remove { - float: right; - margin-right: 10px; - } - - thead { - tr { - th { - input[type="text"][disabled] { - background-color: transparent; - color: @fore; - font-weight: bold; - } - .remove { - cursor: pointer; - font-size: 20px; - } - } - } - } - tbody { - tr { - td { - - } - } - } - tfoot { - tr { - border: none; - td { - border: none; - text-align: center; - .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - } - } - } - } - - #adduser, - #addoption { - color: @cp-green; - border: 1px solid @cp-green; - padding: 15px; - cursor: pointer; - } - - #adduser { .top-left; } - #addoption { .bottom-left; } -} } // hack for our cross-origin iframe diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 456adf9b2..b65af90d8 100644 --- a/customize.dist/src/less/mixins.less +++ b/customize.dist/src/less/mixins.less @@ -1,5 +1,5 @@ .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ - @font-face{ + @font-face { font-family: @family; src: url(@src) format(@fmt); font-weight: @weight; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 20a1d80e1..8a0b4222e 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -60,12 +60,6 @@ @slide-default-bg: #000; -@poll-th-bg: #aaa; -@poll-td-bg: #aaa; -@poll-border-color: #555; -@poll-cover-color: #000; -@poll-fg: #000; - @bg-loading: @old-base; @color-loading: @old-fore; diff --git a/package.json b/package.json index 882eeaa15..48aed5d0d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "scripts": { "lint": "jshint --config .jshintrc --exclude-path .jshintignore .", "test": "node TestSelenium.js", - "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css", + "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css", "template": "cd customize.dist/src && node build.js" } } diff --git a/www/poll/index.html b/www/poll/index.html index 296d6fbf5..31226d989 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -11,108 +11,8 @@ id="favicon" /> + - diff --git a/www/poll/poll.css b/www/poll/poll.css new file mode 100644 index 000000000..321121b59 --- /dev/null +++ b/www/poll/poll.css @@ -0,0 +1,357 @@ +html, +body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} +input[type="text"][disabled], +textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, +#admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(30% - 50px + 29px); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid #555; +} +tbody tr { + text-align: center; +} +tbody tr:first-of-type th { + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; +} +tbody tr:first-of-type th.table-refresh { + color: #46E981; + text-decoration: none; + cursor: pointer; +} +tbody tr:nth-child(odd) { + background-color: #ffffff; +} +tbody tr th:first-of-type { + border-left: 0px; +} +tbody tr th { + box-sizing: border-box; + border: 1px solid #555; +} +tbody tr th, +tbody tr td { + color: #555; +} +tbody tr th.remove, +tbody tr td.remove { + cursor: pointer; +} +tbody tr th:last-child { + border-right: 0px; +} +tbody td { + border-right: 1px solid #555; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; +} +tbody td:last-child { + border-right: none; +} +form.realtime, +div.realtime { + padding: 0px; + margin: 0px; +} +form.realtime > textarea, +div.realtime > textarea { + width: 50%; + height: 15vh; +} +form.realtime table, +div.realtime table { + border-collapse: collapse; + width: calc(100% - 1px); +} +form.realtime table tr td:first-child, +div.realtime table tr td:first-child { + position: absolute; + left: 29px; + top: auto; + width: calc(30% - 50px); +} +form.realtime table tr td, +div.realtime table tr td { + padding: 0px; + margin: 0px; +} +form.realtime table tr td div.text-cell, +div.realtime table tr td div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; +} +form.realtime table tr td div.text-cell input, +div.realtime table tr td div.text-cell input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; +} +form.realtime table tr td div.text-cell input[disabled], +div.realtime table tr td div.text-cell input[disabled] { + background-color: transparent; + color: #000; + font-weight: bold; +} +form.realtime table tr td.checkbox-cell, +div.realtime table tr td.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain, +div.realtime table tr td.checkbox-cell div.checkbox-contain { + display: inline-block; + height: 100%; + width: 100%; + position: relative; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain label, +div.realtime table tr td.checkbox-cell div.checkbox-contain label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { + display: none; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { + font-weight: bold; + background-color: #FA5858; + color: #000; + display: block; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + height: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + content: "✖"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { + background-color: #46E981; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { + content: "✔"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { + background: #ddd; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { + display: none; +} +form.realtime table input[type="text"], +div.realtime table input[type="text"] { + height: auto; + border: 1px solid #fff; + width: 80%; +} +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 input[type="text"], +div.realtime table thead td input[type="text"] { + width: 100%; + box-sizing: border-box; +} +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; +} +form.realtime table tbody .text-cell, +div.realtime table tbody .text-cell { + background: #aaa; +} +form.realtime table tbody .text-cell input[type="text"], +div.realtime table tbody .text-cell input[type="text"] { + width: calc(100% - 50px); +} +form.realtime table tbody .text-cell .edit, +div.realtime table tbody .text-cell .edit { + float: right; + margin: 0 10px 0 0; +} +form.realtime table tbody .text-cell .remove, +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 .edit, +div.realtime table .edit { + color: #000; + cursor: pointer; + float: left; + margin-left: 10px; +} +form.realtime table .remove, +div.realtime table .remove { + float: right; + margin-right: 10px; +} +form.realtime table thead tr th input[type="text"][disabled], +div.realtime table thead tr th input[type="text"][disabled] { + background-color: transparent; + color: #555; + font-weight: bold; +} +form.realtime table thead tr th .remove, +div.realtime table thead tr th .remove { + cursor: pointer; + font-size: 20px; +} +form.realtime table tfoot tr, +div.realtime table tfoot tr { + border: none; +} +form.realtime table tfoot tr td, +div.realtime table tfoot tr td { + border: none; + text-align: center; +} +form.realtime table tfoot tr td .save, +div.realtime table tfoot tr td .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +form.realtime #adduser, +div.realtime #adduser, +form.realtime #addoption, +div.realtime #addoption { + color: #46E981; + border: 1px solid #46E981; + padding: 15px; + cursor: pointer; +} +form.realtime #adduser, +div.realtime #adduser { + border-top-left-radius: 5px; +} +form.realtime #addoption, +div.realtime #addoption { + border-bottom-left-radius: 5px; +} diff --git a/www/poll/poll.less b/www/poll/poll.less new file mode 100644 index 000000000..7292b0e15 --- /dev/null +++ b/www/poll/poll.less @@ -0,0 +1,387 @@ +@import "../../customize.dist/src/less/variables.less"; +@import "../../customize.dist/src/less/mixins.less"; + +@poll-th-bg: #aaa; +@poll-td-bg: #aaa; +@poll-border-color: #555; +@poll-cover-color: #000; +@poll-fg: #000; + +html, body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} + +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} + +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} + +input[type="text"][disabled], textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, #admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(~"30% - 50px + 29px"); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; + +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} + +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} + +// from cryptpad.less + +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid @poll-border-color; + tr { + text-align: center; + &:first-of-type th{ + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; + &.table-refresh { + color: @cp-green; + text-decoration: none; + cursor: pointer; + } + + } + &:nth-child(odd) { + background-color: @light-base; + } + th:first-of-type { + border-left: 0px; + } + th { + box-sizing: border-box; + border: 1px solid @poll-border-color; + } + th, td { + color: @fore; + + &.remove { + cursor: pointer; + } + } + th:last-child { + border-right: 0px; + } + } + + td { + border-right: 1px solid @poll-border-color; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; + &:last-child { + border-right: none; + } + } +} + +form.realtime, div.realtime { + > input { + &[type="text"] { + + } + } + > textarea { + width: 50%; + height: 15vh; + } + + padding: 0px; + margin: 0px; + + table { + border-collapse: collapse; + width: ~"calc(100% - 1px)"; + tr { + td:first-child { + position:absolute; + left: 29px; + top: auto; + width: ~"calc(30% - 50px)"; + } + td { + padding: 0px; + margin: 0px; + + div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; + + input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; + &[disabled] { + background-color: transparent; + color: @poll-fg; + font-weight: bold; + } + } + } + + &.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; + + div.checkbox-contain { + display: inline-block; + height: 100%; + width: 100%; + position: relative; + + label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + } + + input { + &[type="checkbox"] { + &:not(.editable) { + display: none; + + ~ .cover { + display: block; + font-weight: bold; + + background-color: @cp-red; + color: @poll-cover-color; + + &:after { + height: 100%; + } + + &:after { content: "✖"; } + + display: block; + &.yes { + background-color: @cp-green; + &:after { content: "✔"; } + } + + &.uncommitted { + background: #ddd; + } + + + &.mine { + display: none; + } + } + } + } + } + } + } + } + } + + input { + &[type="text"] { + height: auto; + border: 1px solid @base; + width: 80%; + } + } + thead { + td { + padding: 0px 5px; + background: @poll-th-bg; + border-radius: 20px 20px 0 0; + text-align: center; + input { + &[type="text"] { + width: 100%; + box-sizing: border-box; + &[disabled] { + color: @poll-fg; + padding: 1px 5px; + border: none; + } + } + } + } + } + + tbody { + .text-cell { + background: @poll-td-bg; + //border-radius: 20px 0 0 20px; + input[type="text"] { + width: ~"calc(100% - 50px)"; + } + .edit { + float:right; + margin: 0 10px 0 0; + } + .remove { + float: left; + margin: 0 0 0 10px; + } + } + td { + label { + border: .5px solid @poll-border-color; + } + } + } + .edit { + color: @poll-cover-color; + cursor: pointer; + float: left; + margin-left: 10px; + } + + .remove { + float: right; + margin-right: 10px; + } + + thead { + tr { + th { + input[type="text"][disabled] { + background-color: transparent; + color: @fore; + font-weight: bold; + } + .remove { + cursor: pointer; + font-size: 20px; + } + } + } + } + tbody { + tr { + td { + + } + } + } + tfoot { + tr { + border: none; + td { + border: none; + text-align: center; + .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + } + } + } + } + + #adduser, + #addoption { + color: @cp-green; + border: 1px solid @cp-green; + padding: 15px; + cursor: pointer; + } + + #adduser { .top-left; } + #addoption { .bottom-left; } +} From 7434dbcb0f97ba94619868ae4002c89b40d030ae Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 15:27:37 +0200 Subject: [PATCH 02/10] what i have --- www/poll/main.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/www/poll/main.js b/www/poll/main.js index b3265531e..41295caa5 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -333,6 +333,11 @@ define([ } else if (isEdit) { unlockRow(id, function () { change(); + + setTimeout(function() { + var $newest = $('input[data-rt-id="' + id + '"]'); + $newest.focus(); + }); }); } } else if (type === 'col') { @@ -346,6 +351,11 @@ define([ } else if (isEdit) { unlockColumn(id, function () { change(); + + setTimeout(function() { + var $newest = $('[data-rt-id="' + id + '"]'); + $newest.focus(); + }); }); } } else if (type === 'cell') { @@ -547,14 +557,14 @@ define([ var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly)); var $createRow = APP.$createRow = $('#create-option').click(function () { //console.error("BUTTON CLICKED! LOL"); - Render.createRow(proxy, function () { - change(); - var order = APP.proxy.table.rowsOrder; + Render.createRow(proxy, function (empty, id) { + unlockRow(id, function () { + change(); - var last = order[order.length - 1]; - var $newest = $('[data-rt-id="' + last + '"]'); - $newest.val(''); - window.setTimeout(change); + setTimeout(function() { + $('.edit[data-rt-id="' + id + '"]').click(); + }); + }); }); }); From ea5301be134d8891ee4d20c6995577ca64cd03c6 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 16:31:57 +0200 Subject: [PATCH 03/10] poll improved(tm) --- www/poll/main.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/www/poll/main.js b/www/poll/main.js index 41295caa5..ff90adcfd 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -211,7 +211,7 @@ define([ }; /* Any time the realtime object changes, call this function */ - var change = function (o, n, path, throttle) { + var change = function (o, n, path, throttle, cb) { if (path && !Cryptpad.isArray(path)) { return; } @@ -262,6 +262,11 @@ define([ Render.updateTable(table, displayedObj2, conf); updateDisplayedTable(); setFocus(f); + if (typeof(cb) === "function") + { + console.log("change cb"); + cb(); + } }; if (throttle) { @@ -273,7 +278,9 @@ define([ return; } - window.setTimeout(updateTable); + window.setTimeout(function() { + updateTable(); + }); }; var getRealtimeId = function (input) { @@ -332,11 +339,8 @@ define([ }); } else if (isEdit) { unlockRow(id, function () { - change(); - - setTimeout(function() { - var $newest = $('input[data-rt-id="' + id + '"]'); - $newest.focus(); + change(null, null, null, null, function() { + $('input[data-rt-id="' + id + '"]').focus(); }); }); } @@ -350,11 +354,8 @@ define([ }); } else if (isEdit) { unlockColumn(id, function () { - change(); - - setTimeout(function() { - var $newest = $('[data-rt-id="' + id + '"]'); - $newest.focus(); + change(null, null, null, null, function() { + $('input[data-rt-id="' + id + '"]').focus(); }); }); } @@ -365,8 +366,8 @@ define([ } }; - var hideInputs = function (e) { - if ($(e.target).is('[type="text"]')) { + var hideInputs = function (e, isKeyup) { + if (!isKeyup && $(e.target).is('[type="text"]')) { return; } $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML); @@ -400,6 +401,9 @@ define([ switch (nodeName) { case 'INPUT': handleInput(target); + if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { + hideInputs(e, isKeyup); + } break; case 'SPAN': //case 'LABEL': @@ -558,19 +562,17 @@ define([ var $createRow = APP.$createRow = $('#create-option').click(function () { //console.error("BUTTON CLICKED! LOL"); Render.createRow(proxy, function (empty, id) { - unlockRow(id, function () { - change(); - - setTimeout(function() { - $('.edit[data-rt-id="' + id + '"]').click(); - }); + change(null, null, null, null, function() { + $('.edit[data-rt-id="' + id + '"]').click(); }); }); }); var $createCol = APP.$createCol = $('#create-user').click(function () { - Render.createColumn(proxy, function () { - change(); + Render.createColumn(proxy, function (empty, id) { + change(null, null, null, null, function() { + $('.edit[data-rt-id="' + id + '"]').click(); + }); }); }); From d483e10e7703ba2410f681ea9a2ef9cff00ea75c Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 17:07:09 +0200 Subject: [PATCH 04/10] poll fixes --- www/poll/main.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/www/poll/main.js b/www/poll/main.js index ff90adcfd..dca194717 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -264,7 +264,6 @@ define([ setFocus(f); if (typeof(cb) === "function") { - console.log("change cb"); cb(); } }; @@ -278,9 +277,7 @@ define([ return; } - window.setTimeout(function() { - updateTable(); - }); + window.setTimeout(updateTable); }; var getRealtimeId = function (input) { @@ -366,8 +363,8 @@ define([ } }; - var hideInputs = function (e, isKeyup) { - if (!isKeyup && $(e.target).is('[type="text"]')) { + var hideInputs = function (e) { + if ($(e.target).is('[type="text"]')) { return; } $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML); @@ -401,9 +398,9 @@ define([ switch (nodeName) { case 'INPUT': handleInput(target); - if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { - hideInputs(e, isKeyup); - } + //if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { + //hideInputs(e, isKeyup); + //} break; case 'SPAN': //case 'LABEL': From 6b57bb2bbb9aeead0317ae1d6831abd7447cfac5 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 17:09:31 +0200 Subject: [PATCH 05/10] poll: press enter to validate input --- www/poll/main.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/www/poll/main.js b/www/poll/main.js index dca194717..2573a4f05 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -285,7 +285,7 @@ define([ }; /* Called whenever an event is fired on an input element */ - var handleInput = function (input) { + var handleInput = function (input, isKeyup) { var type = input.type.toLowerCase(); var id = getRealtimeId(input); @@ -363,8 +363,8 @@ define([ } }; - var hideInputs = function (e) { - if ($(e.target).is('[type="text"]')) { + var hideInputs = function (e, isKeyup) { + if (!isKeyup && $(e.target).is('[type="text"]')) { return; } $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML); @@ -397,10 +397,11 @@ define([ switch (nodeName) { case 'INPUT': + if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { + hideInputs(e, isKeyup); + return; + } handleInput(target); - //if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { - //hideInputs(e, isKeyup); - //} break; case 'SPAN': //case 'LABEL': From 633d60ccd0fa73772c7051c31849cef83530b12d Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 13 Apr 2017 17:19:32 +0200 Subject: [PATCH 06/10] Remove a TODO --- www/common/cryptpad-common.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index e1e02bf05..8a64d66c4 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1407,8 +1407,6 @@ load pinpad dynamically only after you know that it will be needed */ console.log('RPC handshake complete'); rpc = common.rpc = env.rpc = call; - // TODO check if pin list is up to date - // if not, reset common.arePinsSynced(function (err, yes) { if (!yes) { common.resetPins(function (err, hash) { From 40c06c4515341a45db212c5a993a24f8235c973f Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 17:42:38 +0200 Subject: [PATCH 07/10] Spanish! --- customize.dist/translations/messages.es.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index cfe682c48..e4167ad00 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -290,7 +290,7 @@ define(function () { out.fm_categoryError = "No se pudo abrir la categoría seleccionada, mostrando la raíz."; out.settings_userFeedbackHint1 = "CryptPad suministra informaciones muy básicas al servidor, para ayudarnos a mejorar vuestra experiencia."; out.settings_userFeedbackHint2 = "El contenido de tu pad nunca será compartido con el servidor."; - out.settings_userFeedback = "Activar feedback"; // "Disable user feedback" + out.settings_userFeedback = "Activar feedback"; out.settings_anonymous = "No has iniciado sesión. Tus ajustes se aplicarán solo a este navegador."; out.blog = "Blog"; out.initialState = "

Esto es CryptPad, el editor collaborativo en tiempo real zero knowledge.
Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.
Incluso el servido no puede ver lo que escribes.

Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí

 

"; @@ -356,5 +356,24 @@ 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?"; + // 1.4.0 - Easter Bunny + + out.button_newwhiteboard = "Nueva Pizarra"; + out.wrongApp = "No se pudo mostrar el contenido de la sessión en tiempo real en tu navigador. Por favor, actualiza la página."; + out.synced = "Todo está guardado."; + out.saveTemplateButton = "Guardar como plantilla"; + out.saveTemplatePrompt = "Élige un título para la plantilla"; + out.templateSaved = "¡Plantilla guardada!" + out.selectTemplate = "Élige una plantilla o pulsa ESC"; + out.slideOptionsTitle = "Personaliza tus diapositivas"; + out.slideOptionsButton = "Guardar (enter)"; + out.canvas_clear = "Limpiar"; + out.canvas_delete = "Borrar selección"; + out.canvas_disable = "No permitir dibujos"; + out.canvas_enable = "Permitir dibujos"; + out.canvas_width = "Talla"; + out.canvas_opacity = "Opacidad"; + out.settings_publicSigningKey = "Clave de Firma Pública"; + return out; }); From 65e848fd4d729da6d733f88962bb35fd3dbd8c59 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 17:50:28 +0200 Subject: [PATCH 08/10] linter linted the lints --- customize.dist/translations/messages.es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index e4167ad00..aafa9bf70 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -363,7 +363,7 @@ define(function () { out.synced = "Todo está guardado."; out.saveTemplateButton = "Guardar como plantilla"; out.saveTemplatePrompt = "Élige un título para la plantilla"; - out.templateSaved = "¡Plantilla guardada!" + out.templateSaved = "¡Plantilla guardada!"; out.selectTemplate = "Élige una plantilla o pulsa ESC"; out.slideOptionsTitle = "Personaliza tus diapositivas"; out.slideOptionsButton = "Guardar (enter)"; From 248f88034bab19a46bef681f8fdf517067ee78ed Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 17:56:28 +0200 Subject: [PATCH 09/10] important fixes --- www/poll/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/www/poll/main.js b/www/poll/main.js index 2573a4f05..2f182e7de 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -262,8 +262,7 @@ define([ Render.updateTable(table, displayedObj2, conf); updateDisplayedTable(); setFocus(f); - if (typeof(cb) === "function") - { + if (typeof(cb) === "function") { cb(); } }; From 96ff487271259b523802c2286dc6b1d6466a2af2 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Thu, 13 Apr 2017 19:36:04 +0200 Subject: [PATCH 10/10] fix flash of content --- www/poll/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/www/poll/main.js b/www/poll/main.js index 2f182e7de..8170f7e9d 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -260,6 +260,9 @@ define([ var displayedObj2 = mergeUncommitted(APP.proxy, APP.uncommitted); var f = getFocus(); Render.updateTable(table, displayedObj2, conf); + APP.proxy.table.rowsOrder.forEach(function (rowId) { + $('input[data-rt-id="' + rowId +'"]').val(APP.proxy.table.rows[rowId] || ''); + }); updateDisplayedTable(); setFocus(f); if (typeof(cb) === "function") {