mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move social buttons to menu 

* If there are social sharing buttons move them and the copy action to a
menu
* If there are no social sharing buttons just leave the copy action
where it is directly

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
This commit is contained in:
Roeland Jago Douma 2017-03-03 13:27:06 +01:00
parent a85327fe87
commit fd71b8bde8
No known key found for this signature in database
GPG Key ID: F941078878347C0C
5 changed files with 107 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/files_sharing/css/sharetabview.css
View File

@ -21,6 +21,17 @@
padding: 14px;
}
.shareTabView .linkMore {
position: absolute;
right: -7px;
top: -4px;
padding: 14px;
}
.shareTabView .popovermenu .clipboardButton {
position: relative;
}
.shareTabView label {
white-space: nowrap;
}

103
core/js/sharedialoglinkshareview.js
View File

@ -27,7 +27,12 @@
'<div class="oneline">' +
'<label for="linkText-{{cid}}" class="hidden-visually">{{urlLabel}}</label>' +
'<input id="linkText-{{cid}}" class="linkText {{#unless isLinkShare}}hidden{{/unless}}" type="text" readonly="readonly" value="{{shareLinkURL}}" />' +
'<a class="{{#unless isLinkShare}}hidden-visually{{/unless}} clipboardButton icon icon-clippy" data-clipboard-target="#linkText-{{cid}}"></a>' +
'{{#if singleAction}}' +
'<a class="{{#unless isLinkShare}}hidden-visually{{/unless}} clipboardButton icon icon-clippy" data-clipboard-target="#linkText-{{cid}}"></a>' +
'{{else}}' +
'<a href="#"><span class="linkMore icon icon-more"></span></a>' +
'{{{popoverMenu}}}' +
'{{/if}}' +
'</div>' +
' {{#if publicUpload}}' +
'<div id="allowPublicUploadWrapper">' +
@ -64,6 +69,27 @@
'{{#if noSharingPlaceholder}}<input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{noSharingPlaceholder}}" disabled="disabled"/>{{/if}}' +
'{{/if}}'
;
var TEMPLATE_POPOVER_MENU =
'<div class="popovermenu bubble hidden menu">' +
'<ul>' +
'<li>' +
'<span class="shareOption menuitem">' +
'<button class="icon clipboardButton icon-clippy"' +
'data-clipboard-target="#linkText-{{cid}}">{{copyLabel}}' +
'</button>' +
'</span>' +
'</li>' +
'{{#each social}}' +
'<li>' +
'<span class="shareOption menuitem">' +
'<button class="icon {{iconClass}} pop-up"' +
'data-url="{{url}}">{{label}}' +
'</button>' +
'</span>' +
'</li>' +
'{{/each}}' +
'</ul>' +
'</div>';
/**
* @class OCA.Share.ShareDialogLinkShareView
@ -85,6 +111,9 @@
/** @type {Function} **/
_template: undefined,
/** @type {Function} **/
_popoverMenuTemplate: undefined,
/** @type {boolean} **/
showLink: true,
@ -96,7 +125,9 @@
'change .publicUploadCheckbox': 'onAllowPublicUploadChange',
'change .publicEditingCheckbox': 'onAllowPublicEditingChange',
'change .hideFileListCheckbox': 'onHideFileListChange',
'click .showPasswordCheckbox': 'onShowPasswordClick'
'click .showPasswordCheckbox': 'onShowPasswordClick',
'click .icon-more': 'onToggleMenu',
'click .pop-up': 'onPopUpClick'
},
initialize: function(options) {
@ -150,8 +181,7 @@
.tooltip('show');
_.delay(function() {
$input.tooltip('hide')
.attr('data-original-title', t('core', 'Copy'))
.tooltip('fixTitle');
.tooltip("destroy");
}, 3000);
});
clipboard.on('error', function (e) {
@ -173,7 +203,7 @@
_.delay(function () {
$input.tooltip('hide')
.attr('data-original-title', t('core', 'Copy'))
.tooltip('fixTitle');
.tooltip("destroy");
}, 3000);
});
@ -354,6 +384,26 @@
&& isLinkShare
&& this.model.updatePermissionPossible();
var link = this.model.get('linkShare').link;
var social = [];
OC.Share.Social.Collection.each(function(model) {
var url = model.get('url');
url = url.replace('{{reference}}', link);
social.push({
url: url,
label: t('core', 'Share to {name}', {name: model.get('name')}),
name: model.get('name'),
iconClass: model.get('iconClass')
});
});
var popover = this.popoverMenuTemplate({
cid: this.cid,
copyLabel: t('core', 'Copy'),
social: social
});
this.$el.html(linkShareTemplate({
cid: this.cid,
shareAllowed: true,
@ -376,16 +426,27 @@
publicEditingLabel: t('core', 'Allow editing'),
hideFileListLabel: t('core', 'File drop (upload only)'),
mailPrivatePlaceholder: t('core', 'Email link to person'),
mailButtonText: t('core', 'Send')
mailButtonText: t('core', 'Send'),
singleAction: OC.Share.Social.Collection.size() == 0,
popoverMenu: popover
}));
this.$el.find('.clipboardButton').tooltip({placement: 'bottom', title: t('core', 'Copy'), trigger: 'hover'});
this.delegateEvents();
return this;
},
onToggleMenu: function(event) {
event.preventDefault();
event.stopPropagation();
var $element = $(event.target);
var $li = $element.closest('.oneline');
var $menu = $li.find('.popovermenu');
OC.showMenu(null, $menu);
this._menuOpen = $li.data('share-id');
},
/**
* @returns {Function} from Handlebars
* @private
@ -395,6 +456,32 @@
this._template = Handlebars.compile(TEMPLATE);
}
return this._template;
},
/**
* renders the popover template and returns the resulting HTML
*
* @param {Object} data
* @returns {string}
*/
popoverMenuTemplate: function(data) {
if(!this._popoverMenuTemplate) {
this._popoverMenuTemplate = Handlebars.compile(TEMPLATE_POPOVER_MENU);
}
return this._popoverMenuTemplate(data);
},
onPopUpClick: function(event) {
var url = $(event.target).data('url');
$(event.target).tooltip('hide');
if (url) {
var width = 600;
var height = 400;
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
window.open(url, 'name', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
}
}
});

132
core/js/sharedialoglinksocialview.js
View File

@ -1,132 +0,0 @@
/**
* @copyright 2017, Roeland Jago Douma <roeland@famdouma.nl>
*
* @author Roeland Jago Douma <roeland@famdouma.nl>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
(function() {
if (!OC.Share) {
OC.Share = {};
}
var TEMPLATE =
'<button class="icon {{iconClass}} pop-up hasTooltip"' +
' title="{{shareToolTip}}"' +
' data-url="{{url}}"></button>'
;
/**
* @class OCA.Share.ShareDialogLinkSocialView
* @member {OC.Share.ShareItemModel} model
* @member {jQuery} $el
* @memberof OCA.Sharing
* @classdesc
*
* Represents the GUI of the share dialogue
*
*/
var ShareDialogLinkSocialView = OC.Backbone.View.extend({
/** @type {string} **/
id: 'shareDialogLinkSocialView',
/** @type {OC.Share.ShareConfigModel} **/
configModel: undefined,
/** @type {Function} **/
_template: undefined,
/** @type {boolean} **/
showLink: true,
events: {
'click .pop-up': 'onPopUpClick'
},
initialize: function(options) {
var view = this;
this.model.on('change:linkShare', function() {
view.render();
});
if(!_.isUndefined(options.configModel)) {
this.configModel = options.configModel;
} else {
throw 'missing OC.Share.ShareConfigModel';
}
},
onPopUpClick: function(event) {
var url = $(event.target).data('url');
$(event.target).tooltip('hide');
if (url) {
var width = 600;
var height = 400;
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
window.open(url, 'name', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
}
},
render: function() {
var isLinkShare = this.model.get('linkShare').isLinkShare;
if (isLinkShare && OC.Share.Social.Collection.size() > 0) {
var linkShareTemplate = this.template();
var link = this.model.get('linkShare').link;
var html = '';
OC.Share.Social.Collection.each(function(model) {
var url = model.get('url');
url = url.replace('{{reference}}', link);
html += linkShareTemplate({
url: url,
shareToolTip: t('core', 'Share to {name}', {name: model.get('name')}),
iconClass: model.get('iconClass')
});
});
this.$el.html(html);
this.$el.show();
} else {
this.$el.hide();
}
this.delegateEvents();
return this;
},
/**
* @returns {Function} from Handlebars
* @private
*/
template: function () {
if (!this._template) {
this._template = Handlebars.compile(TEMPLATE);
}
return this._template;
}
});
OC.Share.ShareDialogLinkSocialView = ShareDialogLinkSocialView;
})();

10
core/js/sharedialogview.js
View File

@ -28,7 +28,6 @@
'<div class="shareeListView subView"></div>' +
'<div class="linkShareView subView"></div>' +
'<div class="expirationView subView"></div>' +
'<div class="socialView subView"></div>' +
'<div class="loading hidden" style="height: 50px"></div>';
var TEMPLATE_REMOTE_SHARE_INFO =
@ -70,9 +69,6 @@
/** @type {object} **/
shareeListView: undefined,
/** @type OC.Share.ShareDialogLinkSocialView **/
socalView: undefined,
events: {
'input .shareWithField': 'onShareWithFieldChanged'
},
@ -109,8 +105,7 @@
resharerInfoView: 'ShareDialogResharerInfoView',
linkShareView: 'ShareDialogLinkShareView',
expirationView: 'ShareDialogExpirationView',
shareeListView: 'ShareDialogShareeListView',
socialView: 'ShareDialogLinkSocialView'
shareeListView: 'ShareDialogShareeListView'
};
for(var name in subViews) {
@ -426,9 +421,6 @@
this.shareeListView.$el = this.$el.find('.shareeListView');
this.shareeListView.render();
this.socialView.$el = this.$('.socialView');
this.socialView.render();
this.$el.find('.hasTooltip').tooltip();
return this;

1
lib/private/Share/Share.php
View File

@ -97,7 +97,6 @@ class Share extends Constants {
\OC_Util::addScript('core', 'sharesocialmanager');
\OC_Util::addScript('core', 'sharedialogresharerinfoview');
\OC_Util::addScript('core', 'sharedialoglinkshareview');
\OC_Util::addScript('core', 'sharedialoglinksocialview');
\OC_Util::addScript('core', 'sharedialogexpirationview');
\OC_Util::addScript('core', 'sharedialogshareelistview');
\OC_Util::addScript('core', 'sharedialogview');