Skip to content

Commit

Permalink
Allow hiding share details
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrow4a
mrow4a committed Jan 15, 2020
1 parent 505f3d2 commit 08017f6
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 98 deletions.
1 change: 0 additions & 1 deletion apps/files_sharing/css/sharetabview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
white-space : normal;
}

#shareWithList .showCruds img,
#shareWithList .unshare img {
vertical-align: text-bottom;
/* properly align icons */
Expand Down
15 changes: 13 additions & 2 deletions core/css/share.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
left: 20px;
}
}

.shareTabView .unshare.icon-loading-small {
margin-top: 1px;
}
Expand Down Expand Up @@ -164,6 +163,15 @@ a.time {
margin-right: -10px;
}

a.toggleShareDetails {
display: inline;
float: right;
opacity: 0.5;
padding: 10px;
margin-top: -5px;
margin-right: -10px;
}

#link {
border-top: 1px solid #ddd;
padding-top: 8px;
Expand Down Expand Up @@ -207,6 +215,9 @@ a.showCruds:hover,
a.unshare:hover {
opacity: 1;
}
a.toggleShareDetails:hover {
opacity: 1;
}
#defaultExpireMessage,
/* fix expire message going out of box */
.reshare {
Expand Down Expand Up @@ -293,4 +304,4 @@ a.unshare:hover {

.select2-container-multi .select2-choices .select2-search-choice {
padding: 3px 18px 3px 5px;
}
}
233 changes: 138 additions & 95 deletions core/js/sharedialogshareelistview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,86 +15,84 @@

var TEMPLATE =
'<ul id="shareWithList" class="shareWithList">' +
'{{#each sharees}}' +
'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
'{{#if expirationDate}}' +
'<a class="time"><span class="icon icon-time"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
'{{/if}}' +
'{{#if avatarEnabled}}' +
'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
'{{/if}}' +
'<span class="has-tooltip username" title="{{shareWith}}">{{shareWithDisplayName}}</span>' +
'{{#if shareWithAdditionalInfo}}' +
'<span class="has-tooltip user-additional-info">({{shareWithAdditionalInfo}})</span>' +
'{{/if}}' +
'{{#if mailNotificationEnabled}} {{#unless isRemoteShare}}' +
'<span class="shareOption">' +
'{{#unless wasMailSent}}' +
'<span class="mailNotificationSpinner icon-loading-small hidden"></span>' +
'<input id="mail-{{cid}}-{{shareWith}}" type="button" name="mailNotification" value="{{notifyByMailLabel}}" class="mailNotification checkbox" />' +
'{{/unless}}' +
'</span>' +
'{{/unless}} {{/if}}' +
'<div class="shareWithList__details-group">' +
'{{#if isUserShare}}' +
'<label for="expiration-{{name}}-{{cid}}-{{shareWith}}">Expiration: ' +
'<input type="text" id="expiration-{{name}}-{{cid}}-{{shareWith}}" value="{{expirationDate}}" class="expiration expiration-user" placeholder="Choose an expiration date" />' +
'<button class="removeExpiration">Remove</button>' +
'</label>' +
'{{/if}}' +
'{{#if isGroupShare}}' +
'<label for="expiration-{{name}}-{{cid}}-{{shareWith}}">Expire share on: ' +
'<input type="text" id="expiration-{{name}}-{{cid}}-{{shareWith}}" value="{{expirationDate}}" class="expiration expiration-group"/>' +
'<button class="removeExpiration">Remove</button>' +
'</label>' +
'{{/if}}' +
'</div>' +
'<div class="coreShareOptions">' +
'{{#if isResharingAllowed}} {{#if sharePermissionPossible}}' +
'<span class="shareOption">' +
'<input id="canShare-{{cid}}-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
'<label for="canShare-{{cid}}-{{shareWith}}">{{canShareLabel}}</label>' +
'</span>' +
'{{/if}} {{/if}}' +
'{{#if editPermissionPossible}}' +
'<span class="shareOption">' +
'<input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
'<label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
'<a href="#" class="showCruds"><img alt="{{crudsLabel}}" src="{{triangleSImage}}"/></a>' +
'</span>' +
'{{/if}}' +
'</div>' +
'<div class="cruds hidden">' +
'{{#if createPermissionPossible}}' +
'<span class="shareOption">' +
'<input id="canCreate-{{cid}}-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
'<label for="canCreate-{{cid}}-{{shareWith}}">{{createPermissionLabel}}</label>' +
'</span>' +
'{{/if}}' +
'{{#if updatePermissionPossible}}' +
'<span class="shareOption">' +
'<input id="canUpdate-{{cid}}-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
'<label for="canUpdate-{{cid}}-{{shareWith}}">{{updatePermissionLabel}}</label>' +
'</span>' +
'{{/if}}' +
'{{#if deletePermissionPossible}}' +
'<span class="shareOption">' +
'<input id="canDelete-{{cid}}-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
'<label for="canDelete-{{cid}}-{{shareWith}}">{{deletePermissionLabel}}</label>' +
'</span>' +
'{{/if}}' +
'</div>' +
'<div class="shareAttributes"">' +
'{{#each shareAttributesV1}}' +
'<span class="shareOption">' +
'<input id="can-{{name}}-{{cid}}-{{shareWith}}" type="checkbox" name="{{name}}" class="attributes checkbox" {{#if isReshare}}disabled{{/if}} {{#if enabled}}checked="checked"{{/if}} data-scope="{{scope}}" data-enabled="{{enabled}}""/>' +
'<label for="can-{{name}}-{{cid}}-{{shareWith}}">{{label}}</label>' +
'</span>' +
'{{/each}}' +
'</div>' +
'</li>' +
'{{/each}}' +
' {{#each sharees}}' +
' <li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
' <a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
' <a href="#" class="toggleShareDetails"><span class="icon icon-settings-dark"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
' {{#if expirationDate}}' +
' <a class="time"><span class="icon icon-time"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
' {{/if}}' +
' {{#if avatarEnabled}}' +
' <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
' {{/if}}' +
' <span class="has-tooltip username" title="{{shareWith}}">{{shareWithDisplayName}}</span>' +
' {{#if shareWithAdditionalInfo}}' +
' <span class="has-tooltip user-additional-info">({{shareWithAdditionalInfo}})</span>' +
' {{/if}}' +
' {{#if mailNotificationEnabled}} {{#unless isRemoteShare}}' +
' <span class="shareOption">' +
' {{#unless wasMailSent}}' +
' <span class="mailNotificationSpinner icon-loading-small hidden"></span>' +
' <input id="mail-{{cid}}-{{shareWith}}" type="button" name="mailNotification" value="{{notifyByMailLabel}}" class="mailNotification checkbox" />' +
' {{/unless}}' +
' </span>' +
' {{/unless}} {{/if}}' +
' <div class="expirationOption">' +
' {{#if isUserShare}}' +
' <label for="expiration-{{name}}-{{cid}}-{{shareWith}}">Expiration: ' +
' <input type="text" id="expiration-{{name}}-{{cid}}-{{shareWith}}" value="{{expirationDate}}" class="expiration expiration-user" placeholder="Choose an expiration date" />' +
' <button class="removeExpiration">Remove</button>' +
' </label>' +
' {{/if}}' +
' {{#if isGroupShare}}' +
' <label for="expiration-{{name}}-{{cid}}-{{shareWith}}">Expire share on: ' +
' <input type="text" id="expiration-{{name}}-{{cid}}-{{shareWith}}" value="{{expirationDate}}" class="expiration expiration-group"/>' +
' <button class="removeExpiration">Remove</button>' +
' </label>' +
' {{/if}}' +
' </div>' +
' <div class="coreShareOptions">' +
' {{#if isResharingAllowed}} {{#if sharePermissionPossible}}' +
' <span class="shareOption">' +
' <input id="canShare-{{cid}}-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
' <label for="canShare-{{cid}}-{{shareWith}}">{{canShareLabel}}</label>' +
' </span>' +
' {{/if}} {{/if}}' +
' {{#if editPermissionPossible}}' +
' <span class="shareOption">' +
' <input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
' <label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
' </span>' +
' {{/if}}' +
' {{#if createPermissionPossible}}' +
' <span class="shareOption">' +
' <input id="canCreate-{{cid}}-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
' <label for="canCreate-{{cid}}-{{shareWith}}">{{createPermissionLabel}}</label>' +
' </span>' +
' {{/if}}' +
' {{#if updatePermissionPossible}}' +
' <span class="shareOption">' +
' <input id="canUpdate-{{cid}}-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
' <label for="canUpdate-{{cid}}-{{shareWith}}">{{updatePermissionLabel}}</label>' +
' </span>' +
' {{/if}}' +
' {{#if deletePermissionPossible}}' +
' <span class="shareOption">' +
' <input id="canDelete-{{cid}}-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
' <label for="canDelete-{{cid}}-{{shareWith}}">{{deletePermissionLabel}}</label>' +
' </span>' +
' {{/if}}' +
' </div>' +
' <div class="shareAttributes"">' +
' {{#each shareAttributesV1}}' +
' <span class="shareOption">' +
' <input id="can-{{name}}-{{cid}}-{{shareWith}}" type="checkbox" name="{{name}}" class="attributes checkbox" {{#if isReshare}}disabled{{/if}} {{#if enabled}}checked="checked"{{/if}} data-scope="{{scope}}" data-enabled="{{enabled}}""/>' +
' <label for="can-{{name}}-{{cid}}-{{shareWith}}">{{label}}</label>' +
' </span>' +
' {{/each}}' +
' </div>' +
' </li>' +
' {{/each}}' +
'</ul>';

/**
Expand All @@ -117,13 +115,15 @@
/** @type {Function} **/
_template: undefined,

_currentlyToggled: [],

events: {
'click .unshare': 'onUnshare',
'click .permissions': 'onPermissionChange',
'click .attributes': 'onPermissionChange',
'click .showCruds': 'onCrudsToggle',
'click .mailNotification': 'onSendMailNotification',
'click .removeExpiration' : 'onRemoveExpiration'
'click .removeExpiration' : 'onRemoveExpiration',
'click .toggleShareDetails' : 'onToggleShareDetails'
},

initialize: function(options) {
Expand Down Expand Up @@ -292,15 +292,32 @@
self._setDatepicker(this, {
maxDate : self.configModel.getDefaultExpireDateUser(),
enforced : self.configModel.isDefaultExpireDateUserEnforced()
})
})
});
});

this.$el.find('.expiration-group:not(.hasDatepicker)').each(function(){
self._setDatepicker(this, {
maxDate : self.configModel.getDefaultExpireDateGroup(),
enforced : self.configModel.isDefaultExpireDateGroupEnforced()
})
})
});
});

this.$el.bind("DOMNodeInserted", function(){
// make sure to always enable toggled divs
if (!_.isUndefined(self._currentlyToggled)) {

self.$el.find('li').each(function()
{
var $li = $(this);
var shareId = $li.data('share-id');
if (!_.isUndefined(self._currentlyToggled[shareId])) {
self._toggleShareDivs(shareId, true);
} else {
self._toggleShareDivs(shareId, false);
}
});
}
});

this.delegateEvents();

Expand Down Expand Up @@ -395,12 +412,6 @@
);
},

onCrudsToggle: function(event) {
var $target = $(event.target);
$target.closest('li').find('.cruds').toggleClass('hidden');
return false;
},

onSendMailNotification: function(event) {
var $target = $(event.target);
var $li = $(event.target).closest('li');
Expand Down Expand Up @@ -434,10 +445,42 @@
}, {});
},

onToggleShareDetails: function(event) {
this._toggleShareDetails(event);
},

_toggleShareDetails: function(event) {
var $li = $(event.target).closest('li');
var shareId = $li.data('share-id');

if (!_.isUndefined(this._currentlyToggled[shareId])) {
this._currentlyToggled.splice(shareId, 1);
this._toggleShareDivs(shareId, false);
} else {
this._currentlyToggled[shareId] = true;
this._toggleShareDivs(shareId, true);
}
},

_toggleShareDivs: function(shareId, enabled) {
var $li = this.$el.find('li[data-share-id=' + shareId + ']');
$li.children("div").each(function()
{
var $div = $(this);
if (!$div.hasClass( "avatar" )) {
if (enabled) {
$div.css('display', 'block');
} else {
$div.css('display', 'none');
}
}
});
},

_onExpirationChange: function(el) {
var $el = $(el)
var $el = $(el);
var shareId = $el.closest('li').data('share-id');
var expiration = moment($el.val(), 'DD-MM-YYYY').format()
var expiration = moment($el.val(), 'DD-MM-YYYY').format();

this.model.updateShare( shareId, {
expireDate: expiration
Expand All @@ -452,7 +495,7 @@
minDate: "+1d",
dateFormat : 'dd-mm-yy',
onSelect : function() {
self._onExpirationChange(el)
self._onExpirationChange(el);
}
});

Expand Down

0 comments on commit 08017f6

Please sign in to comment.