mirror of
https://github.com/sismics/docs.git
synced 2024-11-22 05:57:57 +01:00
Closes #277: display files in list
This commit is contained in:
Benjamin Gamard
parent
dedfae7b33
commit
5b818c8258
@ -4,6 +4,15 @@
|
||||
* Document view content controller.
|
||||
*/
|
||||
angular.module('docs').controller('DocumentViewContent', function ($scope, $rootScope, $stateParams, Restangular, $dialog, $state, Upload, $translate, $uibModal) {
|
||||
$scope.displayMode = _.isUndefined(localStorage.fileDisplayMode) ? 'grid' : localStorage.fileDisplayMode;
|
||||
|
||||
/**
|
||||
* Watch for display mode change.
|
||||
*/
|
||||
$scope.$watch('displayMode', function (next) {
|
||||
localStorage.fileDisplayMode = next;
|
||||
});
|
||||
|
||||
/**
|
||||
* Configuration for file sorting.
|
||||
*/
|
||||
|
||||
@ -120,7 +120,9 @@
|
||||
"file_processing_indicator": "This file is being processed. Searching will not be available before it is complete.",
|
||||
"reprocess_file": "Reprocess this file",
|
||||
"upload_new_version": "Upload a new version",
|
||||
"open_versions": "Show version history"
|
||||
"open_versions": "Show version history",
|
||||
"display_mode_list": "Display files in list",
|
||||
"display_mode_grid": "Display files in grid"
|
||||
},
|
||||
"workflow": {
|
||||
"workflow": "Workflow",
|
||||
|
||||
@ -37,12 +37,32 @@
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<!-- Display mode (list or grid) -->
|
||||
<div class="btn-group mt-10 mb-10 pull-right">
|
||||
<span class="btn btn-default" ng-class="{ active: displayMode == 'list' }"
|
||||
uib-tooltip="{{ 'document.view.content.display_mode_list' | translate }}"
|
||||
tooltip-append-to-body="true"
|
||||
ng-click="displayMode = 'list'">
|
||||
<span class="fas fa-list"></span>
|
||||
</span>
|
||||
<span class="btn btn-default" ng-class="{ active: displayMode == 'grid' }"
|
||||
uib-tooltip="{{ 'document.view.content.display_mode_grid' | translate }}"
|
||||
tooltip-append-to-body="true"
|
||||
ng-click="displayMode = 'grid'">
|
||||
<span class="fas fa-th"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<!-- List of files -->
|
||||
<div class="row upload-zone"
|
||||
ngf-drop="fileDropped($files)"
|
||||
ngf-drag-over-class="'bg-success'"
|
||||
ngf-multiple="true"
|
||||
ngf-allow-dir="false">
|
||||
<div ui-sortable="fileSortableOptions" ng-model="files">
|
||||
<!-- Grid view -->
|
||||
<div ng-show="displayMode == 'grid'" ui-sortable="fileSortableOptions" ng-model="files">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 text-center" ng-repeat="file in files">
|
||||
<div class="thumbnail" ng-if="file.id">
|
||||
<div class="file-processing-indicator" ng-show="file.processing"
|
||||
@ -114,6 +134,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List view -->
|
||||
<table ng-show="displayMode == 'list'" class="table table-hover table-files">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="3%"></th>
|
||||
<th>Filename</th>
|
||||
<th>Type</th>
|
||||
<th>Size</th>
|
||||
<th width="10%">Version</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody ui-sortable="fileSortableOptions" ng-model="files">
|
||||
<tr ng-repeat="file in files">
|
||||
<td class="pointer" ng-click="openFile(file)">
|
||||
<div class="thumbnail-list">
|
||||
<img ng-src="../api/file/{{ file.id }}/data?size=thumb" />
|
||||
</div>
|
||||
</td>
|
||||
<td class="pointer" ng-click="openFile(file)">
|
||||
{{ file.name }}
|
||||
<span class="fas fa-spin fa-circle-notch"
|
||||
ng-show="file.processing"
|
||||
uib-tooltip="{{ 'document.view.content.file_processing_indicator' | translate }}"></span>
|
||||
</td>
|
||||
<td>{{ file.mimetype }}</td>
|
||||
<td>{{ file.size | filesize }}</td>
|
||||
<td>v{{ file.version + 1 }}.0</td>
|
||||
<td ng-show="document.writable">
|
||||
<div uib-dropdown>
|
||||
<button class="btn btn-default" uib-dropdown-toggle>
|
||||
<span class="fas fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" uib-dropdown-menu>
|
||||
<li>
|
||||
<a href ng-click="renameFile(file)">
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
{{ 'rename' | translate }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href ng-click="processFile(file)">
|
||||
<span class="fas fa-eye"></span>
|
||||
{{ 'document.view.content.reprocess_file' | translate }}
|
||||
</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a href ngf-select
|
||||
ngf-change="uploadNewVersion($files, file)"
|
||||
ngf-multiple="false">
|
||||
<span class="fas fa-plus"></span>
|
||||
{{ 'document.view.content.upload_new_version' | translate }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href ng-click="openVersions(file)">
|
||||
<span class="fas fa-angle-double-left"></span>
|
||||
{{ 'document.view.content.open_versions' | translate }}
|
||||
</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a href ng-click="deleteFile(file)">
|
||||
<span class="fas fa-trash text-danger"></span>
|
||||
{{ 'delete' | translate }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="text-center well-lg" ng-if="files.length == 0">
|
||||
<span class="fas fa-arrows-alt"></span>
|
||||
{{ 'document.view.content.drop_zone' | translate }}
|
||||
|
||||
@ -239,6 +239,30 @@ ul.tag-tree {
|
||||
}
|
||||
}
|
||||
|
||||
// File list
|
||||
.table-files {
|
||||
td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.thumbnail-list {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Permissions table
|
||||
.table-permissions {
|
||||
.label-acl {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user