building file tree

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; }
+.tree > li:last-child { padding-bottom: 0; }
-.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; }
 
-.file-tree .directory { font-family: monospace; line-height: 2em; }
+/* ————————————————————–
-.file-tree .directory_child { margin-left: 2em; position: relative; }
+  Tree labels
-.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; }
+.tree_label {
-.file-tree .directory_child::after { border-left: 1px solid; content: ""; height: 100%; left: -1em; position: absolute; top: 0; }
+  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;
+}

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

templates/website.html

@@ -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>
@@ -125,7 +125,7 @@
     <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>
+          <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">
@@ -140,17 +140,13 @@
             <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 type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
-            <button class="btn btn-info" ng-click="vm.Shares.list(r)">View Shares</button>
           </form>
           <form class="form-inline text-center">
-            <h4 class="text-left">List Files:</h4>
+            <h4 class="text-left">Shares:</h4>
-            <div class="form-group">
+            <button class="btn btn-info" ng-click="vm.Shares.list(r)" ng-hide="vm.showSharesList">View Shares</button>
-              <input type="text" class="form-control" ng-model="r.newPath" placeholder="/" />
+            <button class="btn btn-info" ng-click="vm.showSharesList = false" ng-show="vm.showSharesList">Hide Shares</button>
-            </div>
+            <div class="white-well" ng-show="vm.showSharesList">
-            <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
-          </form>
-          <div>
               <ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
                 <li>
                   <div class="media">
@@ -159,16 +155,71 @@
                     </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><b>Share Path:</b> <span ng-bind="share.path">/</span></p>
-                    <p>Actions Allowed: <span ng-bind="share.mode">rwx</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)">X</button>
+                      <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-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 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">