mirror of https://github.com/xwiki-labs/cryptpad
Use a consistent toolbar across all apps
This commit is contained in:
yflory
parent
d95a3ac92e
commit
5bc7766f44
|
|
@ -10,7 +10,7 @@ define([
|
|||
var main = function () {
|
||||
var url = window.location.pathname;
|
||||
var isHtml = /\.html/.test(url) || url === '/' || url === '';
|
||||
var isPoll = /\/poll\//.test(url) || /\/file\//.test(url);
|
||||
var isPoll = /\/poll\//.test(url);
|
||||
if (!isHtml && !isPoll) {
|
||||
Messages._applyTranslation();
|
||||
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 {
|
||||
fill: #46E981;
|
||||
color: #302B28;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./variables.less";
|
||||
@import "./alertify.less";
|
||||
|
||||
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
|
||||
@font-face{
|
||||
|
|
|
|||
|
|
@ -9,8 +9,21 @@
|
|||
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 {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 6px;
|
||||
|
||||
.unselectable;
|
||||
|
||||
|
|
@ -75,6 +88,7 @@
|
|||
|
||||
.cryptpad-state {
|
||||
line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rightside-button {
|
||||
|
|
@ -120,9 +134,11 @@
|
|||
line-height: 32px;
|
||||
}
|
||||
.pencilIcon {
|
||||
display: none;
|
||||
//display: none;
|
||||
margin-left: 11px;
|
||||
&:hover {
|
||||
color: #999;
|
||||
margin-left: 0px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,24 @@
|
|||
-ms-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 {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 6px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -78,6 +94,7 @@
|
|||
.cryptpad-toolbar .cryptpad-state {
|
||||
line-height: 30px;
|
||||
/* equivalent to 26px + 2*2px margin used for buttons */
|
||||
float: left;
|
||||
}
|
||||
.cryptpad-toolbar .rightside-button {
|
||||
float: right;
|
||||
|
|
@ -120,10 +137,11 @@
|
|||
line-height: 32px;
|
||||
}
|
||||
.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
|
||||
display: none;
|
||||
margin-left: 11px;
|
||||
}
|
||||
.cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover {
|
||||
color: #999;
|
||||
margin-left: 0px;
|
||||
}
|
||||
.cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -47,19 +47,6 @@
|
|||
.CodeMirror {
|
||||
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 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom;
|
||||
|
|
@ -68,7 +55,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="cme_toolbox"></div>
|
||||
<div id="cme_toolbox" class="toolbar-container"></div>
|
||||
<textarea id="editor1" name="editor1"></textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ define([
|
|||
});
|
||||
|
||||
// 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) {
|
||||
return html.replace(/</g, '<');
|
||||
|
|
@ -886,22 +886,9 @@ define([
|
|||
/*
|
||||
* 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';
|
||||
$('head').append($('<link>', {
|
||||
rel: 'stylesheet',
|
||||
id: 'alertifyCSS',
|
||||
href: href,
|
||||
}));
|
||||
};
|
||||
// TODO: remove styleAlerts in all the apps
|
||||
var styleAlerts = common.styleAlerts = function () {};
|
||||
|
||||
var findCancelButton = common.findCancelButton = function () {
|
||||
return $('button.cancel');
|
||||
|
|
@ -933,7 +920,6 @@ define([
|
|||
};
|
||||
|
||||
common.alert = function (msg, cb) {
|
||||
common.styleAlerts();
|
||||
cb = cb || function () {};
|
||||
var keyHandler = listenForKeys(function (e) { // yes
|
||||
findOKButton().click();
|
||||
|
|
@ -945,7 +931,6 @@ define([
|
|||
};
|
||||
|
||||
common.prompt = function (msg, def, cb, opt) {
|
||||
common.styleAlerts();
|
||||
opt = opt || {};
|
||||
cb = cb || function () {};
|
||||
|
||||
|
|
@ -969,7 +954,6 @@ define([
|
|||
};
|
||||
|
||||
common.confirm = function (msg, cb, opt) {
|
||||
common.styleAlerts();
|
||||
opt = opt || {};
|
||||
cb = cb || function () {};
|
||||
var keyHandler = listenForKeys(function (e) {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@ define([
|
|||
|
||||
var styleToolbar = function ($container, href) {
|
||||
href = href || '/customize/toolbar.css';
|
||||
|
||||
$.ajax({
|
||||
url: href,
|
||||
dataType: 'text',
|
||||
|
|
@ -163,11 +162,10 @@ define([
|
|||
};
|
||||
|
||||
var createUserList = function ($container, readOnly) {
|
||||
var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
|
||||
var $userlist = $('<div>', {
|
||||
'class': USER_LIST_CLS,
|
||||
id: uid(),
|
||||
}).append($state);
|
||||
});
|
||||
createUserButtons($userlist, readOnly);
|
||||
$container.append($userlist);
|
||||
return $userlist[0];
|
||||
|
|
@ -199,14 +197,17 @@ define([
|
|||
if (n === 1) { return '; + ' + Messages.oneViewer; }
|
||||
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);
|
||||
if (meIdx === -1) {
|
||||
console.log('nok');
|
||||
$stateElement.text(Messages.synchronizing);
|
||||
return;
|
||||
}
|
||||
$stateElement.text('');
|
||||
};
|
||||
|
||||
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
|
||||
// Make sure the elements are displayed
|
||||
var $userButtons = $(userlistElement).find("#userButtons");
|
||||
$userButtons.attr('display', 'inline');
|
||||
|
|
@ -283,11 +284,11 @@ define([
|
|||
};
|
||||
|
||||
var createLagElement = function ($container) {
|
||||
var $lag = $('<div>', {
|
||||
var $lag = $('<span>', {
|
||||
'class': LAG_ELEM_CLS,
|
||||
id: uid(),
|
||||
});
|
||||
$container.before($lag);
|
||||
$container.prepend($lag);
|
||||
return $lag[0];
|
||||
};
|
||||
|
||||
|
|
@ -332,8 +333,7 @@ define([
|
|||
}).appendTo($topContainer);
|
||||
var $imgTag = $('<img>', {
|
||||
src: "/customize/cryptofist_mini.png",
|
||||
alt: "Cryptpad",
|
||||
'class': "cryptofist"
|
||||
alt: "Cryptpad"
|
||||
});
|
||||
|
||||
// We need to override the "a" tag action here because it is inside the iframe!
|
||||
|
|
@ -361,6 +361,10 @@ define([
|
|||
'class': USER_CLS
|
||||
}).appendTo($topContainer);
|
||||
|
||||
var $state = $('<span>', {
|
||||
'class': STATE_CLS
|
||||
}).text(Messages.synchronizing).appendTo($userContainer);
|
||||
|
||||
var $span = $('<span>' , {
|
||||
'class': 'cryptpad-language'
|
||||
});
|
||||
|
|
@ -388,21 +392,24 @@ define([
|
|||
};
|
||||
|
||||
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 placeholder = config.defaultName;
|
||||
var suggestName = config.suggestName;
|
||||
|
||||
// Buttons
|
||||
var $titleContainer = $('<span>', {
|
||||
id: 'toolbarTitle',
|
||||
'class': TITLE_CLS
|
||||
}).appendTo($container);
|
||||
var $text = $('<span>', {
|
||||
'class': 'title'
|
||||
}).appendTo($titleContainer);
|
||||
var $pencilIcon = $('<span>', {
|
||||
'class': 'pencilIcon'
|
||||
'class': 'pencilIcon',
|
||||
'title': Messages.clickToEdit
|
||||
});
|
||||
if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
|
||||
var $input = $('<input>', {
|
||||
|
|
@ -439,19 +446,19 @@ define([
|
|||
callback(null, newtitle);
|
||||
$input.hide();
|
||||
$text.show();
|
||||
$pencilIcon.css('display', '');
|
||||
//$pencilIcon.css('display', '');
|
||||
});
|
||||
}
|
||||
else if (e.which === 27) {
|
||||
$input.hide();
|
||||
$text.show();
|
||||
$pencilIcon.css('display', '');
|
||||
//$pencilIcon.css('display', '');
|
||||
}
|
||||
});
|
||||
|
||||
var displayInput = function () {
|
||||
$text.hide();
|
||||
$pencilIcon.css('display', 'none');
|
||||
//$pencilIcon.css('display', 'none');
|
||||
var inputVal = suggestName() || "";
|
||||
$input.val(inputVal);
|
||||
$input.show();
|
||||
|
|
@ -468,17 +475,17 @@ define([
|
|||
var Cryptpad = config.common;
|
||||
|
||||
var toolbar = createRealtimeToolbar($container);
|
||||
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
|
||||
var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
|
||||
var lagElement = createLagElement($(userListElement));
|
||||
var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined;
|
||||
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
|
||||
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
|
||||
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS));
|
||||
var lagElement = createLagElement($userAdminElement);
|
||||
var spinner = createSpinner($userAdminElement);
|
||||
var userData = config.userData;
|
||||
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
|
||||
var saveElement;
|
||||
var loadElement;
|
||||
var $stateElement = $(userListElement).find('.' + STATE_CLS);
|
||||
var $stateElement = $userAdminElement.find('.' + STATE_CLS);
|
||||
|
||||
var connected = false;
|
||||
|
||||
|
|
@ -490,7 +497,7 @@ define([
|
|||
$container.find('.cryptpad-dropdown').hide();
|
||||
};
|
||||
var cancelEditTitle = function (e) {
|
||||
if ($(e.target).parents('.' + TITLE_CLS).length) {
|
||||
if ($(e.target).parents('.' + TITLE_CLS).length || !$titleElement) {
|
||||
return;
|
||||
}
|
||||
$titleElement.find('input').hide();
|
||||
|
|
@ -508,15 +515,25 @@ define([
|
|||
}
|
||||
|
||||
// Update user list
|
||||
userList.change.push(function (newUserData) {
|
||||
var users = userList.users;
|
||||
if (users.indexOf(myUserName) !== -1) { connected = true; }
|
||||
if (!connected) { return; }
|
||||
/*if (newUserData) { // Someone has changed his name/color
|
||||
userData = newUserData;
|
||||
}*/
|
||||
updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement, $userAdminElement);
|
||||
});
|
||||
if (config.userData) {
|
||||
userList.change.push(function (newUserData) {
|
||||
var users = userList.users;
|
||||
if (users.indexOf(myUserName) !== -1) { connected = true; }
|
||||
if (!connected) { return; }
|
||||
/*if (newUserData) { // Someone has changed his name/color
|
||||
userData = newUserData;
|
||||
}*/
|
||||
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
|
||||
var oldUserData;
|
||||
if (typeof Cryptpad !== "undefined") {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,14 @@ html, body {
|
|||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CryptFiles</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="icon" type="image/png"
|
||||
href="/customize/main-favicon.png"
|
||||
|
|
@ -21,12 +22,12 @@
|
|||
}
|
||||
#pad-iframe {
|
||||
position:fixed;
|
||||
top:2.5em;
|
||||
top:0;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
width:100%;
|
||||
height:calc(100% - 2.5em);
|
||||
height:100%;
|
||||
border:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
|
|
|
|||
|
|
@ -9,38 +9,41 @@
|
|||
<link rel="stylesheet" href="file.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="tree">
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="contextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="open" data-localization="fc_open">Open</a></li>
|
||||
<li><a tabindex="-1" href="#" class="rename" data-localization="fc_rename">Rename</a></li>
|
||||
<li><a tabindex="-1" href="#" class="delete" data-localization="fc_delete">Delete</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newfolder" data-localization="fc_newfolder">New folder</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contentContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="newfolder" data-localization="fc_newfolder">New folder</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="pad" data-localization="fc_newpad" target="_blank">New pad</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="code" data-localization="fc_newcode" target="_blank">New code</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="slide" data-localization="fc_newslide" target="_blank">New slide</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="poll" data-localization="fc_newpoll" target="_blank">New poll</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="trashTreeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="empty" data-localization="fc_empty">Empty the trash</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="trashContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="remove" data-localization="fc_remove">Delete permanently</a></li>
|
||||
<li><a tabindex="-1" href="#" class="restore" data-localization="fc_restore">Restore</a></li>
|
||||
<li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li>
|
||||
</ul>
|
||||
<div id="toolbar" class="toolbar-container"></div>
|
||||
<div class="app-container">
|
||||
<div id="tree">
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="contextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="open" data-localization="fc_open">Open</a></li>
|
||||
<li><a tabindex="-1" href="#" class="rename" data-localization="fc_rename">Rename</a></li>
|
||||
<li><a tabindex="-1" href="#" class="delete" data-localization="fc_delete">Delete</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newfolder" data-localization="fc_newfolder">New folder</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contentContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="newfolder" data-localization="fc_newfolder">New folder</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="pad" data-localization="fc_newpad" target="_blank">New pad</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="code" data-localization="fc_newcode" target="_blank">New code</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="slide" data-localization="fc_newslide" target="_blank">New slide</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc" data-type="poll" data-localization="fc_newpoll" target="_blank">New poll</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="trashTreeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="empty" data-localization="fc_empty">Empty the trash</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="trashContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
<li><a tabindex="-1" href="#" class="remove" data-localization="fc_remove">Delete permanently</a></li>
|
||||
<li><a tabindex="-1" href="#" class="restore" data-localization="fc_restore">Restore</a></li>
|
||||
<li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ define([
|
|||
'json.sortify',
|
||||
'/common/cryptpad-common.js',
|
||||
'/file/fileObject.js',
|
||||
'/common/toolbar.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 $ = window.jQuery;
|
||||
|
|
@ -17,6 +18,10 @@ define([
|
|||
var $iframe = $('#pad-iframe').contents();
|
||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||
|
||||
var APP = window.APP = {
|
||||
$bar: $iframe.find('#toolbar')
|
||||
};
|
||||
|
||||
var ROOT = "root";
|
||||
var ROOT_NAME = Messages.fm_rootName;
|
||||
var UNSORTED = "unsorted";
|
||||
|
|
@ -42,7 +47,7 @@ define([
|
|||
console.error.apply(console, arguments);
|
||||
};
|
||||
var log = config.log = Cryptpad.log;
|
||||
var DEBUG_LS = module.DEBUG_LS = {
|
||||
var DEBUG_LS = APP.DEBUG_LS = {
|
||||
resetLocalStorage : function () {
|
||||
delete localStorage[LOCALSTORAGE_OPENED];
|
||||
delete localStorage[LOCALSTORAGE_LAST];
|
||||
|
|
@ -132,6 +137,40 @@ define([
|
|||
|
||||
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 lastSelectTime;
|
||||
var selectedElement;
|
||||
|
|
@ -578,7 +617,6 @@ define([
|
|||
else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; }
|
||||
else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; }
|
||||
else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); }
|
||||
document.title = name;
|
||||
var $title = $('<h1>').text(name);
|
||||
if (path.length > 1) {
|
||||
var $parentFolder = $upIcon.clone().addClass("parentFolder")
|
||||
|
|
@ -1349,15 +1387,12 @@ define([
|
|||
refresh();
|
||||
};
|
||||
|
||||
/*
|
||||
initLSOpened();
|
||||
init(filesObject);
|
||||
*/
|
||||
|
||||
|
||||
|
||||
// don't initialize until the store is ready.
|
||||
Cryptpad.ready(function () {
|
||||
Cryptpad.styleAlerts();
|
||||
|
||||
if (window.location.hash && window.location.hash === "#iframe") {
|
||||
$('.top-bar').hide();
|
||||
$('#pad-iframe').css({
|
||||
|
|
@ -1395,6 +1430,23 @@ define([
|
|||
realtime: realtime,
|
||||
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 () {
|
||||
module.files = rt.proxy;
|
||||
if (JSON.stringify(rt.proxy) === '{}') {
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="toolbar"></div>
|
||||
<div id="toolbar" class="toolbar-container"></div>
|
||||
|
||||
<div id="howItWorks">
|
||||
<h1 id="mainTitle">CryptPoll</h1>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ define([
|
|||
'/common/notify.js',
|
||||
'/bower_components/file-saver/FileSaver.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) {
|
||||
var $ = window.jQuery;
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ define([
|
|||
Toolbar: Toolbar,
|
||||
Hyperjson: Hyperjson,
|
||||
Render: Render,
|
||||
$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }),
|
||||
$bar: $('#toolbar'),
|
||||
editable: {
|
||||
row: [],
|
||||
col: []
|
||||
|
|
|
|||
|
|
@ -118,19 +118,6 @@
|
|||
.CodeMirror {
|
||||
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 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom;
|
||||
|
|
@ -144,7 +131,7 @@
|
|||
<body>
|
||||
<div id="bar"></div>
|
||||
<!-- <textarea></textarea>-->
|
||||
<div id="cme_toolbox"></div>
|
||||
<div id="cme_toolbox" class="toolbar-container"></div>
|
||||
<textarea id="editor1" name="editor1"></textarea>
|
||||
<div id="modal">
|
||||
<div id="content"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue