Use a consistent toolbar across all apps

pull/1/head
yflory 8 years ago
parent d95a3ac92e
commit 5bc7766f44

@ -10,7 +10,7 @@ define([
var main = function () { var main = function () {
var url = window.location.pathname; var url = window.location.pathname;
var isHtml = /\.html/.test(url) || url === '/' || url === ''; var isHtml = /\.html/.test(url) || url === '/' || url === '';
var isPoll = /\/poll\//.test(url) || /\/file\//.test(url); var isPoll = /\/poll\//.test(url);
if (!isHtml && !isPoll) { if (!isHtml && !isPoll) {
Messages._applyTranslation(); Messages._applyTranslation();
return; return;

@ -1,3 +1,204 @@
.alertify-logs > * {
padding: 12px 48px;
color: #fafafa;
font-weight: bold;
font-size: large;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
border-radius: 1px;
}
.alertify-logs > *,
.alertify-logs > *.default {
background: rgba(0, 0, 0, 0.8);
}
.alertify-logs > *.error {
background: #FF0073;
}
.alertify-logs > *.success {
background: #46E981;
color: #302B28;
}
.alertify {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.alertify.hide {
opacity: 0;
pointer-events: none;
}
.alertify,
.alertify.show {
box-sizing: border-box;
transition: all 0.33s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.alertify,
.alertify * {
box-sizing: border-box;
}
.alertify .dialog {
padding: 12px;
}
.alertify .dialog,
.alertify .alert {
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.alertify .dialog > div,
.alertify .alert > div {
background-color: #685d56;
border-radius: 5px;
}
.alertify .dialog > *,
.alertify .alert > * {
width: 400px;
max-width: 95%;
margin: 0 auto;
text-align: center;
padding: 12px;
background: #fff;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084);
}
.alertify .dialog .msg,
.alertify .alert .msg {
padding: 12px;
margin-bottom: 12px;
margin: 0;
text-align: left;
}
.alertify .dialog input:not(.form-control),
.alertify .alert input:not(.form-control) {
background-color: #302B28;
color: #fafafa;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: 12px;
}
.alertify .dialog nav,
.alertify .alert nav {
text-align: right;
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button),
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: transparent;
box-sizing: border-box;
position: relative;
outline: 0;
border: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
color: #fafafa;
border: 1px solid #302B28;
border-radius: 5px;
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active {
background-color: rgba(0, 0, 0, 0.15);
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus {
border: 1px dotted #302B28;
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner {
border: 0;
}
.alertify .dialog nav button.btn,
.alertify .alert nav button.btn {
margin: 6px 4px;
}
.alertify-logs {
position: fixed;
z-index: 99999;
}
.alertify-logs.bottom,
.alertify-logs:not(.top) {
bottom: 16px;
}
.alertify-logs.left,
.alertify-logs:not(.right) {
left: 16px;
}
.alertify-logs.left > *,
.alertify-logs:not(.right) > * {
float: left;
transform: translate3d(0, 0, 0);
height: auto;
}
.alertify-logs.left > *.show,
.alertify-logs:not(.right) > *.show {
left: 0;
}
.alertify-logs.left > *,
.alertify-logs:not(.right) > *,
.alertify-logs.left > *.hide,
.alertify-logs:not(.right) > *.hide {
left: -110%;
}
.alertify-logs.right {
right: 16px;
}
.alertify-logs.right > * {
float: right;
transform: translate3d(0, 0, 0);
}
.alertify-logs.right > *.show {
right: 0;
opacity: 1;
}
.alertify-logs.right > *,
.alertify-logs.right > *.hide {
right: -110%;
opacity: 0;
}
.alertify-logs.top {
top: 0;
}
.alertify-logs > * {
box-sizing: border-box;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
clear: both;
backface-visibility: hidden;
perspective: 1000;
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.alertify-logs > *.show {
margin-top: 12px;
opacity: 1;
max-height: 1000px;
padding: 12px;
pointer-events: auto;
}
a.github-corner > svg { a.github-corner > svg {
fill: #46E981; fill: #46E981;
color: #302B28; color: #302B28;

@ -1,4 +1,5 @@
@import "./variables.less"; @import "./variables.less";
@import "./alertify.less";
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
@font-face{ @font-face{

@ -9,8 +9,21 @@
user-select: none; user-select: none;
} }
.toolbar-container {
.cryptpad-lag {
position: relative;
top: -2px;
}
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#f5f5f5, #DDDDDD); /* For Firefox 3.6 to 15 */
background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */
}
.cryptpad-toolbar { .cryptpad-toolbar {
box-sizing: border-box; box-sizing: border-box;
padding: 0px 6px;
.unselectable; .unselectable;
@ -75,6 +88,7 @@
.cryptpad-state { .cryptpad-state {
line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
float: left;
} }
.rightside-button { .rightside-button {
@ -120,9 +134,11 @@
line-height: 32px; line-height: 32px;
} }
.pencilIcon { .pencilIcon {
display: none; //display: none;
margin-left: 11px;
&:hover { &:hover {
color: #999; color: #999;
margin-left: 0px;
} }
span { span {
cursor: pointer; cursor: pointer;

@ -6,8 +6,24 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.toolbar-container {
font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f5f5f5, #DDDDDD);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#f5f5f5, #DDDDDD);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#f5f5f5, #DDDDDD);
/* Standard syntax */
}
.toolbar-container .cryptpad-lag {
position: relative;
top: -2px;
}
.cryptpad-toolbar { .cryptpad-toolbar {
box-sizing: border-box; box-sizing: border-box;
padding: 0px 6px;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -78,6 +94,7 @@
.cryptpad-toolbar .cryptpad-state { .cryptpad-toolbar .cryptpad-state {
line-height: 30px; line-height: 30px;
/* equivalent to 26px + 2*2px margin used for buttons */ /* equivalent to 26px + 2*2px margin used for buttons */
float: left;
} }
.cryptpad-toolbar .rightside-button { .cryptpad-toolbar .rightside-button {
float: right; float: right;
@ -120,10 +137,11 @@
line-height: 32px; line-height: 32px;
} }
.cryptpad-toolbar-top .cryptpad-title .pencilIcon { .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
display: none; margin-left: 11px;
} }
.cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover { .cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover {
color: #999; color: #999;
margin-left: 0px;
} }
.cryptpad-toolbar-top .cryptpad-title .pencilIcon span { .cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
cursor: pointer; cursor: pointer;

@ -47,19 +47,6 @@
.CodeMirror { .CodeMirror {
height: 100%; height: 100%;
} }
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, #DDDDDD); /* Standard syntax */
}
.CodeMirror-focused .cm-matchhighlight { .CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom; background-position: bottom;
@ -68,7 +55,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="cme_toolbox"></div> <div id="cme_toolbox" class="toolbar-container"></div>
<textarea id="editor1" name="editor1"></textarea> <textarea id="editor1" name="editor1"></textarea>
</body> </body>
</html> </html>

@ -105,7 +105,7 @@ define([
}); });
// var isArray = function (o) { return Object.prototype.toString.call(o) === '[object Array]'; }; // var isArray = function (o) { return Object.prototype.toString.call(o) === '[object Array]'; };
var isArray = $.isArray; var isArray = common.isArray = $.isArray;
var fixHTML = common.fixHTML = function (html) { var fixHTML = common.fixHTML = function (html) {
return html.replace(/</g, '&lt;'); return html.replace(/</g, '&lt;');
@ -886,22 +886,9 @@ define([
/* /*
* Alertifyjs * Alertifyjs
*/ */
var styleAlerts = common.styleAlerts = function (href) {
var $link = $('link[href="/customize/alertify.css"]');
if ($link.length) {
return;
/*$link.attr('href', '');
$link.attr('href', '/customize/alertify.css');
return;*/
}
href = href || '/customize/alertify.css'; // TODO: remove styleAlerts in all the apps
$('head').append($('<link>', { var styleAlerts = common.styleAlerts = function () {};
rel: 'stylesheet',
id: 'alertifyCSS',
href: href,
}));
};
var findCancelButton = common.findCancelButton = function () { var findCancelButton = common.findCancelButton = function () {
return $('button.cancel'); return $('button.cancel');
@ -933,7 +920,6 @@ define([
}; };
common.alert = function (msg, cb) { common.alert = function (msg, cb) {
common.styleAlerts();
cb = cb || function () {}; cb = cb || function () {};
var keyHandler = listenForKeys(function (e) { // yes var keyHandler = listenForKeys(function (e) { // yes
findOKButton().click(); findOKButton().click();
@ -945,7 +931,6 @@ define([
}; };
common.prompt = function (msg, def, cb, opt) { common.prompt = function (msg, def, cb, opt) {
common.styleAlerts();
opt = opt || {}; opt = opt || {};
cb = cb || function () {}; cb = cb || function () {};
@ -969,7 +954,6 @@ define([
}; };
common.confirm = function (msg, cb, opt) { common.confirm = function (msg, cb, opt) {
common.styleAlerts();
opt = opt || {}; opt = opt || {};
cb = cb || function () {}; cb = cb || function () {};
var keyHandler = listenForKeys(function (e) { var keyHandler = listenForKeys(function (e) {

@ -56,7 +56,6 @@ define([
var styleToolbar = function ($container, href) { var styleToolbar = function ($container, href) {
href = href || '/customize/toolbar.css'; href = href || '/customize/toolbar.css';
$.ajax({ $.ajax({
url: href, url: href,
dataType: 'text', dataType: 'text',
@ -163,11 +162,10 @@ define([
}; };
var createUserList = function ($container, readOnly) { var createUserList = function ($container, readOnly) {
var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
var $userlist = $('<div>', { var $userlist = $('<div>', {
'class': USER_LIST_CLS, 'class': USER_LIST_CLS,
id: uid(), id: uid(),
}).append($state); });
createUserButtons($userlist, readOnly); createUserButtons($userlist, readOnly);
$container.append($userlist); $container.append($userlist);
return $userlist[0]; return $userlist[0];
@ -199,14 +197,17 @@ define([
if (n === 1) { return '; + ' + Messages.oneViewer; } if (n === 1) { return '; + ' + Messages.oneViewer; }
return '; + ' + Messages._getKey('viewers', [n]); return '; + ' + Messages._getKey('viewers', [n]);
}; };
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) {
var checkSynchronizing = function (userList, myUserName, $stateElement) {
var meIdx = userList.indexOf(myUserName); var meIdx = userList.indexOf(myUserName);
if (meIdx === -1) { if (meIdx === -1) {
console.log('nok');
$stateElement.text(Messages.synchronizing); $stateElement.text(Messages.synchronizing);
return; return;
} }
$stateElement.text(''); $stateElement.text('');
};
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
// Make sure the elements are displayed // Make sure the elements are displayed
var $userButtons = $(userlistElement).find("#userButtons"); var $userButtons = $(userlistElement).find("#userButtons");
$userButtons.attr('display', 'inline'); $userButtons.attr('display', 'inline');
@ -283,11 +284,11 @@ define([
}; };
var createLagElement = function ($container) { var createLagElement = function ($container) {
var $lag = $('<div>', { var $lag = $('<span>', {
'class': LAG_ELEM_CLS, 'class': LAG_ELEM_CLS,
id: uid(), id: uid(),
}); });
$container.before($lag); $container.prepend($lag);
return $lag[0]; return $lag[0];
}; };
@ -332,8 +333,7 @@ define([
}).appendTo($topContainer); }).appendTo($topContainer);
var $imgTag = $('<img>', { var $imgTag = $('<img>', {
src: "/customize/cryptofist_mini.png", src: "/customize/cryptofist_mini.png",
alt: "Cryptpad", alt: "Cryptpad"
'class': "cryptofist"
}); });
// We need to override the "a" tag action here because it is inside the iframe! // We need to override the "a" tag action here because it is inside the iframe!
@ -361,6 +361,10 @@ define([
'class': USER_CLS 'class': USER_CLS
}).appendTo($topContainer); }).appendTo($topContainer);
var $state = $('<span>', {
'class': STATE_CLS
}).text(Messages.synchronizing).appendTo($userContainer);
var $span = $('<span>' , { var $span = $('<span>' , {
'class': 'cryptpad-language' 'class': 'cryptpad-language'
}); });
@ -388,21 +392,24 @@ define([
}; };
var createTitle = function ($container, readOnly, config, Cryptpad) { var createTitle = function ($container, readOnly, config, Cryptpad) {
config = config || {}; var $titleContainer = $('<span>', {
id: 'toolbarTitle',
'class': TITLE_CLS
}).appendTo($container);
if (!config || typeof config !== "object") { return; }
var callback = config.onRename; var callback = config.onRename;
var placeholder = config.defaultName; var placeholder = config.defaultName;
var suggestName = config.suggestName; var suggestName = config.suggestName;
// Buttons // Buttons
var $titleContainer = $('<span>', {
id: 'toolbarTitle',
'class': TITLE_CLS
}).appendTo($container);
var $text = $('<span>', { var $text = $('<span>', {
'class': 'title' 'class': 'title'
}).appendTo($titleContainer); }).appendTo($titleContainer);
var $pencilIcon = $('<span>', { var $pencilIcon = $('<span>', {
'class': 'pencilIcon' 'class': 'pencilIcon',
'title': Messages.clickToEdit
}); });
if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; } if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
var $input = $('<input>', { var $input = $('<input>', {
@ -439,19 +446,19 @@ define([
callback(null, newtitle); callback(null, newtitle);
$input.hide(); $input.hide();
$text.show(); $text.show();
$pencilIcon.css('display', ''); //$pencilIcon.css('display', '');
}); });
} }
else if (e.which === 27) { else if (e.which === 27) {
$input.hide(); $input.hide();
$text.show(); $text.show();
$pencilIcon.css('display', ''); //$pencilIcon.css('display', '');
} }
}); });
var displayInput = function () { var displayInput = function () {
$text.hide(); $text.hide();
$pencilIcon.css('display', 'none'); //$pencilIcon.css('display', 'none');
var inputVal = suggestName() || ""; var inputVal = suggestName() || "";
$input.val(inputVal); $input.val(inputVal);
$input.show(); $input.show();
@ -468,17 +475,17 @@ define([
var Cryptpad = config.common; var Cryptpad = config.common;
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly); var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined;
var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
var lagElement = createLagElement($(userListElement));
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS)); var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS));
var lagElement = createLagElement($userAdminElement);
var spinner = createSpinner($userAdminElement);
var userData = config.userData; var userData = config.userData;
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode) // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
var saveElement; var saveElement;
var loadElement; var loadElement;
var $stateElement = $(userListElement).find('.' + STATE_CLS); var $stateElement = $userAdminElement.find('.' + STATE_CLS);
var connected = false; var connected = false;
@ -490,7 +497,7 @@ define([
$container.find('.cryptpad-dropdown').hide(); $container.find('.cryptpad-dropdown').hide();
}; };
var cancelEditTitle = function (e) { var cancelEditTitle = function (e) {
if ($(e.target).parents('.' + TITLE_CLS).length) { if ($(e.target).parents('.' + TITLE_CLS).length || !$titleElement) {
return; return;
} }
$titleElement.find('input').hide(); $titleElement.find('input').hide();
@ -508,6 +515,7 @@ define([
} }
// Update user list // Update user list
if (config.userData) {
userList.change.push(function (newUserData) { userList.change.push(function (newUserData) {
var users = userList.users; var users = userList.users;
if (users.indexOf(myUserName) !== -1) { connected = true; } if (users.indexOf(myUserName) !== -1) { connected = true; }
@ -515,8 +523,17 @@ define([
/*if (newUserData) { // Someone has changed his name/color /*if (newUserData) { // Someone has changed his name/color
userData = newUserData; userData = newUserData;
}*/ }*/
updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement, $userAdminElement); checkSynchronizing(users, myUserName, $stateElement);
updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement);
}); });
} else {
userList.change.push(function () {
var users = userList.users;
if (users.indexOf(myUserName) !== -1) { connected = true; }
if (!connected) { return; }
checkSynchronizing(users, myUserName, $stateElement);
});
}
// Display notifications when users are joining/leaving the session // Display notifications when users are joining/leaving the session
var oldUserData; var oldUserData;
if (typeof Cryptpad !== "undefined") { if (typeof Cryptpad !== "undefined") {

@ -12,6 +12,14 @@ html, body {
} }
body { body {
display: flex;
flex-flow: column;
}
.app-container {
flex: 1;
overflow: auto;
width: 100%;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
} }

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>CryptFiles</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link rel="icon" type="image/png" <link rel="icon" type="image/png"
href="/customize/main-favicon.png" href="/customize/main-favicon.png"
@ -21,12 +22,12 @@
} }
#pad-iframe { #pad-iframe {
position:fixed; position:fixed;
top:2.5em; top:0;
left:0px; left:0px;
bottom:0px; bottom:0px;
right:0px; right:0px;
width:100%; width:100%;
height:calc(100% - 2.5em); height:100%;
border:none; border:none;
margin:0; margin:0;
padding:0; padding:0;

@ -9,6 +9,8 @@
<link rel="stylesheet" href="file.css" /> <link rel="stylesheet" href="file.css" />
</head> </head>
<body> <body>
<div id="toolbar" class="toolbar-container"></div>
<div class="app-container">
<div id="tree"> <div id="tree">
</div> </div>
<div id="content"> <div id="content">
@ -42,6 +44,7 @@
<li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li> <li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li>
</ul> </ul>
</div> </div>
</div>
</body> </body>
</html> </html>

@ -8,8 +8,9 @@ define([
'json.sortify', 'json.sortify',
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
'/file/fileObject.js', '/file/fileObject.js',
'/common/toolbar.js',
'/customize/pad.js' '/customize/pad.js'
], function (Config, Listmap, Crypto, TextPatcher, Messages, JSONSortify, Cryptpad, FO) { ], function (Config, Listmap, Crypto, TextPatcher, Messages, JSONSortify, Cryptpad, FO, Toolbar) {
var module = window.MODULE = {}; var module = window.MODULE = {};
var $ = window.jQuery; var $ = window.jQuery;
@ -17,6 +18,10 @@ define([
var $iframe = $('#pad-iframe').contents(); var $iframe = $('#pad-iframe').contents();
var ifrw = $('#pad-iframe')[0].contentWindow; var ifrw = $('#pad-iframe')[0].contentWindow;
var APP = window.APP = {
$bar: $iframe.find('#toolbar')
};
var ROOT = "root"; var ROOT = "root";
var ROOT_NAME = Messages.fm_rootName; var ROOT_NAME = Messages.fm_rootName;
var UNSORTED = "unsorted"; var UNSORTED = "unsorted";
@ -42,7 +47,7 @@ define([
console.error.apply(console, arguments); console.error.apply(console, arguments);
}; };
var log = config.log = Cryptpad.log; var log = config.log = Cryptpad.log;
var DEBUG_LS = module.DEBUG_LS = { var DEBUG_LS = APP.DEBUG_LS = {
resetLocalStorage : function () { resetLocalStorage : function () {
delete localStorage[LOCALSTORAGE_OPENED]; delete localStorage[LOCALSTORAGE_OPENED];
delete localStorage[LOCALSTORAGE_LAST]; delete localStorage[LOCALSTORAGE_LAST];
@ -132,6 +137,40 @@ define([
var error = filesOp.error; var error = filesOp.error;
// TOOLBAR
var getLastName = function (cb) {
cb(null, files['cryptpad.username'] || '');
};
var setName = APP.setName = function (newName) {
if (typeof(newName) !== 'string') { return; }
var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
if(myUserNameTemp.length > 32) {
myUserNameTemp = myUserNameTemp.substr(0, 32);
}
var myUserName = myUserNameTemp;
files['cryptpad.username'] = myUserName;
APP.userName.lastName = myUserName;
var $button = APP.$userNameButton;
var $span = $('<div>').append($button.find('span').clone()).html();
$button.html($span + myUserName);
};
var $userBlock = APP.$bar.find('.' + Toolbar.constants.username);
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = APP.userName = {};
/* add a "change username" button */
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
$username.append(lastName);
$username.show();
});
// FILE MANAGER
var currentPath = module.currentPath = getLastOpenedFolder(); var currentPath = module.currentPath = getLastOpenedFolder();
var lastSelectTime; var lastSelectTime;
var selectedElement; var selectedElement;
@ -578,7 +617,6 @@ define([
else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; } else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; }
else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; } else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; }
else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); } else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); }
document.title = name;
var $title = $('<h1>').text(name); var $title = $('<h1>').text(name);
if (path.length > 1) { if (path.length > 1) {
var $parentFolder = $upIcon.clone().addClass("parentFolder") var $parentFolder = $upIcon.clone().addClass("parentFolder")
@ -1349,15 +1387,12 @@ define([
refresh(); refresh();
}; };
/*
initLSOpened();
init(filesObject);
*/
// don't initialize until the store is ready. // don't initialize until the store is ready.
Cryptpad.ready(function () { Cryptpad.ready(function () {
Cryptpad.styleAlerts();
if (window.location.hash && window.location.hash === "#iframe") { if (window.location.hash && window.location.hash === "#iframe") {
$('.top-bar').hide(); $('.top-bar').hide();
$('#pad-iframe').css({ $('#pad-iframe').css({
@ -1395,6 +1430,23 @@ define([
realtime: realtime, realtime: realtime,
logging: true, logging: true,
}); });
var readOnly = false;
userList = APP.userList = info.userList;
var config = {
readOnly: readOnly,
ifrw: window,
common: Cryptpad,
hideShare: true
};
var toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
var $bar = APP.$bar;
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
}).on('ready', function () { }).on('ready', function () {
module.files = rt.proxy; module.files = rt.proxy;
if (JSON.stringify(rt.proxy) === '{}') { if (JSON.stringify(rt.proxy) === '{}') {

@ -95,7 +95,7 @@
</head> </head>
<body> <body>
<div id="toolbar"></div> <div id="toolbar" class="toolbar-container"></div>
<div id="howItWorks"> <div id="howItWorks">
<h1 id="mainTitle">CryptPoll</h1> <h1 id="mainTitle">CryptPoll</h1>

@ -12,7 +12,7 @@ define([
'/common/notify.js', '/common/notify.js',
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
//'/customize/pad.js' '/customize/pad.js'
], function (Config, Messages, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) { ], function (Config, Messages, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) {
var $ = window.jQuery; var $ = window.jQuery;
@ -26,7 +26,7 @@ define([
Toolbar: Toolbar, Toolbar: Toolbar,
Hyperjson: Hyperjson, Hyperjson: Hyperjson,
Render: Render, Render: Render,
$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }), $bar: $('#toolbar'),
editable: { editable: {
row: [], row: [],
col: [] col: []

@ -118,19 +118,6 @@
.CodeMirror { .CodeMirror {
height: 100%; height: 100%;
} }
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, #DDDDDD); /* Standard syntax */
}
.CodeMirror-focused .cm-matchhighlight { .CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom; background-position: bottom;
@ -144,7 +131,7 @@
<body> <body>
<div id="bar"></div> <div id="bar"></div>
<!-- <textarea></textarea>--> <!-- <textarea></textarea>-->
<div id="cme_toolbox"></div> <div id="cme_toolbox" class="toolbar-container"></div>
<textarea id="editor1" name="editor1"></textarea> <textarea id="editor1" name="editor1"></textarea>
<div id="modal"> <div id="modal">
<div id="content"></div> <div id="content"></div>

Loading…
Cancel
Save