material design tests

Author: joni2back

bower.json

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

dist/angular-filemanager.css

@@ -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>
 

dist/angular-filemanager.min.js

@@ -1,6 +1,32 @@
 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-collapse.collapse {
+    height:0px!important;
+}
+
+.breadcrumb {
+    border-radius: 0;
+}
+
+.breadcrumb .btn {
+    margin-top:-5px;
 }
 
 textarea.code {
@@ -21,29 +47,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 +68,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 +111,12 @@ input, select, textarea,
     }
 }
 
+@media (max-width: 475px) {
+    .table.table-files .btn {
+        display: none;
+    }
+}
+
 .nav-sidebar {
     margin-right: -21px;
     margin-bottom: 20px;
@@ -103,7 +132,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 +182,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 +215,7 @@ input, select, textarea,
     margin: 0;
     padding: 0;
     padding: 10px 0;
+    border: none;
 }
 
 .iconset .thumbnail .item-icon {

index.html

@@ -56,7 +56,7 @@
     /**
      * 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/css/angular-filemanager.css

@@ -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/js/app.js

@@ -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/index.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-icons.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}}