blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use less2 in contacts

Browse source
This commit is contained in:
yflory 2017-10-19 09:58:28 +02:00
parent dd63cd13d7
commit 7b8490ad20
3 changed files with 78 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
www/contacts/app-contacts.less
View file

@ -34,7 +34,8 @@
@button-border: 2px;
@bg-color: @colortheme_friends-bg;
@color: @colortheme_friends-color;
#app {
#cp-app-contacts-container {
flex: 1;
display: flex;
justify-content: center;
@ -46,26 +47,22 @@
}
}
#toolbar {
#cp-toolbar {
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
}
.cryptpad-toolbar {
padding: 0px;
display: inline-block;
}
#friendList {
#cp-app-contacts-friendlist {
width: 350px;
height: 100%;
background-color: lighten(@bg-color, 10%);
overflow-y: auto;
.friend {
.cp-app-contacts-friend {
background: rgba(0,0,0,0.1);
padding: 5px;
margin: 10px;
cursor: pointer;
.right-col {
position: relative;
.cp-app-contacts-right-col {
margin-left: 5px;
display: flex;
flex-flow: column;
@ -73,13 +70,20 @@
&:hover {
background-color: rgba(0,0,0,0.3);
}
&.notify {
&.cp-app-contacts-notify {
animation: example 2s ease-in-out infinite;
}
}
.cp-app-contacts-remove {
cursor: pointer;
width: 20px;
&:hover {
color: darken(@color, 20%);
}
}
}
#friendList .friend, #messaging .cp-avatar {
#cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
.avatar_main(30px);
&.cp-avatar {
display: flex;
@ -91,10 +95,10 @@
color: #000;
}
}
media-tag, .default {
media-tag, .cp-avatar-default {
margin-right: 5px;
}
.status {
.cp-app-contacts-status {
width: 5px;
display: inline-block;
position: absolute;
@ -103,28 +107,15 @@
bottom: 0;
opacity: 0.7;
background-color: #777;
&.online {
&.cp-app-contacts-online {
background-color: green;
}
&.offline {
&.cp-app-contacts-offline {
background-color: red;
}
}
}
#friendList {
.friend {
position: relative;
}
.remove {
cursor: pointer;
width: 20px;
&:hover {
color: darken(@color, 20%);
}
}
}
.placeholder (@color: #bbb) {
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: @color;
@ -145,16 +136,16 @@
}
}
#messaging {
#cp-app-contacts-messaging {
flex: 1;
height: 100%;
background-color: lighten(@bg-color, 20%);
min-width: 0;
.info {
.cp-app-contacts-info {
padding: 20px;
}
.header {
.cp-app-contacts-header {
background-color: lighten(@bg-color, 15%);
padding: 0;
display: flex;
@ -171,49 +162,49 @@
}
}
.avatar,
.right-col {
.cp-avatar,
.cp-app-contacts-right-col {
flex:1 1 auto;
}
.remove-history {
.cp-app-contacts-remove-history {
.hover;
}
.cp-avatar {
margin: 10px;
}
.more-history {
.cp-app-contacts-more-history {
//display: none;
.hover;
&.faded {
&.cp-app-contacts-faded {
color: darken(@bg-color, 5%);
}
}
}
.chat {
.cp-app-contacts-chat {
height: 100%;
display: flex;
flex-flow: column;
.messages {
.cp-app-contacts-messages {
padding: 0 20px;
margin: 10px 0;
flex: 1;
overflow-x: auto;
.message {
.cp-app-contacts-message {
& > div {
padding: 0 10px;
}
.content {
.cp-app-contacts-content {
overflow: hidden;
word-wrap: break-word;
&> * {
margin: 0;
}
}
.date {
.cp-app-contacts-date {
display: none;
font-style: italic;
}
.sender {
.cp-app-contacts-sender {
margin-top: 10px;
font-weight: bold;
background-color: rgba(0,0,0,0.1);
@ -221,7 +212,7 @@
}
}
}
.input {
.cp-app-contacts-input {
background-color: lighten(@bg-color, 15%);
height: auto;
min-height: 50px;

10
www/contacts/inner.js
View file

@ -47,12 +47,12 @@ define([
}
});
var toolbarElement = h('div#toolbar.cp-toolbar-container');
var toolbarElement = h('div#cp-toolbar.cp-toolbar-container');
document.body.appendChild(toolbarElement);
var messaging = h('div#messaging', [
h('div.info', [
var messaging = h('div#cp-app-contacts-messaging', [
h('div.cp-app-contacts-info', [
h('h2', Messages.contacts_info1),
h('ul', [
h('li', Messages.contacts_info2),
@ -61,9 +61,9 @@ define([
])
]);
var friendList = h('div#friendList');
var friendList = h('div#cp-app-contacts-friendlist');
var appElement = h('div#app', [
var appElement = h('div#cp-app-contacts-container', [
friendList,
messaging,
]);

73
www/contacts/messenger-ui.js
View file

@ -12,7 +12,7 @@ define([
var Messages = Cryptpad.Messages;
var m = function (md) {
var d = h('div.content');
var d = h('div.cp-app-contacts-content');
try {
d.innerHTML = Marked(md || '');
} catch (e) {
@ -36,6 +36,8 @@ define([
};
UI.create = function (messenger, $userlist, $messages, common) {
var origin = common.getMetadataMgr().getPrivateData().origin;
var state = window.state = {
active: '',
};
@ -57,21 +59,21 @@ define([
};
var notify = function (curvePublic) {
find.inList(curvePublic).addClass('notify');
find.inList(curvePublic).addClass('cp-app-contacts-notify');
};
var unnotify = function (curvePublic) {
find.inList(curvePublic).removeClass('notify');
find.inList(curvePublic).removeClass('cp-app-contacts-notify');
};
var markup = {};
markup.message = function (msg) {
var curvePublic = msg.author;
var name = displayNames[msg.author];
return h('div.message', {
return h('div.cp-app-contacts-message', {
title: msg.time? new Date(msg.time).toLocaleString(): '?',
'data-key': curvePublic,
}, [
name? h('div.sender', name): undefined,
name? h('div.cp-app-contacts-sender', name): undefined,
m(msg.text),
]);
};
@ -81,10 +83,10 @@ define([
};
var normalizeLabels = function ($messagebox) {
$messagebox.find('div.message').toArray().reduce(function (a, b) {
$messagebox.find('div.cp-app-contacts-message').toArray().reduce(function (a, b) {
var $b = $(b);
if ($(a).data('key') === $b.data('key')) {
$b.find('.sender').hide();
$b.find('.cp-app-contacts-sender').hide();
return a;
}
return b;
@ -92,7 +94,7 @@ define([
};
markup.chatbox = function (curvePublic, data) {
var moreHistory = h('span.more-history.fa.fa-history', {
var moreHistory = h('span.cp-app-contacts-more-history.fa.fa-history', {
title: Messages.contacts_fetchHistory,
});
var displayName = data.displayName;
@ -105,14 +107,14 @@ define([
var channel = state.channels[curvePublic];
if (channel.exhausted) {
return void $moreHistory.addClass('faded');
return void $moreHistory.addClass('cp-app-contacts-faded');
}
console.log('getting history');
var sig = channel.TAIL || channel.HEAD;
fetching = true;
var $messagebox = $(getChat(curvePublic)).find('.messages');
var $messagebox = $(getChat(curvePublic)).find('.cp-app-contacts-messages');
messenger.getMoreHistory(curvePublic, sig, 10, function (e, history) {
fetching = false;
if (e) { return void console.error(e); }
@ -129,7 +131,7 @@ define([
console.error('No more messages to fetch');
channel.exhausted = true;
console.log(channel);
return void $moreHistory.addClass('faded');
return void $moreHistory.addClass('cp-app-contacts-faded');
} else {
channel.TAIL = msg.sig;
}
@ -151,7 +153,7 @@ define([
});
});
var removeHistory = h('span.remove-history.fa.fa-eraser', {
var removeHistory = h('span.cp-app-contacts-remove-history.fa.fa-eraser', {
title: Messages.contacts_removeHistoryTitle
});
@ -169,12 +171,12 @@ define([
});
var avatar = h('div.cp-avatar');
var header = h('div.header', [
var header = h('div.cp-app-contacts-header', [
avatar,
moreHistory,
removeHistory,
]);
var messages = h('div.messages');
var messages = h('div.cp-app-contacts-messages');
var input = h('textarea', {
placeholder: Messages.contacts_typeHere
});
@ -182,8 +184,8 @@ define([
title: Messages.contacts_send,
});
var rightCol = h('span.right-col', [
h('span.name', displayName),
var rightCol = h('span.cp-app-contacts-right-col', [
h('span.cp-app-contacts-name', displayName),
]);
var $avatar = $(avatar);
@ -249,12 +251,12 @@ define([
$(input).on('keydown', onKeyDown);
$(sendButton).click(function () { send(input.value); });
return h('div.chat', {
return h('div.cp-app-contacts-chat', {
'data-key': curvePublic,
}, [
header,
messages,
h('div.input', [
h('div.cp-app-contacts-input', [
input,
sendButton,
]),
@ -262,11 +264,11 @@ define([
};
var hideInfo = function () {
$messages.find('.info').hide();
$messages.find('.cp-app-contacts-info').hide();
};
var updateStatus = function (curvePublic) {
var $status = find.inList(curvePublic).find('.status');
var $status = find.inList(curvePublic).find('.cp-app-contacts-status');
// FIXME this stopped working :(
messenger.getStatus(curvePublic, function (e, online) {
// if error maybe you shouldn't display this friend...
@ -278,9 +280,9 @@ define([
}
if (online) {
return void $status
.removeClass('offline').addClass('online');
.removeClass('cp-app-contacts-offline').addClass('cp-app-contacts-online');
}
$status.removeClass('online').addClass('offline');
$status.removeClass('cp-app-contacts-online').addClass('cp-app-contacts-offline');
});
};
@ -299,11 +301,11 @@ define([
unnotify(curvePublic);
var $chat = getChat(curvePublic);
hideInfo();
$messages.find('div.chat[data-key]').hide();
$messages.find('div.cp-app-contacts-chat[data-key]').hide();
if ($chat.length) {
var $chat_messages = $chat.find('div.message');
var $chat_messages = $chat.find('div.cp-app-contacts-message');
if (!$chat_messages.length) {
var $more = $chat.find('.more-history');
var $more = $chat.find('.cp-app-contacts-more-history');
$more.click();
}
return void $chat.show();
@ -325,16 +327,16 @@ define([
markup.friend = function (data) {
var curvePublic = data.curvePublic;
var friend = h('div.friend.cp-avatar', {
var friend = h('div.cp-app-contacts-friend.cp-avatar', {
'data-key': curvePublic,
});
var remove = h('span.remove.fa.fa-user-times', {
var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
title: Messages.contacts_remove
});
var status = h('span.status');
var rightCol = h('span.right-col', [
h('span.name', [data.displayName]),
var status = h('span.cp-app-contacts-status');
var rightCol = h('span.cp-app-contacts-right-col', [
h('span.cp-app-contacts-name', [data.displayName]),
remove,
]);
@ -343,7 +345,7 @@ define([
display(curvePublic);
})
.dblclick(function () {
if (data.profile) { window.open('/profile/#' + data.profile); }
if (data.profile) { window.open(origin + '/profile/#' + data.profile); }
});
$(remove).click(function (e) {
@ -400,7 +402,7 @@ define([
console.error("Got a message but the chat isn't open");
}
var $messagebox = $chat.find('.messages');
var $messagebox = $chat.find('.cp-app-contacts-messages');
var shouldScroll = isBottomedOut($messagebox);
$messagebox.append(el_message);
@ -444,11 +446,12 @@ define([
var name = displayNames[curvePublic] = info.displayName;
// update label in friend list
find.inList(curvePublic).find('.name').text(name);
find.inList(curvePublic).find('.cp-app-contacts-name').text(name);
// update title bar and messages
$messages.find(dataQuery(curvePublic) + ' .header .name, div.message'+
dataQuery(curvePublic) + ' div.sender').text(name).text(name);
$messages.find(dataQuery(curvePublic) + ' .cp-app-contacts-header ' +
'.cp-app-contacts-name, div.cp-app-contacts-message'+
dataQuery(curvePublic) + ' div.cp-app-contacts-sender').text(name).text(name);
});
var connectToFriend = function (curvePublic, cb) {