vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-25 07:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

#208: overflow menu on files

Browse Source
This commit is contained in:
Benjamin Gamard 2018-03-23 11:29:10 +01:00
parent d2256eabfa
commit 37ca5ff84e
3 changed files with 65 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,18 +9,17 @@
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)">
<a class="file-thumbnail" 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 class="pull-right">
<div class="file-info">
<div class="caption caption-hover-inverse file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption caption-hover">
<button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="fas fa-trash"></span></button>
</div>
<div class="clearfix"></div>
<div class="v-align">
<input type="checkbox" ng-model="file.checked" />
</div>
</div>
</div>

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

@ -44,24 +44,37 @@
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 handle" ng-if="file.id">
<div class="thumbnail" ng-if="file.id">
<div class="file-processing-indicator" ng-show="file.processing"
uib-tooltip="{{ 'document.view.content.file_processing_indicator' | translate }}">
<span class="fas fa-spin fa-circle-notch"></span>
</div>
<a ng-click="openFile(file)">
<a class="file-thumbnail" 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" ng-show="document.writable">
<div class="pull-left">
<div class="file-info">
<div class="caption caption-hover-inverse file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
<div class="caption caption-hover" ng-show="document.writable">
<div class="btn btn-default handle"><span class="fas fa-arrows-alt-h"></span></div>
</div>
<div class="pull-right">
<button class="btn btn-danger" ng-click="deleteFile(file)"><span class="fas fa-trash"></span></button>
<div class="v-align">
<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="deleteFile(file)">
<span class="fas fa-trash"></span>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>

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

@ -187,16 +187,46 @@ ul.tag-tree {
// File thumbnails
.thumbnail {
a {
.file-processing-indicator {
position: absolute;
z-index: 2;
margin-left: 8px;
margin-top: 8px;
color: #2ab2dc;
}
a.file-thumbnail {
height: 200px;
display: block;
overflow: hidden;
background: #eee;
}
.caption {
height: 60px;
overflow: hidden;
.file-name {
word-wrap: break-word;
white-space: normal;
display: block;
text-overflow: ellipsis;
}
.file-info {
display: flex;
justify-content: space-between;
.caption {
height: 42px;
padding: 0;
margin: 9px;
}
.v-align {
display: flex;
align-items: center;
> * {
margin-right: 8px;
}
}
}
input[type="checkbox"] {
@ -217,11 +247,13 @@ ul.tag-tree {
.caption-hover-inverse {
display: block;
overflow: hidden;
}
&:hover {
.caption-hover {
display: block;
display: flex;
align-items: center;
}
.caption-hover-inverse {
@ -230,22 +262,6 @@ ul.tag-tree {
}
}
// File processing indicator
.file-processing-indicator {
position: absolute;
z-index: 2;
margin-left: 8px;
margin-top: 8px;
color: #2ab2dc;
}
// File name
.file-name {
word-wrap: break-word;
white-space: normal;
display: block;
}
// Permissions table
.table-permissions {
.label-acl {
@ -670,7 +686,6 @@ input[readonly].share-link {
box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
background: none;
border-radius: 4px;
overflow: hidden;
.well-3d-header {
font-size: 20px;