diff options
| author | oweissbarth | 2015-01-03 00:53:37 +0100 |
|---|---|---|
| committer | oweissbarth | 2015-01-03 00:53:37 +0100 |
| commit | 684d6ae79ff35cbb686e9dd35e59ce28b875586b (patch) | |
| tree | 33859500cf466aa6a6d5dd8798ba688290181222 | |
| parent | 3dcf698e84369fed8a1ff509a2ed2c60618c9d1a (diff) | |
| download | files.iamfabulous.de-angular-testing.tar.gz | |
intial angular interface. Just for testing purpose. Will probably change alot. Now using bootstrap.angular-testing
| -rwxr-xr-x | www/img/logo.png | bin | 0 -> 5427 bytes | |||
| -rw-r--r-- | www/index.html | 146 | ||||
| -rw-r--r-- | www/json.php | 21 |
3 files changed, 167 insertions, 0 deletions
diff --git a/www/img/logo.png b/www/img/logo.png Binary files differnew file mode 100755 index 0000000..cb99923 --- /dev/null +++ b/www/img/logo.png diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..37cda88 --- /dev/null +++ b/www/index.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Latest compiled and minified CSS --> + <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> + <!-- Optional: Include the jQuery library --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <!-- Optional: Incorporate the Bootstrap JavaScript plugins --> + <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> + + + <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> + + <base url="/"> + + </head> + <body> + <style> + .navbar-vfs{ + background-color: #3083D6; + } + #vfs-logo{ + height: 70px; + width: 70px; + margin: 5px; + padding: 0; + background-image: url('img/logo.png'); + background-repeat: no-repeat; + background-size: 66px 66px; + background-position: center center; + } + + #vfs-logo:hover{ + background:#2669AB; + border-radius: 10px; + box-shadow: 3px -3px 5px black; + background-image: url('img/logo.png'); + background-repeat: no-repeat; + background-size: 66px 66px; + background-position: center center; + } + + .navbar-brand{ + padding: 0; + } + .navbar-brand, + .navbar-nav li a { + line-height: 80px; + height: 80px; + padding-top: 0; + } + + + tr.file{ + height: 30px; + width: 100%; + } + + tr.file:hover{ + background: #CCCCCC; + cursor: pointer; + } + table.file-browser{ + width: 100%; + } + + td.fileicon{ + font-size: 25px; + width: 30px; + } + + td.filename{ + text-align: right; + } + </style> + <nav class="navbar navbar-vfs navbar-static-top"> + <div class="navbar-header"> + <div class="navbar-brand" href="#"> + <div id="vfs-logo"></div> + </div> + </div> + </nav> + <!--File Browser--> + <div class="container-fluid" ng-app="fileBrowser" ng-init="loggedin = true" ng-controller="fileListController" ng-show="loggedin" > + <table class="file-browser"> + <tr ng-click="up()" class="file" > + <td colspan="0"><b>..</b></td> + </tr> + <tr class="file" ng-repeat="ob in files" ng-click="open(ob)"> + <td class="fileicon"><spans class="file-browser fileicon" ng-class="icon(ob)"></span></td><td class="file-browser filename"> {{ob.folder.name || ob.file.name}}</td><td>{{ob.file.size? ob.file.size +"kB" : ""}}</td> + </tr> + </table> + </div> + + <!--Login--> +<!-- <div class="container-fluid col-sm-4 col-sm-offset-4" ng-app="login" ng-hide="loggedin"> + <form action="return false"> + <input type="text" placeholder="username" class="form-control"> + <input type="password" placeholder="password" class="form-control"> + <button class="form-control">Login</button> + </form> + </div>--> + + <script> + fileBrowser = angular.module("fileBrowser", []); + + + fileBrowser.config(function($locationProvider){ + $locationProvider.html5Mode(true); + }); + + + fileBrowser.controller("fileListController", function ($scope, $http, $location){ + $http.get("json.php").success(function(response){$scope.files = response;}); + + $scope.icon = function(ob){ + if(ob.folder){ + return "glyphicon glyphicon-folder-close"; + }else{ + switch(ob.file.mime){ + default: return "glyphicon glyphicon-file"; + } + } + }; + + $scope.up = function(){ + path = $location.path(); + endsWithSlash = path.lastIndexOf('/') == path.length-1; + if(endsWithSlash) + path = path.substr(0,path.length-1); + $location.path(path.substring(0,path.lastIndexOf('/'))); + //TODO reload filelist + } + + $scope.open = function(ob){ + endsWithSlash = $location.path().lastIndexOf('/') == $location.path().length-1; + name = ob.file ? ob.file.name : ob.folder.name; + slash = endsWithSlash ? "" : "/"; + $location.path($location.path()+slash+name+"/"); + } + }); + </script> + </body> +</html>
\ No newline at end of file diff --git a/www/json.php b/www/json.php new file mode 100644 index 0000000..72418c5 --- /dev/null +++ b/www/json.php @@ -0,0 +1,21 @@ +<?php + + echo '[{"file":{"name" : "test", + "mime" : "text", + "size" : 15, + "public" : "false", + "hash": "asd3aw3ad", + "upload": "15.03.2014"}}, + {"folder":{"name" : "test", + "mime" : "text", + "size" : 15, + "public" : "false", + "hash": "asd3aw3ad", + "upload": "15.03.2014"}}, + {"file":{"name" : "test", + "mime" : "text", + "size" : 15, + "public" : "false", + "hash": "asd3aw3ad", + "upload": "15.03.2014"}} + ]'; |
