summaryrefslogtreecommitdiffstats
path: root/apps/files
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files')
-rw-r--r--apps/files/css/detailsView.css13
-rw-r--r--apps/files/css/files.css33
-rw-r--r--apps/files/js/fileinfomodel.js8
-rw-r--r--apps/files/js/filelist.js19
-rw-r--r--apps/files/js/mainfileinfodetailview.js108
5 files changed, 112 insertions, 69 deletions
diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 8eded7acda1..ea9d48b470c 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -25,18 +25,26 @@
margin-top: -15px;
}
+#app-sidebar .thumbnailContainer.image.portrait {
+ margin: 0; /* if we dont fit the image anyway we give it back the margin */
+}
+
#app-sidebar .image .thumbnail {
width:100%;
display:block;
height: 250px;
background-repeat: no-repeat;
- background-position: 50% top;
+ background-position: center;
background-size: 100%;
float: none;
margin: 0;
}
#app-sidebar .image.portrait .thumbnail {
+ background-position: 50% top;
+}
+
+#app-sidebar .image.portrait .thumbnail {
background-size: contain;
}
@@ -64,10 +72,13 @@
#app-sidebar .fileName h3 {
max-width: 300px;
float:left;
+ padding: 5px 0;
+ margin: -5px 0;
}
#app-sidebar .file-details {
margin-top: 3px;
+ margin-bottom: 15px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
float:left;
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 05033dc2fed..df23f415129 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -110,10 +110,6 @@
cursor: pointer;
}
-#app-navigation .nav-files a {
- display: inline-block;
-}
-
#app-navigation .nav-files a.new.hidden {
display: none;
}
@@ -420,25 +416,20 @@ table td.filename .uploadtext {
}
/* File checkboxes */
-#fileList tr td.filename>.selectCheckBox {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: alpha(opacity=0);
+#fileList tr td.filename>.selectCheckBox + label:before {
opacity: 0;
- float: left;
- top: 0;
- margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
+ position: absolute;
+ bottom: 4px;
+ right: 0;
+ z-index: 10;
}
+
/* Show checkbox when hovering, checked, or selected */
-#fileList tr:hover td.filename>.selectCheckBox,
-#fileList tr:focus td.filename>.selectCheckBox,
-#fileList tr td.filename>.selectCheckBox:checked,
-#fileList tr.selected td.filename>.selectCheckBox {
+#fileList tr:hover td.filename>.selectCheckBox + label:before,
+#fileList tr:focus td.filename>.selectCheckBox + label:before,
+#fileList tr td.filename>.selectCheckBox:checked + label:before,
+#fileList tr.selected td.filename>.selectCheckBox + label:before {
opacity: 1;
-}
-.lte9 #fileList tr:hover td.filename>.selectCheckBox,
-.lte9 #fileList tr:focus td.filename>.selectCheckBox,
-.lte9 #fileList tr td.filename>.selectCheckBox[checked=checked],
-.lte9 #fileList tr.selected td.filename>.selectCheckBox {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
@@ -446,6 +437,7 @@ table td.filename .uploadtext {
/* Use label to have bigger clickable size for checkbox */
#fileList tr td.filename>.selectCheckBox + label,
.select-all + label {
+ background-position: 30px 30px;
height: 50px;
position: absolute;
width: 50px;
@@ -460,7 +452,7 @@ table td.filename .uploadtext {
.select-all + label {
top: 0;
}
-.select-all {
+.select-all + label:before {
position: absolute;
top: 18px;
left: 18px;
@@ -737,6 +729,7 @@ table.dragshadow td.size {
width: 140px;
margin-left: -56px;
margin-top: 25px;
+ z-index: 1001;
}
.newFileMenu .menuitem {
diff --git a/apps/files/js/fileinfomodel.js b/apps/files/js/fileinfomodel.js
index 22b1ca9ff0c..de1b143a160 100644
--- a/apps/files/js/fileinfomodel.js
+++ b/apps/files/js/fileinfomodel.js
@@ -57,7 +57,13 @@
* @return {boolean} true if this is an image, false otherwise
*/
isImage: function() {
- return this.has('mimetype') ? this.get('mimetype').substr(0, 6) === 'image/' : false;
+ if (!this.has('mimetype')) {
+ return false;
+ }
+ return this.get('mimetype').substr(0, 6) === 'image/'
+ || this.get('mimetype') === 'application/postscript'
+ || this.get('mimetype') === 'application/illustrator'
+ || this.get('mimetype') === 'application/x-photoshop';
},
/**
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 3e4cdaf8be3..2af5be73d96 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -10,7 +10,7 @@
(function() {
- var TEMPLATE_ADDBUTTON = '<a href="#" class="button new" title="{{addText}}"><img src="{{iconUrl}}"></img></a>';
+ var TEMPLATE_ADDBUTTON = '<a href="#" class="button new"><img src="{{iconUrl}}" alt="{{addText}}"></img></a>';
/**
* @class OCA.Files.FileList
@@ -347,7 +347,7 @@
// and contain existing models that can be used.
// This method would in the future simply retrieve the matching model from the collection.
var model = new OCA.Files.FileInfoModel(this.elementToFile($tr));
- if (!model.has('path')) {
+ if (!model.get('path')) {
model.set('path', this.getCurrentDirectory(), {silent: true});
}
@@ -369,6 +369,21 @@
},
/**
+ * Displays the details view for the given file and
+ * selects the given tab
+ *
+ * @param {string} fileName file name for which to show details
+ * @param {string} [tabId] optional tab id to select
+ */
+ showDetailsView: function(fileName, tabId) {
+ this._updateDetailsView(fileName);
+ if (tabId) {
+ this._detailsView.selectTab(tabId);
+ }
+ OC.Apps.showAppSidebar();
+ },
+
+ /**
* Update the details view to display the given file
*
* @param {string} fileName file name from the current list
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index efdbb5e2ad1..830f074f3f1 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -124,52 +124,10 @@
// TODO: we really need OC.Previews
var $iconDiv = this.$el.find('.thumbnail');
- $iconDiv.addClass('icon-loading icon-32');
- $container = this.$el.find('.thumbnailContainer');
+ var $container = this.$el.find('.thumbnailContainer');
if (!this.model.isDirectory()) {
- this._fileList.lazyLoadPreview({
- path: this.model.getFullPath(),
- mime: this.model.get('mimetype'),
- etag: this.model.get('etag'),
- y: this.model.isImage() ? 250: 75,
- x: this.model.isImage() ? 99999 /* only limit on y */ : 75,
- a: this.model.isImage() ? 1 : null,
- callback: function(previewUrl, img) {
- $iconDiv.previewImg = previewUrl;
- if (img) {
- $iconDiv.removeClass('icon-loading icon-32');
- if(img.height > img.width) {
- $container.addClass('portrait');
- }
- }
- if (this.model.isImage() && img) {
- $iconDiv.parent().addClass('image');
- var targetHeight = img.height / window.devicePixelRatio;
- if (targetHeight <= 75) {
- $container.removeClass('image'); // small enough to fit in normaly
- targetHeight = 75;
- }
- } else {
- targetHeight = 75;
- }
-
- // only set background when we have an actual preview
- // when we dont have a preview we show the mime icon in the error handler
- if (img) {
- $iconDiv.css({
- 'background-image': 'url("' + previewUrl + '")',
- 'height': targetHeight
- });
- }
- }.bind(this),
- error: function() {
- $iconDiv.removeClass('icon-loading icon-32');
- this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
- $iconDiv.css({
- 'background-image': 'url("' + $iconDiv.previewImg + '")'
- });
- }.bind(this)
- });
+ $iconDiv.addClass('icon-loading icon-32');
+ this.loadPreview(this.model.getFullPath(), this.model.get('mimetype'), this.model.get('etag'), $iconDiv, $container, this.model.isImage());
} else {
// TODO: special icons / shared / external
$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
@@ -179,6 +137,66 @@
this.$el.empty();
}
this.delegateEvents();
+ },
+
+ loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
+ var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin
+ var smallPreviewSize = 75;
+
+ var isLandscape = function(img) {
+ return img.width > (img.height * 1.2);
+ };
+
+ var getTargetHeight = function(img) {
+ if(isImage) {
+ var targetHeight = img.height / window.devicePixelRatio;
+ if (targetHeight <= smallPreviewSize) {
+ targetHeight = smallPreviewSize;
+ }
+ return targetHeight;
+ }else{
+ return smallPreviewSize;
+ }
+ };
+
+ this._fileList.lazyLoadPreview({
+ path: path,
+ mime: mime,
+ etag: etag,
+ y: isImage ? maxImageHeight : smallPreviewSize,
+ x: isImage ? 99999 /* only limit on y */ : smallPreviewSize,
+ a: isImage ? 1 : null,
+ callback: function (previewUrl, img) {
+ $iconDiv.previewImg = previewUrl;
+
+ // as long as we only have the mimetype icon, we only save it in case there is no preview
+ if (!img) {
+ return;
+ }
+ $iconDiv.removeClass('icon-loading icon-32');
+ var targetHeight = getTargetHeight(img);
+ if (this.model.isImage() && targetHeight > smallPreviewSize) {
+ if (!isLandscape(img)) {
+ $container.addClass('portrait');
+ }
+ $container.addClass('image');
+ }
+
+ // only set background when we have an actual preview
+ // when we dont have a preview we show the mime icon in the error handler
+ $iconDiv.css({
+ 'background-image': 'url("' + previewUrl + '")',
+ 'height': targetHeight
+ });
+ }.bind(this),
+ error: function () {
+ $iconDiv.removeClass('icon-loading icon-32');
+ this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
+ $iconDiv.css({
+ 'background-image': 'url("' + $iconDiv.previewImg + '")'
+ });
+ }.bind(this)
+ });
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-19 13:32:51 +0000