Use a consistent toolbar across all apps

This commit is contained in:
yflory
2016-12-16 18:35:49 +01:00
parent d95a3ac92e
commit 5bc7766f44
15 changed files with 402 additions and 127 deletions

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -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>

View File

@@ -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) === '{}') {