Improve messenger UI in apps
yflory
parent
d4dd58e7df
commit
cdce69e677
|
|
@ -54,8 +54,7 @@
|
|||
}
|
||||
|
||||
#cp-app-contacts-friendlist {
|
||||
width: 350px;
|
||||
max-width: 30%;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: lighten(@bg-color, 10%);
|
||||
overflow-y: auto;
|
||||
|
|
@ -65,10 +64,16 @@
|
|||
margin: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
.cp-app-contacts-right-col {
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.cp-app-contacts-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
|
|
@ -84,6 +89,54 @@
|
|||
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 {
|
||||
|
|
@ -227,7 +280,7 @@
|
|||
margin: 5px 0;
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
height: 50px;
|
||||
height: 54px; // 2 lines (22px height) + 2 margins (5px)
|
||||
flex: 1;
|
||||
background-color: darken(@bg-color, 10%);
|
||||
color: @color;
|
||||
|
|
@ -239,7 +292,7 @@
|
|||
}
|
||||
}
|
||||
button {
|
||||
height: 50px;
|
||||
height: 54px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: darken(@bg-color, 15%);
|
||||
|
|
|
|||
|
|
@ -138,7 +138,8 @@
|
|||
background-color: @toolbar-bg-color;
|
||||
background-color: var(--toolbar-bg-color);
|
||||
font: @colortheme_app-font-size @colortheme_font;
|
||||
width: 400px;
|
||||
width: 30%;
|
||||
min-width: 400px;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -414,8 +414,10 @@ Messenger, MessengerUI, Messages) {
|
|||
};
|
||||
|
||||
var initChat = function (toolbar) {
|
||||
var $container = $('<div>', {id: 'cp-app-contacts-container'})
|
||||
.prependTo(toolbar.chatContent);
|
||||
var $container = $('<div>', {
|
||||
id: 'cp-app-contacts-container',
|
||||
'class': 'cp-app-contacts-inapp'
|
||||
}).prependTo(toolbar.chatContent);
|
||||
var sframeChan = Common.getSframeChannel();
|
||||
var messenger = Messenger.create(sframeChan);
|
||||
MessengerUI.create(messenger, $container, Common);
|
||||
|
|
|
|||
|
|
@ -60,6 +60,17 @@ define([
|
|||
|
||||
var friendList = h('div#cp-app-contacts-friendlist', [
|
||||
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);
|
||||
|
|
@ -217,8 +228,6 @@ define([
|
|||
});
|
||||
|
||||
$(removeHistory).click(function () {
|
||||
// XXX
|
||||
console.error("TODO: only display clear button if owned");
|
||||
UI.confirm(Messages.contacts_confirmRemoveHistory, function (yes) {
|
||||
if (!yes) { return; }
|
||||
|
||||
|
|
@ -397,7 +406,8 @@ define([
|
|||
markup.room = function (id, room, userlist) {
|
||||
var roomEl = h('div.cp-app-contacts-friend.cp-avatar', {
|
||||
'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', {
|
||||
|
|
@ -410,7 +420,8 @@ define([
|
|||
var status = h('span.cp-app-contacts-status');
|
||||
var rightCol = h('span.cp-app-contacts-right-col', [
|
||||
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] : {};
|
||||
|
|
@ -609,7 +620,16 @@ define([
|
|||
normalizeLabels($messagebox);
|
||||
|
||||
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);
|
||||
});
|
||||
|
|
@ -668,7 +688,7 @@ define([
|
|||
return void console.error('Invalid pad chat');
|
||||
}
|
||||
var room = rooms[0];
|
||||
room.name = 'XXX Pad chat';
|
||||
room.name = 'XXX Pad chat'; // XXX
|
||||
rooms.forEach(initializeRoom);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue