material spinner, unify angular directives

joni2back · Aug 14, 2015 · ce2416c · ce2416c
1 parent 3cbf5a7
commit ce2416c
Show file tree

Hide file tree

Showing 19 changed files with 264 additions and 136 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-filemanager",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "homepage": "https://github.com/joni2back/angular-filemanager",
   "authors": [
     "Jonas Sciangula Street <[email protected]>"

diff --git a/dist/angular-filemanager.css b/dist/angular-filemanager.css
diff --git a/dist/angular-filemanager.min.js b/dist/angular-filemanager.min.js
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" data-ng-app="FileManagerApp">
 <head>
   <!--
-    * Angular FileManager v1.3.0 (https://github.com/joni2back/angular-filemanager)
+    * Angular FileManager v1.3.1 (https://github.com/joni2back/angular-filemanager)
     * Jonas Sciangula Street <[email protected]>
     * Licensed under MIT (https://github.com/joni2back/angular-filemanager/blob/master/LICENSE)
   -->

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-filemanager",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A very smart filemanager to manage your files in the browser.",
   "main": "src/app.js",
   "scripts": {

diff --git a/src/css/angular-filemanager.css b/src/css/angular-filemanager.css
@@ -113,6 +113,11 @@ a:hover {
 }
 
 @media (min-width: 768px) {
+    .main {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
     .sidebar {
         position: fixed;
         top: 50px;
@@ -123,7 +128,6 @@ a:hover {
         padding: 5px 0;
         overflow-x: hidden;
         overflow-y: auto;
-
         background-color: #f5f5f5;
         border-right: 1px solid #eee;
     }
@@ -163,13 +167,6 @@ a:hover {
     padding: 0;
 }
 
-@media (min-width: 768px) {
-    .main {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
 .main .page-header {
     margin-top: 0;
 }
@@ -286,6 +283,11 @@ a:hover {
     animation-duration: .2s;
 }
 
+.animated.slow {
+    -webkit-animation-duration: 1.1s;
+    animation-duration: 1.1s;
+}
+
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
@@ -413,3 +415,116 @@ a:hover {
 .dropdown-menu.dropdown-right-click .divider {
     margin: 3px 0;
 }
+
+.spinner-container {
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 8%;
+}
+
+.spinner {
+  width: 45px;
+  height: 45px;
+  -webkit-animation: rotator 1.4s linear infinite;
+          animation: rotator 1.4s linear infinite;
+}
+
+@-webkit-keyframes rotator {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+}
+
+@keyframes rotator {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  -webkit-transform-origin: center;
+      -ms-transform-origin: center;
+          transform-origin: center;
+  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
+
+@-webkit-keyframes colors {
+  0% {
+    stroke: #4285F4;
+  }
+  25% {
+    stroke: #DE3E35;
+  }
+  50% {
+    stroke: #F7C223;
+  }
+  75% {
+    stroke: #1B9A59;
+  }
+  100% {
+    stroke: #4285F4;
+  }
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285F4;
+  }
+  25% {
+    stroke: #DE3E35;
+  }
+  50% {
+    stroke: #F7C223;
+  }
+  75% {
+    stroke: #1B9A59;
+  }
+  100% {
+    stroke: #4285F4;
+  }
+}
+
+@-webkit-keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    -webkit-transform: rotate(450deg);
+            transform: rotate(450deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    -webkit-transform: rotate(450deg);
+            transform: rotate(450deg);
+  }
+}
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,5 +1,5 @@
 /*!
- * Angular FileManager v1.3.0 (https://github.com/joni2back/angular-filemanager)
+ * Angular FileManager v1.3.1 (https://github.com/joni2back/angular-filemanager)
  * Jonas Sciangula Street <[email protected]>
  * Licensed under MIT (https://github.com/joni2back/angular-filemanager/blob/master/LICENSE)
  */

diff --git a/src/js/config.js b/src/js/config.js
@@ -19,6 +19,8 @@
             extractUrl: "bridges/php/handler.php",
             permissionsUrl: "bridges/php/handler.php",
 
+            sidebar: true,
+            breadcrumb: true,
             allowedActions: {
                 rename: true,
                 copy: true,

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -34,7 +34,7 @@
         $scope.smartClick = function(item) {
             if (item.isFolder()) {
                 return $scope.fileNavigator.folderClick(item);
-            };
+            }
             if (item.isImage()) {
                 return item.preview();
             }

diff --git a/src/templates/current-folder-breadcrumb.html b/src/templates/current-folder-breadcrumb.html
@@ -1,14 +1,14 @@
 <ol class="breadcrumb mb0">
     <li>
-        <a href="" data-ng-click="fileNavigator.goTo(-1)">
+        <a href="" ng-click="fileNavigator.goTo(-1)">
             <i class="glyphicon glyphicon-folder-open mr2"></i>
         </a>
     </li>
-    <li data-ng-repeat="(key, dir) in fileNavigator.currentPath track by key" data-ng-class="{'active':$last}" class="animated fast fadeIn">
-        <a href="" data-ng-show="!$last" data-ng-click="fileNavigator.goTo(key)">
+    <li ng-repeat="(key, dir) in fileNavigator.currentPath track by key" ng-class="{'active':$last}" class="animated fast fadeIn">
+        <a href="" ng-show="!$last" ng-click="fileNavigator.goTo(key)">
             <i class="glyphicon glyphicon-folder-open mr2"></i> {{dir}}
         </a>
-        <span data-ng-show="$last"><i class="glyphicon glyphicon-folder-open mr2"></i>  {{dir}}</span>
+        <span ng-show="$last"><i class="glyphicon glyphicon-folder-open mr2"></i>  {{dir}}</span>
     </li>
-    <li><button class="btn btn-primary btn-xs" data-ng-click="fileNavigator.upDir()">&crarr;</button></li>
+    <li><button class="btn btn-primary btn-xs" ng-click="fileNavigator.upDir()">&crarr;</button></li>
 </ol>
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -1,12 +1,12 @@
-<div data-ng-controller="FileManagerCtrl">
+<div ng-controller="FileManagerCtrl">
     <div ng-include="config.tplPath + '/navbar.html'"></div>
 
     <div class="container-fluid">
         <div class="row">
 
-            <div class="col-sm-3 col-md-2 sidebar file-tree" ng-include="config.tplPath + '/sidebar.html'"></div>
-            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
-                <div ng-include="config.tplPath + '/current-folder-breadcrumb.html'"></div>
+            <div class="col-sm-3 col-md-2 sidebar file-tree animated slow fadeIn" ng-include="config.tplPath + '/sidebar.html'" ng-show="config.sidebar && fileNavigator.history[0]"></div>
+            <div class="main" ng-class="config.sidebar && fileNavigator.history[0] && 'col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2'">
+                <div ng-include="config.tplPath + '/current-folder-breadcrumb.html'" ng-show="config.breadcrumb"></div>
                 <div ng-include="config.tplPath + '/' + viewTemplate" class="main-navigation clearfix"></div>
             </div>
         </div>