Add anchor icon in sidebar to copy permalink

owncloud · May 6, 2016 · ae0fd79 · ae0fd79
1 parent 53bea87
commit ae0fd79
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
@@ -14,6 +14,19 @@
 	width: 100%;
 }
 
+#app-sidebar .mainFileInfoView .icon {
+	display: inline-block;
+}
+
+#app-sidebar .mainFileInfoView .permalink {
+	margin-left: 10px;
+	opacity: .5;
+}
+#app-sidebar .mainFileInfoView .permalink-field>input {
+	clear: both;
+	width: 90%;
+}
+
 #app-sidebar .file-details-container {
 	display: inline-block;
 	float: left;

diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
@@ -12,14 +12,23 @@
 	var TEMPLATE =
 		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
 		'<div class="file-details-container">' +
-		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
+		'<div class="fileName">' +
+			'<h3 title="{{name}}" class="ellipsis">{{name}}</h3>' +
+			'<a class="permalink" href="{{permalink}}" title="{{permalinkTitle}}">' +
+				'<span class="icon icon-public"></span>' +
+				'<span class="hidden-visually">{{permalinkTitle}}</span>' +
+			'</a>' +
+		'</div>' +
 		'	<div class="file-details ellipsis">' +
 		'		<a href="#" ' +
 		'		class="action action-favorite favorite">' +
 		'			<img class="svg" alt="{{starAltText}}" src="{{starIcon}}" />' +
 		'		</a>' +
 		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
 		'	</div>' +
+		'</div>' +
+		'<div class="hidden permalink-field">' +
+			'<input type="text" value="{{permalink}}" placeholder="{{permalinkTitle}}" readonly="readonly"/>' +
 		'</div>';
 
 	/**
@@ -50,7 +59,9 @@
 
 		events: {
 			'click a.action-favorite': '_onClickFavorite',
-			'click a.action-default': '_onClickDefaultAction'
+			'click a.action-default': '_onClickDefaultAction',
+			'click a.permalink': '_onClickPermalink',
+			'focus .permalink-field>input': '_onFocusPermalink'
 		},
 
 		template: function(data) {
@@ -72,6 +83,20 @@
 			}
 		},
 
+		_onClickPermalink: function() {
+			var $row = this.$('.permalink-field');
+			$row.toggleClass('hidden');
+			if (!$row.hasClass('hidden')) {
+				$row.find('>input').focus();
+			}
+			// cancel click, user must right-click + copy or middle click
+			return false;
+		},
+
+		_onFocusPermalink: function() {
+			this.$('.permalink-field>input').select();
+		},
+
 		_onClickFavorite: function(event) {
 			event.preventDefault();
 			this._fileActions.triggerAction('Favorite', this.model, this._fileList);
@@ -87,6 +112,11 @@
 			this.render();
 		},
 
+		_makePermalink: function(fileId) {
+			var baseUrl = OC.getProtocol() + '://' + OC.getHost();
+			return baseUrl + OC.generateUrl('/f/{fileId}', {fileId: fileId});
+		},
+
 		setFileInfo: function(fileInfo) {
 			if (this.model) {
 				this.model.off('change', this._onModelChanged, this);
@@ -118,7 +148,9 @@
 					altDate: OC.Util.formatDate(this.model.get('mtime')),
 					date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
 					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
-					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
+					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star'),
+					permalink: this._makePermalink(this.model.get('id')),
+					permalinkTitle: t('files', 'Local link')
 				}));
 
 				// TODO: we really need OC.Previews

diff --git a/apps/files/tests/js/mainfileinfodetailviewSpec.js b/apps/files/tests/js/mainfileinfodetailviewSpec.js
@@ -62,6 +62,11 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 			expect(view.$el.find('.date').attr('title')).toEqual(dateExpected);
 			clock.restore();
 		});
+		it('displays permalink', function() {
+			view.setFileInfo(testFileInfo);
+			expect(view.$el.find('.permalink').attr('href'))
+				.toEqual(OC.getProtocol() + '://' + OC.getHost() + OC.generateUrl('/f/5'));
+		});
 		it('displays favorite icon', function() {
 			testFileInfo.set('tags', [OC.TAG_FAVORITE]);
 			view.setFileInfo(testFileInfo);