Skip to content

Commit

Permalink
Rework permissions in UX friendlier radio-button style, improve modal…
Browse files Browse the repository at this point in the history 
… behavior on mobile devices.
  • Loading branch information
@felixheidecke
felixheidecke committed Nov 2, 2017
1 parent 29d1661 commit 32c1b46
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 98 deletions.
3 changes: 0 additions & 3 deletions apps/files_sharing/css/sharetabview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,9 +254,6 @@
}
/* ---------------------------------------------------- PUBLIC LINK MODAL --- */

.public-link-modal {
width: 340px;
}
.public-link-modal--item {
margin-bottom: 20px;
}
Expand Down
23 changes: 19 additions & 4 deletions core/css/jquery.ocdialog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,28 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 200px;
min-width: 340px;
}

@media (max-width: 512px) {
.oc-dialog {
position: absolute;
top: 55px;
right: 10px;
left: 10px;
}
}

@media (min-width: 513px) {
/* Center positioning */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.oc-dialog {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}

.oc-dialog-title {
background: white;
font-weight: bold;
Expand Down
38 changes: 0 additions & 38 deletions core/js/jquery.ocdialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@
_create: function() {
var self = this;

this.originalCss = {
display: this.element[0].style.display,
width: this.element[0].style.width,
height: this.element[0].style.height
};

this.originalTitle = this.element.attr('title');
this.options.title = this.options.title || this.originalTitle;

Expand All @@ -29,11 +23,6 @@
this.$dialog.append(this.element.detach());
this.element.removeAttr('title').addClass('oc-dialog-content').appendTo(this.$dialog);

this.$dialog.css({
display: 'inline-block',
position: 'fixed'
});

$(document).on('keydown keyup', function(event) {
if (
event.target !== self.$dialog.get(0) &&
Expand Down Expand Up @@ -138,12 +127,6 @@
this.$dialog.find('.oc-dialog-close').remove();
}
break;
case 'width':
this.$dialog.css('width', value);
break;
case 'height':
this.$dialog.css('height', value);
break;
case 'close':
this.closeCB = value;
break;
Expand All @@ -155,27 +138,6 @@
//this._super(options);
$.Widget.prototype._setOptions.apply(this, arguments);
},
_setSizes: function() {
// var content_height = this.$dialog.height();
// if(this.$title) {
// content_height -= this.$title.outerHeight(true);
// }
// if(this.$buttonrow) {
// content_height -= this.$buttonrow.outerHeight(true);
// }
// this.parent = this.$dialog.parent().length > 0 ? this.$dialog.parent() : $('body');
// content_height = Math.min(content_height, this.parent.height()-20);
// if (content_height> 0) {
// this.element.css({
// height: content_height + 'px',
// width: this.$dialog.innerWidth()-20 + 'px'
// });
// } else {
// this.element.css({
// width : this.$dialog.innerWidth() - 20 + 'px'
// });
// }
},
_createOverlay: function() {
if(!this.options.modal) {
return;
Expand Down
86 changes: 33 additions & 53 deletions core/js/sharedialoglinkshareview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,20 @@
'<input class="public-link-modal--input" type="text" name="linkName" placeholder="{{namePlaceholder}}" value="{{name}}" maxlength="64" />' +
'</div>' +
'{{#if publicUploadPossible}}' +
'<div id="allowPublicUploadWrapper-{{cid}}" class="public-link-modal--item">' +
'<input type="checkbox" value="1" name="allowPublicUpload" id="sharingDialogAllowPublicUpload-{{cid}}" class="checkbox publicUploadCheckbox" {{#if publicUploadChecked}}checked="checked"{{/if}} />' +
'<label for="sharingDialogAllowPublicUpload-{{cid}}">{{publicUploadLabel}}</label>' +
'<div id="allowPublicRead-{{cid}}" class="public-link-modal--item">' +
'<input type="radio" value="1" name="publicPermissions" id="sharingDialogAllowPublicRead-{{cid}}" class="checkbox publicPermissions publicReadCheckbox" {{#if publicReadSelected}}checked{{/if}} />' +
'<label class="bold" for="sharingDialogAllowPublicRead-{{cid}}">{{publicReadLabel}}</label>' +
'<p>{{publicReadDescription}}</p>' +
'</div>' +
'<div id="allowPublicReadWrite-{{cid}}" class="public-link-modal--item">' +
'<input type="radio" value="15" name="publicPermissions" id="sharingDialogAllowPublicReadWrite-{{cid}}" class="checkbox publicPermissions publicReadWriteCheckbox" {{#if publicReadWriteSelected}}checked{{/if}} />' +
'<label class="bold" for="sharingDialogAllowPublicReadWrite-{{cid}}">{{publicReadWriteLabel}}</label>' +
'<p>{{publicReadWriteDescription}}</p>' +
'</div>' +
'<div id="showListingWrapper-{{cid}}" class="public-link-modal--item">' +
'<input type="checkbox" value="1" name="showListing" id="sharingDialogShowListing-{{cid}}" class="checkbox showListingCheckbox" {{#if showListingChecked}}checked="checked"{{/if}} />' +
'<label for="sharingDialogShowListing-{{cid}}">{{showListingLabel}}</label>' +
'<div id="allowPublicUploadWrapper-{{cid}}" class="public-link-modal--item">' +
'<input type="radio" value="4" name="publicPermissions" id="sharingDialogAllowPublicUpload-{{cid}}" class="checkbox publicPermissions publicUploadCheckbox" {{#if publicUploadSelected}}checked{{/if}} />' +
'<label class="bold" for="sharingDialogAllowPublicUpload-{{cid}}">{{publicUploadLabel}}</label>' +
'<p>{{publicUploadDescription}}</p>' +
'</div>' +
'{{/if}}' +
'<div id="linkPass-{{cid}}" class="public-link-modal--item linkPass">' +
Expand Down Expand Up @@ -69,10 +76,6 @@
/** @type {Function} **/
_template: undefined,

events: {
'click .publicUploadCheckbox': '_updateCheckboxes'
},

initialize: function (options) {
if (!_.isUndefined(options.itemModel)) {
this.itemModel = options.itemModel;
Expand All @@ -89,46 +92,15 @@
OC.Plugins.attach('OCA.Share.ShareDialogLinkShareView', this);
},

_updateCheckboxes: function() {
var publicUploadAllowed = this.$('.publicUploadCheckbox').is(':checked');
if (!publicUploadAllowed) {
this.$('.showListingCheckbox').prop('checked', true);
this.$('.showListingCheckbox').prop('disabled', true);
} else {
this.$('.showListingCheckbox').prop('disabled', false);
}
},

/**
* Returns the selected permissions as read from the checkboxes or
* the absence thereof.
*
* @return {int} permissions
*/
_getPermissions: function() {
var $showListingCheckbox = this.$('.showListingCheckbox');
var $publicUploadCheckbox = this.$('.publicUploadCheckbox');
var allowListing = (!$showListingCheckbox.length || $showListingCheckbox.is(':checked'));
var permissions = 0;

// if the checkbox is missing, default to checked
if (allowListing) {
permissions |= OC.PERMISSION_READ;
}

// if the checkbox is missing it is the equivalent of unchecked
if ($publicUploadCheckbox.is(':checked')) {
if (allowListing) {
permissions |= OC.PERMISSION_UPDATE | OC.PERMISSION_CREATE | OC.PERMISSION_DELETE;
} else {
// without listing only file creation is allowed, no overwrite nor delete
permissions |= OC.PERMISSION_CREATE;
}
} else {
// ignore listing perm, allow reading
permissions |= OC.PERMISSION_READ;
}

var $permissionRadio = this.$('input[name="publicPermissions"]:checked');
var permissions = $permissionRadio.val();
return permissions;
},

Expand Down Expand Up @@ -248,18 +220,28 @@

this.$el.html(this.template({
cid: this.cid,
fileNameLabel : t('core', 'Filename'),
passwordLabel: t('core', 'Password'),
passwordPlaceholder: isPasswordSet ? PASSWORD_PLACEHOLDER_STARS : PASSWORD_PLACEHOLDER_MESSAGE,
isPasswordRequired: this.configModel.get('enforcePasswordForPublicLink'),
namePlaceholder: t('core', 'Name'),
name: this.model.get('name'),
isPasswordSet: isPasswordSet,
publicUploadPossible: this._isPublicUploadPossible(),
publicUploadChecked: this.model.canCreate(),
publicUploadLabel: t('core', 'Allow editing'),
showListingChecked: this.model.canRead(),
showListingLabel: t('core', 'Show file listing'),

fileNameLabel : t('core', 'Filename'),
passwordLabel : t('core', 'Password'),

publicUploadPossible : this._isPublicUploadPossible(),
publicUploadSelected : this.model.get('permissions') === 4,
publicUploadLabel : t('core', 'Upload only (File Drop)'),
publicUploadDescription : t('core', 'Receive files from others without revealing the contents of the folder.'),

publicReadSelected : this.model.get('permissions') === 1,
publicReadLabel : t('core', 'Read only'),
publicReadDescription : t('core', 'Users can view and download contents.'),

publicReadWriteSelected : this.model.get('permissions') === 15,
publicReadWriteLabel : t('core', 'Read & Write'),
publicReadWriteDescription : t('core', 'Users can view, download, edit and upload contents.'),

isMailEnabled: showEmailField
}));

Expand All @@ -280,8 +262,6 @@
this.expirationView.render();
this.$('.expirationDateContainer').append(this.expirationView.$el);

this._updateCheckboxes();

this.delegateEvents();

return this;
Expand Down Expand Up @@ -368,7 +348,7 @@
});
}

});
});

OC.Share.ShareDialogLinkShareView = ShareDialogLinkShareView;

Expand Down

0 comments on commit 32c1b46

Please sign in to comment.