Merge pull request #54 from joni2back/material-design

Redesign to Material design

README.md

@@ -1,10 +1,12 @@
 ## angular-filemanager
-File manager developed with AngularJS and Bootstrap by [Jonas Sciangula Street](https://github.com/joni2back)
+
+A very smart filemanager to manage your files in the browser developed in AngularJS with Material-Design styles by [Jonas Sciangula Street](https://github.com/joni2back)
 
 #### [Try the DEMO](http://zendelsolutions.com/zendel/projects/angular-filemanager)
 ---------
-![alt tag](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/angular-filemanager.png)
-![alt tag](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/angular-filemanager-mobile.png)
+![alt tag](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/screenshot1.png)
+![alt tag](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/screenshot2.png)
+![alt tag](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/screenshot3.png)
 
 ### Features
   - Multilanguage (English / Spanish / Portuguese / French)
@@ -23,7 +25,7 @@ File manager developed with AngularJS and Bootstrap by [Jonas Sciangula Street](
   - Extend backend bridges (PHP, Java, Python, Node, .Net)
 
 ### Backend API
-[Read the documentation](API.md)
+[Read the docs](API.md)
 
 ### Use in your existing project
 **1) Install and use**
@@ -32,12 +34,15 @@ File manager developed with AngularJS and Bootstrap by [Jonas Sciangula Street](
 **2) Include the dependencies in your project**
 ```html
 <!-- third party -->
-<script src="/bower_components/angular-translate/angular-translate.min.js"></script>
-<script src="/bower_components/angular-cookies/angular-cookies.min.js"></script>
+<script src="bower_components/angular/angular.min.js"></script>
+<script src="bower_components/angular-translate/angular-translate.min.js"></script>
+<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
+<script src="bower_components/jquery/dist/jquery.min.js"></script>
+<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />
 <!-- angular-filemanager -->
-<link rel="stylesheet" href="/bower_components/angular-filemanager/dist/angular-filemanager.css">
-<script src="/bower_components/angular-filemanager/dist/angular-filemanager.min.js"></script>
-<script src="/bower_components/angular-filemanager/dist/cached-templates.js"></script>
+<script src="dist/angular-filemanager.min.js"></script>
+<link rel="stylesheet" href="dist/angular-filemanager.css">
 ```
 
 **3) Use the angular directive in your HTML**

bower.json

@@ -24,5 +24,6 @@
     "angular-cookies": "~1.3.17",
     "bootstrap": "~3.3.2",
     "jquery": "~2.1.3"
+    "bootswatch": "3.3.5"
   }
 }

index.html

@@ -27,7 +27,7 @@
   -->
   <script src="dist/angular-filemanager.min.js"></script><!-- Comment if you need to use raw source code -->
 
-  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />
   <link rel="stylesheet" href="dist/angular-filemanager.css">
 </head>
 

src/css/angular-filemanager.css

@@ -1,6 +1,52 @@
 body {
-    padding-top: 50px;
-    font-size: 13px;
+    padding-top: 55px;
+    font-size: 14px;
+}
+
+.navbar {
+    min-height: 32px;
+}
+
+.navbar .navbar-toggle {
+    padding: 5px 10px;
+}
+
+.navbar .navbar-brand {
+    font-size: inherit;
+    height: 55px;
+    line-height: 100%;
+}
+
+.navbar .navbar-form {
+    border-bottom: none;
+    border-top: none;
+    box-shadow: none;
+    padding: 0 10px;
+    margin-top: 10px;
+}
+
+.breadcrumb {
+    border-radius: 0;
+}
+
+.breadcrumb .btn {
+    margin-top:-5px;
+}
+
+.btn.btn-default {
+    color: #444;
+    background-color: #FAFAFA;
+}
+
+.btn {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    font-weight: 500;
+    letter-spacing: .01em;
+    border: none!important;
+}
+
+*, *:focus {
+    outline: 0!important;
 }
 
 textarea.code {
@@ -21,29 +67,6 @@ textarea.code {
     text-align: left;
 }
 
-* {
-    outline:none!important;
-}
-
-div, span {
-    cursor:default;
-}
-
-a:hover, a:hover *,
-a:focus, a:focus *,
-a, a * {
-    cursor:pointer;
-    text-decoration: none;
-}
-
-input, select, textarea,
-.btn, .input-sm,
-.dropdown-menu,
-.panel, .panel-heading,
-.modal .modal-content {
-    border-radius: 0!important;
-}
-
 .bold {
     font-weight: bold;
 }
@@ -65,18 +88,38 @@ input, select, textarea,
     display: none;
 }
 
+.btn-go-back {
+    margin-top: -5px;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+.table-modal-condensed {
+
+}
+
+.modal .modal-header {
+    padding-bottom:0;
+}
+
+.modal .breadcrumb {
+    margin-bottom: 10px;
+}
+
 @media (min-width: 768px) {
     .sidebar {
         position: fixed;
-        top: 51px;
+        top: 50px;
         bottom: 0;
         left: 0;
         z-index: 1000;
         display: block;
         padding: 5px 0;
         overflow-x: hidden;
         overflow-y: auto;
- /* Scrollable contents if viewport is shorter than content. */
+
         background-color: #f5f5f5;
         border-right: 1px solid #eee;
     }
@@ -88,6 +131,12 @@ input, select, textarea,
     }
 }
 
+@media (max-width: 475px) {
+    .table.table-files .btn {
+        display: none;
+    }
+}
+
 .nav-sidebar {
     margin-right: -21px;
     margin-bottom: 20px;
@@ -103,7 +152,7 @@ input, select, textarea,
 .nav-sidebar > .active > a:hover,
 .nav-sidebar > .active > a:focus {
     color: #fff;
-    background-color: #428bca;
+    background-color: #2196F3;
 }
 
 .main {
@@ -153,8 +202,8 @@ input, select, textarea,
     margin-right: 5px;
 }
 
-.table-files td {
-    padding: 3px 8px!important;
+.table.table-files td {
+    /*padding: 3px 8px!important;*/
     vertical-align: middle!important;
 }
 
@@ -186,6 +235,7 @@ input, select, textarea,
     margin: 0;
     padding: 0;
     padding: 10px 0;
+    border: none;
 }
 
 .iconset .thumbnail .item-icon {

src/js/app.js

@@ -53,10 +53,18 @@
         };
     }]);
 
+    app.filter('formatDate', ['$filter', function($filter) {
+        return function(input, limit) {
+            return input instanceof Date ?
+                input.toISOString().substring(0, 19).replace('T', ' '):
+                input.toString();
+        };
+    }]);
+
     /**
      * jQuery inits
      */
-    var menuSelectors = '.main-navigation .table-files td a, .iconset a.thumbnail';
+    var menuSelectors = '.main-navigation .table-files td:first-child, .iconset a.thumbnail';
 
     $(window.document).on('shown.bs.modal', '.modal', function() {
         var self = this;

src/templates/index.html

@@ -7,7 +7,7 @@
             <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 ng-include="config.tplPath + '/' + viewTemplate" class="main-navigation"></div>
+                <div ng-include="config.tplPath + '/' + viewTemplate" class="main-navigation clearfix"></div>
             </div>
         </div>
     </div>

src/templates/main-icons.html

@@ -1,4 +1,4 @@
-<div class="iconset">
+<div class="iconset clearfix">
     <div class="col-120" data-ng-repeat="item in fileNavigator.fileList | filter: query | orderBy: orderProp" data-ng-show="!fileNavigator.requesting && !fileNavigator.error">
         <a href="" class="thumbnail text-center" data-ng-click="smartClick(item)" ng-right-click="smartRightClick(item)" title="{{item.model.name}} ({{item.model.sizeKb()}}kb)">
             <div class="item-icon">

src/templates/main-table-modal.html

@@ -1,9 +1,8 @@
-<table class="table table-striped table-hover mb0 table-files">
+<table class="table table-condensed table-modal-condensed table-hover mb0 table-files">
     <thead>
         <tr>
             <th>{{"name" | translate}}</th>
-            <th class="hidden-sm hidden-xs">{{"date" | translate}}</th>
-            <th class="text-right">{{"actions" | translate}}</th>
+            <th class="text-right"></th>
         </tr>
     </thead>
     <tbody class="file-item">
@@ -32,9 +31,6 @@
                     {{item.model.name | strLimit : 32}}
                 </a>
             </td>
-            <td class="hidden-sm hidden-xs">
-                {{item.model.date.toString()}}
-            </td>
             <td class="text-right">
                 <button class="btn btn-sm btn-default" data-ng-click="select(item, temp)"><i class="glyphicon glyphicon-hand-up"></i> {{"select_this" | translate}}</button>
             </td>

src/templates/main-table.html

@@ -1,11 +1,11 @@
-<table class="table table-striped table-hover mb0 table-files">
+<table class="table mb0 table-files">
     <thead>
         <tr>
             <th>{{"name" | translate}}</th>
             <th class="hidden-xs">{{"size" | translate}}</th>
             <th class="hidden-sm hidden-xs">{{"date" | translate}}</th>
             <th class="hidden-sm hidden-xs">{{"permissions" | translate}}</th>
-            <th class="text-right">{{"actions" | translate}}</th>
+            <th class="text-right"></th>
         </tr>
     </thead>
     <tbody class="file-item">
@@ -25,8 +25,8 @@
             </td>
         </tr>
         <tr data-ng-repeat="item in fileNavigator.fileList | filter: query | orderBy: orderProp" data-ng-show="!fileNavigator.requesting">
-            <td>
-                <a href="" data-ng-click="smartClick(item)" ng-right-click="smartRightClick(item)" title="{{item.model.name}} ({{item.model.sizeKb()}}kb)">
+            <td ng-right-click="smartRightClick(item)">
+                <a href="" data-ng-click="smartClick(item)" title="{{item.model.name}} ({{item.model.sizeKb()}}kb)">
                     <i class="glyphicon glyphicon-folder-close" data-ng-show="item.model.type === 'dir'"></i>
                     <i class="glyphicon glyphicon-file" data-ng-show="item.model.type === 'file'"></i>
                     {{item.model.name | strLimit : 64}}
@@ -36,7 +36,7 @@
                 {{item.model.sizeKb()}}kb
             </td>
             <td class="hidden-sm hidden-xs">
-                {{item.model.date.toString()}}
+                {{item.model.date | formatDate }}
             </td>
             <td class="hidden-sm hidden-xs">
                 {{item.model.perms.toCode(item.model.type === 'dir'?'d':'-')}}