From f826e6aa3b46ebe5189fa96a25a219476951ffb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 25 Nov 2019 15:42:26 +0000 Subject: [PATCH 01/10] align filter input and buttons --- customize.dist/src/less2/include/usergrid.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index 38202de86..9201f7415 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -23,6 +23,8 @@ flex: 1; min-width: 0; margin-bottom: 0 !important; + height: 38px; + margin: 6px 8px 6px 0px; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: @cryptpad_color_grey; opacity: 1; /* Firefox */ @@ -33,6 +35,10 @@ margin: 0; display: none; } + button:last-child { + margin-right: 0px !important; + } + } .cp-usergrid-user { width: 70px; From 8fc08538a1cefd22fcd920b026a0809bc438f2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 26 Nov 2019 11:21:58 +0000 Subject: [PATCH 02/10] open share modal on ready --- www/common/toolbar3.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 224f7eeb6..2e503164c 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -533,7 +533,7 @@ MessengerUI, Messages) { Common.getSframeChannel().event('EV_SHARE_OPEN', { hidden: true }); - $shareBlock.click(function () { + $shareBlock.ready(function () { // XXX temporary open share modal on load var title = (config.title && config.title.getTitle && config.title.getTitle()) || (config.title && config.title.defaultName) || ""; From 66073804eed656ae65d69a59dc42ac66d73b8eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 26 Nov 2019 11:50:34 +0000 Subject: [PATCH 03/10] remove rounded corners on avatars --- customize.dist/src/less2/include/avatar.less | 1 - 1 file changed, 1 deletion(-) diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 87b4a3a32..9ef46482a 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -30,7 +30,6 @@ justify-content: center; align-items: center; - border-radius: 4px; overflow: hidden; box-sizing: content-box; } From 1da5e8ac3c2ea7e1b6ac972f8aba2d4a6d7ed7d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 2 Dec 2019 11:34:34 +0000 Subject: [PATCH 04/10] usergrid avatar display and scrolling --- customize.dist/src/less2/include/avatar.less | 6 ++- .../src/less2/include/usergrid.less | 51 +++++++++++++------ www/common/common-ui-elements.js | 18 +++++-- 3 files changed, 53 insertions(+), 22 deletions(-) diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 9ef46482a..4ba4e8c44 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -1,4 +1,5 @@ @import (reference) "./tools.less"; +@import (reference) "./colortheme-all.less"; .avatar_vars( @width: 30px ) { @@ -35,10 +36,11 @@ } .cp-avatar-default { .tools_unselectable(); - background: white; - color: black; + background: rgb(160, 160, 160); // XXX testing + color: @cryptpad_text_col; // XXX testing font-size: @avatar-font-size; font-size: var(--avatar-font-size); + text-transform: capitalize; } media-tag { min-height: @avatar-width; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index ae56716a1..e3f1dad97 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -10,12 +10,12 @@ .cp-usergrid-grid { display: flex; flex-wrap: wrap; + margin: -3px; margin-bottom: 6px; - } - &:not(.large) { - .cp-usergrid-grid { - margin: -3px; - margin-bottom: 6px; + max-height: 130px; + overflow: auto; + @media screen and (max-height: 515px) { + max-height: unset; // remove double scrollbar } } &.cp-usergrid-empty { @@ -30,13 +30,13 @@ min-width: 0; margin-bottom: 0 !important; height: 38px; - margin: 6px 8px 6px 0px; + margin: 6px 0px; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: @cryptpad_color_grey; opacity: 1; /* Firefox */ } } - margin-bottom: 15px; + margin-bottom: 10px; &:empty { margin: 0; display: none; @@ -54,7 +54,6 @@ justify-content: center; align-items: center; padding: 5px; - margin: 3px; cursor: default; transition: order 0.5s, background-color 0.5s; margin-top: 1px; @@ -64,10 +63,21 @@ background-color: @colortheme_alertify-primary; color: @colortheme_alertify-primary-text; order: -1 !important; + .cp-usergrid-avatar { + media-tag, .cp-avatar-default { + opacity: 0.7; + } + } } .cp-usergrid-user-avatar { min-height: 40px; } + &:not(.large) { + .cp-usergrid-user-name { + display: none; + } + } + .cp-usergrid-user-name { overflow: hidden; white-space: nowrap; @@ -75,24 +85,33 @@ width: 100%; text-align: center; line-height: 18px; + flex: 1; } - border: 1px solid @colortheme_alertify-primary; &:not(.large) { - .avatar_main(40px); + .avatar_main(60px); } &.large { .avatar_main(25px); - width: 140px; + width: 145px; height: 35px; flex-flow: row; - margin: 0; - margin-right: 15px; - margin-bottom: 1px; - &:nth-child(3n) { - margin-right: 0; + margin: 3px; + flex-basis: calc(33.3333333% - 6px); + flex-shrink: 1; + min-width: 0; + .cp-usergrid-user-name { + margin-left: 5px; + text-align: left; + color: @cryptpad_text_col; } } + &.cp-selected { + .cp-usergrid-user-name { + color: @colortheme_alertify-primary-text; + } + + } } } } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 280849e7f..652b2ab56 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -791,9 +791,7 @@ define([ var div = h('div.cp-usergrid-container' + noOthers + (config.large?'.large':''), [ label ? h('label', label) : undefined, h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [ - inputFilter, - buttonSelect, - buttonDeselect + inputFilter ]), ]); var $div = $(div); @@ -880,10 +878,21 @@ define([ delete friends[curve]; }); + var x = new Array(50).fill('test'); // XXX fake friend generator + x.forEach(function (el, i) { + friends[i] = { + edPublic: i, + curvePublic: i, + displayName: i + " pizza" // Hash.createChannelId() + }; + }); // XXX + + var friendsList = UIElements.getUserGrid(null, { common: common, data: friends, - noFilter: false + noFilter: false, + large: true }, refreshButtons); var friendDiv = friendsList.div; $div.append(friendDiv); @@ -909,6 +918,7 @@ define([ var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, { common: common, noFilter: true, + large: true, data: teams }, refreshButtons); $div.append(teamsList.div); From ee1371c8ba85ab9a7ad2157a5a6e2f9bd618c9c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 09:38:39 +0000 Subject: [PATCH 05/10] try to get rid of vertical scroll --- customize.dist/src/less2/include/usergrid.less | 2 +- www/common/drive-ui.js | 11 ++++++++++- www/common/toolbar3.js | 2 +- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index e3f1dad97..28b90359a 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -13,7 +13,7 @@ margin: -3px; margin-bottom: 6px; max-height: 130px; - overflow: auto; + overflow-y: auto; @media screen and (max-height: 515px) { max-height: unset; // remove double scrollbar } diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 4c73a95a8..102ba876b 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -4187,7 +4187,16 @@ define([ } getProperties(el, function (e, $prop) { if (e) { return void logError(e); } - UI.alert($prop[0], undefined, true); + var modal = UI.dialog.customModal($prop[0], { + buttons: [{ + className: 'secondary', + name: Messages.okButton, + onClick: function () {}, + keys: [13] + }], + onClose: config.onClose, + }); + UI.openCustomModal(modal); }); } else if ($this.hasClass("cp-app-drive-context-hashtag")) { diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 2e503164c..b6cb3c125 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -533,7 +533,7 @@ MessengerUI, Messages) { Common.getSframeChannel().event('EV_SHARE_OPEN', { hidden: true }); - $shareBlock.ready(function () { // XXX temporary open share modal on load + $shareBlock.click(function () { var title = (config.title && config.title.getTitle && config.title.getTitle()) || (config.title && config.title.defaultName) || ""; From 26c681c3cbf62b0380a2fce4cd9968b1626617ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 10:11:52 +0000 Subject: [PATCH 06/10] remove padding in prop modal - caused a vertical scrollbar - now constructed like the share modal (customModals inside tabs) --- www/common/common-ui-elements.js | 16 +++++++++++++--- www/common/drive-ui.js | 11 +---------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 652b2ab56..4fd9860ff 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -737,12 +737,22 @@ define([ UIElements.getProperties = function (common, data, cb) { var c1; var c2; + var button = [{ + className: 'primary', + name: Messages.okButton, + onClick: function () {}, + keys: [13] + }]; NThen(function (waitFor) { getPadProperties(common, data, waitFor(function (e, c) { - c1 = c[0]; + c1 = UI.dialog.customModal(c[0], { + buttons: button + }); })); getRightsProperties(common, data, waitFor(function (e, c) { - c2 = c[0]; + c2 = UI.dialog.customModal(c[0], { + buttons: button + }); })); }).nThen(function () { var tabs = UI.dialog.tabs([{ @@ -1767,7 +1777,7 @@ define([ if (e) { return void console.error(e); } UIElements.getProperties(common, data, function (e, $prop) { if (e) { return void console.error(e); } - UI.alert($prop[0], undefined, true); + UI.openCustomModal($prop[0]); }); }); }); diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 102ba876b..bdb6144cb 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -4187,16 +4187,7 @@ define([ } getProperties(el, function (e, $prop) { if (e) { return void logError(e); } - var modal = UI.dialog.customModal($prop[0], { - buttons: [{ - className: 'secondary', - name: Messages.okButton, - onClick: function () {}, - keys: [13] - }], - onClose: config.onClose, - }); - UI.openCustomModal(modal); + UI.openCustomModal($prop[0]); }); } else if ($this.hasClass("cp-app-drive-context-hashtag")) { From 5657793e9ccb3f0d4503627838b9023dbfe44a78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 10:25:56 +0000 Subject: [PATCH 07/10] use .large avatars in manage owners --- customize.dist/src/less2/include/usergrid.less | 2 +- www/common/common-ui-elements.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index 28b90359a..59fed1d56 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -84,7 +84,7 @@ text-overflow: ellipsis; width: 100%; text-align: center; - line-height: 18px; + line-height: 20px; flex: 1; } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 4fd9860ff..8fa79b0a6 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -147,6 +147,7 @@ define([ : Messages.owner_removeText; var removeCol = UIElements.getUserGrid(msg, { common: common, + large: true, data: _owners, noFilter: true }, function () { @@ -238,6 +239,7 @@ define([ }); var addCol = UIElements.getUserGrid(Messages.owner_addText, { common: common, + large: true, data: _friends }, function () { //console.log(arguments); @@ -254,6 +256,7 @@ define([ }); var teamsList = UIElements.getUserGrid(Messages.owner_addTeamText, { common: common, + large: true, noFilter: true, data: teamsData }, function () {}); From d7b3a5ce678c84e954b4559b4f8804042fde898d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 10:43:27 +0000 Subject: [PATCH 08/10] adjust default avatar colors --- customize.dist/src/less2/include/avatar.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 4ba4e8c44..59a5189b8 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -5,6 +5,8 @@ ) { @avatar-width: @width; @avatar-font-size: @width / 1.2; + @avatar-default-bg: #D9D8D8; + @avatar-default-fg: darken(@avatar-default-bg, 40%); } .avatar_main(@width: 30px) { --LessLoader_require: LessLoader_currentFile(); @@ -36,8 +38,8 @@ } .cp-avatar-default { .tools_unselectable(); - background: rgb(160, 160, 160); // XXX testing - color: @cryptpad_text_col; // XXX testing + background:@avatar-default-bg; // XXX testing + color: @avatar-default-fg; // XXX testing font-size: @avatar-font-size; font-size: var(--avatar-font-size); text-transform: capitalize; From 2f087a392a0ca6e952e76cb25208e255d95dafa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 11:03:57 +0000 Subject: [PATCH 09/10] clean up XXXes --- customize.dist/src/less2/include/avatar.less | 4 ++-- www/common/common-ui-elements.js | 10 ---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 59a5189b8..9cd14ebbc 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -38,8 +38,8 @@ } .cp-avatar-default { .tools_unselectable(); - background:@avatar-default-bg; // XXX testing - color: @avatar-default-fg; // XXX testing + background:@avatar-default-bg; + color: @avatar-default-fg; font-size: @avatar-font-size; font-size: var(--avatar-font-size); text-transform: capitalize; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 8fa79b0a6..785ad3e1e 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -891,16 +891,6 @@ define([ delete friends[curve]; }); - var x = new Array(50).fill('test'); // XXX fake friend generator - x.forEach(function (el, i) { - friends[i] = { - edPublic: i, - curvePublic: i, - displayName: i + " pizza" // Hash.createChannelId() - }; - }); // XXX - - var friendsList = UIElements.getUserGrid(null, { common: common, data: friends, From 63c5fddf3891a3c9b5f189b4d25d4cb522ccbafc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 3 Dec 2019 11:07:18 +0000 Subject: [PATCH 10/10] lint --- customize.dist/src/less2/include/avatar.less | 2 +- customize.dist/src/less2/include/usergrid.less | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 9cd14ebbc..c85c34877 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -38,7 +38,7 @@ } .cp-avatar-default { .tools_unselectable(); - background:@avatar-default-bg; + background: @avatar-default-bg; color: @avatar-default-fg; font-size: @avatar-font-size; font-size: var(--avatar-font-size); diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index 59fed1d56..973b1a516 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -44,7 +44,6 @@ button:last-child { margin-right: 0px !important; } - } .cp-usergrid-user { width: 70px; @@ -110,7 +109,6 @@ .cp-usergrid-user-name { color: @colortheme_alertify-primary-text; } - } } }