Move the file manager into /drive and add a toolbar
This commit is contained in:
yflory
356
www/drive/file.css
Normal file
356
www/drive/file.css
Normal file
@@ -0,0 +1,356 @@
|
||||
/* PAGE */
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.fa {
|
||||
/*min-width: 17px;*/
|
||||
margin-right: 3px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0px 5px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.folder, .file {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.contextMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.droppable {
|
||||
background-color: #FE9A2E;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 1px dotted #bbb;
|
||||
background: #666;
|
||||
color: #eee;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
/* TREE */
|
||||
|
||||
|
||||
#tree {
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 350px;
|
||||
white-space: nowrap;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
#tree li {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
#tree span.element {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tree li > span.element:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#tree .active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#tree #trashTree, #tree #unsortedTree, #tree #templateTree, #tree #allfilesTree {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#tree .fa.expcol {
|
||||
margin-left: -10px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 9px;
|
||||
width: auto;
|
||||
height: 11px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
}
|
||||
#tree .fa.expcol:before {
|
||||
position:relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
#tree li.collapsed ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tree li input {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
/* Tree lines */
|
||||
|
||||
#tree ul {
|
||||
margin: 0px 0px 0px 10px;
|
||||
list-style: none;
|
||||
}
|
||||
#tree ul li {
|
||||
position: relative;
|
||||
}
|
||||
#tree ul li:before {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -0.25em;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
width: 17.5px;
|
||||
}
|
||||
#tree ul li:after {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 100%;
|
||||
}
|
||||
#tree ul li.root {
|
||||
margin: 0px 0px 0px -10px;
|
||||
}
|
||||
#tree ul li.root:before {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li.root:after {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#content .info-box {
|
||||
margin: 0px auto;
|
||||
padding: 5px;
|
||||
background: #ddddff;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#content .info-box span {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.topButtonContainer {
|
||||
border: 1px solid #ccc;
|
||||
float: right;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.parentFolder {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.parentFolder:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#folderContent {
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#content li:not(.header) * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#content li:hover:not(.header) .name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#content .grid li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#content .grid li .name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content .grid li input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content .grid li .fa {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 40px;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#content .list li {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
padding-right: 0px;
|
||||
}
|
||||
#content .list li .element {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#content .list li.header {
|
||||
cursor: default;
|
||||
color: #008;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#content .list li.header .element span:not(.fa) {
|
||||
border-right: 1px solid #CCC;
|
||||
text-align: left;
|
||||
}
|
||||
#content .list li.header .element span.fa {
|
||||
float: right;
|
||||
}
|
||||
#content .list li.header span.name {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#content .list .element span {
|
||||
padding: 0px 10px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding-right: 0px;
|
||||
border-right: 10px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
#content .list .element span.name {
|
||||
width: 478px;
|
||||
}
|
||||
.iframe #content .list .element span.name {
|
||||
width: 278px;
|
||||
}
|
||||
#content .list .header span.name {
|
||||
width: 500px;
|
||||
}
|
||||
.iframe #content .list .header span.name {
|
||||
width: 300px;
|
||||
}
|
||||
#content .list .element span.type, #content .list .element span.atime, #content .list .element span.ctime {
|
||||
width: 175px;
|
||||
}
|
||||
#content .list .element span.title {
|
||||
width: 250px;
|
||||
}
|
||||
#content .list .element span.folders {
|
||||
width: 150px;
|
||||
}
|
||||
#content .list .element span.files {
|
||||
width: 150px;
|
||||
}
|
||||
#content div.grid .listElement {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#content .list .element span.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1201px) {
|
||||
#content .list .element span.title {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
|
||||
#driveToolbar {
|
||||
background: #ccc;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.newElement {
|
||||
border-radius: 0px;
|
||||
height: 30px;
|
||||
margin: 5px 5px;
|
||||
background: #888;
|
||||
color: #eee;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.newElement:hover {
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
}
|
||||
|
||||
42
www/drive/index.html
Normal file
42
www/drive/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="cp">
|
||||
<head>
|
||||
<title>CryptDrive</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="icon" type="image/png"
|
||||
href="/customize/main-favicon.png"
|
||||
data-main-favicon="/customize/main-favicon.png"
|
||||
data-alt-favicon="/customize/alt-favicon.png"
|
||||
id="favicon" />
|
||||
<link rel="stylesheet" href="/customize/main.css" />
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
waitSeconds: 60,
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#pad-iframe {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="pad-iframe" src="inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
50
www/drive/inner.html
Normal file
50
www/drive/inner.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
|
||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="file.css" />
|
||||
</head>
|
||||
<body>
|
||||
<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 editable" data-localization="fc_rename">Rename</a></li>
|
||||
<li><a tabindex="-1" href="#" class="delete editable" data-localization="fc_delete">Delete</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newfolder editable" 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 editable" data-localization="fc_newfolder">New folder</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="pad" data-localization="fc_newpad" target="_blank">New pad</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="code" data-localization="fc_newcode" target="_blank">New code</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="slide" data-localization="fc_newslide" target="_blank">New slide</a></li>
|
||||
<li><a tabindex="-1" href="#" class="newdoc own editable" 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 editable" 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 editable" data-localization="fc_remove">Delete permanently</a></li>
|
||||
<li><a tabindex="-1" href="#" class="restore editable" 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>
|
||||
|
||||
1766
www/drive/main.js
Normal file
1766
www/drive/main.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user