infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve messenger UI in apps

Browse Source
pull/1/head
yflory 6 years ago
parent d4dd58e7df
commit cdce69e677
4 changed files with 89 additions and 13 deletions
Show Stats Download Patch File Download Diff File

61
customize.dist/src/less2/include/messenger.less
Unescape Escape View File

@ -54,8 +54,7 @@
} }
#cp-app-contacts-friendlist { #cp-app-contacts-friendlist {
width: 350px; width: 200px;
max-width: 30%;
height: 100%; height: 100%;
background-color: lighten(@bg-color, 10%); background-color: lighten(@bg-color, 10%);
overflow-y: auto; overflow-y: auto;
@ -65,10 +64,16 @@
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
height: 48px;
.cp-app-contacts-right-col { .cp-app-contacts-right-col {
margin-left: 5px; margin-left: 5px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1;
min-width: 0;
.cp-app-contacts-name {
white-space: nowrap;
}
} }
&:hover { &:hover {
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
@ -84,6 +89,54 @@
color: darken(@color, 20%); color: darken(@color, 20%);
} }
} }
.cp-app-contacts-category {
display: flex;
flex-flow: column;
.cp-app-contacts-category-title {
order: 1;
font-size: 18px;
margin: 0 5px;
text-align: center;
background: rgba(0,0,0,0.1);
font-weight: bold;
height: 22px;
line-height: 22px;
}
.cp-app-contacts-category-content {
order: 2;
&:empty {
display: none;
& ~ .cp-app-contacts-category-title {
display: none;
}
}
}
}
}
#cp-app-contacts-container.cp-app-contacts-inapp {
#cp-app-contacts-friendlist {
transition: width 0.2s ease-in-out 0.2s;
width: 70px;
.cp-app-contacts-friend {
.cp-app-contacts-right-col {
overflow: hidden;
}
}
.cp-app-contacts-category-title {
transition: font-size 0.2s ease-in-out 0.2s;
margin: 0 2px;
font-size: 16px;
}
&:hover {
transition-delay: 1.5s;
width: 200px;
.cp-app-contacts-category-title {
transition-delay: 1.5s;
font-size: 18px;
}
}
}
} }
#cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar { #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
@ -227,7 +280,7 @@
margin: 5px 0; margin: 5px 0;
padding: 5px 10px; padding: 5px 10px;
border: none; border: none;
height: 50px; height: 54px; // 2 lines (22px height) + 2 margins (5px)
flex: 1; flex: 1;
background-color: darken(@bg-color, 10%); background-color: darken(@bg-color, 10%);
color: @color; color: @color;
@ -239,7 +292,7 @@
} }
} }
button { button {
height: 50px; height: 54px;
border-radius: 0; border-radius: 0;
border: none; border: none;
background-color: darken(@bg-color, 15%); background-color: darken(@bg-color, 15%);

3
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -138,7 +138,8 @@
background-color: @toolbar-bg-color; background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
font: @colortheme_app-font-size @colortheme_font; font: @colortheme_app-font-size @colortheme_font;
width: 400px; width: 30%;
min-width: 400px;
display: block; display: block;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;

6
www/common/toolbar3.js
Unescape Escape View File

@ -414,8 +414,10 @@ Messenger, MessengerUI, Messages) {
}; };
var initChat = function (toolbar) { var initChat = function (toolbar) {
var $container = $('<div>', {id: 'cp-app-contacts-container'}) var $container = $('<div>', {
.prependTo(toolbar.chatContent); id: 'cp-app-contacts-container',
'class': 'cp-app-contacts-inapp'
}).prependTo(toolbar.chatContent);
var sframeChan = Common.getSframeChannel(); var sframeChan = Common.getSframeChannel();
var messenger = Messenger.create(sframeChan); var messenger = Messenger.create(sframeChan);
MessengerUI.create(messenger, $container, Common); MessengerUI.create(messenger, $container, Common);

32
www/contacts/messenger-ui.js
Unescape Escape View File

@ -60,6 +60,17 @@ define([
var friendList = h('div#cp-app-contacts-friendlist', [ var friendList = h('div#cp-app-contacts-friendlist', [
h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw.cp-app-contacts-spinner'), h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw.cp-app-contacts-spinner'),
h('div.cp-app-contacts-padchat.cp-app-contacts-category', [
h('div.cp-app-contacts-category-content')
]),
h('div.cp-app-contacts-friends.cp-app-contacts-category', [
h('div.cp-app-contacts-category-content'),
h('h2.cp-app-contacts-category-title', 'Friends'), // XXX
]),
h('div.cp-app-contacts-rooms.cp-app-contacts-category', [
h('div.cp-app-contacts-category-content'),
h('h2.cp-app-contacts-category-title', 'Rooms'), // XXX
]),
]); ]);
var $userlist = $(friendList).appendTo($container); var $userlist = $(friendList).appendTo($container);
@ -217,8 +228,6 @@ define([
}); });
$(removeHistory).click(function () { $(removeHistory).click(function () {
// XXX
console.error("TODO: only display clear button if owned");
UI.confirm(Messages.contacts_confirmRemoveHistory, function (yes) { UI.confirm(Messages.contacts_confirmRemoveHistory, function (yes) {
if (!yes) { return; } if (!yes) { return; }
@ -397,7 +406,8 @@ define([
markup.room = function (id, room, userlist) { markup.room = function (id, room, userlist) {
var roomEl = h('div.cp-app-contacts-friend.cp-avatar', { var roomEl = h('div.cp-app-contacts-friend.cp-avatar', {
'data-key': id, 'data-key': id,
'data-user': room.isFriendChat ? userlist[0].curvePublic : '' 'data-user': room.isFriendChat ? userlist[0].curvePublic : '',
title: room.name
}); });
var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', { var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
@ -410,7 +420,8 @@ define([
var status = h('span.cp-app-contacts-status'); var status = h('span.cp-app-contacts-status');
var rightCol = h('span.cp-app-contacts-right-col', [ var rightCol = h('span.cp-app-contacts-right-col', [
h('span.cp-app-contacts-name', [room.name]), h('span.cp-app-contacts-name', [room.name]),
room.isFriendChat ? remove : leaveRoom, room.isFriendChat ? remove :
room.isPadChat ? undefined : leaveRoom,
]); ]);
var friendData = room.isFriendChat ? userlist[0] : {}; var friendData = room.isFriendChat ? userlist[0] : {};
@ -609,7 +620,16 @@ define([
normalizeLabels($messagebox); normalizeLabels($messagebox);
var roomEl = markup.room(id, room, list); var roomEl = markup.room(id, room, list);
$userlist.append(roomEl);
var $parentEl;
if (room.isFriendChat) {
$parentEl = $userlist.find('.cp-app-contacts-friends');
} else if (room.isPadChat) {
$parentEl = $userlist.find('.cp-app-contacts-padchat');
} else {
$parentEl = $userlist.find('.cp-app-contacts-rooms');
}
$parentEl.find('.cp-app-contacts-category-content').append(roomEl);
updateStatus(id); updateStatus(id);
}); });
@ -668,7 +688,7 @@ define([
return void console.error('Invalid pad chat'); return void console.error('Invalid pad chat');
} }
var room = rooms[0]; var room = rooms[0];
room.name = 'XXX Pad chat'; room.name = 'XXX Pad chat'; // XXX
rooms.forEach(initializeRoom); rooms.forEach(initializeRoom);
}); });

Write Preview
Loading…
Cancel
Save