web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix UI issues with the new share modal and notifications

Browse Source
This commit is contained in:
yflory 2019-06-18 14:23:48 +02:00
parent a43fc5efef
commit b0ef3d6021
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/src/less2/include/notifications.less
View File

@ -10,7 +10,7 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.cp-notification { .cp-notification {
height: @notif-height; min-height: @notif-height;
display: flex; display: flex;
.cp-notification-content { .cp-notification-content {
flex: 1; flex: 1;

3
customize.dist/src/less2/include/share.less
View File

@ -4,6 +4,7 @@
@import (reference) './avatar.less'; @import (reference) './avatar.less';
@import (reference) './checkmark.less'; @import (reference) './checkmark.less';
@import (reference) './password-input.less'; @import (reference) './password-input.less';
@import (reference) "./tools.less";
.share_main () { .share_main () {
.alertify_main(); .alertify_main();
.checkmark_main(20px); .checkmark_main(20px);
@ -41,6 +42,7 @@
display: flex; display: flex;
input { input {
flex: 1; flex: 1;
min-width: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @colortheme_alertify-primary-text; color: @colortheme_alertify-primary-text;
@ -60,6 +62,7 @@
margin-bottom: 6px; margin-bottom: 6px;
cursor: default; cursor: default;
transition: order 0.5s, background-color 0.5s; transition: order 0.5s, background-color 0.5s;
.tools_unselectable();
&.cp-selected { &.cp-selected {
background-color: @colortheme_alertify-primary; background-color: @colortheme_alertify-primary;

25
www/common/common-ui-elements.js
View File

@ -343,6 +343,7 @@ define([
'data-curve': data.curvePublic, 'data-curve': data.curvePublic,
'data-name': data.displayName, 'data-name': data.displayName,
'data-order': i, 'data-order': i,
title: data.displayName,
style: 'order:'+i+';' style: 'order:'+i+';'
},[ },[
avatar, avatar,
@ -392,17 +393,6 @@ define([
}; };
$(inputFilter).on('keydown keyup change', redraw); $(inputFilter).on('keydown keyup change', redraw);
$(buttonSelect).click(function () {
$div.find('.cp-share-friend:not(.cp-selected):visible').addClass('cp-selected');
});
$(buttonDeselect).click(function () {
$div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) {
var order = $(el).attr('data-order');
if (!order) { return; }
$(el).attr('style', 'order:'+order);
});
redraw();
});
// Replace "copy link" by "share with friends" if at least one friedn is selected // Replace "copy link" by "share with friends" if at least one friedn is selected
// Also create the "share with friends" button if it doesn't exist // Also create the "share with friends" button if it doesn't exist
@ -459,6 +449,19 @@ define([
} }
}; };
$(buttonSelect).click(function () {
$div.find('.cp-share-friend:not(.cp-fake-friend):not(.cp-selected):visible').addClass('cp-selected');
refreshButtons();
});
$(buttonDeselect).click(function () {
$div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) {
var order = $(el).attr('data-order');
if (!order) { return; }
$(el).attr('style', 'order:'+order);
});
redraw();
refreshButtons();
});
common.getAttribute(['general', 'share-friends'], function (err, val) { common.getAttribute(['general', 'share-friends'], function (err, val) {
order = val || []; order = val || [];