asdf

css/styles.css

@@ -313,7 +313,7 @@
 /* ————————————————————–
   Tree core styles
 */
-.tree { margin: 0px 1em; }
+.tree { margin: 1em; }
 
 .tree input {
   position: absolute;
@@ -619,3 +619,6 @@ h2.ssb-title {
   padding:0;
   text-transform: uppercase;
 }
+.root {
+  display: none;
+}

js/controllers/website-controller.js

@@ -321,10 +321,15 @@ app.controller('websiteCtrl', [
   vm.Sites.setUpload = function (r) {
     console.log("Hey! At least it can tell if there's a change!");
     analyzeFile(r.newFile, r);
+    vm.showCompleteFileUploadBtn = true;
     console.log(r);
+
   };
   vm.Sites.upload = function (r) {
+    debugger;
+    if (r.uploadPath === undefined) {
       r.uploadPath = vm.autoPopulateWebPath;
+    };
     var pkg = Auth.oauth3.pkg('www@daplie.com');
     //analyzeFile(r.newFile, r);
     vm._uploadFile(pkg, r);
@@ -367,6 +372,7 @@ app.controller('websiteCtrl', [
     var confirmMessage;
     vm.autoPopulateWebPath;
     opts = {};
+
     if (path === undefined) {
       confirmMessage = "Delete all files for this site?";
       opts.path = '/';
@@ -382,6 +388,8 @@ app.controller('websiteCtrl', [
       confirmMessage = "Delete all items in this folder?";
       if (vm.autoPopulateWebPath === undefined) {
         opts.path = path;
+      } else if (vm.autoPopulateWebPath.includes(path)) {
+        opts.path = vm.autoPopulateWebPath;
       } else {
         opts.path = vm.autoPopulateWebPath + path;
       }
@@ -407,12 +415,15 @@ app.controller('websiteCtrl', [
       newPath = site;
       site = vm.siteResults;
       function updatePath (path) {
+        vm.currentFolder = path;
         if (typeof path !== 'object') {
           vm.breadcrumbs.push(path);
           vm.breadcrumbsPath.push(path);
           vm.autoPopulateWebPath = vm.breadcrumbsPath;
           vm.autoPopulateWebPath.push('/');
           vm.autoPopulateWebPath = vm.autoPopulateWebPath.join('');
+        } else {
+          vm.currentFolder = "hidden"
         }
         if (vm.breadcrumbPathClicked) {
           if (path === 'root') {
@@ -456,6 +467,28 @@ app.controller('websiteCtrl', [
     vm.getSiteContents(r);
   };
 
+  vm.cleanPath = function () {
+    vm.savedPath = vm.autoPopulateWebPath;
+    vm.autoPopulateWebPath = '';
+  }
+
+  vm.createNewFolder = function (r) {
+    if (vm.savedPath === undefined) {
+      vm.savedPath = '/';
+    }
+    vm.savedPath;
+    vm.hideFolderInput = 'hidden';
+    vm.showFileUploadBtn = true;
+    r.uploadPath = vm.savedPath + vm.autoPopulateWebPath;
+  };
+
+  vm.autoPopulateFolderName = function () {
+    console.log('blah', vm.currentFolder);
+    if (vm.currentFolder === 'hidden') {
+      vm.autoPopulateWebPath = '/'
+    }
+  }
+
   vm.getDirectories = function (path) {
     vm.siteDirectories = [];
     vm.siteFiles = [];
@@ -471,6 +504,11 @@ app.controller('websiteCtrl', [
     vm.getSiteContents(dir);
   };
 
+  vm.triggerDeleteFolder = function (folder, r) {
+    console.log('DELETE FOLDER ->', folder);
+    vm.deleteFilesFrom(r, folder)
+  }
+
   vm.Shares = {};
   vm.Shares.invite = function (r) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
@@ -685,3 +723,9 @@ app.filter('stringify', function() {
     return stringify(ob, undefined, 2);
   };
 });
+
+app.filter('capitalize', function() {
+    return function(input) {
+      return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
+    }
+});

templates/widgets/filetree.html

@@ -2,7 +2,7 @@
   <div class="row">
     <ul class="breadcrumb">
       <li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb)" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
-        {{ breadcrumb }}
+        {{ breadcrumb | capitalize }}
       </li>
     </ul>
   </div>
@@ -11,25 +11,28 @@
       <ul class="tree ls-none">
         <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
           <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
-          <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory); vm.showUploadContainer = false" data="{{ directory }}">{{ directory }}</label><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, directory)" data="{{ directory }}" data="{{ r }}"><i class="fa fa-trash"></i> Folder</button></span>
+          <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory); vm.showUploadContainer = false" data="{{ directory }}">{{ directory }}</label><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, directory)" data="{{ directory }}" data="{{ r }}"><i class="fa fa-trash"></i></button></span>
         </li>
-        <li></li>
       </ul>
       <ul class="tree files-only ls-none">
         <li ng-repeat="file in vm.siteFiles track by $index">
-          <span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, file)" data="{{ file }}" data="{{ r }}"><i class="fa fa-trash"></i> File</button></span>
+          <span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, file)" data="{{ file }}" data="{{ r }}"><i class="fa fa-trash"></i></button></span><br>
-        </li>
-        <li class="move-back">
-          <a ng-click="vm.showUploadContainer = true;"><i class="fa fa-plus"></i> Add Files</a>
         </li>
       </ul>
       <div class="folder-actions">
         <hr>
-        <h1>alskdfjla</h1>
+        <div class="">
+          <button type="button" name="button" class="btn btn-block btn-primary" ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName()">Upload files</button>
+          <button type="button" name="button" class="btn btn-block btn-primary">Share folder</button>
+          <ul class="ls-none">
+            <li class="cp {{ vm.currentFolder }}"><span><i class="fa fa-upload"></i> <a ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName()">Upload files</a></span></li>
+            <li class="cp"><span><i class="fa fa-folder"></i> <a ng-click="vm.showUploadFolderContainer = true;  vm.cleanPath()">New folder</a></span></li>
+            <li class="cp {{ vm.currentFolder }}"><span><i class="fa fa-trash"></i> <a ng-click="vm.triggerDeleteFolder(vm.currentFolder, r)" data="{{ vm.currentFolder }}" data="{{ r }}">Delete {{ vm.currentFolder | capitalize }} Folder</a></span></li>
+          </ul>
         </div>
-      <div class="upload-container" ng-show="vm.showUploadContainer">
+      </div>
-        <hr>
+      <div class="upload-container">
-        <h4 class="text-left">Upload Files:</h4>
+        <form ng-show="vm.showUploadFilesContainer">
           <div>
             <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
 
@@ -37,18 +40,40 @@
 
             <div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
 
-          <!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
+            <div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div>
 
             <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
 
-          <div>
+            <input type="text" class="form-control hidden" ng-model="vm.autoPopulateWebPath" placeholder="/js/config/config.js" disabled/>
-            <label>Web path</label>
-            <input type="text" class="form-control" ng-model="vm.autoPopulateWebPath" placeholder="/js/config/config.js" />
-            <!-- <input type="text" class="form-control" ng-model="r.uploadPath" placeholder="{{ vm.autoPopulateWebPath }}"/> -->
-          </div>
 
-          <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-success">Add File</button>
+            <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-success" ng-show="vm.showCompleteFileUploadBtn">Add File</button>
           </div>
+        </form>
+        <form class="form-inline" ng-show="vm.showUploadFolderContainer">
+          <hr>
+          <ul class="ls-none">
+            <li class="add-folder">
+              <!-- <span><i class="fa fa-folder"></i> <input type="text" class="form-control {{ vm.hideFolderInput }}" style="width: 85%;" ng-model="vm.newFolderPath" ng-blur="vm.createNewFolder(r)" data="{{ r }}"><label class="">{{ vm.newFolderAddedName }}</label></span> -->
+              <span>
+                <i class="fa fa-folder"></i> <input type="text" class="form-control {{ vm.hideFolderInput }}" ng-model="vm.autoPopulateWebPath" ng-blur="vm.createNewFolder(r)" data="{{ r }}" style="width: 85%;"/>
+                <label ng-show="vm.showFileUploadBtn">{{ vm.autoPopulateWebPath }}</label>
+              </span>
+            </li>
+            <li class="text-center">
+              <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" ng-show="vm.showFileUploadBtn" />
+              <div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
+
+              <div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
+
+              <!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
+
+              <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
+            </li>
+            <li>
+              <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-success" ng-show="vm.showCompleteFileUploadBtn">Add File</button>
+            </li>
+          </ul>
+        </form>
       </div>
     </div>
     <div class="col-lg-6">