From e486e47aa147c9debb512b3b3037a4df677ec524 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 11:19:20 +0200 Subject: [PATCH 1/7] alertify: fix input color + better log styles --- customize.dist/src/less2/include/alertify.less | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index d667aa1cf..6a98035d6 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -6,18 +6,18 @@ @alertify-base: @colortheme_old-base; @alertify-dialog-bg: #222; - @alertify-dialog-fg: @colortheme_old-fore; + @alertify-dialog-fg: @alertify-fore; - @alertify-btn-fg: @colortheme_old-fore; + @alertify-btn-fg: @alertify-fore; @alertify-btn-bg: rgba(200, 200, 200, 0.1); @alertify-btn-bg-hover: rgba(200, 200, 200, .3); @alertify-bg: rgba(0, 0, 0, .4); - @alertify-fg: @colortheme_old-fore; + @alertify-fg: @alertify-fore; - @alertify-input-bg: @colortheme_old-base; - @alertify-input-fg: @colortheme_old-fore; + @alertify-input-bg: #111; + @alertify-input-fg: @alertify-fore; @alertify_padding-base: 12px; @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); @@ -33,7 +33,7 @@ padding: @alertify_padding-base @alertify_padding-base * 4; color: @alertify-fore; - font-weight: bold; + font-family: @colortheme_font; font-size: large; box-shadow: @alertify_box-shadow; @@ -42,10 +42,11 @@ background: rgba(0, 0, 0, .8); } &.error { + font-weight: bold; background: @colortheme_cp-red; } &.success { - background: @colortheme_cp-green; + background: rgba(0, 0, 0, .8); } } } From 008fa12755d03f73183d33a1983ceb7c71994ce5 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 11:26:40 +0200 Subject: [PATCH 2/7] alertify: add textarea + checkbox --- customize.dist/src/less2/include/alertify.less | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 6a98035d6..2a7fd14ab 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -124,7 +124,7 @@ margin: 0; } - input:not(.form-control){ + input:not(.form-control), textarea { background-color: @alertify-input-bg; color: @alertify-input-fg; border: 0px; @@ -137,6 +137,13 @@ //outline-offset: -2px; } } + + input[type="checkbox"] { + padding: 0; + margin: 0; + margin-right: 0.5em; + } + nav { text-align: right; From 996c56c24201d5f31f8c3a461d1dc8e550796021 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 11:41:04 +0200 Subject: [PATCH 3/7] fix label in register --- customize.dist/pages.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 150aaf78b..1d07bef96 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -349,20 +349,26 @@ define([ }), h('div.checkbox-container', [ h('input#import-recent', { + name: 'import-recent', type: 'checkbox', checked: true }), - h('label', { + // hscript doesn't generate for on label for some + // reason... use jquery as a temporary fallback + setHTML($('')[0], Msg.register_importRecent) + /*h('label', { 'for': 'import-recent', - }, Msg.register_importRecent), + }, Msg.register_importRecent),*/ ]), h('div.checkbox-container', [ h('input#accept-terms', { + name: 'accept-terms', type: 'checkbox' }), - setHTML(h('label', { + setHTML($('')[0], Msg.register_acceptTerms) + /*setHTML(h('label', { 'for': 'accept-terms', - }), Msg.register_acceptTerms), + }), Msg.register_acceptTerms),*/ ]), h('button#register.btn.btn-primary', Msg.login_register) ]) From 0588564bc985636d2431d722ec96eb74cd7dc315 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 11:49:10 +0200 Subject: [PATCH 4/7] overflow on poll div --- www/poll/poll.less | 1 + 1 file changed, 1 insertion(+) diff --git a/www/poll/poll.less b/www/poll/poll.less index 6153f320e..ddc0ea502 100644 --- a/www/poll/poll.less +++ b/www/poll/poll.less @@ -29,6 +29,7 @@ body { flex: 1; #poll { flex: 1; + overflow-y: auto; } } From 798a3dc52034b15db1b8b31cdee307a1ce089c8a Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 12:19:21 +0200 Subject: [PATCH 5/7] automatically fill in display name in poll --- www/poll/main.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/www/poll/main.js b/www/poll/main.js index ecb308a36..7bef35e6d 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -621,6 +621,12 @@ var ready = function (info, userid, readOnly) { .on('change', ['table'], change) .on('remove', [], change); + var userInput = $('.uncommitted > input'); + if (userInput.val() === '') + { + userInput.val(Cryptpad.getProxy()[Cryptpad.displayNameKey]); + } + UserList.addToUserData(APP.proxy.info.userData); APP.ready = true; From c53e738054668391f1b4af603fb9e993bfc3c98d Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 16:27:29 +0200 Subject: [PATCH 6/7] improve file picker ui --- .../src/less2/include/alertify.less | 16 +-- .../src/less2/include/colortheme.less | 12 +- www/common/cryptpad-common.js | 31 +++-- www/common/file-dialog.less | 128 +++++++++++++----- 4 files changed, 132 insertions(+), 55 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 2a7fd14ab..1a791bc04 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -2,10 +2,10 @@ @import (once) "./browser.less"; .alertify_main () { - @alertify-fore: @colortheme_old-fore; - @alertify-base: @colortheme_old-base; + @alertify-fore: @colortheme_modal-fg; + @alertify-base: @colortheme_modal-bg; - @alertify-dialog-bg: #222; + @alertify-dialog-bg: @alertify-base; @alertify-dialog-fg: @alertify-fore; @alertify-btn-fg: @alertify-fore; @@ -13,14 +13,14 @@ @alertify-btn-bg: rgba(200, 200, 200, 0.1); @alertify-btn-bg-hover: rgba(200, 200, 200, .3); - @alertify-bg: rgba(0, 0, 0, .4); + @alertify-bg: @colortheme_modal-dim; @alertify-fg: @alertify-fore; - @alertify-input-bg: #111; - @alertify-input-fg: @alertify-fore; + @alertify-input-bg: @colortheme_modal-input; + @alertify-input-fg: @colortheme_modal-fg; - @alertify_padding-base: 12px; - @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); + @alertify_padding-base: @colortheme_modal-padding; + @alertify_box-shadow: @colortheme_modal-shadow; // Logs to show that something has happened // These show only once diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 822c7bf47..a1e02d9d4 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -13,9 +13,19 @@ @colortheme_cp-red: #FA5858; // remove red @colortheme_cp-green: #46E981; +@colortheme_modal-bg: #222; +@colortheme_modal-fg: #fff; +@colortheme_modal-dim: rgba(0, 0, 0, 0.4); +@colortheme_modal-padding: 12px; +@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4); + +@colortheme_modal-input: #111; + @colortheme_alertify-red: #E55236; @colortheme_alertify-green: #77C825; +// Apps + @colortheme_pad-bg: #1c4fa0; @colortheme_pad-color: #fff; @@ -50,4 +60,4 @@ @colortheme_profile-color: #fff; @cryptpad_color_blue: #4591C4; -@cryptpad_color_grey: #999999; \ No newline at end of file +@cryptpad_color_grey: #999999; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index a074faab7..4e401abd8 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1400,20 +1400,21 @@ define([ common.createFileDialog = function (cfg) { var $body = cfg.$body || $('body'); - var $block = $body.find('#fileDialog'); - if (!$block.length) { - $block = $('
', {id: "fileDialog"}).appendTo($body); + var $blockContainer = $body.find('#fileDialog'); + if (!$blockContainer.length) { + $blockContainer = $('
', {id: "fileDialog"}).appendTo($body); } - $block.html(''); + $blockContainer.html(''); + var $block = $('
', {id: "modal"}).appendTo($blockContainer); $('', { 'class': 'close fa fa-times', 'title': Messages.filePicker_close }).click(function () { - $block.hide(); + $blockContainer.hide(); }).appendTo($block); var $description = $('

').text(Messages.filePicker_description); $block.append($description); - var $filter = $('

').appendTo($block); + var $filter = $('

', {'class': 'form'}).appendTo($block); var $container = $('', {'class': 'fileContainer'}).appendTo($block); var updateContainer = function () { $container.html(''); @@ -1426,11 +1427,15 @@ define([ if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) { return; } - var $span = $('', {'class': 'element'}).appendTo($container); - var $inner = $('').text(name); - $span.append($inner).click(function () { + var $span = $('', { + 'class': 'element', + 'title': name, + }).appendTo($container); + $span.append($('', {'class': 'fa fa-file-text-o'})); + $span.append(name); + $span.click(function () { if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); } - $block.hide(); + $blockContainer.hide(); }); }); }; @@ -1446,13 +1451,13 @@ define([ //$filter.append(' '+Messages.or+' '); var data = {FM: cfg.data.FM}; $filter.append(common.createButton('upload', false, data, function () { - $block.hide(); + $blockContainer.hide(); })); updateContainer(); $body.keydown(function (e) { - if (e.which === 27) { $block.hide(); } + if (e.which === 27) { $blockContainer.hide(); } }); - $block.show(); + $blockContainer.show(); }; diff --git a/www/common/file-dialog.less b/www/common/file-dialog.less index 76840feeb..038b20cd0 100644 --- a/www/common/file-dialog.less +++ b/www/common/file-dialog.less @@ -1,39 +1,101 @@ +@import (once) '../customize/src/less2/include/colortheme.less'; + #fileDialog { - position: absolute; - background-color: rgba(200, 200, 200, 0.8); - top: 15vh; bottom: 15vh; - left: 10vw; right: 10vw; - border: 1px solid black; - z-index: 100000; - overflow: auto; display: none; - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; - font-size: 16px; - text-align: center; - .close { + + z-index: 100000; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: @colortheme_modal-dim; + + #modal { + background-color: @colortheme_modal-bg; + color: @colortheme_modal-fg; + box-shadow: @colortheme_modal-shadow; + + padding: @colortheme_modal-padding; + position: absolute; - top: 0; - right: 0; - padding: 5px; - cursor: pointer; - } - .element { - cursor: pointer; - display: inline-flex; - width: 100px; - height: 100px; - border: 1px solid #ccc; - margin: 5px; - overflow: hidden; - word-wrap: break-word; - background-color: white; - padding: 5px; - align-items: center; - span { - width: 100px; - text-align: center; + top: 15vh; bottom: 15vh; + left: 10vw; right: 10vw; + + overflow: auto; + + font-family: @colortheme_font; + text-align: center; + + & > p { + margin-bottom: 1em; + } + + .form { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; } - } -} + input { + background-color: @colortheme_modal-input; + color: @colortheme_modal-fg; + border: 0; + padding: 8px 12px; + margin: 1em; + } + + .close { + text-shadow: none; + color: inherit; + + position: absolute; + top: 0; + right: 0; + margin: @colortheme_modal-padding; + cursor: pointer; + } + + .fileContainer { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + } + + .element { + @darker: darken(@colortheme_modal-fg, 30%); + + width: 200px; + min-width: 200px; + height: 1em; + padding: 0.5em; + margin: 5px; + box-sizing: content-box; + + text-align: left; + line-height: 1.25em; + cursor: pointer; + background-color: #111; + color: @darker; + + transition: all 0.1s; + + &:hover { + color: @colortheme_modal-fg; + } + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + align-items: center; + + .fa { + cursor: pointer; + margin-right: 0.5em; + } + } + } +} From 8f285eba9f9fca5728bd2170b02935e03843d9a5 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Mon, 7 Aug 2017 17:22:54 +0200 Subject: [PATCH 7/7] make file picker ui even prettier --- www/common/cryptpad-common.js | 24 +++++++++++++++++++++--- www/common/file-dialog.less | 6 +++--- www/drive/main.js | 1 + 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 4e401abd8..437d91de6 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1397,6 +1397,24 @@ define([ } }; + // This is duplicated in drive/main.js, it should be unified + var getFileIcon = function (data) { + var $icon = common.getIcon(); + + if (!data) { return $icon; } + + var href = data.href; + if (!href) { return $icon; } + + if (href.indexOf('/pad/') !== -1) { $icon = common.getIcon('pad'); } + else if (href.indexOf('/code/') !== -1) { $icon = common.getIcon('code'); } + else if (href.indexOf('/slide/') !== -1) { $icon = common.getIcon('slide'); } + else if (href.indexOf('/poll/') !== -1) { $icon = common.getIcon('poll'); } + else if (href.indexOf('/whiteboard/') !== -1) { $icon = common.getIcon('whiteboard'); } + else if (href.indexOf('/file/') !== -1) { $icon = common.getIcon('file'); } + + return $icon; + }; common.createFileDialog = function (cfg) { var $body = cfg.$body || $('body'); @@ -1405,7 +1423,7 @@ define([ $blockContainer = $('

', {id: "fileDialog"}).appendTo($body); } $blockContainer.html(''); - var $block = $('
', {id: "modal"}).appendTo($blockContainer); + var $block = $('
', {'class': 'cp-modal'}).appendTo($blockContainer); $('', { 'class': 'close fa fa-times', 'title': Messages.filePicker_close @@ -1414,7 +1432,7 @@ define([ }).appendTo($block); var $description = $('

').text(Messages.filePicker_description); $block.append($description); - var $filter = $('

', {'class': 'form'}).appendTo($block); + var $filter = $('

', {'class': 'cp-form'}).appendTo($block); var $container = $('', {'class': 'fileContainer'}).appendTo($block); var updateContainer = function () { $container.html(''); @@ -1431,7 +1449,7 @@ define([ 'class': 'element', 'title': name, }).appendTo($container); - $span.append($('', {'class': 'fa fa-file-text-o'})); + $span.append(getFileIcon(data)); $span.append(name); $span.click(function () { if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); } diff --git a/www/common/file-dialog.less b/www/common/file-dialog.less index 038b20cd0..aac18f274 100644 --- a/www/common/file-dialog.less +++ b/www/common/file-dialog.less @@ -11,7 +11,7 @@ right: 0; background-color: @colortheme_modal-dim; - #modal { + .cp-modal { background-color: @colortheme_modal-bg; color: @colortheme_modal-fg; box-shadow: @colortheme_modal-shadow; @@ -31,7 +31,7 @@ margin-bottom: 1em; } - .form { + .cp-form { display: flex; flex-wrap: wrap; align-items: center; @@ -74,7 +74,7 @@ box-sizing: content-box; text-align: left; - line-height: 1.25em; + line-height: 1em; cursor: pointer; background-color: #111; diff --git a/www/drive/main.js b/www/drive/main.js index 098154ad0..b1b764336 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -1146,6 +1146,7 @@ define([ $span.append($name).append($subfolders).append($files); }; + // This is duplicated in cryptpad-common, it should be unified var getFileIcon = function (id) { var $icon = Cryptpad.getIcon();