Merge branch 'jon/design2' into oauth3

css/styles.css

@@ -40,6 +40,9 @@
 .ls-pd0 {
   -webkit-padding-start: 0;
 }
+.padding-side-15 {
+  padding: 0px 15px;
+}
 /* Side Menu */
 .side-menu {
   padding-top: 10px;
@@ -616,3 +619,16 @@ h2.ssb-title {
   padding:0;
   text-transform: uppercase;
 }
+.folder-actions-list .root {
+  display: none;
+}
+.folder-actions-list {
+  margin: 20px 0px;
+  -webkit-padding-start: 0px;
+}
+.folder-actions-list i {
+  color: #337ab7;
+}
+.folder-actions-list li {
+  padding: 5px 0px;
+}

js/controllers/website-controller.js

@@ -321,10 +321,14 @@ 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) {
-    r.uploadPath = vm.autoPopulateWebPath;
+    if (r.uploadPath === undefined) {
+      r.uploadPath = vm.autoPopulateWebPath;
+    }
     var pkg = Auth.oauth3.pkg('www@daplie.com');
     //analyzeFile(r.newFile, r);
     vm._uploadFile(pkg, r);
@@ -345,12 +349,11 @@ app.controller('websiteCtrl', [
       window.open(result.data.url);
     });
   };
-  vm.Sites.remove = function (r, opts) {
-    if (!window.confirm("Delete files for this site?")) {
-      return;
-    }
 
+  vm.Sites.remove = function (r, opts) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
+    debugger;
+
     return pkg.remove({
       hostname: r.domain
     , domain: r.domain
@@ -364,7 +367,40 @@ app.controller('websiteCtrl', [
     });
   };
 
-  vm.breadcrumbs = ['Root'];
+  vm.deleteFilesFrom = function (r, path, opts) {
+    var confirmMessage;
+    vm.autoPopulateWebPath;
+    opts = {};
+
+    if (path === undefined) {
+      confirmMessage = "Delete all files for this site?";
+      opts.path = '/';
+      opts.confirm = true;
+    } else if (path.includes(".")) {
+      confirmMessage = "Delete this file?";
+      if (vm.autoPopulateWebPath === undefined) {
+        opts.path = path;
+      } else {
+        opts.path = vm.autoPopulateWebPath + path;
+      }
+    } else {
+      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;
+      }
+      opts.confirm = true;
+    }
+    if (!window.confirm(confirmMessage)) {
+      return;
+    }
+    vm.Sites.remove(r, opts);
+  };
+
+  vm.breadcrumbs = ['root'];
   vm.breadcrumbsPath = ['/'];
   vm.breadcrumbPathClicked = false;
   vm.webPathAutofill = '/';
@@ -378,16 +414,19 @@ 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') {
+          if (path === 'root') {
-            vm.breadcrumbs = ['Root'];
+            vm.breadcrumbs = ['root'];
             vm.breadcrumbsPath = ['/'];
             vm.breadcrumbPathClicked = false;
             vm.autoPopulateWebPath = "/";
@@ -427,21 +466,59 @@ app.controller('websiteCtrl', [
     vm.getSiteContents(r);
   };
 
+  vm.cleanPath = function () {
+    vm.savedPath = vm.autoPopulateWebPath;
+    vm.autoPopulateWebPath = '';
+  }
+
+  vm.showUploadButton = true;
+  vm.showFolderAction = true;
+  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 = [];
     var site = vm.siteResults;
     vm.directoryPath = path;
     vm.getSiteContents(path, site);
+    vm.showUploadButton = false;
+    vm.showFolderAction = false;
   };
 
   vm.getDirectoriesFromBreadcrumbs = function (dir) {
+    if (dir === 'root') {
+      vm.showFolderAction = true;
+      vm.showUploadButton = true;
+    } else {
+      vm.showFolderAction = false;
+      vm.showUploadButton = false;
+    }
     vm.breadcrumbPathClicked = true;
     vm.siteDirectories = [];
     vm.siteFiles = [];
     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');
@@ -540,8 +617,8 @@ app.controller('websiteCtrl', [
       sites.forEach(function (site) {
         site.pending = !domainIsVerified(site);
       });
-      console.log('[listSites] sites:');
+      // console.log('[listSites] sites:');
-      console.log(sites);
+      // console.log(sites);
       vm.sites = sites;
       vm.sites.forEach(function(site) {
         site.urlSafeDomain = "https://" + site.domain;
@@ -552,8 +629,8 @@ app.controller('websiteCtrl', [
 
   //vm.getDomains();
   Auth.api('domains.list', {}).then(function (els) {
-    console.log('[init] domains.list els:');
+    // console.log('[init] domains.list els:');
-    console.log(els);
+    // console.log(els);
     vm.domains = els;
     $scope.domain = vm.domains;
   });
@@ -588,6 +665,7 @@ app.controller('websiteCtrl', [
         vm.showInviteContainer = true;
         vm.websiteTiles = true;
         vm.showBackBtn = true;
+        vm.displayFileTree = true;
       break;
       case 'shares':
         vm.showSharesContainer = true;
@@ -608,11 +686,11 @@ app.controller('websiteCtrl', [
       vm.showInviteContainer = false;
       vm.showSharesContainer = false;
       vm.showFilesContainer = false;
+      vm.displayFileTree = false;
       vm.websiteTiles = false;
       vm.showBackBtn = false;
     }, 150);
   };
-
 }]);
 
 }());
@@ -656,3 +734,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/website.html

@@ -230,8 +230,8 @@
           </div>
         </div>
         <div class="modal-footer ">
-          <button type="button" class="btn btn-primary pull-left" ng-show="vm.showBackBtn" ng-click="vm.closeAllOpenActions()">Back</button>
+          <button type="button" class="btn btn-primary pull-left" ng-show="vm.showBackBtn" ng-click="vm.closeAllOpenActions();">Back</button>
-          <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.closeAllOpenActions()">Close</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.closeAllOpenActions();">Close</button>
         </div>
       </div>
     </div>

templates/widgets/filetree.html

@@ -1,8 +1,8 @@
-<div class="text-left">
+<div class="text-left" ng-hide="vm.displayFileTree">
   <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">
+      <li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb);  vm.showUploadContainer = false; vm.showUploadFolderContainer = false; vm.showUploadFilesContainer = false;" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
-        {{ breadcrumb }}
+        {{ breadcrumb | capitalize }}
       </li>
     </ul>
   </div>
@@ -11,48 +11,69 @@
       <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>
+          <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory); vm.showUploadContainer = false; vm.showUploadFolderContainer = false; vm.showUploadFilesContainer = 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>
       </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"><i class="fa fa-trash"></i></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="upload-container" ng-show="vm.showUploadContainer">
+      <div class="folder-actions">
         <hr>
-        <h4 class="text-left">Upload Files:</h4>
+        <div class="">
-        <div>
+          <button type="button" name="button" class="btn btn-block btn-primary" ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName(); vm.showUploadFolderContainer = false" ng-show="vm.showUploadButton">Upload files</button>
-          <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
+          <button type="button" name="button" class="btn btn-block btn-primary" ng-click="vm.showAction('invite');">Share folder</button>
-
+          <ul class="ls-none folder-actions-list">
-          <div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
+            <li class="" ng-hide="vm.showFolderAction"><span><i class="fa fa-upload cp"></i> <a ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName(); vm.showUploadFolderContainer = false;" class="cp">Upload files</a></span></li>
-
+            <li class=""><span><i class="fa fa-folder cp"></i> <a ng-click="vm.showUploadFolderContainer = true;  vm.cleanPath(); vm.showUploadFilesContainer = false;" class="cp">New folder</a></span></li>
-          <div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
+            <li ng-hide="vm.showUploadButton"><span><i class="fa fa-trash cp"></i> <a ng-click="vm.triggerDeleteFolder(vm.currentFolder, r)" data="{{ vm.currentFolder }}" data="{{ r }}" class="cp">Delete {{ vm.currentFolder | capitalize }} Folder</a></span></li>
-
+          </ul>
-          <!-- 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>
-            <label>Web path</label>
-            <input type="text" class="form-control" ng-model="vm.autoPopulateWebPath" />
-            <!-- <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-default">Add File</button>
         </div>
       </div>
+      <div class="upload-container">
+        <form ng-show="vm.showUploadFilesContainer">
+          <hr>
+          <div>
+            <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
+            <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>
+            <input type="text" class="form-control hidden" ng-model="vm.autoPopulateWebPath" placeholder="/js/config/config.js" disabled/>
+            <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 }}" 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">
       <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
     </div>
   </div>
   <div class="row">
-    <div class="text-center">
+    <div class="padding-side-15">
-      <button type="button" class="btn btn-danger" ng-click="vm.Sites.remove(r)"><i class="fa fa-trash"></i> Remove all Files</button>
+      <button type="button" class="btn btn-danger pull-right" ng-click="vm.deleteFilesFrom(r, path)"><i class="fa fa-trash"></i> Remove all Files</button>
     </div>
   </div>
 </div>