From f11946c8c0c41e87e17c50b5e3691ece11a09ae4 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Thu, 16 Jul 2015 12:49:34 +0200
Subject: [PATCH] Improve layout, fix mime icon
---
apps/files/css/detailsView.css | 20 +++++++++++++++-----
apps/files/js/detailsview.js | 1 +
apps/files/js/filelist.js | 6 ++++++
apps/files/js/mainfileinfodetailview.js | 25 +++++++++++++------------
4 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 8d412a8366..51aaf39375 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -30,26 +30,36 @@
}
.app-files .detailsView .detailFileInfoContainer {
- min-height: 80px;
- padding: 10px;
+ min-height: 60px;
+ padding: 15px;
}
.app-files .detailsView .detailFileInfoContainer > div {
clear: both;
- margin-left: 5px;
+}
+
+.app-files .detailsView .mainFileInfoView {
+ margin-right: 20px; /* accomodate for close icon */
}
.app-files .detailsView .thumbnail {
width: 50px;
height: 50px;
float: left;
- margin: 5px;
+ margin-right: 10px;
background-size: 50px;
}
+.app-files .detailsView .ellipsis {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
.app-files .detailsView .fileName {
font-weight: bold;
font-size: 17px;
+ overflow: hidden;
}
.app-files .detailsView .detailList {
@@ -60,5 +70,5 @@
position: absolute;
top: 0;
right: 0;
- margin: 10px;
+ margin: 15px;
}
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index c28de71ab7..2142c9824f 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -84,6 +84,7 @@
event.preventDefault();
});
+ // uncomment to add some dummy tabs for testing
this._addTestTabs();
},
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index e228b8e852..a03c4e1754 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1305,6 +1305,12 @@
ready(iconURL); // set mimeicon URL
urlSpec.file = OCA.Files.Files.fixPath(path);
+ if (options.x) {
+ urlSpec.x = options.x;
+ }
+ if (options.y) {
+ urlSpec.y = options.y;
+ }
if (etag){
// use etag as cache buster
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 88463bda9e..4707e3e9f0 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,8 +10,8 @@
(function() {
var TEMPLATE =
- '<div class="thumbnail"></div><div class="fileName">{{name}}</div>' +
- '<div>' +
+ '<div class="thumbnail"></div><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' +
+ '<div class="ellipsis">' +
' <a href="#" ' +
' alt="{{starAltText}}"' +
' class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
@@ -55,14 +55,13 @@
}
if (this._fileInfo) {
- var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0
+ var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0;
this.$el.append(this._template({
nameLabel: t('files', 'Name'),
name: this._fileInfo.name,
pathLabel: t('files', 'Path'),
path: this._fileInfo.path,
sizeLabel: t('files', 'Size'),
- // TODO: refactor and use size formatter
size: OC.Util.humanFileSize(this._fileInfo.size, true),
altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
dateLabel: t('files', 'Modified'),
@@ -73,18 +72,20 @@
starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
}));
- var $iconDiv = this.$el.find('.thumbnail');
// TODO: we really need OC.Previews
+ var $iconDiv = this.$el.find('.thumbnail');
if (this._fileInfo.mimetype !== 'httpd/unix-directory') {
- // FIXME: use proper way, this is only for demo purposes
- var previewUrl = FileList.generatePreviewUrl({
- file: this._fileInfo.path + '/' + this._fileInfo.name,
- c: this._fileInfo.etag,
+ // TODO: inject utility class?
+ FileList.lazyLoadPreview({
+ path: this._fileInfo.path + '/' + this._fileInfo.name,
+ mime: this._fileInfo.mimetype,
+ etag: this._fileInfo.etag,
x: 50,
- y: 50
+ y: 50,
+ callback: function(previewUrl) {
+ $iconDiv.css('background-image', 'url("' + previewUrl + '")');
+ }
});
- previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
- $iconDiv.css('background-image', 'url("' + previewUrl + '")');
} else {
// TODO: special icons / shared / external
$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
--
GitLab