diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 0bbdfe94903227a95451153bb9c203d2ec1c1024..a62bcd8c968c21f626e2700bc20dd8c88a24c47d 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -1,35 +1,43 @@
-#app-content-files .detailsView.disappear {
- margin-right: -300px;
+.app-files .detailsView.disappear {
+ margin-right: -350px;
}
-#app-content-files .detailsView {
+.app-files .detailsView {
position: absolute;
- width: 300px;
- top: 44px;
+ width: 350px;
+ top: 0;
bottom: 0;
right: 0;
left: auto;
background-color: white;
- border: 1px solid black;
-webkit-transition: margin-right 300ms;
-moz-transition: margin-right 300ms;
-o-transition: margin-right 300ms;
transition: margin-right 300ms;
}
-#app-content-files .detailsView .detailFileInfoContainer {
+.app-files .detailsView {
+ background: #eee;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
+ display: block;
+ z-index: 500;
+}
+
+.app-files .detailsView .detailFileInfoContainer {
min-height: 200px;
padding: 10px;
}
-#app-content-files .detailsView .detailFileInfoContainer > div{
+.app-files .detailsView .detailFileInfoContainer > div{
clear: both;
margin-left: 5px;
}
-#app-content-files .detailsView .thumbnail {
+.app-files .detailsView .thumbnail {
width: 50px;
height: 50px;
float: left;
@@ -37,12 +45,18 @@
background-size: 50px;
}
-#app-content-files .detailsView .fileName {
+.app-files .detailsView .fileName {
font-weight: bold;
font-size: 17px;
}
-#app-content-files .detailsView .detailList {
+.app-files .detailsView .detailList {
float: left;
}
+.app-files .detailsView .close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 10px;
+}
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 719299485a6887b4f2c96f2be6259011f05e396d..d69d8c09c162d08f409275af64ac6c5bb1ba8a89 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -18,6 +18,7 @@
' <ul class="tabHeadsContainer">' +
' </ul>' +
' </div>' +
+ ' <a class="close icon-close" href="#" alt="{{closeLabel}}"></a>' +
'</div>';
var TEMPLATE_TAB_HEADER =
@@ -72,10 +73,16 @@
* Initialize the details view
*/
initialize: function() {
+ var self = this;
this.$el = $('<div class="detailsView"></div>');
this.fileInfo = null;
this._tabViews = [];
this._detailFileInfoViews = [];
+
+ this.$el.on('click', 'a.close', function(event) {
+ self.$el.addClass('disappear');
+ event.preventDefault();
+ });
},
/**
@@ -102,7 +109,9 @@
this._templateTabHeader = Handlebars.compile(TEMPLATE_TAB_HEADER);
}
- var $el = $(this._template());
+ var $el = $(this._template({
+ closeLabel: t('files', 'Close')
+ }));
var $tabsContainer = $el.find('.tabsContainer');
var $tabHeadsContainer = $el.find('.tabHeadsContainer');
var $detailsContainer = $el.find('.detailFileInfoContainer');
@@ -144,6 +153,8 @@
setFileInfo: function(fileInfo) {
this._fileInfo = fileInfo;
+ this.render();
+
// notify all panels
_.each(this._tabViews, function(tabView) {
tabView.setFileInfo(fileInfo);
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 355c76f9c64016913c4f9b2f851f9b288d831d13..9f0d48ff0117a038647ad49de0f72c8bd87cf889 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -210,6 +210,11 @@
}
this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions);
+ this._detailsView = new OCA.Files.DetailsView();
+ this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
+ this.$el.append(this._detailsView.$el);
+ this._detailsView.$el.addClass('disappear');
+
this.$el.find('#controls').prepend(this.breadcrumb.$el);
this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
@@ -224,7 +229,7 @@
this.$el.on('click', function(event) {
var $target = $(event.target);
// click outside file row ?
- if (!$target.closest('tbody').length) {
+ if (!$target.closest('tbody').length && !$target.closest('.detailsView').length) {
self._updateDetailsView(null);
}
});
@@ -282,32 +287,16 @@
_updateDetailsView: function(fileInfo) {
var self = this;
if (!fileInfo) {
- if (this._detailsView) {
- // hide it
- this._detailsView.$el.addClass('disappear');
- this._detailsView.setFileInfo(null);
- }
+ this._detailsView.$el.addClass('disappear');
+ this._detailsView.setFileInfo(null);
return;
}
- if (!this._detailsView) {
- this._detailsView = new OCA.Files.DetailsView();
- this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
- _.each(this._detailFileInfoViews, function(view) {
- self._detailsView.addDetailView(view);
- });
- _.each(this._tabViews, function(view) {
- self._detailsView.addTabView(view);
- });
- this.$el.append(this._detailsView.$el);
- this._detailsView.$el.addClass('disappear');
- this._detailsView.render();
- }
this._detailsView.setFileInfo(_.extend({
path: this.getCurrentDirectory()
}, fileInfo));
_.defer(function() {
- self._detailsView.$el.removeClass('disappear');
+ self._detailsView.$el.removeClass('disappear hidden');
});
},
@@ -364,6 +353,12 @@
delete this._selectedFiles[$tr.data('id')];
this._selectionSummary.remove(data);
}
+ if (this._selectionSummary.getTotal() === 1) {
+ this._updateDetailsView(_.values(this._selectedFiles)[0]);
+ } else {
+ // show nothing when multiple files are selected
+ this._updateDetailsView(null);
+ }
this.$el.find('.select-all').prop('checked', this._selectionSummary.getTotal() === this.files.length);
},
@@ -2233,6 +2228,20 @@
}
});
+ },
+
+ /**
+ * Register a tab view to be added to all views
+ */
+ registerTabView: function(tabView) {
+ this._detailsView.addTabView(tabView);
+ },
+
+ /**
+ * Register a detail view to be added to all views
+ */
+ registerDetailView: function(detailView) {
+ this._detailsView.addDetailView(detailView);
}
};
@@ -2284,34 +2293,6 @@
}
};
- /**
- * Globally registered tab views
- *
- * @type OCA.Files.DetailTabView
- */
- FileList.prototype._tabViews = [];
-
- /**
- * Globally registered detail views
- *
- * @type OCA.Files.DetailFileInfoView
- */
- FileList.prototype._detailFileInfoViews = [];
-
- /**
- * Register a tab view to be added to all views
- */
- FileList.prototype.registerTabView = function(tabView) {
- this._tabViews.push(tabView);
- };
-
- /**
- * Register a detail view to be added to all views
- */
- FileList.prototype.registerDetailView = function(detailView) {
- this._detailFileInfoViews.push(detailView);
- };
-
/**
* File info attributes.
*
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 5eb74145f12d10695f0651d1ea6136f860d3d673..88463bda9e642c4f6d803cf4275bc764234a0d02 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -11,7 +11,14 @@
(function() {
var TEMPLATE =
'<div class="thumbnail"></div><div class="fileName">{{name}}</div>' +
- '<div><span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span></div>';
+ '<div>' +
+ ' <a href="#" ' +
+ ' alt="{{starAltText}}"' +
+ ' class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
+ ' <img class="svg" src="{{starIcon}}" />' +
+ ' </a>' +
+ ' <span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span>' +
+ '</div>';
/**
* @class OCA.Files.MainFileInfoDetailView
@@ -48,6 +55,7 @@
}
if (this._fileInfo) {
+ var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0
this.$el.append(this._template({
nameLabel: t('files', 'Name'),
name: this._fileInfo.name,
@@ -56,10 +64,13 @@
sizeLabel: t('files', 'Size'),
// TODO: refactor and use size formatter
size: OC.Util.humanFileSize(this._fileInfo.size, true),
- altSize: this._fileInfo.size,
+ altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
dateLabel: t('files', 'Modified'),
altDate: OC.Util.formatDate(this._fileInfo.mtime),
- date: OC.Util.relativeModifiedDate(this._fileInfo.mtime)
+ date: OC.Util.relativeModifiedDate(this._fileInfo.mtime),
+ isFavorite: isFavorite,
+ starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
+ starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
}));
var $iconDiv = this.$el.find('.thumbnail');
@@ -78,8 +89,7 @@
// TODO: special icons / shared / external
$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
}
- } else {
- // TODO: render placeholder text?
+ this.$el.find('[title]').tipsy();
}
}
});
diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js
index 227eec79578ece33ce1fac8d6d1100d9b65e67eb..12bec0e8c9abef02ef2ae1c64774cbdff50a1d85 100644
--- a/apps/files_sharing/js/share.js
+++ b/apps/files_sharing/js/share.js
@@ -144,9 +144,6 @@
OC.addScript('files_sharing', 'sharetabview').done(function() {
fileList.registerTabView(new OCA.Sharing.ShareTabView('shareTabView'));
});
- OC.addScript('files_sharing', 'sharedetailview').done(function() {
- fileList.registerDetailView(new OCA.Sharing.ShareDetailView());
- });
},
/**
diff --git a/apps/files_sharing/js/sharedetailview.js b/apps/files_sharing/js/sharedetailview.js
deleted file mode 100644
index a18a6d19d15f0f7d016ac993a1b435906f82d384..0000000000000000000000000000000000000000
--- a/apps/files_sharing/js/sharedetailview.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (c) 2015
- *
- * This file is licensed under the Affero General Public License version 3
- * or later.
- *
- * See the COPYING-README file.
- *
- */
-
-(function() {
- var TEMPLATE =
- '<ul class="shareDetailList">' +
- ' <li>Owner: {{owner}}</li>' +
- '</ul>';
-
- /**
- * @class OCA.Files.MainFileInfoDetailView
- * @classdesc
- *
- * Displays main details about a file
- *
- */
- var ShareDetailView = function() {
- this.initialize();
- };
- /**
- * @memberof OCA.Sharing
- */
- ShareDetailView.prototype = _.extend({}, OCA.Files.DetailFileInfoView.prototype,
- /** @lends OCA.Sharing.ShareDetailView.prototype */ {
- _template: null,
-
- /**
- * Initialize the details view
- */
- initialize: function() {
- this.$el = $('<div class="shareDetailView"></div>');
- },
-
- /**
- * Renders this details view
- */
- render: function() {
- this.$el.empty();
-
- if (!this._template) {
- this._template = Handlebars.compile(TEMPLATE);
- }
-
- if (this._fileInfo) {
- this.$el.append(this._template({
- owner: this._fileInfo.shareOwner || OC.currentUser
- }));
- } else {
- // TODO: render placeholder text?
- }
- }
- });
-
- OCA.Sharing.ShareDetailView = ShareDetailView;
-})();
-
diff --git a/apps/files_sharing/js/sharetabview.js b/apps/files_sharing/js/sharetabview.js
index 48dfcae16d8d716e6dfa2e3c705fd0953258d683..42bddc20b3c5e1ec320e59b88d78505be5eebea8 100644
--- a/apps/files_sharing/js/sharetabview.js
+++ b/apps/files_sharing/js/sharetabview.js
@@ -10,7 +10,7 @@
(function() {
var TEMPLATE =
- '<div>TODO: here comes the share dialog</div>';
+ '<div>Owner: {{owner}}';
/**
* @class OCA.Sharing.ShareTabView
@@ -52,7 +52,9 @@
}
if (this._fileInfo) {
- this.$el.append(this._template());
+ this.$el.append(this._template({
+ owner: this._fileInfo.shareOwner || OC.currentUser
+ }));
} else {
// TODO: render placeholder text?
}