web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Drive in sandboxed iframe

Browse Source
This commit is contained in:
yflory 2017-09-22 19:35:06 +02:00
parent a810d7bd85
commit 47fe7b1c53
12 changed files with 573 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -342,7 +342,7 @@ define([
$ok.click(); $ok.click();
}, function () { }, function () {
$cancel.click(); $cancel.click();
}); }, ok);
document.body.appendChild(frame); document.body.appendChild(frame);
setTimeout(function () { setTimeout(function () {

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

@ -2236,6 +2236,17 @@ define([
} }
$iframe.load(w2); //cb); $iframe.load(w2); //cb);
} }
}).nThen(function (waitFor) {
if (sessionStorage.migrateAnonDrive) {
var w = waitFor();
require(['/common/mergeDrive.js'], function (Merge) {
var hash = localStorage.FS_hash;
Merge.anonDriveIntoUser(getStore().getProxy(), hash, function () {
delete sessionStorage.migrateAnonDrive;
w();
});
});
}
}).nThen(function () { }).nThen(function () {
updateLocalVersion(); updateLocalVersion();
common.addTooltips(); common.addTooltips();

4
www/common/fsStore.js
View File

@ -4,7 +4,7 @@ define([
'/bower_components/chainpad-crypto/crypto.js?v=0.1.5', '/bower_components/chainpad-crypto/crypto.js?v=0.1.5',
'/bower_components/textpatcher/TextPatcher.amd.js', '/bower_components/textpatcher/TextPatcher.amd.js',
'/common/userObject.js', '/common/userObject.js',
'/common/migrate-user-object.js' '/common/migrate-user-object.js',
], function ($, Listmap, Crypto, TextPatcher, FO, Migrate) { ], function ($, Listmap, Crypto, TextPatcher, FO, Migrate) {
/* /*
This module uses localStorage, which is synchronous, but exposes an This module uses localStorage, which is synchronous, but exposes an
@ -196,11 +196,11 @@ define([
Migrate(proxy, Cryptpad); Migrate(proxy, Cryptpad);
//storeObj = proxy;
store = initStore(fo, proxy, exp); store = initStore(fo, proxy, exp);
if (typeof(f) === 'function') { if (typeof(f) === 'function') {
f(void 0, store); f(void 0, store);
} }
//storeObj = proxy;
var requestLogin = function () { var requestLogin = function () {
// log out so that you don't go into an endless loop... // log out so that you don't go into an endless loop...

12
www/common/mergeDrive.js
View File

@ -83,9 +83,9 @@ define([
}); });
}; };
exp.anonDriveIntoUser = function (proxy, cb) { exp.anonDriveIntoUser = function (proxyData, fsHash, cb) {
// Make sure we have an FS_hash and we don't use it, otherwise just stop the migration and cb // Make sure we have an FS_hash and we don't use it, otherwise just stop the migration and cb
if (!localStorage.FS_hash || !Cryptpad.isLoggedIn()) { if (!fsHash || !Cryptpad.isLoggedIn()) {
if (typeof(cb) === "function") { return void cb(); } if (typeof(cb) === "function") { return void cb(); }
} }
// Get the content of FS_hash and then merge the objects, remove the migration key and cb // Get the content of FS_hash and then merge the objects, remove the migration key and cb
@ -102,13 +102,13 @@ define([
return; return;
} }
if (parsed) { if (parsed) {
var proxy = proxyData.proxy;
var oldFo = FO.init(parsed.drive, { var oldFo = FO.init(parsed.drive, {
Cryptpad: Cryptpad Cryptpad: Cryptpad
}); });
var onMigrated = function () { var onMigrated = function () {
oldFo.fixFiles(); oldFo.fixFiles();
var newData = Cryptpad.getStore().getProxy(); var newFo = proxyData.fo;
var newFo = newData.fo;
var oldRecentPads = parsed.drive[newFo.FILES_DATA]; var oldRecentPads = parsed.drive[newFo.FILES_DATA];
var newRecentPads = proxy.drive[newFo.FILES_DATA]; var newRecentPads = proxy.drive[newFo.FILES_DATA];
var newFiles = newFo.getFiles([newFo.FILES_DATA]); var newFiles = newFo.getFiles([newFo.FILES_DATA]);
@ -150,7 +150,7 @@ define([
if (!proxy.FS_hashes || !Array.isArray(proxy.FS_hashes)) { if (!proxy.FS_hashes || !Array.isArray(proxy.FS_hashes)) {
proxy.FS_hashes = []; proxy.FS_hashes = [];
} }
proxy.FS_hashes.push(localStorage.FS_hash); proxy.FS_hashes.push(fsHash);
if (typeof(cb) === "function") { cb(); } if (typeof(cb) === "function") { cb(); }
}; };
oldFo.migrate(onMigrated); oldFo.migrate(onMigrated);
@ -158,7 +158,7 @@ define([
} }
if (typeof(cb) === "function") { cb(); } if (typeof(cb) === "function") { cb(); }
}; };
Crypt.get(localStorage.FS_hash, todo); Crypt.get(fsHash, todo);
}; };
return exp; return exp;

12
www/common/sframe-common-outer.js
View File

@ -294,6 +294,12 @@ define([
}); });
}); });
sframeChan.on('Q_SESSIONSTORAGE_PUT', function (data, cb) {
sessionStorage[data.key] = data.value;
cb();
});
// Present mode URL // Present mode URL
sframeChan.on('Q_PRESENT_URL_GET_VALUE', function (data, cb) { sframeChan.on('Q_PRESENT_URL_GET_VALUE', function (data, cb) {
var parsed = Cryptpad.parsePadUrl(window.location.href); var parsed = Cryptpad.parsePadUrl(window.location.href);
@ -385,6 +391,12 @@ define([
} }
}); });
sframeChan.on('EV_OPEN_URL', function (url) {
if (url) {
window.open(url);
}
});
sframeChan.on('Q_TAGS_GET', function (data, cb) { sframeChan.on('Q_TAGS_GET', function (data, cb) {
Cryptpad.getPadTags(null, function (err, data) { Cryptpad.getPadTags(null, function (err, data) {
cb({ cb({

13
www/common/sframe-common.js
View File

@ -210,6 +210,15 @@ define([
}, cb); }, cb);
}; };
funcs.sessionStorage = {
put: function (key, value, cb) {
ctx.sframeChan.query('Q_SESSIONSTORAGE_PUT', {
key: key,
value: value
}, cb);
}
};
funcs.isStrongestStored = function () { funcs.isStrongestStored = function () {
var data = ctx.metadataMgr.getPrivateData(); var data = ctx.metadataMgr.getPrivateData();
if (data.availableHashes.fileHash) { return true; } if (data.availableHashes.fileHash) { return true; }
@ -221,6 +230,9 @@ define([
ctx.sframeChan.query('Q_SETTINGS_SET_DISPLAY_NAME', name, cb); ctx.sframeChan.query('Q_SETTINGS_SET_DISPLAY_NAME', name, cb);
}; };
funcs.mergeAnonDrive = function (cb) {
ctx.sframeChan.query('Q_MERGE_ANON_DRIVE', null, cb);
};
// Friends // Friends
var pendingFriends = []; var pendingFriends = [];
funcs.getPendingFriends = function () { funcs.getPendingFriends = function () {
@ -271,6 +283,7 @@ define([
}; */ }; */
funcs.gotoURL = function (url) { ctx.sframeChan.event('EV_GOTO_URL', url); }; funcs.gotoURL = function (url) { ctx.sframeChan.event('EV_GOTO_URL', url); };
funcs.openURL = function (url) { ctx.sframeChan.event('EV_OPEN_URL', url); };
funcs.whenRealtimeSyncs = evRealtimeSynced.reg; funcs.whenRealtimeSyncs = evRealtimeSynced.reg;

9
www/common/sframe-protocol.js
View File

@ -126,6 +126,9 @@ define({
// Make the browser window navigate to a given URL, if no URL is passed then it will reload. // Make the browser window navigate to a given URL, if no URL is passed then it will reload.
'EV_GOTO_URL': true, 'EV_GOTO_URL': true,
// Make the parent window open a given URL in a new tab. It allows us to keep sessionStorage
// form the parent window.
'EV_OPEN_URL': true,
// Present mode URL // Present mode URL
'Q_PRESENT_URL_GET_VALUE': true, 'Q_PRESENT_URL_GET_VALUE': true,
@ -136,9 +139,15 @@ define({
'EV_CACHE_PUT': true, 'EV_CACHE_PUT': true,
// Put one or more entries to the localStore which will go in localStorage. // Put one or more entries to the localStore which will go in localStorage.
'EV_LOCALSTORE_PUT': true, 'EV_LOCALSTORE_PUT': true,
// Put one entry in the parent sessionStorage
'Q_SESSIONSTORAGE_PUT': true,
// Set and get the tags using the tag prompt button // Set and get the tags using the tag prompt button
'Q_TAGS_GET': true, 'Q_TAGS_GET': true,
'EV_TAGS_SET': true, 'EV_TAGS_SET': true,
// Merge the anonymous drive (FS_hash) into the current logged in user's drive, to keep the pads
// in the drive at registration.
'Q_MERGE_ANON_DRIVE': true,
}); });

20
www/common/userObject.js
View File

@ -18,6 +18,7 @@ define([
var exp = {}; var exp = {};
var Cryptpad = config.Cryptpad; var Cryptpad = config.Cryptpad;
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
var loggedIn = config.loggedIn || Cryptpad.isLoggedIn();
var FILES_DATA = module.FILES_DATA = exp.FILES_DATA = Cryptpad.storageKey; var FILES_DATA = module.FILES_DATA = exp.FILES_DATA = Cryptpad.storageKey;
var OLD_FILES_DATA = module.OLD_FILES_DATA = exp.OLD_FILES_DATA = Cryptpad.oldStorageKey; var OLD_FILES_DATA = module.OLD_FILES_DATA = exp.OLD_FILES_DATA = Cryptpad.oldStorageKey;
@ -481,14 +482,14 @@ define([
// FILES DATA // FILES DATA
exp.pushData = function (data, cb) { exp.pushData = function (data, cb) {
// TODO: can only be called from outside atm
if (typeof cb !== "function") { cb = function () {}; } if (typeof cb !== "function") { cb = function () {}; }
var todo = function () { var todo = function () {
var id = Cryptpad.createRandomInteger(); var id = Cryptpad.createRandomInteger();
files[FILES_DATA][id] = data; files[FILES_DATA][id] = data;
cb(null, id); cb(null, id);
}; };
// TODO if (!loggedIn || !AppConfig.enablePinning || config.testMode) {
if (!Cryptpad.isLoggedIn() || !AppConfig.enablePinning || config.testMode) {
return void todo(); return void todo();
} }
Cryptpad.pinPads([Cryptpad.hrefToHexChannelId(data.href)], function (e) { Cryptpad.pinPads([Cryptpad.hrefToHexChannelId(data.href)], function (e) {
@ -586,8 +587,7 @@ define([
// ADD // ADD
var add = exp.add = function (id, path) { var add = exp.add = function (id, path) {
// TODO if (!loggedIn && !config.testMode) { return; }
if (!Cryptpad.isLoggedIn() && !config.testMode) { return; }
var data = files[FILES_DATA][id]; var data = files[FILES_DATA][id];
if (!data || typeof(data) !== "object") { return; } if (!data || typeof(data) !== "object") { return; }
var newPath = path, parentEl; var newPath = path, parentEl;
@ -626,8 +626,7 @@ define([
exp.forget = function (href) { exp.forget = function (href) {
var id = getIdFromHref(href); var id = getIdFromHref(href);
if (!id) { return; } if (!id) { return; }
// TODO if (!loggedIn && !config.testMode) {
if (!Cryptpad.isLoggedIn() && !config.testMode) {
// delete permanently // delete permanently
exp.removePadAttribute(href); exp.removePadAttribute(href);
spliceFileData(id); spliceFileData(id);
@ -656,8 +655,7 @@ define([
}; };
var checkDeletedFiles = function () { var checkDeletedFiles = function () {
// Nothing in OLD_FILES_DATA for workgroups // Nothing in OLD_FILES_DATA for workgroups
// TODO if (workgroup || (!loggedIn && !config.testMode)) { return; }
if (workgroup || (!Cryptpad.isLoggedIn() && !config.testMode)) { return; }
var filesList = getFiles([ROOT, 'hrefArray', TRASH]); var filesList = getFiles([ROOT, 'hrefArray', TRASH]);
getFiles([FILES_DATA]).forEach(function (id) { getFiles([FILES_DATA]).forEach(function (id) {
@ -684,8 +682,7 @@ define([
var trashPaths = paths.filter(function(x) { return isPathIn(x, [TRASH]); }); var trashPaths = paths.filter(function(x) { return isPathIn(x, [TRASH]); });
var allFilesPaths = paths.filter(function(x) { return isPathIn(x, [FILES_DATA]); }); var allFilesPaths = paths.filter(function(x) { return isPathIn(x, [FILES_DATA]); });
// TODO if (!loggedIn && !config.testMode) {
if (!Cryptpad.isLoggedIn() && !config.testMode) {
allFilesPaths.forEach(function (path) { allFilesPaths.forEach(function (path) {
var el = find(path); var el = find(path);
if (!el) { return; } if (!el) { return; }
@ -1086,8 +1083,7 @@ define([
migrateAttributes(el, id, parsed); migrateAttributes(el, id, parsed);
// TODO if ((loggedIn || config.testMode) && rootFiles.indexOf(id) === -1) {
if ((Cryptpad.isLoggedIn() || config.testMode) && rootFiles.indexOf(id) === -1) {
debug("An element in filesData was not in ROOT, TEMPLATE or TRASH.", id, el); debug("An element in filesData was not in ROOT, TEMPLATE or TRASH.", id, el);
var newName = Cryptpad.createChannelId(); var newName = Cryptpad.createChannelId();
root[newName] = id; root[newName] = id;

242
www/newdrive/app-drive.less
View File

@ -101,12 +101,66 @@ min-height: auto;
} }
} }
img.icon { /* local mixins */
.fileIcon {
li {
display: inline-block;
margin: 10px 10px;
width: 140px;
height: 140px;
text-align: center;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
&:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
border: 1px solid #CCC;
}
.cp-app-drive-element-name {
width: 100%;
height: 48px;
margin: 8px 0;
display: inline-block;
//align-items: center;
//justify-content: center;
overflow: hidden;
//text-overflow: ellipsis;
word-wrap: break-word;
}
.cp-app-drive-element-truncated {
display: block;
position: absolute;
bottom: 0px;
left: 0; right: 0;
text-align: center;
}
img.cp-app-drive-content-icon {
height: 48px;
max-height: none;
max-width: none;
margin: 8px 0;
}
.fa {
display: block;
margin: auto;
font-size: 48px;
margin: 8px 0;
text-align: center;
&.listonly {
display: none;
}
}
}
}
img.cp-app-drive-icon {
max-width: 20px; max-width: 20px;
max-height: 16px; max-height: 16px;
} }
.unselectable { .cp-unselectable {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -115,7 +169,7 @@ img.icon {
user-select: none; user-select: none;
} }
.app-container { .cp-app-drive-container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
@ -123,18 +177,18 @@ img.icon {
flex-flow: row; flex-flow: row;
@media screen and (max-width: @size-mobile) { @media screen and (max-width: @size-mobile) {
display: block; display: block;
#driveToolbar { #cp-app-drive-toolbar {
.path .element { .path .element {
display: none; display: none;
} }
} }
#tree { #cp-app-drive-tree {
resize: none; resize: none;
width: 100%; width: 100%;
max-width: unset; max-width: unset;
max-height: unset; max-height: unset;
border-bottom: 1px solid @toolbar-border-col; border-bottom: 1px solid @toolbar-border-col;
.category { .cp-app-drive-tree-category {
margin-top: 0.5em; margin-top: 0.5em;
} }
} }
@ -171,7 +225,7 @@ li {
user-select: none; user-select: none;
} }
.contextMenu { .cp-app-drive-context {
display: none; display: none;
position: absolute; position: absolute;
z-index: 500; z-index: 500;
@ -184,12 +238,12 @@ li {
} }
} }
.droppable { .cp-app-drive-element-droppable {
background-color: #FE9A2E; background-color: #FE9A2E;
color: #222; color: #222;
} }
.selected { .cp-app-drive-element-selected {
background: #666 !important; background: #666 !important;
color: #eee; color: #eee;
margin: -1px; margin: -1px;
@ -198,7 +252,7 @@ li {
} }
} }
.selectedTmp { .cp-app-drive-element-selected-tmp {
border: 1px dotted #bbb; border: 1px dotted #bbb;
background: #AAA; background: #AAA;
color: #ddd; color: #ddd;
@ -218,7 +272,7 @@ span {
/* TREE */ /* TREE */
#tree { #cp-app-drive-tree {
font-size: @main-font-size; font-size: @main-font-size;
//border-right: 1px solid #ccc; //border-right: 1px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
@ -234,23 +288,23 @@ span {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%; max-height: 100%;
.categories-container { .cp-app-drive-tree-categories-container {
flex: 1; flex: 1;
max-width: 500px; max-width: 500px;
overflow: auto; overflow: auto;
} }
img.icon { img.cp-app-drive-icon {
margin-bottom: 3px; margin-bottom: 3px;
margin-left: -2px; margin-left: -2px;
} }
.docTree { .cp-app-drive-tree-docs {
margin-top: 20px; margin-top: 20px;
//padding: 0 0 0 20px; //padding: 0 0 0 20px;
padding: 0; padding: 0;
cursor: auto; cursor: auto;
&li, li { &li, li {
padding: 0; padding: 0;
&.collapsed ul { &.cp-app-drive-element-collapsed ul {
display: none; display: none;
} }
input { input {
@ -259,7 +313,7 @@ span {
border: 0; border: 0;
color: lighten(@tree-fg, 40%); color: lighten(@tree-fg, 40%);
} }
& > span.element-row { & > span.cp-app-drive-element-row {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
//min-width: ~"calc(100% + 5px)"; //min-width: ~"calc(100% + 5px)";
@ -272,23 +326,23 @@ span {
margin-left: -5px; margin-left: -5px;
padding-left: 5px; padding-left: 5px;
} }
& > span.element-row:not(.selected):not(.active):hover { & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover {
//background-color: @drive-hover; //background-color: @drive-hover;
} }
} }
} }
span.element { span.cp-app-drive-element {
cursor: pointer; cursor: pointer;
} }
/*.active { /*.cp-app-drive-element-active {
&:not(.selected):not(.droppable) { &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-droppable) {
background-color: darken(@drive-hover, 15%); background-color: darken(@drive-hover, 15%);
} }
}*/ }*/
.category { .cp-app-drive-tree-category {
margin: 0; margin: 0;
margin-top: 15px; margin-top: 15px;
.root { .cp-app-drive-tree-root {
&> .fa { &> .fa {
min-width: 30px; min-width: 30px;
cursor: pointer; cursor: pointer;
@ -296,7 +350,7 @@ span {
} }
li { li {
padding: 0; padding: 0;
.element-row { .cp-app-drive-element-row {
display: block; display: block;
padding-left: 20px; padding-left: 20px;
.leftsideCategory(); .leftsideCategory();
@ -307,16 +361,13 @@ span {
} }
} }
} }
.category:last-child { .cp-app-drive-tree-category:last-child {
margin-bottom: 20px; margin-bottom: 20px;
} }
#allfilesTree {
margin-top: 0;
}
.limit-container { .limit-container {
margin-top: 0; margin-top: 0;
} }
#searchContainer { #cp-app-drive-tree-search {
text-align: center; text-align: center;
padding: 0; padding: 0;
position: relative; position: relative;
@ -338,14 +389,14 @@ span {
outline-width: 0px; outline-width: 0px;
} }
} }
.searchIcon { .cp-app-drive-tree-search-con {
color: @toolbar-drive-color; color: @toolbar-drive-color;
position: absolute; position: absolute;
left: 20px; // TODO align with drive categories left: 20px; // TODO align with drive categories
top: 8px; top: 8px;
} }
} }
.fa.expcol { .fa.cp-app-drive-icon-expcol {
margin-left: -10px; margin-left: -10px;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
@ -363,17 +414,17 @@ span {
top: -1px; top: -1px;
} }
} }
.docTree { .cp-app-drive-tree-docs {
.root > .element-row > .expcol { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
position: relative; position: relative;
top:0; top:0;
left: -10px; left: -10px;
} }
.root > .element-row > .folder { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
margin-left: -5px; margin-left: -5px;
} }
.root { .cp-app-drive-tree-root {
&> .element-row { &> .cp-app-drive-element-row {
padding-left: 20px; padding-left: 20px;
} }
&> ul { &> ul {
@ -383,7 +434,7 @@ span {
} }
// Expand/collapse lines // Expand/collapse lines
.docTree ul { .cp-app-drive-tree-docs ul {
margin: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;
list-style: none; list-style: none;
padding-left: 10px; padding-left: 10px;
@ -409,7 +460,7 @@ span {
border-left: 1px solid @tree-lines-col; border-left: 1px solid @tree-lines-col;
height: 100%; height: 100%;
} }
&.root { &.cp-app-drive-tree-root {
margin: 0px 0px 0px -10px; margin: 0px 0px 0px -10px;
&:before { &:before {
display: none; display: none;
@ -426,7 +477,7 @@ span {
} }
/* CONTENT */ /* CONTENT */
#rightCol { #cp-app-drive-content-container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1; flex: 1;
@ -434,7 +485,7 @@ span {
// https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
min-width: 0; min-width: 0;
} }
#content { #cp-app-drive-content {
box-sizing: border-box; box-sizing: border-box;
background: @content-bg; background: @content-bg;
color: @content-fg; color: @content-fg;
@ -443,20 +494,20 @@ span {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
position: relative; position: relative;
.selectBox { .cp-app-drive-content-select-box {
display: none; display: none;
background-color: rgba(100, 100, 100, 0.7); background-color: rgba(100, 100, 100, 0.7);
position: absolute; position: absolute;
z-index: 50; z-index: 50;
} }
&.readonly { &.cp-app-drive-readonly {
background: @content-bg-ro; background: @content-bg-ro;
} }
h1 { h1 {
padding-left: 10px; padding-left: 10px;
margin-top: 10px; margin-top: 10px;
} }
.info-box { .cp-app-drive-content-info-box {
line-height: 2em; line-height: 2em;
padding: 0.25em 0.75em; padding: 0.25em 0.75em;
margin: 1em; margin: 1em;
@ -466,28 +517,26 @@ span {
float: right; float: right;
margin-top: 0.5em; margin-top: 0.5em;
} }
&.noclose {
}
} }
li { li {
cursor: default; cursor: default;
&:not(.header) { &:not(.cp-app-drive-element-header) {
*:not(input) { *:not(input) {
/*pointer-events: none;*/ /*pointer-events: none;*/
} }
&:hover { &:hover {
&:not(.selected, .selectedTmp) { &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
background-color: @drive-hover; background-color: @drive-hover;
} }
.name { .cp-app-drive-element-name {
/*text-decoration: underline;*/ /*text-decoration: underline;*/
} }
} }
} }
} }
#folderContent { #cp-app-drive-content-folder {
li { li {
&.searchResult { &.cp-app-drive-search-result {
border-bottom: 1px solid @info-box-border; border-bottom: 1px solid @info-box-border;
display: block; display: block;
&:hover { &:hover {
@ -495,13 +544,13 @@ span {
} }
table { table {
width: 100%; width: 100%;
.label2 { .cp-app-drive-search-label2 {
width: 150px; width: 150px;
font-size: 15px; font-size: 15px;
text-align: right; text-align: right;
padding-right: 15px; padding-right: 15px;
} }
.openDir { .cp-app-drive-search-opendir {
a { a {
cursor: pointer; cursor: pointer;
color: #41b7d8; color: #41b7d8;
@ -511,25 +560,25 @@ span {
} }
} }
} }
.path { .cp-app-drive-search-path {
font-style: italic; font-style: italic;
direction: rtl; direction: rtl;
.element { .cp-app-drive-path-element {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
} }
.title { .cp-app-drive-search-title {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: @drive-hover; background-color: @drive-hover;
} }
} }
.col2 { .cp-app-drive-search-col2 {
width: 250px; width: 250px;
} }
td.icon { td.cp-app-drive-search-icon {
width: 50px; width: 50px;
font-size: 40px; font-size: 40px;
} }
@ -537,21 +586,21 @@ span {
} }
} }
} }
.element { .cp-app-drive-element {
.truncated { display: none; } .cp-app-drive-element-truncated { display: none; }
} }
div.grid { div.cp-app-drive-content-grid {
padding: 20px; padding: 20px;
.fileIcon; .fileIcon;
li { li {
&.element { &.cp-app-drive-element {
position: relative; position: relative;
} }
input { input {
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
} }
.state { .cp-app-drive-element-state {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
@ -561,10 +610,10 @@ span {
} }
} }
} }
.listElement { .cp-app-drive-element-list {
display: none; display: none;
} }
.addpad { .cp-app-drive-new-ghost {
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
padding: 0; padding: 0;
@ -580,8 +629,8 @@ span {
} }
} }
.list { .cp-app-drive-content-list {
.grid-element { .cp-app-drive-element-grid {
display: none; display: none;
} }
// Make it act as a table! // Make it act as a table!
@ -597,11 +646,11 @@ span {
padding: 0 5px; padding: 0 5px;
display: table-cell; display: table-cell;
} }
&:not(.header) { &:not(.cp-app-drive-element-header) {
height: @toolbar-line-height; height: @toolbar-line-height;
line-height: @toolbar-line-height; line-height: @toolbar-line-height;
} }
&.header { &.cp-app-drive-element-header {
cursor: default; cursor: default;
color: @table-header-fg; color: @table-header-fg;
span { span {
@ -614,10 +663,10 @@ span {
} }
&> span { &> span {
padding: 15px 5px; padding: 15px 5px;
&.active { &.cp-app-drive-sort-active {
font-weight: bold; font-weight: bold;
} }
&.clickable { &.cp-app-drive-sort-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: @table-header-bg; background: @table-header-bg;
@ -626,29 +675,29 @@ span {
} }
} }
} }
.element { .cp-app-drive-element {
span { span {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
&.state { &.cp-app-drive-element-state {
.fa:not(:last-child) { .fa:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
} }
&.icon, &.state { &.cp-app-drive-content-icon, &.cp-app-drive-element-state {
width: 30px; width: 30px;
} }
&.type, &.atime, &.ctime { &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
width: 175px; width: 175px;
} }
&.title { &.cp-app-drive-element-title {
width: 250px; width: 250px;
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
display: none; display: none;
} }
} }
&.folders, &.files { &.cp-app-drive-element-folders, &.cp-app-drive-element-files {
width: 150px; width: 150px;
} }
} }
@ -656,23 +705,15 @@ span {
} }
} }
.parentFolder { #cp-app-drive-content-folder {
cursor: pointer;
margin-left: 10px;
&:hover {
text-decoration: underline;
}
}
#folderContent {
padding-right: 10px; padding-right: 10px;
flex: 1; flex: 1;
} }
#addPadDialog.cp-modal-container { #cp-app-drive-new-ghost-dialog.cp-modal-container {
.fileIcon; .fileIcon;
li:not(.selected):hover { li:not(.cp-app-drive-element-selected):hover {
border: 1px solid white; border: 1px solid white;
} }
.cp-modal { .cp-modal {
@ -690,7 +731,7 @@ span {
justify-content: center; justify-content: center;
align-content: center; align-content: center;
overflow-y: auto; overflow-y: auto;
.uploadFile { .cp-app-drive-new-upload {
break-after: always; break-after: always;
page-break-after: always; page-break-after: always;
} }
@ -712,7 +753,7 @@ span {
.fa { .fa {
font-size: 32px; font-size: 32px;
} }
.name { .cp-app-drive-new-name {
height: auto; height: auto;
} }
} }
@ -724,7 +765,7 @@ span {
/* Toolbar */ /* Toolbar */
#driveToolbar { #cp-app-drive-toolbar {
background: lighten(@toolbar-drive-bg, 8%); background: lighten(@toolbar-drive-bg, 8%);
color: @toolbar-drive-color; color: @toolbar-drive-color;
//height: 30px; //height: 30px;
@ -744,11 +785,6 @@ span {
} }
} }
.newPadContainer {
display: inline-block;
height: 100%;
}
.history { .history {
float: right; float: right;
.cp-toolbar-drawer-element { .cp-toolbar-drawer-element {
@ -756,7 +792,7 @@ span {
} }
} }
.rightside, .leftside { .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -782,23 +818,23 @@ span {
&:hover { &:hover {
background: @toolbar-drive-bg; background: @toolbar-drive-bg;
} }
&.active { &.cp-app-drive-toolbar-active {
display: none; display: none;
} }
} }
} }
.rightside { .cp-app-drive-toolbar-rightside {
float: right; float: right;
& > * { & > * {
float: right; float: right;
} }
#contextButtonsContainer { #cp-app-drive-toolbar-contextbuttons {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
} }
padding-left: 10px; padding-left: 10px;
} }
.leftside { .cp-app-drive-toolbar-leftside {
& > span { & > span {
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -839,7 +875,7 @@ span {
margin-right: 2px; margin-right: 2px;
} }
.path { .cp-app-drive-path {
flex: 1; flex: 1;
width: 100%; width: 100%;
height: @toolbar-line-height; height: @toolbar-line-height;
@ -851,7 +887,7 @@ span {
direction: rtl; direction: rtl;
max-width: 100%; max-width: 100%;
text-align: left; text-align: left;
.element { .cp-app-drive-path-element {
display: inline-block; display: inline-block;
height: @toolbar-line-height; height: @toolbar-line-height;
line-height: @toolbar-line-height; line-height: @toolbar-line-height;
@ -862,10 +898,10 @@ span {
color: @toolbar-drive-color; color: @toolbar-drive-color;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.15s; transition: all 0.15s;
&.separator { &.cp-app-drive-path-separator {
color: #ccc; color: #ccc;
} }
&.clickable { &.cp-app-drive-path-lickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: darken(@toolbar-drive-bg, 15%); background: darken(@toolbar-drive-bg, 15%);

60
www/newdrive/inner.html
View File

@ -10,51 +10,51 @@
</head> </head>
<body class="cp-app-drive"> <body class="cp-app-drive">
<div id="cp-toolbar" class="cp-toolbar-container"></div> <div id="cp-toolbar" class="cp-toolbar-container"></div>
<div class="app-container" tabindex="0"> <div class="cp-app-drive-container" tabindex="0">
<div id="tree"> <div id="cp-app-drive-tree">
</div> </div>
<div id="rightCol"> <div id="cp-app-drive-content-container">
<div id="driveToolbar"></div> <div id="cp-app-drive-toolbar"></div>
<div id="content" tabindex="2"></div> <div id="cp-app-drive-content" tabindex="2"></div>
</div> </div>
<div id="treeContextMenu" class="contextMenu dropdown clearfix unselectable"> <div id="cp-app-drive-context-tree" class="cp-app-drive-context dropdown cp-unselectable">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li> <li><a tabindex="-1" data-icon="fa-folder-open" class="cp-app-drive-context-open dropdown-item" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li> <li><a tabindex="-1" data-icon="fa-eye" class="cp-app-drive-context-openro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
<li><a tabindex="-1" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li> <li><a tabindex="-1" data-icon="fa-pencil" class="cp-app-drive-context-rename cp-app-drive-context-editable dropdown-item" data-localization="fc_rename">Rename</a></li>
<li><a tabindex="-1" data-icon="fa-trash" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li> <li><a tabindex="-1" data-icon="fa-trash" class="cp-app-drive-context-delete cp-app-drive-context-editable dropdown-item" data-localization="fc_delete">Delete</a></li>
<li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li> <li><a tabindex="-1" data-icon="fa-folder" class="cp-app-drive-context-newfolder cp-app-drive-context-editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li> <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
</ul> </ul>
</div> </div>
<div id="contentContextMenu" class="contextMenu dropdown clearfix unselectable"> <div id="cp-app-drive-context-content" class="cp-app-drive-context dropdown cp-unselectable">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li> <li><a tabindex="-1" data-icon="fa-folder" class="cp-app-drive-context-newfolder cp-app-drive-context-editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
<li><a tabindex="-1" data-icon="fa-file-word-o" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li> <li><a tabindex="-1" data-icon="fa-file-word-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
<li><a tabindex="-1" data-icon="fa-file-code-o" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li> <li><a tabindex="-1" data-icon="fa-file-code-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
<li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li> <li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
<li><a tabindex="-1" data-icon="fa-calendar" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li> <li><a tabindex="-1" data-icon="fa-calendar" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
<li><a tabindex="-1" data-icon="fa-paint-brush" class="newdoc own editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li> <li><a tabindex="-1" data-icon="fa-paint-brush" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li>
</ul> </ul>
</div> </div>
<div id="defaultContextMenu" class="contextMenu dropdown clearfix unselectable"> <div id="cp-app-drive-context-default" class="cp-app-drive-context dropdown cp-unselectable">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li> <li><a tabindex="-1" data-icon="fa-folder-open" class="cp-app-drive-context-open dropdown-item" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li> <li><a tabindex="-1" data-icon="fa-eye" class="cp-app-drive-context-openro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
<li><a tabindex="-1" data-icon="fa-trash" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li> <li><a tabindex="-1" data-icon="fa-trash" class="cp-app-drive-context-delete dropdown-item" data-localization="fc_delete">Delete</a></li>
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li> <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
</ul> </ul>
</div> </div>
<div id="trashTreeContextMenu" class="contextMenu dropdown clearfix unselectable"> <div id="cp-app-drive-context-trashtree" class="cp-app-drive-context dropdown cp-unselectable">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" data-icon="fa-trash-o" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li> <li><a tabindex="-1" data-icon="fa-trash-o" class="cp-app-drive-context-empty cp-app-drive-context-editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
</ul> </ul>
</div> </div>
<div id="trashContextMenu" class="contextMenu dropdown clearfix unselectable"> <div id="cp-app-drive-context-trash" class="cp-app-drive-context dropdown cp-unselectable">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" data-icon="fa-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li> <li><a tabindex="-1" data-icon="fa-eraser" class="cp-app-drive-context-remove cp-app-drive-context-editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
<li><a tabindex="-1" data-icon="fa-repeat" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li> <li><a tabindex="-1" data-icon="fa-repeat" class="cp-app-drive-context-restore cp-app-drive-context-editable dropdown-item" data-localization="fc_restore">Restore</a></li>
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li> <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
</ul> </ul>
</div> </div>
</div> </div>

616
www/newdrive/inner.js
View File

File diff suppressed because it is too large Load Diff

2
www/settings/main.js
View File

@ -381,7 +381,7 @@ define([
if (!yes) { return; } if (!yes) { return; }
$spinner.show(); $spinner.show();
$ok.hide(); $ok.hide();
Merge.anonDriveIntoUser(obj.proxy, function () { Merge.anonDriveIntoUser(obj, localStorage.FS_hash, function () {
$spinner.hide(); $spinner.hide();
$ok.show(); $ok.show();
Cryptpad.alert(Messages.settings_importDone); Cryptpad.alert(Messages.settings_importDone);