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

Merge branch 'staging' into pad2

pull/1/head
Caleb James DeLisle 2017-08-09 16:28:51 +02:00
parent 4b25ab80d6 1f9bd866c3
commit e49a42db18
35 changed files with 577 additions and 301 deletions

BIN
customize.dist/images/logo_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

75
customize.dist/pages.js
View File

@ -263,7 +263,7 @@ define([
[ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
[ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
[ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
[ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_recentPads, 'fa-hdd-o' ]
[ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
].map(function (x) {
return h('a', [
{ href: x[1] },
@ -427,33 +427,43 @@ define([
display: 'block',
}
}, [
h('button#clear', Msg.canvas_clear), ' ',
h('button#toggleDraw', Msg.canvas_disable),
h('button#delete', {
h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
h('button#delete.btn.btn-secondary', {
style: {
display: 'none',
}
}),
h('input#width', {
type: 'range',
value: "5",
min: "1",
max: "100"
}),
h('label', {
'for': 'width'
}, Msg.canvas_width),
h('input#opacity', {
type: 'range',
value: "1",
min: "0.1",
max: "1",
step: "0.1"
}),
h('label', {
'for': 'width',
}),
h('span.selected')
}, Msg.canvas_delete),
h('div.range-group', [
h('label', {
'for': 'width'
}, Msg.canvas_width),
h('input#width', {
type: 'range',
value: "5",
min: "1",
max: "100"
}),
h('span#width-val', '5px')
]),
h('div.range-group', [
h('label', {
'for': 'opacity',
}, Msg.canvas_opacity),
h('input#opacity', {
type: 'range',
value: "1",
min: "0.1",
max: "1",
step: "0.1"
}),
h('span#opacity-val', '100%')
]),
h('span.selected', [
h('img', {
title: Msg.canvas_currentBrush
})
])
]),
setHTML(h('div#colors'), ' '),
loadingScreen(),
@ -480,16 +490,15 @@ define([
h('p', Msg.poll_p_encryption)
]),
h('div.upper', [
h('button#publish', {
h('button#publish.btn.btn-success', {
style: { display: 'none' }
}, Msg.poll_publish_button),
h('button#admin', {
h('button#admin.btn.btn-primary', {
style: { display: 'none' },
title: Msg.poll_admin_button
}, Msg.poll_admin_button),
h('button#help', {
title: Msg.poll_show_help_button,
style: { display: 'none' }
h('button#help.btn.btn-secondary', {
title: Msg.poll_show_help_button
}, Msg.poll_show_help_button)
]),
h('div.realtime', [
@ -504,13 +513,13 @@ define([
]),
h('div#tableContainer', [
h('div#tableScroll'),
h('button#create-user', {
h('button#create-user.btn.btn-secondary', {
title: Msg.poll_create_user
}, h('span.fa.fa-plus')),
h('button#create-option', {
h('button#create-option.btn.btn-secondary', {
title: Msg.poll_create_option
}, h('span.fa.fa-plus')),
h('button#commit', {
h('button#commit.btn.btn-secondary', {
title: Msg.poll_commit
}, h('span.fa.fa-check'))
])

34
customize.dist/src/less/cryptpad.less
View File

@ -3,6 +3,7 @@
@import "../less2/include/alertify.less";
@import "../less2/include/colortheme.less";
@import "../less2/include/modal.less";
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
@ -633,29 +634,29 @@ noscript {
/* Upload status table */
#uploadStatusContainer {
.modal_base();
position: absolute;
left: 10vw; right: 10vw;
bottom: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
opacity: 0.7;
bottom: 10vh;
opacity: 0.9;
box-sizing: border-box;
z-index:10000;
z-index: 10000;
display: none;
font-family: @colortheme_font;
#uploadStatus {
width: 80vw;
border: 1px solid black;
border-collapse: collapse;
tr:nth-child(1) {
background-color: #888;
border: 1px solid #999;
td { text-align: center; }
background-color: darken(@colortheme_modal-bg, 20%);
td {
text-align: center;
font-weight: bold;
padding: 0.25em;
}
}
@upload_pad_h: 0.25em;
@upload_pad_v: 0.5em;
td {
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
padding: 0 10px;
padding: @upload_pad_h @upload_pad_v;
}
.upProgress {
width: 200px;
@ -666,9 +667,10 @@ noscript {
.progressContainer {
position: absolute;
width: 0px;
left: 5px;
top: 1px; bottom: 1px;
left: @upload_pad_v;
top: @upload_pad_h; bottom: @upload_pad_h;
background-color: rgba(0,0,255,0.3);
z-index: -1;
}
.upCancel { text-align: center; }
.fa.cancel {

9
customize.dist/src/less2/include/alertify.less
View File

@ -39,14 +39,14 @@
box-shadow: @alertify_box-shadow;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
background: @colortheme_notification-log;
}
&.error {
font-weight: bold;
background: @colortheme_cp-red;
background: @colortheme_notification-warn;
}
&.success {
background: rgba(0, 0, 0, .8);
background: @colortheme_notification-log;
}
}
}
@ -114,8 +114,7 @@
text-align: left;
padding: @alertify_padding-base;
background: #fff;
// FIXME
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
box-shadow: @alertify_box-shadow;
}
.msg {

5
customize.dist/src/less2/include/colortheme.less
View File

@ -15,6 +15,8 @@
@colortheme_modal-bg: #222;
@colortheme_modal-fg: #fff;
@colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
@colortheme_modal-padding: 12px;
@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
@ -24,6 +26,9 @@
@colortheme_alertify-red: #E55236;
@colortheme_alertify-green: #77C825;
@colortheme_notification-log: rgba(0, 0, 0, 0.8);
@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
// Apps
@colortheme_pad-bg: #1c4fa0;

18
customize.dist/src/less2/include/mediatag.less Normal file
View File

@ -0,0 +1,18 @@
.mediatag_base() {
media-tag {
min-height: 0;
flex: 1;
display: flex;
flex-flow: column;
text-align: center;
}
media-tag img {
flex: 1;
max-height: 100% !important;
}
media-tag iframe {
min-height: 100%;
}
}

17
customize.dist/src/less2/include/modal.less Normal file
View File

@ -0,0 +1,17 @@
@import (once) "./colortheme.less";
.modal_base() {
font-family: @colortheme_font;
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @colortheme_modal-shadow;
a {
color: @colortheme_modal-link;
&:visited {
color: @colortheme_modal-link-visited;
}
}
}

4
customize.dist/translations/messages.es.js
View File

@ -291,7 +291,7 @@ define(function () {
out.blog = "Blog";
out.initialState = [
'<span style="font-size:18px;"><p>',
'<p>',
'Esto es&nbsp;<strong>CryptPad</strong>, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.',
'<br>',
'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Compartir&nbsp;</span> para obtener un <em>enlace sólo lectura</em>&nbsp;que permite leer pero no escribir.',
@ -299,7 +299,7 @@ define(function () {
'<p><em>',
'Vamos, empieza a escribir...',
'</em></p></span>',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');

4
customize.dist/translations/messages.fr.js
View File

@ -566,7 +566,7 @@ define(function () {
// Initial states
out.initialState = [
'<span style="font-size:16px;"><p>',
'<p>',
'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',
'<br>',
'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Partager&nbsp;</span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
@ -574,7 +574,7 @@ define(function () {
'<p>',
'<em>',
'Lancez-vous, commencez à taper...',
'</em></p></span>',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');

20
customize.dist/translations/messages.js
View File

@ -118,6 +118,10 @@ define(function () {
out.shareButton = 'Share';
out.shareSuccess = 'Copied link to clipboard';
out.userListButton = "User list";
out.userAccountButton = "Your account";
out.newButton = 'New';
out.newButtonTitle = 'Create a new pad';
out.uploadButton = 'Upload files';
@ -244,9 +248,11 @@ define(function () {
out.canvas_enable = "Enable draw";
out.canvas_width = "Width";
out.canvas_opacity = "Opacity";
out.canvas_opacityLabel = "opacity: {0}";
out.canvas_opacityLabel = "Opacity: {0}";
out.canvas_widthLabel = "Width: {0}";
out.canvas_saveToDrive = "Save this image as a file in your CryptDrive";
out.canvas_currentBrush = "Current brush";
out.canvas_chooseColor = "Choose a color";
// Profile
out.profileButton = "Profile"; // dropdown menu
@ -343,6 +349,8 @@ define(function () {
out.fm_backup_title = 'Backup link';
out.fm_nameFile = 'How would you like to name that file?';
out.fm_error_cantPin = "Internal server error. Please reload the page and try again.";
out.fm_viewListButton = "List view";
out.fm_viewGridButton = "Grid view";
// File - Context menu
out.fc_newfolder = "New folder";
out.fc_rename = "Rename";
@ -483,6 +491,10 @@ define(function () {
out.todo_markAsIncompleteTitle = "Mark this task as incomplete";
out.todo_removeTaskTitle = "Remove this task from your todo list";
// pad
out.pad_showToolbar = "Show toolbar";
out.pad_hideToolbar = "Hide toolbar";
// general warnings
out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
@ -525,7 +537,7 @@ define(function () {
out.main_slidePad = 'Markdown Presentation';
out.main_pollPad = 'Poll or Schedule';
out.main_whiteboardPad = 'Whiteboard';
out.main_recentPads = 'Recent Pads';
out.main_localPads = 'Local Pads';
out.footer_applications = "Applications";
out.footer_contact = "Contact";
@ -603,7 +615,7 @@ define(function () {
// Initial states
out.initialState = [
'<span style="font-size:16px;"><p>',
'<p>',
'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
'<br>',
'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@ -611,7 +623,7 @@ define(function () {
'<p><em>',
'Go ahead, just start typing...',
'</em></p></span>',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');

4
customize.dist/translations/messages.pt-br.js
View File

@ -484,7 +484,7 @@ define(function () {
// Initial states
out.initialState = [
'<span style="font-size:16px;"><p>',
'<p>',
'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
'<br>',
'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@ -492,7 +492,7 @@ define(function () {
'<p><span style="color:#808080;"><em>',
'Go ahead, just start typing...',
'</em></span></p></span>',
'</em></span></p>',
'<p>&nbsp;<br></p>'
].join('');

2
customize.dist/translations/messages.ro.js
View File

@ -331,7 +331,7 @@ define(function () {
out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
out.header_logoTitle = "Mergi la pagina principală";
out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p></span><p>&nbsp;<br></p>";
out.initialState = "<p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p>&nbsp;<br></p>";
out.codeInitialState = "/*\n Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele - Slide-urile tale sunt actualizate în timp real.";
out.driveReadmeTitle = "Ce este CryptDrive?";

4
customize.dist/translations/messages.zh.js
View File

@ -467,7 +467,7 @@ define(function () {
// Initial states
out.initialState = [
'<span style="font-size:16px;"><p>',
'<p>',
'這是&nbsp;<strong>CryptPad</strong>, 零知識即時協作編輯平台，當你輸入時一切已即存好。',
'<br>',
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;分享&nbsp;</span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
@ -475,7 +475,7 @@ define(function () {
'<p><em>',
'來吧, 開始打字輸入吧...',
'</em></p></span>',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');

23
www/code/code.less
View File

@ -59,19 +59,36 @@ body {
box-sizing: border-box;
font-family: Calibri,Ubuntu,sans-serif;
word-wrap: break-word;
media-tag * {
max-width:100%;
position: relative;
media-tag {
* {
max-width:100%;
}
iframe[type="application/pdf"] {
max-height:50vh;
}
}
}
#preview {
max-width: 40vw;
margin: auto;
margin: 1em auto;
.markdown_preformatted-code;
.markdown_gfm-table(black);
}
.cp-splitter {
position: absolute;
height: 100%;
width: 8px;
top: 0;
left: 0;
z-index: 9999;
cursor: col-resize;
}
@media (max-width: @media-medium-screen) {
.CodeMirror {
flex: 1;

1
www/code/inner.js
View File

@ -4,6 +4,7 @@ define([
'cm/lib/codemirror',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/code/code.less',
'less!/customize/src/less/toolbar.less',
'less!/customize/src/less/cryptpad.less',

20
www/code/main.js
View File

@ -387,6 +387,26 @@ define([
}
});
// add the splitter
var splitter = $('<div>', {
'class': 'cp-splitter'
}).appendTo($iframe.find('#previewContainer'));
var $target = $iframe.find('.CodeMirror');
splitter.on('mousedown', function (e) {
e.preventDefault();
var x = e.pageX;
var w = $target.width();
$iframe.on('mouseup mousemove', function handler(evt) {
if (evt.type === 'mouseup') {
$iframe.off('mouseup mousemove', handler);
return;
}
$target.css('width', (w - x + evt.pageX) + 'px');
});
});
Cryptpad.removeLoadingScreen();
setEditable(true);
initializing = false;

3
www/common/common-file.js
View File

@ -56,12 +56,13 @@ define([
$row.find('.upCancel').html('-');
var $pv = $row.find('.progressValue');
var $pb = $row.find('.progressContainer');
var $pc = $row.find('.upProgress');
var $link = $row.find('.upLink');
var updateProgress = function (progressValue) {
$pv.text(Math.round(progressValue*100)/100 + '%');
$pb.css({
width: (progressValue/100)*188+'px'
width: (progressValue/100)*$pc.width()+'px'
});
};

1
www/common/common-interface.js
View File

@ -313,6 +313,7 @@ define([
position: 'bottom',
distance: 0,
performance: true,
dynamicTitle: true,
delay: [delay, 0]
});
};

467
www/common/common-messaging.js
View File

@ -79,7 +79,132 @@ define([
// Messaging tools
var avatars = {};
var addToFriendListUI = function (common, $block, open, remove, f) {
// TODO make this internal to the messenger
var channels = Msg.channels = window.channels = {};
var UI = Msg.UI = {};
UI.init = function (common, $listContainer, $msgContainer) {
var ui = {
containers: {
friendList: $listContainer,
messages: $msgContainer,
},
};
ui.setFriendList = function (display, remove) {
UI.getFriendList(common, display, remove).appendTo($listContainer);
};
ui.notify = function (curvePublic) {
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
$friend.addClass('notify');
};
ui.unnotify = function (curvePublic) {
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
$friend.removeClass('notify');
};
ui.update = function (curvePublic, types) {
var data = getFriend(common, curvePublic);
var chan = channels[data.channel];
if (!chan.ready) {
chan.updateOnReady = (chan.updateOnReady || []).concat(types);
return;
}
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
if (types.indexOf('displayName') >= 0) {
$friend.find('.name').text(data.displayName);
}
if (types.indexOf('avatar') >= 0) {
$friend.find('.default').remove();
$friend.find('media-tag').remove();
if (data.avatar && avatars[data.avatar]) {
$friend.prepend(avatars[data.avatar]);
} else {
common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
if (data.avatar && $img) {
avatars[data.avatar] = $img[0].outerHTML;
}
});
}
}
};
ui.updateStatus = function (curvePublic) {
var data = getFriend(common, curvePublic);
var chan = channels[data.channel];
// FIXME mixes logic and presentation
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
var status = chan.userList.some(function (nId) {
return chan.mapId[nId] === curvePublic;
});
var statusText = status ? 'online' : 'offline';
$friend.find('.status').attr('class', 'status '+statusText);
};
ui.getChannel = function (curvePublic) {
// TODO extract into UI method
var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
return $chat.length? $chat: null;
};
ui.hideInfo = function () {
$msgContainer.find('.info').hide();
};
ui.showInfo = function () {
$msgContainer.find('.info').show();
};
ui.createChat = function (curvePublic) {
return $('<div>', {'class':'chat'})
.data('key', curvePublic).appendTo($msgContainer);
};
ui.hideChat = function () {
$msgContainer.find('.chat').hide();
};
ui.getFriend = function (curvePublic) {
return $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
};
ui.addToFriendList = function (curvePublic, display, remove) {
var $block = $listContainer.find('> div');
UI.addToFriendList(common, $block, display, remove, curvePublic);
};
ui.createMessage = function (msg, name) {
var $msg = $('<div>', {'class': 'message'})
.attr('title', msg.time ? new Date(msg.time).toLocaleString(): '?');
if (name) {
$('<div>', {'class':'sender'}).text(name).appendTo($msg);
}
$('<div>', {'class':'content'}).html(parseMessage(msg.text)).appendTo($msg);
return $msg;
};
return ui;
};
// internal
UI.addToFriendList = function (common, $block, open, remove, f) {
var proxy = common.getProxy();
var friends = proxy.friends || {};
if (f === "me") { return; }
@ -120,12 +245,14 @@ define([
}
$('<span>', {'class': 'status'}).appendTo($friend);
};
Msg.getFriendListUI = function (common, open, remove) {
var proxy = common.getProxy();
// iterate over your friends list and return a dom element containing UI
UI.getFriendList = function (common, open, remove) {
var proxy = common.getProxy(); // throws
var $block = $('<div>');
var friends = proxy.friends || {};
Object.keys(friends).forEach(function (f) {
addToFriendListUI(common, $block, open, remove, f);
UI.addToFriendList(common, $block, open, remove, f);
});
return $block;
};
@ -146,7 +273,6 @@ define([
});
};
var channels = Msg.channels = window.channels = {};
var msgAlreadyKnown = function (channel, sig) {
return channel.messages.some(function (message) {
@ -162,8 +288,16 @@ define([
var parsedMsg = JSON.parse(msg);
if (parsedMsg[0] === Types.message) {
parsedMsg.shift();
channel.messages.push([sig, parsedMsg]);
// TODO validate messages here
var res = {
type: parsedMsg[0],
sig: sig,
channel: parsedMsg[1],
time: parsedMsg[2],
text: parsedMsg[3],
};
channel.messages.push(res);
return true;
}
var proxy;
@ -192,6 +326,8 @@ define([
}
};
/* Broadcast a display name, profile, or avatar change to all contacts
*/
var updateMyData = function (common) {
var friends = getFriendList(common);
var mySyncData = friends.me;
@ -218,7 +354,7 @@ define([
var onChannelReady = function (common, chanId) {
if (ready.indexOf(chanId) !== -1) { return; }
ready.push(chanId);
channels[chanId].updateStatus();
channels[chanId].updateStatus(); // c'est quoi?
var friends = getFriendList(common);
if (ready.length === Object.keys(friends).length) {
// All channels are ready
@ -240,7 +376,29 @@ define([
if (!isId) { return; }
var decryptedMsg = channel.encryptor.decrypt(msg);
var parsed = JSON.parse(decryptedMsg);
if (decryptedMsg === null) {
// console.error('unable to decrypt message');
// console.error('potentially meant for yourself');
// message failed to parse, meaning somebody sent it to you but
// encrypted it with the wrong key, or you're sending a message to
// yourself in a different tab.
return;
}
if (!decryptedMsg) {
console.error('decrypted message was falsey but not null');
return;
}
var parsed;
try {
parsed = JSON.parse(decryptedMsg);
} catch (e) {
console.error(decryptedMsg);
return;
}
if (parsed[0] !== Types.mapId && parsed[0] !== Types.mapIdAck) { return; }
if (parsed[2] !== sender || !parsed[1]) { return; }
channel.mapId[sender] = parsed[1];
@ -293,9 +451,9 @@ define([
}
};
// TODO extract into UI method
var createChatBox = function (common, $container, curvePublic, messenger) {
var data = getFriend(common, curvePublic);
var proxy = common.getProxy();
// Input
var channel = channels[data.channel];
@ -343,6 +501,8 @@ define([
messenger.input = $input[0];
var send = function () {
// TODO implement sending queue
// TODO separate message logic from UI
var channel = channels[data.channel];
if (channel.sending) {
console.error("still sending");
@ -356,42 +516,26 @@ define([
console.error("input is disabled");
return;
}
var payload = $input.val();
// Send the message
var msg = [Types.message, proxy.curvePublic, +new Date(), $input.val()];
var msgStr = JSON.stringify(msg);
var cryptMsg = channel.encryptor.encrypt(msgStr);
channel.sending = true;
console.log(channel.wc);
var network = common.getNetwork();
if (!network.webChannels.some(function (wc) {
if (wc.id === channel.wc.id) {
console.error(wc.id, channel.wc.id);
return true;
channel.send(payload, function (e) {
if (e) {
channel.sending = false;
console.error(e);
return;
}
console.error(wc.id, channel.wc.id);
//return wc.id === channel.wc.id;
})) {
console.error('no such channel:' + channel.wc.id);
return;
}
channel.wc.bcast(cryptMsg).then(function () {
$input.val('');
pushMsg(common, channel, cryptMsg);
channel.refresh();
channel.sending = false;
}, function (err) {
channel.sending = false;
console.error(err);
});
};
$('<button>', {'class': 'btn btn-primary fa fa-paper-plane'})
//.text(common.Messages.contacts_send)
.appendTo($inputBlock).click(send);
/*$input.on('keypress', function (e) {
if (e.which === 13) { send(); }
});*/
$('<button>', {
'class': 'btn btn-primary fa fa-paper-plane',
title: common.Messages.contacts_send,
}).appendTo($inputBlock).click(send);
var onKeyDown = function (e) {
if (e.keyCode === 13) {
if (e.ctrlKey || e.shiftKey) {
@ -441,88 +585,113 @@ define([
});
};
Msg.init = function (common, $listContainer, $msgContainer) {
var messenger = {};
var getMoreHistory = function (network, chan, hash, count) {
var msg = [ 'GET_HISTORY_RANGE', chan.id, {
from: hash,
count: count,
}
];
network.sendto(network.historyKeeper, JSON.stringify(msg)).then(function () {
}, function (err) {
throw new Error(err);
});
};
var getChannelMessagesSince = function (network, proxy, chan, data, keys) {
var cfg = {
validateKey: keys.validateKey,
owners: [proxy.edPublic, data.edPublic],
lastKnownHash: data.lastKnownHash
};
var msg = ['GET_HISTORY', chan.id, cfg];
network.sendto(network.historyKeeper, JSON.stringify(msg))
.then($.noop, function (err) {
throw new Error(err);
});
};
Msg.init = function (common, ui) {
// declare common variables
var network = common.getNetwork();
var proxy = common.getProxy();
Msg.hk = network.historyKeeper;
var friends = getFriendList(common);
// listen for messages...
network.on('message', function(msg, sender) {
onDirectMessage(common, msg, sender);
});
// declare messenger and common methods
var messenger = {
ui: ui,
};
messenger.setActive = function (id) {
// TODO validate id
messenger.active = id;
};
// Refresh the active channel
// TODO extract into UI method
var refresh = function (curvePublic) {
if (Msg.active !== curvePublic) { return; }
if (messenger.active !== curvePublic) { return; }
var data = friends[curvePublic];
if (!data) { return; }
var channel = channels[data.channel];
if (!channel) { return; }
var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
var $chat = ui.getChannel(curvePublic);
if (!$chat) { return; }
if (!$chat.length) { return; }
// Add new messages
var messages = channel.messages;
var $messages = $chat.find('.messages');
var $msg, msg, date, name;
var msg, name;
var last = typeof(channel.lastDisplayed) === 'number'? channel.lastDisplayed: -1;
for (var i = last + 1; i<messages.length; i++) {
msg = messages[i][1]; // 0 is the hash, 1 the array
$msg = $('<div>', {'class': 'message'}).appendTo($messages);
msg = messages[i];
name = (msg.channel !== channel.lastSender)?
getFriend(common, msg.channel).displayName: undefined;
// date
date = msg[1] ? new Date(msg[1]).toLocaleString() : '?';
//$('<div>', {'class':'date'}).text(date).appendTo($msg);
$msg.attr('title', date);
// name
if (msg[0] !== channel.lastSender) {
name = getFriend(common, msg[0]).displayName;
$('<div>', {'class':'sender'}).text(name).appendTo($msg);
}
channel.lastSender = msg[0];
// content
//$('<div>', {'class':'content'}).text(msg[2]).appendTo($msg);
$('<div>', {'class':'content'}).html(parseMessage(msg[2])).appendTo($msg);
ui.createMessage(msg, name).appendTo($messages);
channel.lastSender = msg.channel;
}
$messages.scrollTop($messages[0].scrollHeight);
channel.lastDisplayed = i-1;
channel.unnotify();
// return void channel.notify();
if (messages.length > 10) {
var lastKnownMsg = messages[messages.length - 11];
data.lastKnownHash = lastKnownMsg[0];
channel.setLastMessageRead(lastKnownMsg.sig);
}
};
// Display a new channel
// TODO extract into UI method
var display = function (curvePublic) {
$msgContainer.find('.info').hide();
ui.hideInfo();
var isNew = false;
var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
if (!$chat.length) {
$chat = $('<div>', {'class':'chat'})
.data('key', curvePublic).appendTo($msgContainer);
var $chat = ui.getChannel(curvePublic);
if (!$chat) {
$chat = ui.createChat(curvePublic);
createChatBox(common, $chat, curvePublic, messenger);
isNew = true;
}
// Show the correct div
$msgContainer.find('.chat').hide();
ui.hideChat();
$chat.show();
Msg.active = curvePublic;
// TODO set this attr per-messenger
messenger.setActive(curvePublic);
// TODO don't mark messages as read unless you have displayed them
refresh(curvePublic);
};
// TODO take a callback
var remove = function (curvePublic) {
var data = getFriend(common, curvePublic);
var channel = channels[data.channel];
@ -541,106 +710,20 @@ define([
};
// Display friend list
common.getFriendListUI(common, display, remove).appendTo($listContainer);
ui.setFriendList(display, remove);
// Notify on new messages
var notify = function (curvePublic) {
//if (Msg.active === curvePublic) { return; }
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
$friend.addClass('notify');
common.notify();
};
var unnotify = function (curvePublic) {
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
$friend.removeClass('notify');
};
// TODO extract into UI method...
var removeUI = function (curvePublic) {
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
var $friend = ui.getFriend(curvePublic);
var $chat = ui.getChannel(curvePublic);
$friend.remove();
$chat.remove();
$msgContainer.find('.info').show();
};
var updateUI = function (curvePublic, types) {
var data = getFriend(common, curvePublic);
var chan = channels[data.channel];
if (!chan.ready) {
chan.updateOnReady = (chan.updateOnReady || []).concat(types);
return;
}
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
if (types.indexOf('displayName') >= 0) {
$friend.find('.name').text(data.displayName);
}
if (types.indexOf('avatar') >= 0) {
$friend.find('.default').remove();
$friend.find('media-tag').remove();
if (data.avatar && avatars[data.avatar]) {
$friend.prepend(avatars[data.avatar]);
} else {
common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
if (data.avatar && $img) {
avatars[data.avatar] = $img[0].outerHTML;
}
});
}
}
};
var updateStatus = function (curvePublic) {
var data = getFriend(common, curvePublic);
var chan = channels[data.channel];
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === curvePublic;
});
var status = chan.userList.some(function (nId) {
return chan.mapId[nId] === curvePublic;
});
var statusText = status ? 'online' : 'offline';
$friend.find('.status').attr('class', 'status '+statusText);
};
var getMoreHistory = function (network, chan, hash, count) {
var msg = [
'GET_HISTORY_RANGE',
chan.id,
{
from: hash,
count: count,
}
];
console.log(msg);
network.sendto(network.historyKeeper, JSON.stringify(msg)).then(function (a, b, c) {
console.log(a, b, c);
}, function (err) {
throw new Error(err);
});
};
var getChannelMessagesSince = function (network, chan, data, keys) {
var cfg = {
validateKey: keys.validateKey,
owners: [proxy.edPublic, data.edPublic],
lastKnownHash: data.lastKnownHash
};
var msg = ['GET_HISTORY', chan.id, cfg];
network.sendto(network.historyKeeper, JSON.stringify(msg))
.then($.noop, function (err) {
throw new Error(err);
});
ui.showInfo();
};
// Open the channels
// TODO extract this into an external function
var openFriendChannel = function (f) {
if (f === "me") { return; }
var data = friends[f];
@ -654,13 +737,25 @@ define([
encryptor: encryptor,
messages: [],
refresh: function () { refresh(data.curvePublic); },
notify: function () { notify(data.curvePublic); },
unnotify: function () { unnotify(data.curvePublic); },
notify: function () {
ui.notify(data.curvePublic);
common.notify();
},
unnotify: function () { ui.unnotify(data.curvePublic); },
removeUI: function () { removeUI(data.curvePublic); },
updateUI: function (types) { updateUI(data.curvePublic, types); },
updateStatus: function () { updateStatus(data.curvePublic); },
updateUI: function (types) { ui.update(data.curvePublic, types); },
updateStatus: function () { ui.updateStatus(data.curvePublic); },
setLastMessageRead: function (hash) {
data.lastKnownHash = hash;
},
getLastMessageRead: function () {
return data.lastKnownHash;
},
isActive: function () {
return data.curvePublic === messenger.active;
},
getMessagesSinceDisconnect: function () {
getChannelMessagesSince(network, chan, data, keys);
getChannelMessagesSince(network, proxy, chan, data, keys);
},
wc: chan,
userList: [],
@ -680,6 +775,24 @@ define([
var messageHash = oldestMessage[0];
getMoreHistory(network, chan, messageHash, 10);
},
send: function (payload, cb) {
if (!network.webChannels.some(function (wc) {
if (wc.id === channel.wc.id) { return true; }
})) {
return void cb('NO_SUCH_CHANNEL');
}
var msg = [Types.message, proxy.curvePublic, +new Date(), payload];
var msgStr = JSON.stringify(msg);
var cryptMsg = channel.encryptor.encrypt(msgStr);
channel.wc.bcast(cryptMsg).then(function () {
pushMsg(common, channel, cryptMsg);
cb();
}, function (err) {
cb(err);
});
},
};
chan.on('message', function (msg, sender) {
onMessage(common, msg, sender, chan);
@ -710,7 +823,7 @@ define([
channel.updateStatus();
});
getChannelMessagesSince(network, chan, data, keys);
getChannelMessagesSince(network, proxy, chan, data, keys);
}, function (err) {
console.error(err);
});
@ -726,6 +839,7 @@ define([
Object.keys(friends).forEach(openFriendChannel);
};
// TODO split out into UI
messenger.setEditable = function (bool) {
bool = !bool;
var input = messenger.input;
@ -748,14 +862,14 @@ define([
openFriendChannels();
// TODO split loop innards into ui methods
var checkNewFriends = function () {
Object.keys(friends).forEach(function (f) {
var $friend = $listContainer.find('.friend').filter(function (idx, el) {
return $(el).data('key') === f;
});
var $friend = ui.getFriend(f);
if (!$friend.length) {
openFriendChannel(f);
addToFriendListUI(common, $listContainer.find('> div'), display, remove, f);
ui.addToFriendList(f, display, remove);
}
});
};
@ -897,6 +1011,7 @@ define([
if (pendingRequests.indexOf(netfluxId) === -1) {
pendingRequests.push(netfluxId);
var proxy = common.getProxy();
// FIXME this name doesn't indicate what it does
common.changeDisplayName(proxy[common.displayNameKey]);
}
network.sendto(netfluxId, msgStr);

2
www/common/cryptpad-common.js
View File

@ -125,10 +125,10 @@ define([
common.createOwnedChannel = Messaging.createOwnedChannel;
common.getFriendList = Messaging.getFriendList;
common.getFriendChannelsList = Messaging.getFriendChannelsList;
common.getFriendListUI = Messaging.getFriendListUI;
common.createData = Messaging.createData;
common.getPendingInvites = Messaging.getPending;
common.getLatestMessages = Messaging.getLatestMessages;
common.initMessagingUI = Messaging.UI.init;
// Userlist
common.createUserList = UserList.create;

1
www/common/curve.js
View File

@ -35,6 +35,7 @@ define([
var nonce = decodeBase64(unpacked[0]);
var box = decodeBase64(unpacked[1]);
var message = Nacl.box.open.after(box, nonce, secret);
if (message === false) { return null; }
return encodeUTF8(message);
};

4
www/common/diffMarked.js
View File

@ -60,6 +60,10 @@ define([
return out;
};
renderer.paragraph = function (p) {
return /<media\-tag[\s\S]*>/i.test(p)? p + '\n': '<p>' + p + '</p>\n';
};
var MutationObserver = window.MutationObserver;
var forbiddenTags = [
'SCRIPT',

2
www/common/file-dialog.less
View File

@ -44,6 +44,7 @@
border: 0;
padding: 8px 12px;
margin: 1em;
width: 300px;
}
.close {
@ -60,6 +61,7 @@
.fileContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
}

2
www/common/tippy.css
View File

File diff suppressed because one or more lines are too long

2
www/common/tippy.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
www/common/toolbar2.js
View File

@ -308,7 +308,7 @@ define([
toolbar.userlistContent = $content;
var $container = $('<span>', {id: 'userButtons'});
var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
var $button = $('<button>').appendTo($container);
$('<span>',{'class': 'buttonTitle'}).appendTo($button);
@ -446,6 +446,7 @@ define([
//$shareBlock.find('button').attr('id', 'shareButton');
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
$shareBlock.addClass('shareButton');
$shareBlock.find('button').attr('title', Messages.shareButton);
if (hashes.editHash) {
$shareBlock.find('a.editShare').click(function () {
@ -628,7 +629,7 @@ define([
title: Messages.header_logoTitle,
'class': "cryptpad-logo"
}).append($('<img>', {
src: '/customize/images/logo_white.svg'
src: '/customize/images/logo_white.png'
}));
var onClick = function (e) {
e.preventDefault();
@ -774,6 +775,7 @@ define([
userMenuCfg.displayChangeName = 1;
}
Cryptpad.createUserAdminMenu(userMenuCfg);
$userAdmin.find('button').attr('title', Messages.userAccountButton);
var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
$userButton.click(function (e) {

3
www/contacts/main.js
View File

@ -51,7 +51,8 @@ define([
APP.messenger.setEditable(true);
});
APP.messenger = Cryptpad.initMessaging(Cryptpad, $list, $messages);
var ui = APP.ui = Cryptpad.initMessagingUI(Cryptpad, $list, $messages);
APP.messenger = Cryptpad.initMessaging(Cryptpad, ui);
var $infoBlock = $('<div>', {'class': 'info'}).appendTo($messages);
$('<h2>').text(Messages.contacts_info1).appendTo($infoBlock);

2
www/drive/main.js
View File

@ -1374,6 +1374,8 @@ define([
} else {
$gridButton.addClass('active');
}
$listButton.attr('title', Messages.fm_viewListButton);
$gridButton.attr('title', Messages.fm_viewGridButton);
$container.append($listButton).append($gridButton);
};

6
www/file/file.less
View File

@ -128,9 +128,3 @@ media-tag {
z-index: 10000;
display: block;
}
body #uploadStatusContainer {
background-color: rgba(255, 255, 255, 0.9);
color: black;
opacity: 0.9;
}

3
www/pad/main.js
View File

@ -520,14 +520,17 @@ define([
$collapse.removeClass('fa-question');
var updateIcon = function () {
$collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');
$collapse.attr('title', '');
var isCollapsed = !$bar.find('.cke_toolbox_main').is(':visible');
if (isCollapsed) {
if (!initializing) { Cryptpad.feedback('HIDETOOLBAR_PAD'); }
$collapse.addClass('fa-caret-down');
$collapse.attr('title', Messages.pad_showToolbar);
}
else {
if (!initializing) { Cryptpad.feedback('SHOWTOOLBAR_PAD'); }
$collapse.addClass('fa-caret-up');
$collapse.attr('title', Messages.pad_hideToolbar);
}
};
updateIcon();

5
www/poll/main.js
View File

@ -11,6 +11,7 @@ define([
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/customize/src/less/toolbar.less',
'less!/customize/src/less/cryptpad.less',
'less!/poll/poll.less',
@ -135,7 +136,7 @@ define([
var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
$createOption.append(APP.$createRow);
$commitCell.append(APP.$commit);
$('#create-user, #create-option').css('display', 'inline-block');
$('#create-user, #create-option').css('display', 'inline-flex');
if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
var width = $('#table').outerWidth();
if (width) {
@ -458,7 +459,7 @@ define([
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
$('#howItWorks').toggle(help);
$('#help').text(msg).attr('title', msg);
$('#help').text(msg);
};
var Title;

21
www/poll/poll.less
View File

@ -55,9 +55,14 @@ body {
width: 400px;
}
input[type="text"], textarea {
background-color: white;
color: black;
border: 0;
}
input[type="text"][disabled], textarea[disabled] {
background-color: transparent;
font: white;
border: 0px;
}
@ -114,6 +119,7 @@ table#table {
min-height: 5em;
font-size: 20px;
font-weight: bold;
border: 1px solid black;
}
#description[disabled] {
@ -132,6 +138,10 @@ table#table {
div.upper {
width: 80%;
margin: auto;
& > * {
margin-right: 1em;
}
}
// from cryptpad.less
@ -329,7 +339,6 @@ form.realtime, div.realtime {
input {
&[type="text"] {
height: auto;
border: 1px solid @base;
width: 80%;
}
}
@ -375,6 +384,7 @@ form.realtime, div.realtime {
//border-radius: 20px 0 0 20px;
input[type="text"] {
width: ~"calc(100% - 50px)";
padding: 0 0.5em;
}
.edit {
float:right;
@ -460,3 +470,10 @@ form.realtime, div.realtime {
#adduser { .top-left; }
#addoption { .bottom-left; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
}

26
www/slide/slide.less
View File

@ -336,6 +336,15 @@ div#modal #content, #print {
padding-left: 0.3em;
}
// fixes image overflowing
media-tag {
height: 100%;
& + * {
margin-top: 1rem;
}
}
img {
position: relative;
min-width: 1%;
@ -383,19 +392,6 @@ p {
//flex: 1;
}
media-tag {
min-height: 0;
flex: 1;
display: flex;
flex-flow: column;
text-align: center;
}
@import "../customize/src/less2/include/mediatag.less";
media-tag img {
flex: 1;
max-height: 100% !important;
}
media-tag iframe {
min-height: 100%;
}
.mediatag_base();

16
www/whiteboard/main.js
View File

@ -15,6 +15,7 @@ define([
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/customize/src/less/cryptpad.less',
'less!/whiteboard/whiteboard.less',
'less!/customize/src/less/toolbar.less',
@ -89,13 +90,8 @@ window.canvas = canvas;
ctx.strokeStyle = '#000000';
ctx.stroke();
var img = ccanvas.toDataURL("image/png");
var $img = $('<img>', {
src: img,
title: 'Current brush'
});
$controls.find('.selected').html('').append($img);
$controls.find('.selected > img').attr('src', img);
canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
};
@ -103,6 +99,7 @@ window.canvas = canvas;
var val = $width.val();
canvas.freeDrawingBrush.width = Number(val);
$widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
$('#width-val').text(val + 'px');
createCursor();
};
updateBrushWidth();
@ -114,6 +111,7 @@ window.canvas = canvas;
brush.opacity = Number(val);
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
$opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
$('#opacity-val').text((Number(val) * 100) + '%');
createCursor();
};
updateBrushOpacity();
@ -188,7 +186,7 @@ window.canvas = canvas;
var setEditable = function (bool) {
if (readOnly && bool) { return; }
if (bool) { $controls.show(); }
if (bool) { $controls.css('display', 'flex'); }
else { $controls.hide(); }
canvas.isDrawingMode = bool ? module.draw : false;
@ -199,7 +197,7 @@ window.canvas = canvas;
canvas.forEachObject(function (object) {
object.selectable = bool;
});
$canvasContainer.css('border-color', bool? 'black': 'red');
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
};
var saveImage = module.saveImage = function () {
@ -289,7 +287,7 @@ window.canvas = canvas;
var $color = module.$color = $('<button>', {
id: "color-picker",
title: "choose a color",
title: Messages.canvas_chooseColor,
'class': "fa fa-square rightside-button",
})
.on('click', function () {

66
www/whiteboard/whiteboard.less
View File

@ -27,20 +27,29 @@ body {
}
// created by fabricjs. styled so defaults don't break anything
.canvas-container {
border: 1px solid black;
margin: auto;
background: white;
& > canvas {
border: 1px solid black;
}
}
// contains user tools
#controls {
display: block;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-top: 1px solid black;
background: white;
height: 100px;
line-height: 100px;
padding-bottom: 5px;
padding: 1em;
& > * + * {
margin: 0;
margin-left: 1em;
}
#width, #opacity {
.middle;
@ -50,15 +59,36 @@ body {
vertical-align: middle;
}
.selected {
margin-left: 20px;
display: inline-block;
height: 135px;
width: 135px;
display: flex;
align-items: center;
justify-content: center;
z-index: 9001;
text-align: center;
img {
vertical-align: middle;
width: 100px;
height: 100px;
}
.range-group {
display: flex;
flex-direction: column;
position: relative;
input[type="range"] {
background-color: inherit;
}
& > span {
cursor: default;
position: absolute;
top: 0;
right: 0;
}
}
.range-group:first-of-type {
margin-left: 2em;
}
.range-group:last-of-type {
margin-right: 1em;
}
}
@ -70,13 +100,21 @@ body {
display: flex;
justify-content: space-between;
padding: 1em;
span.palette-color {
height: 4vw;
width: 4vw;
display: inline-block;
display: block;
margin: 5px;
border: 1px solid black;
vertical-align: top;
border-radius: 50%;
transition: transform 0.1s;
&:hover {
transform: scale(1.2);
}
}
}
@ -87,6 +125,7 @@ body {
// input[type=color] must exist in the dom to work correctly
// styled so that they don't break layouts
#pickers {
visibility: hidden;
position: absolute;
@ -94,4 +133,3 @@ body {
height: 0;
z-index: -5;
}