safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-31 00:53:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1172: Implement navigation via breadcrumbs - no more tree.

Browse Source
This commit is contained in:
Michael Jumper
2015-07-01 15:47:01 -07:00
parent c673de30e1
commit 149fba6737
8 changed files with 131 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
guacamole/src/main/webapp/app/client/controllers/clientController.js
View File

@@ -28,6 +28,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
// Required types
var ManagedClientState = $injector.get('ManagedClientState');
var ManagedFilesystem = $injector.get('ManagedFilesystem');
var ScrollState = $injector.get('ScrollState');
// Required services
@@ -595,6 +596,45 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
return !!$scope.filesystemMenuContents && $scope.menu.shown;
};
/**
* Returns the full path to the given file as an ordered array of parent
* directories.
*
* @param {ManagedFilesystem.File} file
* The file whose full path should be retrieved.
*
* @returns {ManagedFilesystem.File[]}
* An array of directories which make up the hierarchy containing the
* given file, in order of increasing depth.
*/
$scope.getPath = function getPath(file) {
var path = [];
// Add all files to path in ascending order of depth
while (file && file.parent) {
path.unshift(file);
file = file.parent;
}
return path;
};
/**
* Changes the current directory of the given filesystem to the given
* directory.
*
* @param {ManagedFilesystem} filesystem
* The filesystem whose current directory should be changed.
*
* @param {ManagedFilesystem.File} file
* The directory to change to.
*/
$scope.changeDirectory = function changeDirectory(filesystem, file) {
ManagedFilesystem.changeDirectory(filesystem, file);
};
// Clean up when view destroyed
$scope.$on('$destroy', function clientViewDestroyed() {

18
guacamole/src/main/webapp/app/client/directives/guacFileBrowser.js
View File

@@ -79,22 +79,14 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
};
/**
* Toggles the expanded state of the given file between expanded
* and collapsed, showing or hiding the file's children. This is
* only applicable to directories.
* Changes the currently-displayed directory to the given
* directory.
*
* @param {ManagedFilesystem.File} file
* The file to expand or collapse.
* The directory to change to.
*/
$scope.toggleExpanded = function toggleExpanded(file) {
// Toggle expanded state
file.expanded = !file.expanded;
// If now expanded, refresh contents
if (file.expanded)
ManagedFilesystem.refresh($scope.filesystem, file);
$scope.changeDirectory = function changeDirectory(file) {
ManagedFilesystem.changeDirectory($scope.filesystem, file);
};
/**

10
guacamole/src/main/webapp/app/client/styles/file-browser.css
View File

@@ -27,10 +27,8 @@
display: none;
}
/* Show directory contents if expanded */
.file-browser .directory.expanded > .children {
display: block;
.file-browser .list-item .caption {
white-space: nowrap;
}
/* Directory / file icons */
@@ -43,6 +41,6 @@
background-image: url('images/folder-closed.png');
}
.file-browser .directory.expanded > .caption .icon {
background-image: url('images/folder-open.png');
.file-browser .directory.previous > .caption .icon {
background-image: url('images/folder-up.png');
}

23
guacamole/src/main/webapp/app/client/styles/filesystem-menu.css
View File

@@ -46,3 +46,26 @@
-webkit-align-items: center;
align-items: center;
}
#filesystem-menu .menu-body {
padding: 0.25em;
}
#filesystem-menu .header.breadcrumbs {
background: rgba(0,0,0,0.0125);
border-bottom: 1px solid rgba(0,0,0,0.05);
box-shadow: none;
margin-top: 0;
border-top: none;
}
#filesystem-menu .header.breadcrumbs .breadcrumb {
padding: 0.5em;
font-size: 0.8em;
font-weight: bold;
}
#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
background-color: #CDA;
cursor: pointer;
}

6
guacamole/src/main/webapp/app/client/templates/client.html
View File

@@ -174,6 +174,12 @@
<button class="back" ng-click="hideFilesystemMenu()">Back</button>
</div>
<!-- Breadcrumbs -->
<div class="header breadcrumbs" ng-show="getPath(filesystemMenuContents.currentDirectory).length">
<div class="breadcrumb" ng-repeat="file in getPath(filesystemMenuContents.currentDirectory)"
ng-click="changeDirectory(filesystemMenuContents, file)">{{file.name}}</div>
</div>
<!-- Scrollable body -->
<div class="menu-body">
<guac-file-browser client="client" filesystem="filesystemMenuContents"></guac-file-browser>

27
guacamole/src/main/webapp/app/client/templates/guacFileBrowser.html
View File

@@ -32,27 +32,32 @@
</div>
<!-- Directory -->
<div class="directory" ng-show="isDirectory(file)" ng-class="{expanded: file.expanded}">
<div class="caption" ng-click="toggleExpanded(file)">
<div class="directory" ng-show="isDirectory(file)">
<div class="caption" ng-click="changeDirectory(file)">
<div class="icon"></div>
{{file.name}}
</div>
<!-- Children of this directory -->
<div class="children">
<div class="list-item"
ng-repeat="file in file.files | orderBy : 'name'"
ng-include="'file.html'">
</div>
</div>
</script>
<!-- Root directory contents -->
<!-- Current directory contents -->
<div class="filesystem-root">
<!-- Parent directory -->
<div class="list-item" ng-show="filesystem.currentDirectory.parent">
<div class="directory previous">
<div class="caption" ng-click="changeDirectory(filesystem.currentDirectory.parent)">
<div class="icon"></div> ..
</div>
</div>
</div>
<!-- All other files -->
<div class="list-item"
ng-repeat="file in filesystem.root.files | orderBy : 'name'"
ng-repeat="file in filesystem.currentDirectory.files | orderBy : 'name'"
ng-include="'file.html'"></div>
</div>
</div>

45
guacamole/src/main/webapp/app/client/types/ManagedFilesystem.js
View File

@@ -68,6 +68,14 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
*/
this.root = template.root;
/**
* The current directory being viewed or manipulated within the
* filesystem.
*
* @type ManagedFilesystem.File
*/
this.currentDirectory = template.currentDirectory || template.root;
};
/**
@@ -140,6 +148,7 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
mimetype : mimetypes[name],
streamName : name,
type : type,
parent : file,
name : filename
});
@@ -216,6 +225,26 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
};
/**
* Changes the current directory of the given filesystem, automatically
* refreshing the contents of that directory.
*
* @param {ManagedFilesystem} filesystem
* The filesystem whose current directory should be changed.
*
* @param {ManagedFilesystem.File} file
* The directory to change to.
*/
ManagedFilesystem.changeDirectory = function changeDirectory(filesystem, file) {
// Refresh contents
ManagedFilesystem.refresh(filesystem, file);
// Set current directory
filesystem.currentDirectory = file;
};
/**
* A file within a ManagedFilesystem. Each ManagedFilesystem.File provides
* sufficient information for retrieval or replacement of the file's
@@ -257,6 +286,14 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
*/
this.name = template.name;
/**
* The parent directory of this file. In the case of the root
* directory, this will be null.
*
* @type ManagedFilesystem.File
*/
this.parent = template.parent;
/**
* Map of all known files containined within this file by name. This is
* only applicable to directories.
@@ -265,14 +302,6 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
*/
this.files = template.files || {};
/**
* Whether this file is currently expanded, exposing any children
* within. This is only applicable to directories.
*
* @type Boolean
*/
this.expanded = template.expanded || false;
};
/**