vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-06-29 04:51:23 +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 = []; $scope.vocabularies = [];
// Orphan files to add // 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. * 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 id: $stateParams.id
} }
}) })
.progress(function(e) { .progress(function(e) {
newfile.progress = parseInt(100.0 * e.loaded / e.total); newfile.progress = parseInt(100.0 * e.loaded / e.total);
}) })
.success(function(data) { .success(function(data) {
// Update local model with real data // Update local model with real data
newfile.id = data.id; newfile.id = data.id;
newfile.size = data.size; newfile.size = data.size;
// New file uploaded, increase used quota // New file uploaded, increase used quota
$rootScope.userInfo.storage_current += data.size; $rootScope.userInfo.storage_current += data.size;
}) })
.error(function (data) { .error(function (data) {
newfile.status = $translate.instant('document.view.content.upload_error'); newfile.status = $translate.instant('document.view.content.upload_error');
if (data.type === 'QuotaReached') { if (data.type === 'QuotaReached') {
newfile.status += ' - ' + $translate.instant('document.view.content.upload_error_quota'); 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({ var modal = $uibModal.open({
windowClass: 'modal modal-fileview', windowClass: 'modal modal-fileview',
templateUrl: 'partial/docs/file.view.html', templateUrl: 'partial/docs/file.view.html',
controller: 'FileModalView' controller: 'FileModalView',
size: 'lg'
}); });
// Returns to document view on file close // 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({ var modal = $uibModal.open({
windowClass: 'modal modal-fileview', windowClass: 'modal modal-fileview',
templateUrl: 'partial/share/file.view.html', templateUrl: 'partial/share/file.view.html',
controller: 'FileModalView' controller: 'FileModalView',
size: 'lg'
}); });
// Returns to share view on file close // 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" /> <img src="img/loader.gif" ng-show="!logs" />
<div> <div>
<div class="well drop-zone"> <h3 class="page-header">
<h3><span class="glyphicon glyphicon-cloud-upload"></span> {{ 'document.default.quick_upload' | translate }}</h3> <span class="glyphicon glyphicon-cloud-upload"></span> {{ 'document.default.quick_upload' | translate }}
<div class="row upload-zone" ng-model="dropFiles" ngf-drop="fileDropped($files)" </h3>
ngf-drag-over-class="'bg-success'" ngf-multiple="true" ngf-allow-dir="false"> <div class="row upload-zone"
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files"> ngf-drop="fileDropped($files)"
<div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id"> ngf-drag-over-class="'bg-success'"
<a ng-click="openFile(file)"> ngf-multiple="true"
<img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" /> ngf-allow-dir="false">
</a> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
<div class="caption btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div> <div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
<div class="caption"> <a ng-click="openFile(file)">
<div class="pull-left"> <img ng-src="../api/file/{{ file.id }}/data?size=thumb" uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
<input type="checkbox" ng-model="file.checked" /> </a>
</div> <div class="caption caption-hover-inverse btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="pull-right"> <div class="caption caption-hover">
<button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></button> <div class="pull-left">
</div> <input type="checkbox" ng-model="file.checked" />
<div class="clearfix"></div>
</div> </div>
</div> <div class="pull-right">
<button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></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 class="clearfix"></div>
</div> </div>
</div> </div>
<p class="text-center well-lg" ng-if="files.length == 0"> <div class="thumbnail" ng-if="!file.id">
<span class="glyphicon glyphicon-move"></span> <p class="text-center lead">
{{ 'document.default.drop_zone' | translate }} {{ file.status }}
</p> </p>
<div class="caption">
<div class="clearfix"></div> <uib-progressbar value="file.progress" class="progress-info active"></uib-progressbar>
<div class="text-center"> </div>
<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> </div>
</div> </div>
<div class="btn-group" ng-show="checkedFiles().length > 0"> <p class="text-center well-lg" ng-if="files.length == 0">
<button class="btn btn-primary" ng-click="addDocument()"><span class="glyphicon glyphicon-plus"></span> {{ 'document.default.add_new_document' | translate }}</button> <span class="glyphicon glyphicon-move"></span>
</div> {{ '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>
<div ui-view="file"></div> <div ui-view="file"></div>
<div ng-show="logs.length > 0"> <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" /> <audit-log logs="logs" />
</div> </div>
</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 class="col-md-6"><uib-progressbar value="fileProgress" class="progress-info active"></uib-progressbar></div>
</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"> <form name="documentForm" class="form-horizontal">
<div class="pull-right btn-group" ng-init="form = documentForm"> <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()"> <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">
@ -15,9 +13,9 @@
{{ 'save' | translate }} {{ 'save' | translate }}
</button> </button>
</div> </div>
<div class="page-header"> <h1 class="page-header">{{ document.title }}&nbsp;</h1>
<h1>{{ document.title }}&nbsp;</h1>
</div> <div uib-alert ng-class="'alert-' + alert.type" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</div>
<fieldset> <fieldset>
<legend>{{ 'document.edit.primary_metadata' | translate }}</legend> <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 }"> <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents" ng-class="{ active: $stateParams.id == document.id }">
<td colspan="2"> <td colspan="2">
{{ document.title }} ({{ document.file_count }}) {{ 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> <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> <div class="pull-right text-muted small">{{ document.create_date | timeAgo: dateFormat }}</div>
@ -104,7 +104,7 @@
</div> </div>
</div> </div>
<div class="col-md-8 col-full"> <div class="col-md-8">
<div ui-view="document"></div> <div ui-view="document"></div>
</div> </div>
</div> </div>

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

@ -38,15 +38,19 @@
</dd> </dd>
</dl> </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"
<div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="files"> 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="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)"> <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> </a>
<div class="caption btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div> <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" ng-show="document.writable"> <div class="caption caption-hover" ng-show="document.writable">
<div class="pull-left"> <div class="pull-left">
<div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div> <div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
</div> </div>
@ -66,21 +70,21 @@
</div> </div>
</div> </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>
<div class="text-center"> <p class="text-center well-lg" ng-if="files.length == 0">
<button class="btn btn-primary" ngf-select <span class="glyphicon glyphicon-move"></span>
ngf-change="fileDropped($files, $event)" {{ 'document.view.content.drop_zone' | translate }}
input-file-multiple="multiple" </p>
ngf-multiple="true">
{{ 'document.view.content.add_files' | translate }}
</button>
</div>
</div> </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> <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> </div>
<div class="col-md-8 col-full"> <div class="col-md-8">
<div ui-view="tag"></div> <div ui-view="tag"></div>
</div> </div>
</div> </div>

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

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

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

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

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

@ -64,11 +64,6 @@
background-color: #f5f5f5; background-color: #f5f5f5;
box-shadow: inset -2px 0 0 #e5e5e5; box-shadow: inset -2px 0 0 #e5e5e5;
} }
.col-full {
margin-top: 20px;
margin-bottom: 20px;
}
} }
// Footer // Footer
@ -86,12 +81,6 @@
} }
} }
// Drop zone
.drop-zone {
background: none;
border: 2px dashed #eee;
}
// $http loader // $http loader
.loader { .loader {
position: relative; position: relative;
@ -134,21 +123,48 @@
} }
// File thumbnails // File thumbnails
.thumbnail input[type="checkbox"] { .thumbnail {
width: 26px; a {
height: 26px; height: 200px;
} display: block;
overflow: hidden;
background: #eee;
}
.thumbnail-file { .caption {
cursor: pointer; height: 60px;
} overflow: hidden;
}
.thumbnails-file [class*="span"]:first-child { input[type="checkbox"] {
margin-left: 2.5641%; width: 26px;
} height: 26px;
}
.collapse[style="height: auto;"] { img {
overflow: visible; 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 // File name
@ -231,16 +247,22 @@ input[readonly].share-link {
} }
// Drag & drop related // 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 { .bg-success {
background-color: #dff0d8; background-color: #dff0d8;
} }
.upload-zone {
min-height: 150px;
}
.thumbnail-checked { .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 { .pointer {