Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

pull/1/head
ansuz 8 years ago
commit 45f180955b

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -577,7 +577,7 @@ noscript {
line-height: 24px; line-height: 24px;
vertical-align: middle; vertical-align: middle;
.usage { .usage {
height: 24px; height: 100%;
display: inline-block; display: inline-block;
background: blue; background: blue;
position: absolute; position: absolute;

@ -32,6 +32,9 @@
z-index: 1000; z-index: 1000;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
line-height: 1em;
&.left { &.left {
right: 0; right: 0;
@ -45,7 +48,7 @@
color: black; color: black;
padding: 5px 16px; padding: 5px 16px;
text-decoration: none; text-decoration: none;
display: block; display: flex;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -53,6 +56,16 @@
user-select: none; user-select: none;
float: none; float: none;
text-align: left; text-align: left;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
line-height: 1em;
.fa {
width: 20px;
text-align: center;
margin-right: 5px;
}
&:hover { &:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
@ -77,7 +90,13 @@
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left; text-align: left;
color: black;
font-size: 14px;
* {
font-size: 14px;
}
h2 { h2 {
color: black;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
background-color: #EEEEEE; background-color: #EEEEEE;

@ -28,16 +28,38 @@
#cke_1_contents { #cke_1_contents {
margin-top: -1px; margin-top: -1px;
display: flex; display: flex;
overflow: visible;
} }
.padColor { color: @toolbar-pad-bg; }
.codeColor { color: @toolbar-code-bg; }
.slideColor { color: @toolbar-slide-bg; }
.pollColor { color: @toolbar-poll-bg; }
.fileColor { color: @toolbar-file-bg; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.defaultColor { color: @toolbar-default-bg; }
.userlist-drawer { .userlist-drawer {
font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
min-width: 175px;
width: 175px; width: 175px;
display: block; display: block;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
.close {
position: absolute;
margin-top: -11px;
margin-left: 149px;
font-size: 15px;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
h2 { h2 {
color: inherit; color: inherit;
font-size: 1.2em; font-size: 1.2em;
@ -96,24 +118,20 @@ body {
} }
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content { .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
background-color: lighten(@bgcolor, 8%); background-color: lighten(@bgcolor, 8%);
button:hover { button:hover, button.active {
background-color: @bgcolor; background-color: @bgcolor;
} }
} }
.hoverable:hover { .hoverable:hover {
.editable { .editable, .pencilIcon {
cursor: text; cursor: text;
border: 1px solid darken(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
transition: all 0.15s;
color: @color; color: @color;
} }
.pencilIcon { .editable {
border: 1px solid darken(@bgcolor, 15%); cursor: text;
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
} }
} }
.saveIcon { .saveIcon {
@ -129,7 +147,7 @@ body {
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
} }
.dropdown-bar-content { /*.dropdown-bar-content {
background: darken(@bgcolor, 5%); background: darken(@bgcolor, 5%);
border: 1px solid @color; border: 1px solid @color;
color: @color; color: @color;
@ -155,7 +173,7 @@ body {
background-color: @bgcolor; background-color: @bgcolor;
} }
} }
} }*/
} }
} }
@ -229,9 +247,6 @@ body {
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
.dropdown-bar-content {
line-height: 14px;
}
} }
.separator { .separator {
@ -248,6 +263,7 @@ body {
} }
button { button {
transition: all 0.15s;
.unselectable(); .unselectable();
&#shareButton, &.buttonSuccess { &#shareButton, &.buttonSuccess {
// Bootstrap 4 colors // Bootstrap 4 colors
@ -297,14 +313,9 @@ body {
} }
} }
.cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button { .cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
//background-color: #fff;
//border-color: #ccc;
background: transparent; background: transparent;
&:hover { &:hover {
//color: #292b2c;
background-color: rgba(50,50,50,0.3); background-color: rgba(50,50,50,0.3);
//background-color: #e6e6e6;
border-color: #adadad;
} }
} }
@ -603,7 +614,7 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
margin: 0 20px; margin: 0 10px;
.title, .pencilIcon, .saveIcon { .title, .pencilIcon, .saveIcon {
font-size: 25px; font-size: 25px;
vertical-align: middle; vertical-align: middle;
@ -671,6 +682,8 @@ body {
} }
order: 2; order: 2;
text-align: center; text-align: center;
font-size: 32px;
margin-left: 10px;
&> button { &> button {
display: flex; display: flex;
align-items: center; align-items: center;
@ -696,10 +709,6 @@ body {
color: inherit; color: inherit;
} }
} }
.dropdown-bar-content {
font-size: 12px;
line-height: 14px;
}
} }
.cryptpad-link { .cryptpad-link {
display: inline-flex; display: inline-flex;
@ -728,6 +737,7 @@ body {
display: inline-block; display: inline-block;
order: 5; order: 5;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
color: white;
&> * { &> * {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -739,13 +749,15 @@ body {
cursor: pointer; cursor: pointer;
} }
.cryptpad-user-dropdown { .cryptpad-user-dropdown {
margin-left: 20px; z-index: 10000;
//margin-left: 20px;
height: 64px; height: 64px;
width: 64px; width: 64px;
padding: 0px; padding: 0px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
transition: all 0.15s;
&:hover { &:hover {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
} }
@ -838,6 +850,9 @@ body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index:1000; z-index:1000;
.fa {
font-size: 17px;
}
&> span { &> span {
box-sizing: border-box; box-sizing: border-box;
width: 150px; width: 150px;

@ -241,7 +241,7 @@ define(function () {
out.fm_templateName = "Modèles"; out.fm_templateName = "Modèles";
out.fm_searchName = "Recherche"; out.fm_searchName = "Recherche";
out.fm_searchPlaceholder = "Rechercher..."; out.fm_searchPlaceholder = "Rechercher...";
out.fm_newButton = "Ajouter à ce dossier"; out.fm_newButton = "Nouveau";
out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant"; out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
out.fm_newFolder = "Nouveau dossier"; out.fm_newFolder = "Nouveau dossier";
out.fm_newFile = "Nouveau pad"; out.fm_newFile = "Nouveau pad";

@ -244,7 +244,7 @@ define(function () {
out.fm_templateName = "Templates"; out.fm_templateName = "Templates";
out.fm_searchName = "Search"; out.fm_searchName = "Search";
out.fm_searchPlaceholder = "Search..."; out.fm_searchPlaceholder = "Search...";
out.fm_newButton = "Add to this folder"; out.fm_newButton = "New";
out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder"; out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
out.fm_newFolder = "New folder"; out.fm_newFolder = "New folder";
out.fm_newFile = "New pad"; out.fm_newFile = "New pad";

@ -263,5 +263,28 @@ define([
}; };
}; };
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
UI.getIcon = function (type) {
var $icon;
switch(type) {
case 'pad': $icon = $padIcon.clone(); break;
case 'file': $icon = $fileAppIcon.clone(); break;
case 'code': $icon = $codeIcon.clone(); break;
case 'slide': $icon = $slideIcon.clone(); break;
case 'poll': $icon = $pollIcon.clone(); break;
case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
default: $icon = $fileIcon.clone();
}
return $icon;
};
return UI; return UI;
}); });

@ -12,12 +12,13 @@ define([
'/common/common-metadata.js', '/common/common-metadata.js',
'/common/common-codemirror.js', '/common/common-codemirror.js',
'/common/common-file.js', '/common/common-file.js',
'/file/file-crypto.js',
'/common/clipboard.js', '/common/clipboard.js',
'/common/pinpad.js', '/common/pinpad.js',
'/customize/application_config.js' '/customize/application_config.js'
], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Title, Metadata, ], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Title, Metadata,
CodeMirror, Files, Clipboard, Pinpad, AppConfig) { CodeMirror, Files, FileCrypto, Clipboard, Pinpad, AppConfig) {
/* This file exposes functionality which is specific to Cryptpad, but not to /* This file exposes functionality which is specific to Cryptpad, but not to
any particular pad type. This includes functions for committing metadata any particular pad type. This includes functions for committing metadata
@ -65,6 +66,7 @@ define([
common.errorLoadingScreen = UI.errorLoadingScreen; common.errorLoadingScreen = UI.errorLoadingScreen;
common.notify = UI.notify; common.notify = UI.notify;
common.unnotify = UI.unnotify; common.unnotify = UI.unnotify;
common.getIcon = UI.getIcon;
// import common utilities for export // import common utilities for export
common.find = Util.find; common.find = Util.find;
@ -850,8 +852,9 @@ define([
common.createUsageBar = function (cb) { common.createUsageBar = function (cb) {
// getPinnedUsage updates common.account.usage, and other values // getPinnedUsage updates common.account.usage, and other values
// so we can just use those and only check for errors // so we can just use those and only check for errors
var todo = function (err) {
var $container = $('<span>', {'class':'limit-container'}); var $container = $('<span>', {'class':'limit-container'});
var todo = function (err) {
$container.html('');
if (err) { if (err) {
return void window.setTimeout(function () { return void window.setTimeout(function () {
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
@ -867,8 +870,7 @@ define([
var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container); var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
var quota = usage/limit; var quota = usage/limit;
var width = Math.floor(Math.min(quota, 1)*$limit.width()); // the bar is 200px width var $usage = $('<span>', {'class': 'usage'}).css('width', quota*100+'%');
var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
var makeDonateButton = function () { var makeDonateButton = function () {
$('<a>', { $('<a>', {
@ -921,9 +923,9 @@ define([
window.setTimeout(function () { window.setTimeout(function () {
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
}, LIMIT_REFRESH_RATE); }, LIMIT_REFRESH_RATE);
cb(err, $container);
}; };
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
cb(null, $container);
}; };
var prepareFeedback = common.prepareFeedback = function (key) { var prepareFeedback = common.prepareFeedback = function (key) {
@ -975,9 +977,14 @@ define([
var ev = { var ev = {
target: data.target target: data.target
}; };
if (data.filter && !data.filter(file)) {
common.log('TODO: invalid avatar (type or size)');
return;
}
data.FM.handleFile(file, ev); data.FM.handleFile(file, ev);
if (callback) { callback(); } if (callback) { callback(); }
}); });
if (data.accept) { $input.attr('accept', data.accept); }
button.click(function () { $input.click(); }); button.click(function () { $input.click(); });
break; break;
case 'template': case 'template':
@ -1099,8 +1106,7 @@ define([
} }
button = $('<button>', { button = $('<button>', {
title: Messages.historyButton, title: Messages.historyButton,
'class': "fa fa-history", 'class': "fa fa-history history",
style: 'font:'+size+' FontAwesome'
}); });
if (data.histConfig) { if (data.histConfig) {
button button
@ -1130,6 +1136,70 @@ define([
return button; return button;
}; };
common.avatarAllowedTypes = [
'image/png',
'image/jpeg',
'image/jpg',
'image/gif',
];
common.displayAvatar = function ($container, href) {
var MutationObserver = window.MutationObserver;
$container.html('');
if (href) {
var parsed = common.parsePadUrl(href);
var secret = common.getSecrets('file', parsed.hash);
if (secret.keys && secret.channel) {
var cryptKey = secret.keys && secret.keys.fileKeyStr;
var hexFileName = common.base64ToHex(secret.channel);
var src = common.getBlobPathFromHex(hexFileName);
common.getFileSize(href, function (e, data) {
if (e) { return void console.error(e); }
if (typeof data !== "number") { return; }
if (common.bytesToMegabytes(data) > 0.5) { return; }
var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
require(['/common/media-tag.js'], function (MediaTag) {
MediaTag.CryptoFilter.setAllowedMediaTypes(common.avatarAllowedTypes);
MediaTag($img[0]);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
console.log(mutation);
if (mutation.addedNodes.length > 1 ||
mutation.addedNodes[0].nodeName !== 'IMG') {
$img.remove();
return;
//TODO display default avatar
}
var $image = $img.find('img');
var onLoad = function () {
var w = $image.width();
var h = $image.height();
if (w>h) {
$image.css('max-height', '100%');
$img.css('flex-direction', 'row');
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'column');
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
});
});
});
}
}
};
// Create a button with a dropdown menu // Create a button with a dropdown menu
// input is a config object with parameters: // input is a config object with parameters:
// - container (optional): the dropdown container (span) // - container (optional): the dropdown container (span)

@ -156,7 +156,6 @@ define([
MediaTag(el); MediaTag(el);
var observer = new MutationObserver(function(mutations) { var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
console.log(mutation);
if (mutation.type === 'childList') { if (mutation.type === 'childList') {
var list_values = [].slice.call(el.children); var list_values = [].slice.call(el.children);
mediaMap[el.getAttribute('src')] = list_values; mediaMap[el.getAttribute('src')] = list_values;

@ -71,7 +71,7 @@ define([
$('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer); $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
//$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$toolbar.append($topContainer) $toolbar.append($topContainer)
@ -177,9 +177,8 @@ define([
var numberOfViewUsers = numberOfUsers - userList.length; var numberOfViewUsers = numberOfUsers - userList.length;
// Update the userlist // Update the userlist
var $usersTitle = $('<h2>').text(Messages.users); var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
var $editUsers = $userlistContent;
$editUsers.html('').append($usersTitle);
var $editUsersList = $('<div>', {'class': 'userlist-others'}); var $editUsersList = $('<div>', {'class': 'userlist-others'});
@ -248,7 +247,10 @@ define([
throw new Error("You must provide a `userList` object to display the userlist"); throw new Error("You must provide a `userList` object to display the userlist");
} }
var $content = $('<div>', {'class': 'userlist-drawer'}); var $content = $('<div>', {'class': 'userlist-drawer'});
var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
$('<h2>').text(Messages.users).appendTo($content);
$('<p>', {'class': USERLIST_CLS}).appendTo($content); $('<p>', {'class': USERLIST_CLS}).appendTo($content);
toolbar.userlistContent = $content; toolbar.userlistContent = $content;
var $container = $('<span>', {id: 'userButtons'}); var $container = $('<span>', {id: 'userButtons'});
@ -263,15 +265,41 @@ define([
config.$contentContainer.prepend($content); config.$contentContainer.prepend($content);
} }
var $ck = config.$container.find('.cke_toolbox_main');
var hide = function () {
$content.hide();
$button.removeClass('active');
$ck.css({
'display': '',
'padding-left': '',
'margin-bottom': ''
});
};
var show = function () {
$content.show();
$button.addClass('active');
$ck.css({
'display': 'inline-block',
'padding-left': '175px',
'margin-bottom': '-3px'
});
$content.css('margin-top', (-$ck.height())+'px');
};
$closeIcon.click(hide);
$button.click(function () { $button.click(function () {
$content.toggle();
var visible = $content.is(':visible'); var visible = $content.is(':visible');
if (visible) { hide(); }
else { show(); }
visible = !visible;
Cryptpad.setAttribute('userlist-drawer', visible); Cryptpad.setAttribute('userlist-drawer', visible);
Cryptpad.feedback(visible?'USERLIST_SHOW': 'USERLIST_HIDE'); Cryptpad.feedback(visible?'USERLIST_SHOW': 'USERLIST_HIDE');
}); });
Cryptpad.getAttribute('userlist-drawer', function (err, val) { Cryptpad.getAttribute('userlist-drawer', function (err, val) {
if (val === false) { $content.hide(); } if (val === false) { return void hide(); }
show();
}); });
return $container; return $container;
@ -658,9 +686,10 @@ define([
}; };
var createNewPad = function (toolbar) { var createNewPad = function (toolbar) {
var $newPad = $('<span>', { /*var $newPad = $('<span>', {
'class': NEWPAD_CLS + " dropdown-bar" 'class': NEWPAD_CLS + " dropdown-bar"
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);*/
var $newPad = toolbar.$top.find('.'+NEWPAD_CLS).show();
var pads_options = []; var pads_options = [];
Config.availablePadTypes.forEach(function (p) { Config.availablePadTypes.forEach(function (p) {
@ -673,19 +702,20 @@ define([
'target': '_blank', 'target': '_blank',
'href': '/' + p + '/', 'href': '/' + p + '/',
}, },
content: Messages.type[p] content: $('<div>').append(Cryptpad.getIcon(p)).html() + Messages.type[p]
}); });
}); });
var dropdownConfig = { var dropdownConfig = {
text: '', // Button initial text text: '', // Button initial text
options: pads_options, // Entries displayed in the menu options: pads_options, // Entries displayed in the menu
container: $newPad, container: $newPad,
left: true,
feedback: /drive/.test(window.location.pathname)? feedback: /drive/.test(window.location.pathname)?
'DRIVE_NEWPAD': 'NEWPAD', 'DRIVE_NEWPAD': 'NEWPAD',
}; };
var $newPadBlock = Cryptpad.createDropdown(dropdownConfig); var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
$newPadBlock.find('button').attr('title', Messages.newButtonTitle); $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
$newPadBlock.find('button').addClass('fa fa-plus'); $newPadBlock.find('button').addClass('fa fa-th');
return $newPadBlock; return $newPadBlock;
}; };

@ -171,8 +171,16 @@ span {
white-space: nowrap; white-space: nowrap;
max-width: 500px; max-width: 500px;
min-width: 200px; min-width: 200px;
padding: 10px 0px; padding: 0px;
color: @tree-fg; color: @tree-fg;
display: flex;
flex-flow: column;
max-height: 100%;
.categories-container {
flex: 1;
max-width: 500px;
overflow: auto;
}
img.icon { img.icon {
margin-bottom: 3px; margin-bottom: 3px;
margin-left: -2px; margin-left: -2px;
@ -218,10 +226,20 @@ span {
margin-top: 0; margin-top: 0;
} }
#searchContainer { #searchContainer {
margin-bottom: 20px;
text-align: center; text-align: center;
padding: 5px 0; padding: 0;
input { input {
width: 80%; outline-width: 0px;
border-radius: 0;
width: 100%;
border: 1px solid #ccc;
border-right: 0;
height: 32px;
padding: 0 5px;
&:focus {
outline-width: 0px;
}
} }
} }
.fa.expcol { .fa.expcol {
@ -284,7 +302,27 @@ span {
} }
} }
} }
.limit-container {
display: inline-flex;
flex-flow: column-reverse;
width: 100%;
margin-top: 20px;
.upgrade {
padding: 0;
line-height: 25px;
height: 25px;
margin: 0 3px;
border-radius: 0;
}
.cryptpad-limit-bar {
width: ~"calc(100% - 6px)";
height: 25px;
line-height: 25px;
.usage {
height: 100%;
}
}
}
} }
/* CONTENT */ /* CONTENT */
@ -545,17 +583,15 @@ span {
/* Toolbar */ /* Toolbar */
#driveToolbar { #driveToolbar {
background: @toolbar-bg; background: lighten(@toolbar-drive-bg, 8%);
color: @toolbar-fg; color: @toolbar-drive-color;
//height: 30px; //height: 30px;
//display: flex; //display: flex;
//flex-flow: row; //flex-flow: row;
border-top: 1px solid @toolbar-border-col;
border-bottom: ;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 100; z-index: 100;
box-sizing: content-box; box-sizing: border-box;
padding: 0 6px; height: 32px;
padding: 0;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -564,8 +600,71 @@ span {
height: 100%; height: 100%;
} }
.history {
float: right;
}
.rightside, .leftside {
display: inline-block;
margin: 0;
padding: 0;
.fa {
margin: 0;
}
button {
height: 100%;
padding: 0 10px;
border: none;
border-radius: 0;
box-sizing: border-box;
background: transparent;
font-size: 17px;
color: @toolbar-drive-color;
transition: all 0.15s;
.fa, span {
font-size: 17px;
}
&:hover {
background: @toolbar-drive-bg;
}
&.active {
display: none;
}
}
}
.rightside {
float: right;
& > * {
float: right;
}
#contextButtonsContainer {
display: inline-block;
height: 100%;
}
padding-left: 10px;
}
.leftside {
& > span {
height: 100%;
margin: 0;
}
button {
padding: 0 10px;
.fa {
margin-right: 5px;
}
.buttonTitle {
display: inline-flex;
height: 32px;
align-items: center;
span:not(.fa) {
line-height: 23px;
}
}
}
}
button { button {
height: 24px;
font: @toolbar-button-font; font: @toolbar-button-font;
span { span {
font: @toolbar-button-font; font: @toolbar-button-font;
@ -573,15 +672,6 @@ span {
.fa, &.fa { .fa, &.fa {
font-family: FontAwesome; font-family: FontAwesome;
} }
&.element {
height: 26px;
width: 26px;
padding: 0;
box-sizing: border-box;
}
&.new {
padding: 0 5px;
}
} }
/* The container <div> - needed to position the dropdown content */ /* The container <div> - needed to position the dropdown content */
.dropdown-bar { .dropdown-bar {
@ -590,10 +680,10 @@ span {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.right { /*.right {
float: right; float: right;
/* Right-side buttons */ /* Right-side buttons */
button { /* button {
display: inline-block; display: inline-block;
&.active { &.active {
display: none; display: none;
@ -602,28 +692,16 @@ span {
margin-right: 0px; margin-right: 0px;
} }
} }
} }*/
.dropdown-bar-content { .dropdown-bar-content {
margin-right: 2px; margin-right: 2px;
} }
.leftside {
width: auto;
margin: 0;
padding: 0;
display: inline-block;
}
.rightside {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
.path { .path {
flex: 1; flex: 1;
width: 100%; width: 100%;
height: 30px; height: 32px;
line-height: 30px; line-height: 32px;
cursor: default; cursor: default;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
@ -632,25 +710,20 @@ span {
max-width: 100%; max-width: 100%;
text-align: left; text-align: left;
.element { .element {
font-size: 17px;
padding: 5px; padding: 5px;
border: 1px solid @toolbar-bg; border: 0;
border-radius: 2px; background: darken(@toolbar-drive-bg, 10%);
color: @toolbar-drive-color;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.15s;
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: @toolbar-path-bg; background: darken(@toolbar-drive-bg, 15%);
border: 1px solid @toolbar-path-border;
}
} }
} }
} }
#contextButtonsContainer {
float: right;
margin: 2px;
button {
vertical-align: top;
}
} }
} }

@ -1,7 +1,7 @@
define([ define([
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/drive/file.css', 'less!/drive/file.less',
'less!/customize/src/less/cryptpad.less', 'less!/customize/src/less/cryptpad.less',
'less!/customize/src/less/toolbar.less', 'less!/customize/src/less/toolbar.less',
], function () {}); ], function () {});

@ -158,13 +158,6 @@ define([
//var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"}); //var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"}); var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone(); var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
//var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"}); //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"}); var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
var $templateIcon = $('<span>', {"class": "fa fa-cubes"}); var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
@ -172,8 +165,8 @@ define([
var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"}); var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
//var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"}); //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"}); var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
var $listIcon = $('<span>', {"class": "fa fa-list"}); var $listIcon = $('<button>', {"class": "fa fa-list"});
var $gridIcon = $('<span>', {"class": "fa fa-th"}); var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"}); var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"}); var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"}); var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
@ -1141,7 +1134,7 @@ define([
}; };
var getFileIcon = function (id) { var getFileIcon = function (id) {
var $icon = $fileIcon.clone(); var $icon = Cryptpad.getIcon();
var data = filesOp.getFileData(id); var data = filesOp.getFileData(id);
if (!data) { return $icon; } if (!data) { return $icon; }
@ -1149,15 +1142,16 @@ define([
var href = data.href; var href = data.href;
if (!href) { return $icon; } if (!href) { return $icon; }
if (href.indexOf('/pad/') !== -1) { $icon = $padIcon.clone(); } if (href.indexOf('/pad/') !== -1) { $icon = Cryptpad.getIcon('pad'); }
else if (href.indexOf('/code/') !== -1) { $icon = $codeIcon.clone(); } else if (href.indexOf('/code/') !== -1) { $icon = Cryptpad.getIcon('code'); }
else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); } else if (href.indexOf('/slide/') !== -1) { $icon = Cryptpad.getIcon('slide'); }
else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); } else if (href.indexOf('/poll/') !== -1) { $icon = Cryptpad.getIcon('poll'); }
else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); } else if (href.indexOf('/whiteboard/') !== -1) { $icon = Cryptpad.getIcon('whiteboard'); }
else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); } else if (href.indexOf('/file/') !== -1) { $icon = Cryptpad.getIcon('file'); }
return $icon; return $icon;
}; };
var getIcon = Cryptpad.getIcon;
// Create the "li" element corresponding to the file/folder located in "path" // Create the "li" element corresponding to the file/folder located in "path"
var createElement = function (path, elPath, root, isFolder) { var createElement = function (path, elPath, root, isFolder) {
@ -1285,7 +1279,10 @@ define([
} }
if (idx === 0) { name = getPrettyName(p); } if (idx === 0) { name = getPrettyName(p); }
else { $title.append(' > '); } else {
var $span2 = $('<span>', {'class': 'element'}).text(' > ');
$title.append($span2);
}
$span.text(name).appendTo($title); $span.text(name).appendTo($title);
}); });
@ -1335,17 +1332,13 @@ define([
}; };
// Create the button allowing the user to switch from list to icons modes // Create the button allowing the user to switch from list to icons modes
var createViewModeButton = function () { var createViewModeButton = function ($container) {
var $block = $('<div>', { /*var $block = $('<div>', {
'class': 'dropdown-bar right changeViewModeContainer' 'class': 'dropdown-bar right changeViewModeContainer'
}); });*/
var $listButton = $('<button>', { var $listButton = $listIcon.clone().addClass('element');
'class': 'element btn btn-secondary' var $gridButton = $gridIcon.clone().addClass('element');
}).append($listIcon.clone());
var $gridButton = $('<button>', {
'class': 'element btn btn-secondary'
}).append($gridIcon.clone());
$listButton.click(function () { $listButton.click(function () {
$gridButton.removeClass('active'); $gridButton.removeClass('active');
@ -1369,11 +1362,10 @@ define([
} else { } else {
$gridButton.addClass('active'); $gridButton.addClass('active');
} }
$block.append($listButton).append($gridButton); $container.append($listButton).append($gridButton);
return $block;
}; };
var createNewButton = function (isInRoot) { var createNewButton = function (isInRoot, $container) {
if (!APP.editable) { return; } if (!APP.editable) { return; }
if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
@ -1383,13 +1375,13 @@ define([
options.push({ options.push({
tag: 'a', tag: 'a',
attributes: {'class': 'newFolder'}, attributes: {'class': 'newFolder'},
content: Messages.fm_folder content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
}); });
options.push({tag: 'hr'}); options.push({tag: 'hr'});
options.push({ options.push({
tag: 'a', tag: 'a',
attributes: {'class': 'uploadFile'}, attributes: {'class': 'uploadFile'},
content: Messages.uploadButton content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
}); });
options.push({tag: 'hr'}); options.push({tag: 'hr'});
} }
@ -1407,21 +1399,21 @@ define([
options.push({ options.push({
tag: 'a', tag: 'a',
attributes: attributes, attributes: attributes,
content: Messages.type[type] content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
}); });
}); });
var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'})); var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
var dropdownConfig = { var dropdownConfig = {
text: $plusIcon.html() + Messages.fm_newButton, text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
options: options, options: options,
feedback: 'DRIVE_NEWPAD_LOCALFOLDER', feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
}; };
var $block = Cryptpad.createDropdown(dropdownConfig); var $block = Cryptpad.createDropdown(dropdownConfig);
// Custom style: // Custom style:
$block.find('button').addClass('btn').addClass('btn-primary').addClass('new'); $block.find('button').addClass('new');
$block.find('button').attr('title', Messages.fm_newButtonTitle); $block.find('button').attr('title', Messages.fm_newButtonTitle);
// Handlers // Handlers
@ -1459,7 +1451,7 @@ define([
window.open('/' + type + '/'); window.open('/' + type + '/');
}); });
return $block; $container.append($block);
}; };
var hideNewButton = function () { var hideNewButton = function () {
@ -1636,7 +1628,8 @@ define([
$toolbar.html(''); $toolbar.html('');
$('<div>', {'class': 'leftside'}).appendTo($toolbar); $('<div>', {'class': 'leftside'}).appendTo($toolbar);
$('<div>', {'class': 'path unselectable'}).appendTo($toolbar); $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
$('<div>', {'class': 'rightside'}).appendTo($toolbar); var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
if (APP.$hist) { $rightside.append(APP.$hist); }
return $toolbar; return $toolbar;
}; };
@ -1857,12 +1850,12 @@ define([
if (mode) { if (mode) {
$dirContent.addClass(getViewModeClass()); $dirContent.addClass(getViewModeClass());
} }
createViewModeButton().appendTo($toolbar.find('.rightside')); createViewModeButton($toolbar.find('.rightside'));
} }
var $list = $('<ul>').appendTo($dirContent); var $list = $('<ul>').appendTo($dirContent);
// NewButton can be undefined if we're in read only mode // NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot)); createNewButton(isInRoot, $toolbar.find('.leftside'));
createTitle(path).appendTo($toolbar.find('.path')); createTitle(path).appendTo($toolbar.find('.path'));
@ -2127,10 +2120,15 @@ define([
var s = $tree.scrollTop() || 0; var s = $tree.scrollTop() || 0;
$tree.html(''); $tree.html('');
if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); } if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
if (displayedCategories.indexOf(ROOT) !== -1) { createTree($tree, [ROOT]); } var $div = $('<div>', {'class': 'categories-container'}).appendTo($tree);
if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($tree, [TEMPLATE]); } if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($tree, [FILES_DATA]); } if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($tree, [TRASH]); } if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
//$tree.append($('<div>', {'class': 'filler'}));
$tree.append(APP.$limit);
$tree.scrollTop(s); $tree.scrollTop(s);
}; };
@ -2721,7 +2719,6 @@ define([
var $rightside = toolbar.$rightside; var $rightside = toolbar.$rightside;
$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
var $leftside = toolbar.$leftside;
var $userBlock = toolbar.$userAdmin; var $userBlock = toolbar.$userAdmin;
APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username); APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
@ -2736,8 +2733,7 @@ define([
/* add the usage */ /* add the usage */
Cryptpad.createUsageBar(function (err, $limitContainer) { Cryptpad.createUsageBar(function (err, $limitContainer) {
if (err) { return void logError(err); } if (err) { return void logError(err); }
$leftside.html(''); APP.$limit = $limitContainer;
$leftside.append($limitContainer);
}, true); }, true);
/* add a history button */ /* add a history button */
@ -2755,8 +2751,9 @@ define([
$toolbar: APP.$bar, $toolbar: APP.$bar,
href: window.location.origin + window.location.pathname + '#' + APP.hash href: window.location.origin + window.location.pathname + '#' + APP.hash
}; };
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); APP.$hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
if (APP.loggedIn) { $rightside.append($hist); } APP.$hist.addClass('element');
//if (APP.loggedIn) { $rightside.append($hist); } TODO
if (!readOnly && !APP.loggedIn) { if (!readOnly && !APP.loggedIn) {
var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup'); var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');

@ -196,51 +196,105 @@ define([
cb(); cb();
}; };
var rt = APP.lm.realtime; var rt = APP.lm.realtime;
var placeholder = "URL"; //TODO var placeholder = "URL"; //XXX
createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt); createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
}; };
var addAvatar = function ($container) { var addAvatar = function ($container) {
var $block = $('<div>', {id: AVATAR_ID}).appendTo($container); var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
var $span = $('<span>').appendTo($block); var $span = $('<span>').appendTo($block);
if (APP.lm.proxy.avatar) { var allowedMediaTypes = Cryptpad.avatarAllowedTypes;
//var file = APP.lm.proxy.avatar; var displayAvatar = function () {
var $img = $('<media-tag>').appendTo($span); $span.html('');
$img.attr('src', '/blob/45/45170bcd64aae1726b0b0e06c4360181a08bad9596640863'); if (!APP.lm.proxy.avatar) {
$img.attr('data-crypto-key', 'cryptpad:5vs/ciPzSAyHeP6XRwxpFZt/cjkRC+EE2CRw+/xfcVI='); $('<img>', {
require(['/common/media-tag.js'], function (MediaTag) { src: '/customize/images/avatar.png',
var allowedMediaTypes = [ title: 'Avatar', // XXX
'image/png', alt: 'Avatar'
'image/jpeg', }).appendTo($span);
'image/jpg', return;
'image/gif',
];
MediaTag.CryptoFilter.setAllowedMediaTypes(allowedMediaTypes);
MediaTag($img[0]);
});
} }
Cryptpad.displayAvatar($span, APP.lm.proxy.avatar);
if (APP.readOnly) { return; } if (APP.readOnly) { return; }
//var $button = $('<button>', {'class': 'btn btn-success'}).text('TODO: change avatar'); var $delButton = $('<button>', {'class': 'delete btn btn-danger fa fa-times'}); //XXX
//$block.append($button); $span.append($delButton);
$delButton.click(function () {
console.log('clicked');
var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
Cryptpad.unpinPads([oldChanId], function (e) {
if (e) { Cryptpad.log(e); }
console.log('unpinned');
delete APP.lm.proxy.avatar;
delete Cryptpad.getProxy().profile.avatar;
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
console.log('synced1');
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
Cryptpad.whenRealtimeSyncs(driveRt, function () {
console.log('synced2');
displayAvatar();
});
});
});
});
};
displayAvatar();
if (APP.readOnly) { return; }
var fmConfig = { var fmConfig = {
noHandlers: true, noHandlers: true,
noStore: true, noStore: true,
body: $('body'), body: $('body'),
onUploaded: function (ev, data) { onUploaded: function (ev, data) {
console.log(data); var chanId = Cryptpad.hrefToHexChannelId(data.url);
var profile = Cryptpad.getProxy().profile;
var old = profile.avatar;
var todo = function () {
Cryptpad.pinPads([chanId], function (e) {
if (e) { return void Cryptpad.log(e); }
APP.lm.proxy.avatar = data.url;
Cryptpad.getProxy().profile.avatar = data.url;
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
Cryptpad.whenRealtimeSyncs(driveRt, function () {
displayAvatar();
});
});
});
};
if (old) {
var oldChanId = Cryptpad.hrefToHexChannelId(old);
Cryptpad.unpinPads([oldChanId], function (e) {
if (e) { Cryptpad.log(e); }
todo();
});
return;
}
todo();
} }
}; };
APP.FM = Cryptpad.createFileManager(fmConfig); APP.FM = Cryptpad.createFileManager(fmConfig);
var data = {FM: APP.FM}; var data = {
$block.append(Cryptpad.createButton('upload', false, data)); FM: APP.FM,
filter: function (file) {
var sizeMB = Cryptpad.bytesToMegabytes(file.size);
var type = file.type;
return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
},
accept: ".gif,.jpg,.jpeg,.png"
};
var $upButton = Cryptpad.createButton('upload', false, data);
$upButton.text(" Upload a new avatar");
$upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
$block.append($upButton);
}; };
var addDescription = function ($container) { var addDescription = function ($container) {
var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container); var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
if (APP.readOnly) { if (APP.readOnly) {
if (!APP.lm.proxy.description.trim()) { return void $block.hide(); }
var $div = $('<div>', {'class': 'rendered'}).appendTo($block); var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
var val = Marked(APP.lm.proxy.description); var val = Marked(APP.lm.proxy.description);
$div.html(val); $div.html(val);
@ -274,13 +328,10 @@ define([
var addPublicKey = function ($container) { var addPublicKey = function ($container) {
var $block = $('<div>', {id: PUBKEY_ID}); var $block = $('<div>', {id: PUBKEY_ID});
var pubKey = Cryptpad.getProxy().edPublic;
$block.text(pubKey);
$container.append($block); $container.append($block);
}; };
var onReady = function () { var onReady = function () {
// TODO: on reconnect, this is called multiple times...
APP.$container.find('#'+CREATE_ID).remove(); APP.$container.find('#'+CREATE_ID).remove();
if (!APP.initialized) { if (!APP.initialized) {
@ -332,13 +383,32 @@ define([
var secret = Cryptpad.getSecrets(); var secret = Cryptpad.getSecrets();
obj.profile = {}; obj.profile = {};
var channel = Cryptpad.createChannelId(); var channel = Cryptpad.createChannelId();
Cryptpad.pinPads([channel], function (e) {
if (e) {
if (e === 'E_OVER_LIMIT') {
Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
}
return void Cryptpad.log('Error while creating your profile: ' + e); // XXX
}
obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys); obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys); obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || ''; obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
andThen(obj.profile.edit); andThen(obj.profile.edit);
});
}; };
// TODO: if not logged in, display a register button here? if (!Cryptpad.isLoggedIn()) { // XXX
var $p = $('<p>').text('TODO: You have to register to create a profile');
var $a = $('<a>', {
href: '/register/'
});
$('<button>', {
'class': 'btn btn-success',
}).text(Messages.login_register).appendTo($a);
$p.append($('<br>')).append($a);
APP.$container.append($p);
return;
}
var $create = $('<div>', {id: CREATE_ID}); var $create = $('<div>', {id: CREATE_ID});
var $button = $('<button>', {'class': 'btn btn-success'}); var $button = $('<button>', {'class': 'btn btn-success'});
$button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX $button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX

@ -23,25 +23,43 @@
width: 300px; width: 300px;
//height: 350px; //height: 350px;
margin: 10px; margin: 10px;
margin-right: 20px;
text-align: center; text-align: center;
&> span { &> span {
display: inline-block; display: inline-block;
line-height: 300px;
text-align: center; text-align: center;
height: 300px; height: 300px;
width: 300px;
border: 1px solid black; border: 1px solid black;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
position: relative;
.delete {
right: 0;
position: absolute;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
} }
img { img {
max-width: 300px; max-width: 100%;
max-height: 300px; max-height: 100%;
vertical-align: top;
} }
media-tag { media-tag {
height: 100%; height: 100%;
display: inline-block; width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
img { img {
vertical-align: top; min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
flex-shrink: 0;
} }
} }
button { button {
@ -83,6 +101,7 @@
position: relative; position: relative;
font-size: 16px; font-size: 16px;
border: 1px solid #DDD; border: 1px solid #DDD;
margin-bottom: 20px;
.rendered { .rendered {
padding: 0 15px; padding: 0 15px;
} }

Loading…
Cancel
Save