vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-06-26 19:41:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Better thumbnails UI

Browse Source
This commit is contained in:
Benjamin Gamard 2017-11-11 23:25:52 +01:00
parent 273136ab23
commit 6f3ae6da9d
12 changed files with 159 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs-web/src/main/webapp/src/app/docs/controller/document/DocumentEdit.js
View File

@ -11,7 +11,10 @@ angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $
$scope.vocabularies = [];
// Orphan files to add
$scope.orphanFiles = $stateParams.files ? $stateParams.files : [];
$scope.orphanFiles = [];
if ($stateParams.files) {
$scope.orphanFiles = _.isArray($stateParams.files) ? $stateParams.files : [ $stateParams.files ];
}
/**
* Close an alert.

32
docs-web/src/main/webapp/src/app/docs/controller/document/DocumentViewContent.js
View File

@ -113,22 +113,22 @@ angular.module('docs').controller('DocumentViewContent', function ($scope, $root
id: $stateParams.id
}
})
.progress(function(e) {
newfile.progress = parseInt(100.0 * e.loaded / e.total);
})
.success(function(data) {
// Update local model with real data
newfile.id = data.id;
newfile.size = data.size;
.progress(function(e) {
newfile.progress = parseInt(100.0 * e.loaded / e.total);
})
.success(function(data) {
// Update local model with real data
newfile.id = data.id;
newfile.size = data.size;
// New file uploaded, increase used quota
$rootScope.userInfo.storage_current += data.size;
})
.error(function (data) {
newfile.status = $translate.instant('document.view.content.upload_error');
if (data.type === 'QuotaReached') {
newfile.status += ' - ' + $translate.instant('document.view.content.upload_error_quota');
}
});
// New file uploaded, increase used quota
$rootScope.userInfo.storage_current += data.size;
})
.error(function (data) {
newfile.status = $translate.instant('document.view.content.upload_error');
if (data.type === 'QuotaReached') {
newfile.status += ' - ' + $translate.instant('document.view.content.upload_error_quota');
}
});
};
});

3
docs-web/src/main/webapp/src/app/docs/controller/document/FileView.js
View File

@ -7,7 +7,8 @@ angular.module('docs').controller('FileView', function($uibModal, $state, $state
var modal = $uibModal.open({
windowClass: 'modal modal-fileview',
templateUrl: 'partial/docs/file.view.html',
controller: 'FileModalView'
controller: 'FileModalView',
size: 'lg'
});
// Returns to document view on file close

3
docs-web/src/main/webapp/src/app/share/controller/FileView.js
View File

@ -7,7 +7,8 @@ angular.module('share').controller('FileView', function($uibModal, $state, $stat
var modal = $uibModal.open({
windowClass: 'modal modal-fileview',
templateUrl: 'partial/share/file.view.html',
controller: 'FileModalView'
controller: 'FileModalView',
size: 'lg'
});
// Returns to share view on file close

94
docs-web/src/main/webapp/src/partial/docs/document.default.html
View File

@ -1,62 +1,70 @@
<img src="img/loader.gif" ng-show="!logs" />
<div>
<div class="well drop-zone">
<h3><span class="glyphicon glyphicon-cloud-upload"></span> {{ 'document.default.quick_upload' | translate }}</h3>
<div class="row upload-zone" ng-model="dropFiles" ngf-drop="fileDropped($files)"
ngf-drag-over-class="'bg-success'" ngf-multiple="true" ngf-allow-dir="false">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
<div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
<a ng-click="openFile(file)">
<img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
</a>
<div class="caption btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption">
<div class="pull-left">
<input type="checkbox" ng-model="file.checked" />
</div>
<div class="pull-right">
<button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="clearfix"></div>
<h3 class="page-header">
<span class="glyphicon glyphicon-cloud-upload"></span> {{ 'document.default.quick_upload' | translate }}
</h3>
<div class="row upload-zone"
ngf-drop="fileDropped($files)"
ngf-drag-over-class="'bg-success'"
ngf-multiple="true"
ngf-allow-dir="false">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
<div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
<a ng-click="openFile(file)">
<img ng-src="../api/file/{{ file.id }}/data?size=thumb" uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
</a>
<div class="caption caption-hover-inverse btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption caption-hover">
<div class="pull-left">
<input type="checkbox" ng-model="file.checked" />
</div>
</div>
<div class="thumbnail" ng-if="!file.id">
<p class="text-center lead">
{{ file.status }}
</p>
<div class="caption">
<uib-progressbar value="file.progress" class="progress-info active"></uib-progressbar>
<div class="pull-right">
<button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="clearfix"></div>
</div>
</div>
<p class="text-center well-lg" ng-if="files.length == 0">
<span class="glyphicon glyphicon-move"></span>
{{ 'document.default.drop_zone' | translate }}
</p>
<div class="clearfix"></div>
<div class="text-center">
<button class="btn btn-primary" ngf-select
ngf-change="fileDropped($files, $event)"
input-file-multiple="multiple"
ngf-multiple="true">
{{ 'document.default.add_files' | translate }}
</button>
<div class="thumbnail" ng-if="!file.id">
<p class="text-center lead">
{{ file.status }}
</p>
<div class="caption">
<uib-progressbar value="file.progress" class="progress-info active"></uib-progressbar>
</div>
</div>
</div>
<div class="btn-group" ng-show="checkedFiles().length > 0">
<button class="btn btn-primary" ng-click="addDocument()"><span class="glyphicon glyphicon-plus"></span> {{ 'document.default.add_new_document' | translate }}</button>
</div>
<p class="text-center well-lg" ng-if="files.length == 0">
<span class="glyphicon glyphicon-move"></span>
{{ 'document.default.drop_zone' | translate }}
</p>
</div>
<div class="text-center">
<button ng-show="checkedFiles().length > 0"
class="btn btn-primary"
ng-click="addDocument()">
<span class="glyphicon glyphicon-plus"></span> {{ 'document.default.add_new_document' | translate }}
</button>
<button ng-show="checkedFiles().length == 0"
class="btn btn-primary"
ngf-select
ngf-change="fileDropped($files, $event)"
input-file-multiple="multiple"
ngf-multiple="true">
{{ 'document.default.add_files' | translate }}
</button>
</div>
<div ui-view="file"></div>
<div ng-show="logs.length > 0">
<h3><span class="glyphicon glyphicon-tasks"></span> {{ 'document.default.latest_activity' | translate }}</h3>
<h3 class="page-header">
<span class="glyphicon glyphicon-tasks"></span> {{ 'document.default.latest_activity' | translate }}
</h3>
<audit-log logs="logs" />
</div>
</div>

8
docs-web/src/main/webapp/src/partial/docs/document.edit.html
View File

@ -6,8 +6,6 @@
<div class="col-md-6"><uib-progressbar value="fileProgress" class="progress-info active"></uib-progressbar></div>
</div>
<div uib-alert ng-class="'alert-' + alert.type" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</div>
<form name="documentForm" class="form-horizontal">
<div class="pull-right btn-group" ng-init="form = documentForm">
<button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">
@ -15,9 +13,9 @@
{{ 'save' | translate }}
</button>
</div>
<div class="page-header">
<h1>{{ document.title }}&nbsp;</h1>
</div>
<h1 class="page-header">{{ document.title }}&nbsp;</h1>
<div uib-alert ng-class="'alert-' + alert.type" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</div>
<fieldset>
<legend>{{ 'document.edit.primary_metadata' | translate }}</legend>

4
docs-web/src/main/webapp/src/partial/docs/document.html
View File

@ -61,7 +61,7 @@
<tr ng-click="viewDocument(document.id)" ng-repeat="document in documents" ng-class="{ active: $stateParams.id == document.id }">
<td colspan="2">
{{ document.title }} ({{ document.file_count }})
<span class="glyphicon glyphicon-share" ng-if="document.shared" tooltip="{{ 'document.shared' | translate }}"></span>
<span class="glyphicon glyphicon-share" ng-if="document.shared" uib-tooltip="{{ 'document.shared' | translate }}"></span>
<a href="#/document/view/{{ document.id }}" target="_blank" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-link"></span></a>
<div class="pull-right text-muted small">{{ document.create_date | timeAgo: dateFormat }}</div>
@ -104,7 +104,7 @@
</div>
</div>
<div class="col-md-8 col-full">
<div class="col-md-8">
<div ui-view="document"></div>
</div>
</div>

42
docs-web/src/main/webapp/src/partial/docs/document.view.content.html
View File

@ -38,15 +38,19 @@
</dd>
</dl>
<div ngf-drop="fileDropped($files)" ngf-drag-over-class="'bg-success'" ngf-multiple="true" ngf-allow-dir="false" ng-model="dropFiles">
<div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="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">
<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="thumbnail handle" ng-if="file.id">
<a ng-click="openFile(file)">
<img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
<img ng-src="../api/file/{{ file.id }}/data?size=thumb" uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
</a>
<div class="caption btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption" ng-show="document.writable">
<div class="caption caption-hover-inverse btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption caption-hover" ng-show="document.writable">
<div class="pull-left">
<div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
</div>
@ -66,21 +70,21 @@
</div>
</div>
</div>
<p class="text-center well-lg" ng-if="files.length == 0">
<span class="glyphicon glyphicon-move"></span>
{{ 'document.view.content.drop_zone' | translate }}
</p>
</div>
<div class="text-center">
<button class="btn btn-primary" ngf-select
ngf-change="fileDropped($files, $event)"
input-file-multiple="multiple"
ngf-multiple="true">
{{ 'document.view.content.add_files' | translate }}
</button>
</div>
<p class="text-center well-lg" ng-if="files.length == 0">
<span class="glyphicon glyphicon-move"></span>
{{ 'document.view.content.drop_zone' | translate }}
</p>
</div>
<p class="text-center">
<button class="btn btn-primary" ngf-select
ngf-change="fileDropped($files, $event)"
input-file-multiple="multiple"
ngf-multiple="true">
{{ 'document.view.content.add_files' | translate }}
</button>
</p>
<div ui-view="file"></div>

2
docs-web/src/main/webapp/src/partial/docs/tag.html
View File

@ -35,7 +35,7 @@
</div>
</div>
<div class="col-md-8 col-full">
<div class="col-md-8">
<div ui-view="tag"></div>
</div>
</div>

4
docs-web/src/main/webapp/src/partial/share/main.html
View File

@ -1,4 +1,4 @@
<div class="jumbotron">
<h1>Sismics Docs</h1>
<div class="jumbotron text-center">
<h1>{{ appName }}</h1>
<p>Ask a shared document link to access it</p>
</div>

7
docs-web/src/main/webapp/src/partial/share/share.html
View File

@ -65,13 +65,12 @@
</dd>
</dl>
<div class="row" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
<div class="row" ng-show="files.length > 0">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
<div class="thumbnail">
<a ng-click="openFile(file)">
<img class="thumbnail-file"
ng-src="../api/file/{{ file.id }}/data?size=thumb&share={{ $stateParams.shareId }}"
tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
<img ng-src="../api/file/{{ file.id }}/data?size=thumb&share={{ $stateParams.shareId }}"
uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
</a>
</div>
</div>

78
docs-web/src/main/webapp/src/style/main.less
View File

@ -64,11 +64,6 @@
background-color: #f5f5f5;
box-shadow: inset -2px 0 0 #e5e5e5;
}
.col-full {
margin-top: 20px;
margin-bottom: 20px;
}
}
// Footer
@ -86,12 +81,6 @@
}
}
// Drop zone
.drop-zone {
background: none;
border: 2px dashed #eee;
}
// $http loader
.loader {
position: relative;
@ -134,21 +123,48 @@
}
// File thumbnails
.thumbnail input[type="checkbox"] {
width: 26px;
height: 26px;
}
.thumbnail {
a {
height: 200px;
display: block;
overflow: hidden;
background: #eee;
}
.thumbnail-file {
cursor: pointer;
}
.caption {
height: 60px;
overflow: hidden;
}
.thumbnails-file [class*="span"]:first-child {
margin-left: 2.5641%;
}
input[type="checkbox"] {
width: 26px;
height: 26px;
}
.collapse[style="height: auto;"] {
overflow: visible;
img {
width: 100%;
cursor: pointer;
margin-top: 100px;
transform: translateY(-50%);
}
.caption-hover {
display: none;
}
.caption-hover-inverse {
display: block;
}
&:hover {
.caption-hover {
display: block;
}
.caption-hover-inverse {
display: none;
}
}
}
// File name
@ -231,16 +247,22 @@ input[readonly].share-link {
}
// Drag & drop related
.upload-zone {
min-height: 150px;
background: none;
border: 2px dashed #eee;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.bg-success {
background-color: #dff0d8;
}
.upload-zone {
min-height: 150px;
}
.thumbnail-checked {
background-color: #dff0d8;
box-shadow: inset 0 1px 2px rgba(27,31,35,0.075), 0 0 0 0.2em rgba(3,102,214,0.3);
transition: box-shadow ease-in-out .15s;
}
.pointer {