building file tree
This commit is contained in:
Jon Lambson
parent
0611d314b2
commit
451d6e578a
122
css/styles.css
122
css/styles.css
|
|
@ -299,26 +299,116 @@
|
|||
-webkit-padding-start: 0px;
|
||||
}
|
||||
|
||||
/* ————————————————————–
|
||||
Tree core styles
|
||||
*/
|
||||
.tree { margin: 1em; }
|
||||
|
||||
.tree input {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.tree input ~ ul { display: none; }
|
||||
|
||||
.tree input:checked ~ ul { display: block; }
|
||||
|
||||
/* ————————————————————–
|
||||
Tree rows
|
||||
*/
|
||||
.tree li {
|
||||
line-height: 1.2;
|
||||
position: relative;
|
||||
padding: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
.tree ul li { padding: 1em 0 0 1em; }
|
||||
|
||||
.file-tree-container .file_tree { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
|
||||
.file-tree-container .file_tree input[type=radio], .file-tree-container .file_tree input[type=checkbox] { width: 0; height: 0; opacity: 0; position: absolute; margin: 0; }
|
||||
.file-tree-container .file_tree label { display: block; width: 100%; font-size: 14px; color: black; height: 30px; line-height: 30px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
|
||||
.file-tree-container .file_tree label:hover { color: #a4d3ff; } .file_tree .dir_wrapper { display: none; padding-left: 28px; }
|
||||
.file-tree-container .file_tree .dir_wrapper label { padding-left: 0; }
|
||||
.file-tree-container .file_tree input[type=checkbox] + label { color: black; padding-left: 30px; }
|
||||
.file-tree-container .file_tree input[type=checkbox] + label:hover { color: #a4d3ff; }
|
||||
.file-tree-container .file_tree input[type=radio]:checked + label { color: #337ab7; }
|
||||
.file-tree-container .file_tree input[type=checkbox]:checked + label + .dir_wrapper { display: block; }
|
||||
.file-tree-container .file_tree input[type=checkbox] + label { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABQCAYAAABxs9dPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc0Q0FDNEY5NDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjc0Q0FDNEZBNDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzRDQUM0Rjc0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzRDQUM0Rjg0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7T+9ssAAABJ0lEQVR42uzZMQrCMBgF4FbE0UFPILg5qdAbCA7q5qK7p3Bw8BK6u4giboKCJxDB1cFdsOjapb5ACyoiNG3pj30P3hj4SBOaEPP6cFwjWG5oAz0aMSSjMaaIbtGqFJCP2qE1KSCVgjdTkaKyIccr1B49SwGp5NF6HCAbvRjJpOTN9htog/YTAs3QXthFbUja9gQRRBBBBBFEEEEEpQVkalyl0zVD6tYxlfbJZK0h13W5ywgiiCCCCCKIIIII+nGmnp/u4g75k4Bj1IviCHXiAg00xlXQbhwo3TXUQRdoTtKibqPLqFFhH/Ba6BpdSQGpNL3+793ej3pRHCbkGPuz/PnmekgIZPNfRhBBBBFEEEEEEURQ8DO1pXGtjirWN1DZKz/Za54CDABbrytKn66XKwAAAABJRU5ErkJggg==); background-size: 18px 40px; background-position: top 7px left 6px; background-repeat: no-repeat; vertical-align: middle; }
|
||||
.file-tree-container .file_tree input[type=checkbox] + label:hover { background-position: top -18px left 6px; }
|
||||
.tree > li:last-child { padding-bottom: 0; }
|
||||
|
||||
.file-tree .directory { font-family: monospace; line-height: 2em; }
|
||||
.file-tree .directory_child { margin-left: 2em; position: relative; }
|
||||
.file-tree .directory_child:last-child::after { display: none; }
|
||||
.file-tree .directory_child::before { border-bottom: 1px solid; border-left: 1px solid; content: ""; height: 1em; left: -1em; position: absolute; width: 0.7em; }
|
||||
.file-tree .directory_child::after { border-left: 1px solid; content: ""; height: 100%; left: -1em; position: absolute; top: 0; }
|
||||
/* ————————————————————–
|
||||
Tree labels
|
||||
*/
|
||||
.tree_label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
label.tree_label { cursor: pointer; }
|
||||
|
||||
label.tree_label:hover { color: #666; }
|
||||
|
||||
/* ————————————————————–
|
||||
Tree expanded icon
|
||||
*/
|
||||
label.tree_label:before {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
margin: 0 1em 0 -2em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
content: '+';
|
||||
text-align: center;
|
||||
line-height: .9em;
|
||||
}
|
||||
|
||||
:checked ~ label.tree_label:before { content: '–'; }
|
||||
|
||||
/* ————————————————————–
|
||||
Tree branches
|
||||
*/
|
||||
/*.tree li:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -.5em;
|
||||
display: block;
|
||||
width: 0;
|
||||
border-left: 1px solid #777;
|
||||
content: "";
|
||||
}*/
|
||||
|
||||
.tree_label:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1.5em;
|
||||
display: block;
|
||||
height: 0.5em;
|
||||
width: 1em;
|
||||
border-bottom: 1px solid #777;
|
||||
border-left: 1px solid #777;
|
||||
border-radius: 0 0 0 .3em;
|
||||
content: '';
|
||||
}
|
||||
|
||||
label.tree_label:after { border-bottom: 0; }
|
||||
|
||||
:checked ~ label.tree_label:after {
|
||||
border-radius: 0 .3em 0 0;
|
||||
border-top: 1px solid #777;
|
||||
border-right: 1px solid #777;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
bottom: 0;
|
||||
top: 0.5em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tree li:last-child:before {
|
||||
height: 1em;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.tree > li:last-child:before { display: none; }
|
||||
|
||||
.tree_custom {
|
||||
display: block;
|
||||
background: #eee;
|
||||
padding: 1em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,6 +337,7 @@ app.controller('websiteCtrl', [
|
|||
});
|
||||
};
|
||||
vm.Sites.contents = function (r) {
|
||||
vm.showListFiles = true;
|
||||
var pkg = Auth.oauth3.pkg('www@daplie.com');
|
||||
return pkg.contents({
|
||||
hostname: r.domain
|
||||
|
|
@ -346,7 +347,12 @@ app.controller('websiteCtrl', [
|
|||
//, sub: r.sub
|
||||
, path: r.newPath
|
||||
}).then(function (result) {
|
||||
window.alert(JSON.stringify(result));
|
||||
// window.alert(JSON.stringify(result));
|
||||
vm.fileTree = result;
|
||||
console.log(result);
|
||||
console.log('data ' , result.data);
|
||||
result.data.forEach(function(file) {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -379,6 +385,7 @@ app.controller('websiteCtrl', [
|
|||
});
|
||||
};
|
||||
vm.Shares.list = function (r) {
|
||||
vm.showSharesList = true;
|
||||
var pkg = Auth.oauth3.pkg('www@daplie.com');
|
||||
return pkg.listShares({
|
||||
domain: r.domain
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title">Create a new Website</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -121,12 +121,12 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal fade {{r.challenge}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
|
||||
<div class="modal fade {{ r.challenge }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title"><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-inline text-center">
|
||||
|
|
@ -140,35 +140,86 @@
|
|||
<div class="form-group">
|
||||
<input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" ng-click="vm.Shares.invite(r)">Invite</button>
|
||||
<button class="btn btn-info" ng-click="vm.Shares.list(r)">View Shares</button>
|
||||
<button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
|
||||
</form>
|
||||
<form class="form-inline text-center">
|
||||
<h4 class="text-left">Shares:</h4>
|
||||
<button class="btn btn-info" ng-click="vm.Shares.list(r)" ng-hide="vm.showSharesList">View Shares</button>
|
||||
<button class="btn btn-info" ng-click="vm.showSharesList = false" ng-show="vm.showSharesList">Hide Shares</button>
|
||||
<div class="white-well" ng-show="vm.showSharesList">
|
||||
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
|
||||
<li>
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center">
|
||||
<img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 ng-bind="share.comment">friend@email.com</h4>
|
||||
<p><b>Share Path:</b> <span ng-bind="share.path">/</span></p>
|
||||
<p><b>Actions Allowed:</b> <span ng-bind="share.mode">rwx</span></p>
|
||||
</div>
|
||||
<div class="media-right align-self-center">
|
||||
<button class="btn btn-danger" ng-click="vm.Shares.remove(r, share)"><i class="fa fa-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
<form class="form-inline text-center">
|
||||
<h4 class="text-left">List Files:</h4>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" ng-model="r.newPath" placeholder="/" />
|
||||
</div>
|
||||
<button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
|
||||
<button class="btn btn-info" ng-click="vm.Sites.contents(r)">List Files</button>
|
||||
<button class="btn btn-primary" ng-click="vm.showListFiles = false" ng-show="vm.showListFiles">Hide Files</button>
|
||||
<div class="white-well" ng-show="vm.showListFiles">
|
||||
<div class="">
|
||||
<span>{{ vm.fileTree }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="tree ls-none">
|
||||
<li class="ls-none">
|
||||
<input type="checkbox" id="c1" />
|
||||
<label class="tree_label" for="c1">Level 0</label>
|
||||
<ul class="ls-none">
|
||||
<li class="ls-none">
|
||||
<input type="checkbox" id="c2" />
|
||||
<label for="c2" class="tree_label">Level 1</label>
|
||||
<ul class="ls-none">
|
||||
<li><span class="tree_label">Level 2</span></li>
|
||||
<li><span class="tree_label">Level 2</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="tree ls-none">
|
||||
<li class="ls-none">
|
||||
<input type="checkbox" id="c1" />
|
||||
<label class="tree_label" for="c1">Level 0</label>
|
||||
<ul class="ls-none">
|
||||
<li class="ls-none">
|
||||
<input type="checkbox" id="c2" />
|
||||
<label for="c2" class="tree_label">Level 1</label>
|
||||
<ul class="ls-none">
|
||||
<li><span class="tree_label">Level 2</span></li>
|
||||
<li><span class="tree_label">Level 2</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
|
||||
<li>
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center">
|
||||
<img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 ng-bind="share.comment">friend@email.com</h4>
|
||||
<p>Share Path: <span ng-bind="share.path">/</span></p>
|
||||
<p>Actions Allowed: <span ng-bind="share.mode">rwx</span></p>
|
||||
</div>
|
||||
<div class="media-right align-self-center">
|
||||
<button class="btn btn-danger" ng-click="vm.Shares.remove(r, share)">X</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="">
|
||||
<h4 class="text-left">Select Upload:</h4>
|
||||
<div>
|
||||
|
|
@ -189,84 +240,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white-well">
|
||||
<div class="file-tree-container">
|
||||
<div class="file_tree">
|
||||
<input type="checkbox" id="f_myfilms">
|
||||
<label for="f_myfilms">My Films</label>
|
||||
<div class="dir_wrapper">
|
||||
<input type="checkbox" id="f_wehave">
|
||||
<label for="f_wehave">We Have</label>
|
||||
<div class="dir_wrapper">
|
||||
<input type="checkbox" id="f_togo">
|
||||
<label for="f_togo">To Go</label>
|
||||
<div class="dir_wrapper">
|
||||
<input type="radio" name="hosted_files" id="f_deeper_js" value="Deeper.js">
|
||||
<label for="f_deeper_js">Deeper.js</label>
|
||||
<input type="radio" name="hosted_files" id="f_fileception_js" value="Fileception.js">
|
||||
<label for="f_fileception_js">Fileception.js</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="f_justafolder">
|
||||
<label for="f_justafolder">Just a folder</label>
|
||||
<div class="dir_wrapper">
|
||||
<input type="radio" name="hosted_files" id="f_withafile_js" value="with_a_file.js">
|
||||
<label for="f_withafile_js">with_a_file.js</label>
|
||||
</div>
|
||||
|
||||
<input type="radio" name="hosted_files" id="f_main_js" value="main.js">
|
||||
<label for="f_main_js">main.js</label>
|
||||
<input type="radio" name="hosted_files" id="f_globals_js" value="globals.js">
|
||||
<label for="f_globals_js">globals.js</label>
|
||||
<input type="radio" name="hosted_files" id="f_filler_js" value="filler.js">
|
||||
<label for="f_filler_js">filler.js</label>
|
||||
<input type="radio" name="hosted_files" id="f_horror_vacui_js" value="horror_vacui.js">
|
||||
<label for="f_horror_vacui_js">horror_vacui.js</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white-well">
|
||||
<div class="file-tree">
|
||||
<ul class="directory ls-none ls-pd0">
|
||||
<li>The World
|
||||
<ul class="ls-none ls-pd0">
|
||||
<li class="directory_child">Africa
|
||||
<ul class="ls-none ls-pd0">
|
||||
<li class="directory_child">Egypt</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="directory_child">Antarctica</li>
|
||||
<li class="directory_child">Asia
|
||||
<ul class="ls-none ls-pd0">
|
||||
<li class="directory_child">Japan</li>
|
||||
<li class="directory_child">South Korea
|
||||
<ul class="ls-none ls-pd0">
|
||||
<li class="directory_child">Seoul</li>
|
||||
<li class="directory_child">Incheon</li>
|
||||
</ul>
|
||||
<li class="directory_child">Thailand</li>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="directory_child">Australia</li>
|
||||
<li class="directory_child">Europe</li>
|
||||
<li class="directory_child">North America</li>
|
||||
<li class="directory_child">South America</li>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -378,7 +361,7 @@
|
|||
<button class="btn btn-link" ng-click="vm.Sites.remove(r)">Clear</button></td>
|
||||
<td>
|
||||
<input type="text" ng-model="r.newPath" placeholder="/" />
|
||||
<button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
|
||||
<!-- <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button> -->
|
||||
</td>
|
||||
<td ng-bind="r.path">Sites > blogs > blog.jane.smith.net</td>
|
||||
<td><span ng-repeat="share in r.sharedWith" ng-if="!share.me">
|
||||
|
|
|
|||
Loading…
Reference in New Issue