Public fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-07-19 20:05:37 +02:00
parent c71d3dc9bf
commit 3a11c26cb4
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
7 changed files with 120 additions and 238 deletions

View File

@ -2,6 +2,19 @@
min-height: 100px;
}
.share-autocomplete-item {
display: flex;
.autocomplete-item-text {
margin-left: 10px;
margin-right: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 32px;
vertical-align: middle;
}
}
.shareTabView {
.oneline {
white-space: nowrap;
@ -33,6 +46,9 @@
padding: 14px;
}
.popovermenu {
.datepicker {
margin-left: 35px;
}
.clipboardButton {
position: relative;
top: initial;
@ -109,7 +125,8 @@
}
}
&[type='text'].linkText
&[type='password'].linkPassText {
&[type='password'].linkPassText,
&[type='password'].passwordField {
width: 180px !important;
}
}
@ -175,3 +192,30 @@
}
}
.ui-autocomplete {
/* limit dropdown height to 4 1/2 entries */
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.notCreatable {
padding-left: 12px;
padding-top: 12px;
color: var(--color-text-lighter);
}
.contactsmenu-popover {
left: -6px;
right: auto;
padding: 3px 6px;
top: 100%;
margin-top: 0;
li.hidden {
display: none !important;
}
&:after {
left: 8px;
right: auto;
}
}

View File

@ -530,6 +530,7 @@ code {
width: auto;
border-radius: var(--border-radius);
border: none;
z-index: 500 !important;
.ui-state-default,
.ui-widget-content .ui-state-default,

View File

@ -37,7 +37,6 @@
"shareconfigmodel.js",
"shareitemmodel.js",
"sharedialogview.js",
"sharedialogexpirationview.js",
"sharedialoglinkshareview.js",
"sharedialogresharerinfoview.js",
"sharedialogshareelistview.js",

View File

@ -1,11 +1,10 @@
[
"shareconfigmodel.js",
"shareitemmodel.js",
"sharesocialmanager.js",
"sharedialogresharerinfoview.js",
"sharedialoglinkshareview.js",
"sharedialogexpirationview.js",
"sharedialogshareelistview.js",
"sharedialogview.js",
"share.js"
"shareconfigmodel.js",
"shareitemmodel.js",
"sharesocialmanager.js",
"sharedialogresharerinfoview.js",
"sharedialoglinkshareview.js",
"sharedialogshareelistview.js",
"sharedialogview.js",
"share.js"
]

View File

@ -1,209 +0,0 @@
/*
* Copyright (c) 2015
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
/* global moment, Handlebars */
(function() {
if (!OC.Share) {
OC.Share = {};
}
var TEMPLATE =
// currently expiration is only effective for link share.
// this is about to change in future. Therefore this is not included
// in the LinkShareView to ease reusing it in future. Then,
// modifications (getting rid of IDs) are still necessary.
'{{#if isLinkShare}}' +
'<input type="checkbox" name="expirationCheckbox" class="expirationCheckbox checkbox" id="expirationCheckbox-{{cid}}" value="1" ' +
'{{#if isExpirationSet}}checked="checked"{{/if}} {{#if disableCheckbox}}disabled="disabled"{{/if}} />' +
'<label for="expirationCheckbox-{{cid}}">{{setExpirationLabel}}</label>' +
'<div class="expirationDateContainer {{#unless isExpirationSet}}hidden{{/unless}}">' +
' <label for="expirationDate" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
' <input id="expirationDate" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{expirationValue}}" />' +
'</div>' +
' {{#if isExpirationEnforced}}' +
// originally the expire message was shown when a default date was set, however it never had text
'<em id="defaultExpireMessage">{{defaultExpireMessage}}</em>' +
' {{/if}}' +
'{{/if}}'
;
/**
* @class OCA.Share.ShareDialogExpirationView
* @member {OC.Share.ShareItemModel} model
* @member {jQuery} $el
* @memberof OCA.Sharing
* @classdesc
*
* Represents the expiration part in the GUI of the share dialogue
*
*/
var ShareDialogExpirationView = OC.Backbone.View.extend({
/** @type {string} **/
id: 'shareDialogLinkShare',
/** @type {OC.Share.ShareConfigModel} **/
configModel: undefined,
/** @type {Function} **/
_template: undefined,
/** @type {boolean} **/
showLink: true,
className: 'hidden',
events: {
'change .expirationCheckbox': '_onToggleExpiration',
'change .datepicker': '_onChangeExpirationDate'
},
initialize: function(options) {
if(!_.isUndefined(options.configModel)) {
this.configModel = options.configModel;
} else {
throw 'missing OC.Share.ShareConfigModel';
}
var view = this;
this.configModel.on('change:isDefaultExpireDateEnforced', function() {
view.render();
});
this.model.on('change:itemType', function() {
view.render();
});
this.model.on('change:linkShare', function() {
view.render();
});
},
_onToggleExpiration: function(event) {
var $checkbox = $(event.target);
var state = $checkbox.prop('checked');
// TODO: slide animation
this.$el.find('.expirationDateContainer').toggleClass('hidden', !state);
if (!state) {
// discard expiration date
this.model.get('linkShare').expiration = '';
this.model.saveLinkShare({
expireDate: ''
});
} else {
this.$el.find('#expirationDate').focus();
}
},
_onChangeExpirationDate: function(event) {
var $target = $(event.target);
$target.tooltip('hide');
$target.removeClass('error');
var expiration = moment($target.val(), 'DD-MM-YYYY').format('YYYY-MM-DD');
this.model.get('linkShare').expiration = expiration;
this.model.saveLinkShare({
expiration: expiration
}, {
error: function(model, message) {
if (!message) {
$target.attr('title', t('core', 'Error setting expiration date'));
} else {
$target.attr('title', message);
}
$target.tooltip({gravity: 'n'});
$target.tooltip('show');
$target.addClass('error');
}
});
},
render: function() {
var defaultExpireMessage = '';
var defaultExpireDays = this.configModel.get('defaultExpireDate');
var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced');
if( (this.model.isFolder() || this.model.isFile())
&& isExpirationEnforced) {
defaultExpireMessage = t(
'core',
'The public link will expire no later than {days} days after it is created',
{'days': defaultExpireDays }
);
}
var isExpirationSet = !!this.model.get('linkShare').expiration || isExpirationEnforced;
var expiration;
if (isExpirationSet) {
expiration = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY');
}
this.$el.html(this.template({
cid: this.cid,
setExpirationLabel: t('core', 'Set expiration date'),
expirationLabel: t('core', 'Expiration'),
expirationDatePlaceholder: t('core', 'Expiration date'),
defaultExpireMessage: defaultExpireMessage,
isLinkShare: this.model.get('linkShare').isLinkShare,
isExpirationSet: isExpirationSet,
isExpirationEnforced: isExpirationEnforced,
disableCheckbox: isExpirationEnforced && isExpirationSet,
expirationValue: expiration
}));
// what if there is another date picker on that page?
var minDate = new Date();
var maxDate = null;
// min date should always be the next day
minDate.setDate(minDate.getDate()+1);
if(isExpirationSet) {
if(isExpirationEnforced) {
// TODO: hack: backend returns string instead of integer
var shareTime = this.model.get('linkShare').stime;
if (_.isNumber(shareTime)) {
shareTime = new Date(shareTime * 1000);
}
if (!shareTime) {
shareTime = new Date(); // now
}
shareTime = OC.Util.stripTime(shareTime).getTime();
maxDate = new Date(shareTime + defaultExpireDays * 24 * 3600 * 1000);
}
}
$.datepicker.setDefaults({
minDate: minDate,
maxDate: maxDate
});
this.$el.find('.datepicker').datepicker({dateFormat : 'dd-mm-yy'});
this.delegateEvents();
return this;
},
/**
* @returns {Function} from Handlebars
* @private
*/
template: function (data) {
if (!this._template) {
this._template = Handlebars.compile(TEMPLATE);
}
return this._template(data);
}
});
OC.Share.ShareDialogExpirationView = ShareDialogExpirationView;
})();

View File

@ -120,7 +120,7 @@
'<li>' +
'<a href="#" class="shareOption menuitem pop-up" data-url="{{url}}" data-window="{{newWindow}}">' +
'<span class="icon {{iconClass}}"' +
'></inpu><span>{{label}}' +
'></span><span>{{label}}' +
'</span>' +
'</a>' +
'</li>' +
@ -376,6 +376,7 @@
// show elements
$menu.find('.share-note-delete').toggle();
$form.toggleClass('hidden');
$form.find('textarea').focus();
},
deleteNote(event) {
@ -517,6 +518,7 @@
});
});
var defaultExpireDays = this.configModel.get('defaultExpireDate');
var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced');
var hasExpireDate = !!this.model.get('linkShare').expiration || isExpirationEnforced;
@ -525,6 +527,33 @@
expireDate = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY');
}
// what if there is another date picker on that page?
var minDate = new Date();
var maxDate = null;
// min date should always be the next day
minDate.setDate(minDate.getDate()+1);
if(hasExpireDate) {
if(isExpirationEnforced) {
// TODO: hack: backend returns string instead of integer
var shareTime = this.model.get('linkShare').stime;
if (_.isNumber(shareTime)) {
shareTime = new Date(shareTime * 1000);
}
if (!shareTime) {
shareTime = new Date(); // now
}
shareTime = OC.Util.stripTime(shareTime).getTime();
maxDate = new Date(shareTime + defaultExpireDays * 24 * 3600 * 1000);
}
}
$.datepicker.setDefaults({
minDate: minDate,
maxDate: maxDate
});
this.$el.find('.datepicker').datepicker({dateFormat : 'dd-mm-yy'});
var popover = this.popoverMenuTemplate({
cid: this.model.get('linkShare').id,
copyLabel: t('core', 'Copy URL'),
@ -575,6 +604,9 @@
this.delegateEvents();
// new note autosize
autosize(this.$el.find('.share-note-form .share-note'));
return this;
},
@ -636,8 +668,10 @@
onExpireDateChange: function(event) {
var $element = $(event.target);
var datePickerClass = '.expirationDateContainer-' + this.cid;
var datePicker = $(datePickerClass);
var li = $element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var expirationDatePicker = '#expirationDateContainer-' + shareId;
var datePicker = $(expirationDatePicker);
var state = $element.prop('checked');
datePicker.toggleClass('hidden', !state);
@ -655,7 +689,10 @@
},
showDatePicker: function(event) {
var expirationDatePicker = '#expirationDatePicker-' + this.cid;
var $element = $(event.target);
var li = $element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var expirationDatePicker = '#expirationDatePicker-' + shareId;
var self = this;
$(expirationDatePicker).datepicker({
@ -664,6 +701,8 @@
self.setExpirationDate(expireDate);
}
});
console.log(event, $(expirationDatePicker));
$(expirationDatePicker).datepicker('show');
$(expirationDatePicker).focus();
},

View File

@ -103,11 +103,13 @@
'<span class="shareOption menuitem">' +
'<input id="password-{{cid}}-{{shareId}}" type="checkbox" name="password" class="password checkbox" {{#if isPasswordSet}}checked="checked"{{/if}}{{#if isPasswordSet}}{{#if isPasswordForMailSharesRequired}}disabled=""{{/if}}{{/if}}" />' +
'<label for="password-{{cid}}-{{shareId}}">{{passwordLabel}}</label>' +
'<div class="passwordContainer-{{cid}}-{{shareId}} {{#unless isPasswordSet}}hidden{{/unless}}">' +
' <label for="passwordField-{{cid}}-{{shareId}}" class="hidden-visually" value="{{password}}">{{passwordLabel}}</label>' +
' <input id="passwordField-{{cid}}-{{shareId}}" class="passwordField" type="password" placeholder="{{passwordPlaceholder}}" value="{{passwordValue}}" autocomplete="new-password" />' +
' <span class="icon-loading-small hidden"></span>' +
'</div>' +
'</span>' +
'</li>' +
'<li class="passwordMenu-{{cid}}-{{shareId}} {{#unless isPasswordSet}}hidden{{/unless}}">' +
'<span class="passwordContainer-{{cid}}-{{shareId}} icon-passwordmail menuitem">' +
' <label for="passwordField-{{cid}}-{{shareId}}" class="hidden-visually" value="{{password}}">{{passwordLabel}}</label>' +
' <input id="passwordField-{{cid}}-{{shareId}}" class="passwordField" type="password" placeholder="{{passwordPlaceholder}}" value="{{passwordValue}}" autocomplete="new-password" />' +
' <span class="icon-loading-small hidden"></span>' +
'</span>' +
'</li>' +
'{{/if}}' +
@ -115,10 +117,12 @@
'<span class="shareOption menuitem">' +
'<input id="expireDate-{{cid}}-{{shareId}}" type="checkbox" name="expirationDate" class="expireDate checkbox" {{#if hasExpireDate}}checked="checked"{{/if}}" />' +
'<label for="expireDate-{{cid}}-{{shareId}}">{{expireDateLabel}}</label>' +
'<div class="expirationDateContainer-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
' <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
' <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' +
'</div>' +
'</span>' +
'</li>' +
'<li class="expirationDateMenu-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
'<span class="expirationDateContainer-{{cid}}-{{shareId}} icon-expiredate menuitem">' +
' <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
' <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' +
'</span>' +
'</li>' +
'<li>' +
@ -496,13 +500,13 @@
event.preventDefault();
event.stopPropagation();
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var $menu = $element.closest('li');
var $form = $menu.next('li.share-note-form');
// show elements
$menu.find('.share-note-delete').toggle();
$form.toggleClass('hidden');
$form.find('textarea').focus();
},
deleteNote(event) {
@ -617,16 +621,21 @@
},
onExpireDateChange: function(event) {
var element = $(event.target);
var li = element.closest('li[data-share-id]');
var $element = $(event.target);
var li = $element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var datePickerClass = '.expirationDateContainer-' + this.cid + '-' + shareId;
var datePicker = $(datePickerClass);
var state = element.prop('checked');
var state = $element.prop('checked');
datePicker.toggleClass('hidden', !state);
if (!state) {
// disabled, let's hide the input and
// set the expireDate to nothing
$element.closest('li').next('li').addClass('hidden');
this.setExpirationDate(shareId, '');
} else {
// enabled, show the input and the datepicker
$element.closest('li').next('li').removeClass('hidden');
this.showDatePicker(event);
}
@ -656,7 +665,7 @@
var element = $(event.target);
var li = element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var passwordContainerClass = '.passwordContainer-' + this.cid + '-' + shareId;
var passwordContainerClass = '.passwordMenu-' + this.cid + '-' + shareId;
var passwordContainer = $(passwordContainerClass);
var loading = this.$el.find(passwordContainerClass + ' .icon-loading-small');
var inputClass = '#passwordField-' + this.cid + '-' + shareId;