WIP secure contacts
This commit is contained in:
ansuz
parent
08e0ae424d
commit
f9d27d2783
@ -27,4 +27,5 @@ body.cp-app-code { @import "../../../code/app-code.less"; }
|
|||||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||||
|
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||||
|
|
||||||
|
|||||||
256
www/contacts/app-contacts.less
Normal file
256
www/contacts/app-contacts.less
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
@import (once) "../../customize/src/less2/include/browser.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/toolbar.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/markdown.less";
|
||||||
|
@import (once) '../../customize/src/less2/include/fileupload.less';
|
||||||
|
@import (once) '../../customize/src/less2/include/alertify.less';
|
||||||
|
//@import (once) '../../customize/src/less/mixins.less';
|
||||||
|
//@import (once) '../../customize/src/less/variables.less";
|
||||||
|
|
||||||
|
@import (once) '../../customize/src/less2/include/avatar.less';
|
||||||
|
|
||||||
|
|
||||||
|
.toolbar_main();
|
||||||
|
.fileupload_main();
|
||||||
|
.alertify_main();
|
||||||
|
|
||||||
|
// body
|
||||||
|
&.cp-app-contacts {
|
||||||
|
@keyframes example {
|
||||||
|
0% {
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
background-color: red !important;
|
||||||
|
@button-border: 2px;
|
||||||
|
@bg-color: @colortheme_friends-bg;
|
||||||
|
@color: @colortheme_friends-color;
|
||||||
|
#app {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 0;
|
||||||
|
&.ready {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#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 {
|
||||||
|
width: 350px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lighten(@bg-color, 10%);
|
||||||
|
overflow-y: auto;
|
||||||
|
.friend {
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
padding: 5px;
|
||||||
|
margin: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
&.notify {
|
||||||
|
animation: example 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#friendList .friend, #messaging .avatar {
|
||||||
|
.avatar_main(30px);
|
||||||
|
&.avatar {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
cursor: pointer;
|
||||||
|
color: @color;
|
||||||
|
media-tag {
|
||||||
|
img {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
media-tag, .default {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
width: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
background-color: #777;
|
||||||
|
&.online {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||||
|
color: @color;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||||
|
color: @color;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||||
|
color: @color;
|
||||||
|
}
|
||||||
|
&::-ms-input-placeholder { /* Microsoft Edge */
|
||||||
|
color: @color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#messaging {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lighten(@bg-color, 20%);
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
background-color: lighten(@bg-color, 15%);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
.hover () {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(50,50,50,0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar,
|
||||||
|
.right-col {
|
||||||
|
flex:1 1 auto;
|
||||||
|
}
|
||||||
|
.remove-history {
|
||||||
|
.hover;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.more-history {
|
||||||
|
//display: none;
|
||||||
|
.hover;
|
||||||
|
&.faded {
|
||||||
|
color: darken(@bg-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chat {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
.messages {
|
||||||
|
padding: 0 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
.message {
|
||||||
|
& > div {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
word-wrap: break-word;
|
||||||
|
&> * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.sender {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
background-color: lighten(@bg-color, 15%);
|
||||||
|
height: auto;
|
||||||
|
min-height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 75px;
|
||||||
|
textarea {
|
||||||
|
margin: 5px 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: none;
|
||||||
|
height: 50px;
|
||||||
|
flex: 1;
|
||||||
|
background-color: darken(@bg-color, 10%);
|
||||||
|
color: @color;
|
||||||
|
resize: none;
|
||||||
|
line-height: 50px;
|
||||||
|
overflow-y: auto;
|
||||||
|
.placeholder(#bbb);
|
||||||
|
&[disabled=true] {
|
||||||
|
.placeholder(#999);
|
||||||
|
}
|
||||||
|
&:placeholder-shown { line-height: 50px; }
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background-color: darken(@bg-color, 15%);
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(@bg-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,16 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="cp pad">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CryptPad</title>
|
<title>CryptPad</title>
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<meta name="referrer" content="no-referrer" />
|
||||||
|
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
#pad-iframe {
|
#sbox-iframe {
|
||||||
position:fixed;
|
position:fixed;
|
||||||
top:0px;
|
top:0px;
|
||||||
left:0px;
|
left:0px;
|
||||||
@ -23,8 +24,15 @@
|
|||||||
padding:0;
|
padding:0;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
#sbox-filePicker-iframe {
|
||||||
|
position: fixed;
|
||||||
|
top:0; left:0;
|
||||||
|
bottom:0; right:0;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
<iframe id="sbox-iframe">
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html class="cp-app-noscroll">
|
||||||
<head>
|
<head>
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
<script async data-bootload="/contacts/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
<script async data-bootload="/contacts/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<style>
|
||||||
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
.loading-hidden { display: none; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="loading-hidden">
|
<body class="cp-app-contacts">
|
||||||
<div id="toolbar" class="toolbar-container"></div>
|
|
||||||
<div id="app">
|
|
||||||
<div id="friendList"></div>
|
|
||||||
<div id="messaging"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|||||||
@ -1,13 +1,117 @@
|
|||||||
define([
|
define([
|
||||||
'jquery',
|
'jquery',
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
'/bower_components/chainpad-crypto/crypto.js',
|
||||||
|
'/common/toolbar3.js',
|
||||||
|
'/bower_components/chainpad-json-validator/json-ot.js',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/bower_components/nthen/index.js',
|
||||||
|
'/common/sframe-common.js',
|
||||||
|
'/common/hyperscript.js',
|
||||||
|
'/contacts/messenger-ui.js',
|
||||||
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||||
'less!/contacts/main.less',
|
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
'less!/customize/src/less/toolbar.less',
|
'less!/customize/src/less2/main.less',
|
||||||
], function ($) {
|
], function (
|
||||||
$('.loading-hidden').removeClass('loading-hidden');
|
$,
|
||||||
// dirty hack to get rid the flash of the lock background
|
Crypto,
|
||||||
setTimeout(function () {
|
Toolbar,
|
||||||
$('#app').addClass('ready');
|
JsonOT,
|
||||||
}, 100);
|
Cryptpad,
|
||||||
|
nThen,
|
||||||
|
SFCommon,
|
||||||
|
h,
|
||||||
|
UI
|
||||||
|
)
|
||||||
|
{
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
var APP = {};
|
||||||
|
var onConnectError = function () {
|
||||||
|
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
||||||
|
};
|
||||||
|
|
||||||
|
var common;
|
||||||
|
var sFrameChan;
|
||||||
|
nThen(function (waitFor) {
|
||||||
|
$(waitFor(Cryptpad.addLoadingScreen));
|
||||||
|
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||||
|
}).nThen(function (waitFor) {
|
||||||
|
sFrameChan = common.getSframeChannel();
|
||||||
|
sFrameChan.onReady(waitFor());
|
||||||
|
}).nThen(function (/*waitFor*/) {
|
||||||
|
Cryptpad.onError(function (info) {
|
||||||
|
if (info && info.type === "store") {
|
||||||
|
onConnectError();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var toolbarElement = h('div#toolbar.cp-toolbar-container');
|
||||||
|
|
||||||
|
document.body.appendChild(toolbarElement);
|
||||||
|
|
||||||
|
var messaging = h('div#messaging', [
|
||||||
|
h('div.info', [
|
||||||
|
h('h2', Messages.contacts_info1),
|
||||||
|
h('ul', [
|
||||||
|
h('li', Messages.contacts_info2),
|
||||||
|
h('li', Messages.contacts_info3),
|
||||||
|
])
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
|
||||||
|
var friendList = h('div#friendList');
|
||||||
|
|
||||||
|
var appElement = h('div#app', [
|
||||||
|
friendList,
|
||||||
|
messaging,
|
||||||
|
]);
|
||||||
|
|
||||||
|
document.body.appendChild(appElement);
|
||||||
|
|
||||||
|
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
||||||
|
var configTb = {
|
||||||
|
displayed: displayed,
|
||||||
|
common: Cryptpad,
|
||||||
|
sfCommon: common,
|
||||||
|
$container: $(toolbarElement),
|
||||||
|
network: Cryptpad.getNetwork(),
|
||||||
|
pageTitle: Messages.contacts_title,
|
||||||
|
metadataMgr: common.getMetadataMgr(),
|
||||||
|
};
|
||||||
|
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
||||||
|
toolbar = toolbar; // FIXME;
|
||||||
|
|
||||||
|
var stub = function () {
|
||||||
|
var p;
|
||||||
|
var t = function(){
|
||||||
|
console.error('called with arguments', Cryptpad.slice(arguments));
|
||||||
|
return p;
|
||||||
|
};
|
||||||
|
p = new Proxy(t, {
|
||||||
|
set: function (o, k, v) {
|
||||||
|
console.error('setting %s to %s', k, v);
|
||||||
|
o[k] = v;
|
||||||
|
return true;
|
||||||
|
}, get: function (o, k) {
|
||||||
|
console.error('getting %s', k);
|
||||||
|
return typeof(o[k]) !== 'undefined'? o[k]: p;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return p;
|
||||||
|
};
|
||||||
|
|
||||||
|
var messengerStub = stub();
|
||||||
|
UI.create(messengerStub, $(friendList), $(messaging));
|
||||||
|
|
||||||
|
Cryptpad.removeLoadingScreen();
|
||||||
|
/*
|
||||||
|
sFrameChan.query('Q_HEY_BUDDY', null, function (err, data) {
|
||||||
|
if (!data) { return; }
|
||||||
|
if (data.error) {
|
||||||
|
Cryptpad.warn(data.error);
|
||||||
|
} else {
|
||||||
|
Cryptpad.log(data.response);
|
||||||
|
}
|
||||||
|
});*/
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,62 +1,57 @@
|
|||||||
|
// Load #1, load as little as possible because we are in a race to get the loading screen up.
|
||||||
define([
|
define([
|
||||||
'jquery',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
|
|
||||||
'/common/common-messenger.js',
|
|
||||||
'/contacts/messenger-ui.js',
|
|
||||||
'/bower_components/nthen/index.js',
|
'/bower_components/nthen/index.js',
|
||||||
|
'/api/config',
|
||||||
|
'jquery',
|
||||||
|
'/common/requireconfig.js',
|
||||||
|
'/common/sframe-common-outer.js'
|
||||||
|
], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
|
||||||
|
var requireConfig = RequireConfig();
|
||||||
|
var addRpc = function (sFrameChan, Cryptpad) {
|
||||||
|
Cryptpad = Cryptpad;
|
||||||
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
// protocols must still be declared in sframe-protocol.js
|
||||||
'less!/customize/src/less/cryptpad.less',
|
/*
|
||||||
], function ($, Crypto, Toolbar, Cryptpad, Messenger, UI, Nthen) {
|
sFrameChan.on('Q_HEY_BUDDY', function (data, cb) {
|
||||||
var Messages = Cryptpad.Messages;
|
cb({
|
||||||
var APP = window.APP = {
|
error: null,
|
||||||
Cryptpad: Cryptpad
|
response: "HEY BUDDY",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
*/
|
||||||
};
|
};
|
||||||
|
|
||||||
Nthen(function (waitFor) {
|
// Loaded in load #2
|
||||||
|
nThen(function (waitFor) {
|
||||||
$(waitFor());
|
$(waitFor());
|
||||||
}).nThen(function (waitFor) {
|
}).nThen(function (waitFor) {
|
||||||
Cryptpad.ready(waitFor(Cryptpad.reportAppUsage));
|
var req = {
|
||||||
}).nThen(function () {
|
cfg: requireConfig,
|
||||||
Cryptpad.addLoadingScreen();
|
req: [ '/common/loading.js' ],
|
||||||
|
pfx: window.location.origin
|
||||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
|
||||||
var $iframe = $('#pad-iframe').contents();
|
|
||||||
var $list = $iframe.find('#friendList');
|
|
||||||
var $messages = $iframe.find('#messaging');
|
|
||||||
var $bar = $iframe.find('.toolbar-container');
|
|
||||||
|
|
||||||
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: displayed,
|
|
||||||
ifrw: ifrw,
|
|
||||||
common: Cryptpad,
|
|
||||||
$container: $bar,
|
|
||||||
network: Cryptpad.getNetwork(),
|
|
||||||
pageTitle: Messages.contacts_title,
|
|
||||||
};
|
};
|
||||||
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
window.rc = requireConfig;
|
||||||
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
window.apiconf = ApiConfig;
|
||||||
|
$('#sbox-iframe').attr('src',
|
||||||
|
ApiConfig.httpSafeOrigin + '/contacts/inner.html?' + requireConfig.urlArgs +
|
||||||
|
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||||
|
|
||||||
Cryptpad.getProxy().on('disconnect', function () {
|
// This is a cheap trick to avoid loading sframe-channel in parallel with the
|
||||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
// loading screen setup.
|
||||||
});
|
var done = waitFor();
|
||||||
Cryptpad.getProxy().on('reconnect', function (uid) {
|
var onMsg = function (msg) {
|
||||||
console.error('reconnecting: ', uid);
|
var data = JSON.parse(msg.data);
|
||||||
Cryptpad.findOKButton().click();
|
if (data.q !== 'READY') { return; }
|
||||||
});
|
window.removeEventListener('message', onMsg);
|
||||||
|
var _done = done;
|
||||||
var $infoBlock = $('<div>', {'class': 'info'}).appendTo($messages);
|
done = function () { };
|
||||||
$('<h2>').text(Messages.contacts_info1).appendTo($infoBlock);
|
_done();
|
||||||
var $ul = $('<ul>').appendTo($infoBlock);
|
};
|
||||||
$('<li>').text(Messages.contacts_info2).appendTo($ul);
|
window.addEventListener('message', onMsg);
|
||||||
$('<li>').text(Messages.contacts_info3).appendTo($ul);
|
}).nThen(function (/*waitFor*/) {
|
||||||
|
SFCommonO.start({
|
||||||
var messenger = window.messenger = Messenger.messenger(Cryptpad);
|
noRealtime: true,
|
||||||
UI.create(messenger, $list, $messages);
|
addRpc: addRpc,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,248 +0,0 @@
|
|||||||
@import "/customize/src/less/variables.less";
|
|
||||||
@import "/customize/src/less/mixins.less";
|
|
||||||
|
|
||||||
@button-border: 2px;
|
|
||||||
@bg-color: @toolbar-friends-bg;
|
|
||||||
@color: @toolbar-friends-color;
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
margin: 0px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar {
|
|
||||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app.ready {
|
|
||||||
//background: url('/customize/bg3.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
.cryptpad-toolbar {
|
|
||||||
padding: 0px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes example {
|
|
||||||
0% {
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#friendList {
|
|
||||||
width: 350px;
|
|
||||||
height: 100%;
|
|
||||||
background-color: lighten(@bg-color, 10%);
|
|
||||||
overflow-y: auto;
|
|
||||||
.friend {
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
padding: 5px;
|
|
||||||
margin: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
&.notify {
|
|
||||||
animation: example 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#friendList .friend, #messaging .avatar {
|
|
||||||
.avatar(30px);
|
|
||||||
&.avatar {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
cursor: pointer;
|
|
||||||
color: @color;
|
|
||||||
media-tag {
|
|
||||||
img {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
media-tag, .default {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
width: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
opacity: 0.7;
|
|
||||||
background-color: #777;
|
|
||||||
&.online {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
||||||
color: @color;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
||||||
color: @color;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
&::-ms-input-placeholder { /* Microsoft Edge */
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#messaging {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
background-color: lighten(@bg-color, 20%);
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
.info {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
background-color: lighten(@bg-color, 15%);
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
.hover () {
|
|
||||||
height: 100%;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 10px;
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(50,50,50,0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar,
|
|
||||||
.right-col {
|
|
||||||
flex:1 1 auto;
|
|
||||||
}
|
|
||||||
.remove-history {
|
|
||||||
.hover;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.more-history {
|
|
||||||
//display: none;
|
|
||||||
.hover;
|
|
||||||
&.faded {
|
|
||||||
color: darken(@bg-color, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chat {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.messages {
|
|
||||||
padding: 0 20px;
|
|
||||||
margin: 10px 0;
|
|
||||||
flex: 1;
|
|
||||||
overflow-x: auto;
|
|
||||||
.message {
|
|
||||||
& > div {
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
overflow: hidden;
|
|
||||||
word-wrap: break-word;
|
|
||||||
&> * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.sender {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input {
|
|
||||||
background-color: lighten(@bg-color, 15%);
|
|
||||||
height: auto;
|
|
||||||
min-height: 50px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 75px;
|
|
||||||
textarea {
|
|
||||||
margin: 5px 0;
|
|
||||||
padding: 0 10px;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
flex: 1;
|
|
||||||
background-color: darken(@bg-color, 10%);
|
|
||||||
color: @color;
|
|
||||||
resize: none;
|
|
||||||
line-height: 50px;
|
|
||||||
overflow-y: auto;
|
|
||||||
.placeholder(#bbb);
|
|
||||||
&[disabled=true] {
|
|
||||||
.placeholder(#999);
|
|
||||||
}
|
|
||||||
&:placeholder-shown { line-height: 50px; }
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
background-color: darken(@bg-color, 15%);
|
|
||||||
&:hover {
|
|
||||||
background-color: darken(@bg-color, 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user