Add anchor icon in sidebar to copy permalink
This commit is contained in:
parent
fdeafef6a0
commit
112b703df0
|
@ -14,6 +14,19 @@
|
||||||
width: 100%;
|
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 {
|
#app-sidebar .file-details-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
|
@ -12,7 +12,13 @@
|
||||||
var TEMPLATE =
|
var TEMPLATE =
|
||||||
'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
|
'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
|
||||||
'<div class="file-details-container">' +
|
'<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">' +
|
' <div class="file-details ellipsis">' +
|
||||||
' <a href="#" ' +
|
' <a href="#" ' +
|
||||||
' class="action action-favorite favorite">' +
|
' class="action action-favorite favorite">' +
|
||||||
|
@ -20,6 +26,9 @@
|
||||||
' </a>' +
|
' </a>' +
|
||||||
' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
|
' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
|
||||||
' </div>' +
|
' </div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="hidden permalink-field">' +
|
||||||
|
'<input type="text" value="{{permalink}}" placeholder="{{permalinkTitle}}" readonly="readonly"/>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -50,7 +59,9 @@
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'click a.action-favorite': '_onClickFavorite',
|
'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) {
|
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) {
|
_onClickFavorite: function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this._fileActions.triggerAction('Favorite', this.model, this._fileList);
|
this._fileActions.triggerAction('Favorite', this.model, this._fileList);
|
||||||
|
@ -87,6 +112,11 @@
|
||||||
this.render();
|
this.render();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_makePermalink: function(fileId) {
|
||||||
|
var baseUrl = OC.getProtocol() + '://' + OC.getHost();
|
||||||
|
return baseUrl + OC.generateUrl('/f/{fileId}', {fileId: fileId});
|
||||||
|
},
|
||||||
|
|
||||||
setFileInfo: function(fileInfo) {
|
setFileInfo: function(fileInfo) {
|
||||||
if (this.model) {
|
if (this.model) {
|
||||||
this.model.off('change', this._onModelChanged, this);
|
this.model.off('change', this._onModelChanged, this);
|
||||||
|
@ -118,7 +148,9 @@
|
||||||
altDate: OC.Util.formatDate(this.model.get('mtime')),
|
altDate: OC.Util.formatDate(this.model.get('mtime')),
|
||||||
date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
|
date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
|
||||||
starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
|
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
|
// TODO: we really need OC.Previews
|
||||||
|
|
|
@ -62,6 +62,11 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
|
||||||
expect(view.$el.find('.date').attr('title')).toEqual(dateExpected);
|
expect(view.$el.find('.date').attr('title')).toEqual(dateExpected);
|
||||||
clock.restore();
|
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() {
|
it('displays favorite icon', function() {
|
||||||
testFileInfo.set('tags', [OC.TAG_FAVORITE]);
|
testFileInfo.set('tags', [OC.TAG_FAVORITE]);
|
||||||
view.setFileInfo(testFileInfo);
|
view.setFileInfo(testFileInfo);
|
||||||
|
|
Loading…
Reference in New Issue