From fd71b8bde8fc003b0f160075825402c4fab1d54c Mon Sep 17 00:00:00 2001
From: Roeland Jago Douma <roeland@famdouma.nl>
Date: Fri, 3 Mar 2017 13:27:06 +0100
Subject: [PATCH] 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>
---
apps/files_sharing/css/sharetabview.css | 11 ++
core/js/sharedialoglinkshareview.js | 103 ++++++++++++++++--
core/js/sharedialoglinksocialview.js | 132 ------------------------
core/js/sharedialogview.js | 10 +-
lib/private/Share/Share.php | 1 -
5 files changed, 107 insertions(+), 150 deletions(-)
delete mode 100644 core/js/sharedialoglinksocialview.js
diff --git a/apps/files_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css
index 4738f8b7802..5896e18abad 100644
--- a/apps/files_sharing/css/sharetabview.css
+++ b/apps/files_sharing/css/sharetabview.css
@@ -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;
}
diff --git a/core/js/sharedialoglinkshareview.js b/core/js/sharedialoglinkshareview.js
index 84a3d18942f..014819d5103 100644
--- a/core/js/sharedialoglinkshareview.js
+++ b/core/js/sharedialoglinkshareview.js
@@ -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);
+ }
}
});
diff --git a/core/js/sharedialoglinksocialview.js b/core/js/sharedialoglinksocialview.js
deleted file mode 100644
index 1cd8d91bc7a..00000000000
--- a/core/js/sharedialoglinksocialview.js
+++ /dev/null
@@ -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;
-})();
diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index ed887dfb716..a63960da2b8 100644
--- a/core/js/sharedialogview.js
+++ b/core/js/sharedialogview.js
@@ -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;
diff --git a/lib/private/Share/Share.php b/lib/private/Share/Share.php
index c693af02a50..38b12a57ccf 100644
--- a/lib/private/Share/Share.php
+++ b/lib/private/Share/Share.php
@@ -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');
--
GitLab