From 451d6e578a5db52f47ed1630d8aa9b0e78578c9b Mon Sep 17 00:00:00 2001 From: Jon Lambson Date: Wed, 20 Sep 2017 12:43:13 -0600 Subject: [PATCH] building file tree --- css/styles.css | 122 +++++++++++++++--- js/controllers/website-controller.js | 9 +- templates/website.html | 177 ++++++++++++--------------- 3 files changed, 194 insertions(+), 114 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2db1f64..7f1495a 100644 --- a/css/styles.css +++ b/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; +} diff --git a/js/controllers/website-controller.js b/js/controllers/website-controller.js index f1bc2a1..29ff8ee 100644 --- a/js/controllers/website-controller.js +++ b/js/controllers/website-controller.js @@ -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 diff --git a/templates/website.html b/templates/website.html index 6c8775d..1c43e65 100644 --- a/templates/website.html +++ b/templates/website.html @@ -10,7 +10,7 @@
- +

Create a new Website

@@ -79,7 +79,7 @@
- +
@@ -121,12 +121,12 @@ -