mirror of
https://github.com/nextcloud/server.git
synced 2026-04-15 22:11:17 -04:00
Merge pull request #12468 from nextcloud/multiselect-removal-fix
Remove conflicting multiselect
This commit is contained in:
John Molakvoæ
GitHub
commit
654880da25
6 changed files with 1 additions and 480 deletions
|
|
@ -2,7 +2,6 @@
|
|||
/** @var array $_ */
|
||||
/** @var \OCP\IL10N $l */
|
||||
script('encryption', 'settings-admin');
|
||||
script('core', 'multiselect');
|
||||
style('encryption', 'settings-admin');
|
||||
?>
|
||||
<form id="ocDefaultEncryptionModule" class="sub-section">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
/** @var array $_ */
|
||||
/** @var \OCP\IL10N $l */
|
||||
script('encryption', 'settings-personal');
|
||||
script('core', 'multiselect');
|
||||
?>
|
||||
<form id="ocDefaultEncryptionModule" class="section">
|
||||
<h2 data-anchor-name="basic-encryption-module"><?php p($l->t('Basic encryption module')); ?></h2>
|
||||
|
|
|
|||
|
|
@ -1,132 +0,0 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
|
||||
* @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
|
||||
* @copyright Copyright (c) 2016, Sergio Bertolín <sbertolin@solidgear.es>
|
||||
* @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
|
||||
* @copyright Copyright (c) 2014, Vincent Petry <pvince81@owncloud.com>
|
||||
* @copyright Copyright (c) 2013, Vincent Petry <pvince81@owncloud.com>
|
||||
* @copyright Copyright (c) 2013, raghunayyar <me@iraghu.com>
|
||||
* @copyright Copyright (c) 2013, Victor Dubiniuk <victor.dubiniuk@gmail.com>
|
||||
* @copyright Copyright (c) 2013, kondou <kondou@ts.unde.re>
|
||||
* @copyright Copyright (c) 2012, Thomas Tanghus <thomas@tanghus.net>
|
||||
* @copyright Copyright (c) 2012, Lukas Reschke <lukas@statuscode.ch>
|
||||
* @copyright Copyright (c) 2012, Jan-Christoph Borchardt <hey@jancborchardt.net>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
*/
|
||||
|
||||
ul.multiselectoptions {
|
||||
background-color: var(--color-main-background);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-top: none;
|
||||
box-shadow: 0 1px 10px var(--color-box-shadow);
|
||||
padding-top: 8px;
|
||||
position: absolute;
|
||||
max-height: 20em;
|
||||
overflow-y: auto;
|
||||
z-index: 149;
|
||||
&.down {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
width: 100%;
|
||||
/* do not cut off group names */
|
||||
box-shadow: 0 1px 10px var(--color-box-shadow);
|
||||
}
|
||||
&.up {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
> li {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-left: 7px;
|
||||
input[type='checkbox'] {
|
||||
+ label {
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5px 27px;
|
||||
margin-left: -27px;
|
||||
/* to have area around checkbox clickable as well */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:checked + label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
input.new {
|
||||
padding-bottom: 3px;
|
||||
padding-top: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
> li.creator {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
> input {
|
||||
width: 95% !important;
|
||||
/* do not constrain size of text input */
|
||||
padding: 5px;
|
||||
margin: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO drop old legacy multiselect! */
|
||||
div.multiselect:not(.multiselect-vue),
|
||||
select.multiselect:not(.multiselect-vue) {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
min-width: 150px !important;
|
||||
padding-right: 10px;
|
||||
min-height: 20px;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
select.multiselect {
|
||||
height: 30px;
|
||||
min-width: 113px;
|
||||
}
|
||||
|
||||
/* To make a select look like a multiselect until it's initialized */
|
||||
div.multiselect {
|
||||
&.active {
|
||||
background-color: var(--color-main-background);
|
||||
position: relative;
|
||||
z-index: 150;
|
||||
}
|
||||
&.up {
|
||||
border-top: 0 none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&.down {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
> span {
|
||||
&:first-child {
|
||||
float: left;
|
||||
margin-right: 32px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
line-height: 20px;
|
||||
}
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
padding: 0 !important;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
@import 'apps.scss';
|
||||
@import 'global.scss';
|
||||
@import 'fixes.scss';
|
||||
@import 'multiselect.scss';
|
||||
@import 'mobile.scss';
|
||||
@import 'tooltip.scss';
|
||||
@import 'public.scss';
|
||||
|
|
@ -1,344 +0,0 @@
|
|||
/**
|
||||
* @param 'createCallback' A function to be called when a new entry is created.
|
||||
* Two arguments are supplied to this function:
|
||||
* The select element used and the value of the option. If the function
|
||||
* returns false addition will be cancelled. If it returns
|
||||
* anything else it will be used as the value of the newly added option.
|
||||
* @param 'createText' The placeholder text for the create action.
|
||||
* @param 'title' The title to show if no options are selected.
|
||||
* @param 'checked' An array containing values for options that should be
|
||||
* checked. Any options which are already selected will be added to this array.
|
||||
* @param 'labels' The corresponding labels to show for the checked items.
|
||||
* @param 'oncheck' Callback function which will be called when a
|
||||
* checkbox/radiobutton is selected. If the function returns false the input will be unchecked.
|
||||
* @param 'onuncheck' @see 'oncheck'.
|
||||
* @param 'singleSelect' If true radiobuttons will be used instead of
|
||||
* checkboxes.
|
||||
*/
|
||||
(function( $ ){
|
||||
var multiSelectId=-1;
|
||||
$.fn.multiSelect=function(options) {
|
||||
multiSelectId++;
|
||||
var settings = {
|
||||
'createCallback':false,
|
||||
'createText':false,
|
||||
'singleSelect':false,
|
||||
'selectedFirst':false,
|
||||
'sort':true,
|
||||
'title':this.attr('title'),
|
||||
'checked':[],
|
||||
'labels':[],
|
||||
'oncheck':false,
|
||||
'onuncheck':false,
|
||||
'minWidth': 'default;'
|
||||
};
|
||||
var slideDuration = 0;
|
||||
$(this).attr('data-msid', multiSelectId);
|
||||
$.extend(settings,options);
|
||||
$.each(this.children(),function(i,option) {
|
||||
// If the option is selected, but not in the checked array, add it.
|
||||
if (
|
||||
$(option).attr('selected') &&
|
||||
settings.checked.indexOf($(option).val()) === -1
|
||||
) {
|
||||
settings.checked.push($(option).val());
|
||||
settings.labels.push($(option).text().trim());
|
||||
}
|
||||
// If the option is in the checked array but not selected, select it.
|
||||
else if (
|
||||
settings.checked.indexOf($(option).val()) !== -1 &&
|
||||
!$(option).attr('selected')
|
||||
) {
|
||||
$(option).attr('selected', 'selected');
|
||||
settings.labels.push($(option).text().trim());
|
||||
}
|
||||
});
|
||||
var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span class="icon-triangle-s"></span></div>');
|
||||
var span=$('<span/>');
|
||||
span.append(button);
|
||||
button.data('id',multiSelectId);
|
||||
button.selectedItems=[];
|
||||
this.hide();
|
||||
this.before(span);
|
||||
if(settings.minWidth=='default') {
|
||||
settings.minWidth=button.width();
|
||||
}
|
||||
button.css('min-width',settings.minWidth);
|
||||
settings.minOuterWidth=button.outerWidth()-2;
|
||||
button.data('settings',settings);
|
||||
|
||||
if(!settings.singleSelect && settings.checked.length>0) {
|
||||
button.children('span').first().text(settings.labels.join(', '));
|
||||
} else if(settings.singleSelect) {
|
||||
button.children('span').first().text(this.find(':selected').text());
|
||||
}
|
||||
|
||||
var self = this;
|
||||
self.menuDirection = 'down';
|
||||
|
||||
function closeDropDown() {
|
||||
if(!button.parent().data('preventHide')) {
|
||||
// How can I save the effect in a var?
|
||||
if(self.menuDirection === 'down') {
|
||||
button.parent().children('ul').slideUp(slideDuration,function() {
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active down');
|
||||
$(self).trigger($.Event('dropdownclosed', settings));
|
||||
});
|
||||
} else {
|
||||
button.parent().children('ul').fadeOut(slideDuration,function() {
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active up');
|
||||
$(self).trigger($.Event('dropdownclosed', settings));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.click(function(event){
|
||||
|
||||
var button=$(this);
|
||||
if(button.parent().children('ul').length>0) {
|
||||
if(self.menuDirection === 'down') {
|
||||
button.parent().children('ul').slideUp(slideDuration,function() {
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active down');
|
||||
$(self).trigger($.Event('dropdownclosed', settings));
|
||||
});
|
||||
} else {
|
||||
button.parent().children('ul').fadeOut(slideDuration,function() {
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active up');
|
||||
$(self).trigger($.Event('dropdownclosed', settings));
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
// tell other lists to shut themselves
|
||||
var lists=$('ul.multiselectoptions');
|
||||
lists.trigger($.Event('shut'));
|
||||
button.addClass('active');
|
||||
event.stopPropagation();
|
||||
var options=$(this).parent().next().children();
|
||||
var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
|
||||
var inputType = settings.singleSelect ? 'radio' : 'checkbox';
|
||||
function createItem(element, checked){
|
||||
element=$(element);
|
||||
var item=element.val();
|
||||
var id='ms'+multiSelectId+'-option-'+item;
|
||||
var input=$('<input type="' + inputType + '"/>');
|
||||
input.attr('id',id);
|
||||
if(inputType === 'checkbox') {
|
||||
input.addClass('checkbox');
|
||||
}
|
||||
if(settings.singleSelect) {
|
||||
input.attr('name', 'ms'+multiSelectId+'-option');
|
||||
}
|
||||
var label=$('<label/>');
|
||||
label.attr('for', id);
|
||||
label.text(element.text() || item);
|
||||
label.attr('title', element.text() || item);
|
||||
if(settings.checked.indexOf(item) !== -1 || checked) {
|
||||
input.prop('checked', true);
|
||||
}
|
||||
if(checked){
|
||||
if(settings.singleSelect) {
|
||||
settings.checked = [item];
|
||||
settings.labels = [item];
|
||||
} else {
|
||||
settings.checked.push(item);
|
||||
settings.labels.push(item);
|
||||
}
|
||||
}
|
||||
input.change(function(){
|
||||
var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
|
||||
var label = $(this).next().text().trim();
|
||||
if($(this).is(':checked')) {
|
||||
if(settings.singleSelect) {
|
||||
settings.checked = [];
|
||||
settings.labels = [];
|
||||
$.each(self.find('option'), function() {
|
||||
$(this).removeAttr('selected');
|
||||
});
|
||||
}
|
||||
element.attr('selected','selected');
|
||||
if(typeof settings.oncheck === 'function') {
|
||||
if(settings.oncheck(value)===false) {
|
||||
$(this).prop('checked', false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
settings.checked.push(value);
|
||||
settings.labels.push(label);
|
||||
$(this).parent().addClass('checked');
|
||||
} else {
|
||||
var index=settings.checked.indexOf(value);
|
||||
element.attr('selected',null);
|
||||
if(typeof settings.onuncheck === 'function') {
|
||||
if(settings.onuncheck(value)===false) {
|
||||
$(this).prop('checked',true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
$(this).parent().removeClass('checked');
|
||||
settings.checked.splice(index,1);
|
||||
settings.labels.splice(index,1);
|
||||
}
|
||||
var oldWidth=button.width();
|
||||
button.children('span').first().text(settings.labels.length > 0
|
||||
? settings.labels.join(', ')
|
||||
: settings.title);
|
||||
var newOuterWidth = Math.max(
|
||||
(button.outerWidth() - 2),
|
||||
settings.minOuterWidth
|
||||
) + 'px';
|
||||
var newWidth=Math.max(button.width(),settings.minWidth);
|
||||
var pos=button.position();
|
||||
button.css('width',oldWidth);
|
||||
button.animate({'width':newWidth},undefined,undefined,function(){
|
||||
button.css('width','');
|
||||
});
|
||||
list.animate({'width':newOuterWidth,'left':pos.left});
|
||||
self.change();
|
||||
});
|
||||
var li=$('<li></li>');
|
||||
li.append(input).append(label);
|
||||
if(input.is(':checked')) {
|
||||
li.addClass('checked');
|
||||
}
|
||||
return li;
|
||||
}
|
||||
$.each(options,function(index,item){
|
||||
list.append(createItem(item));
|
||||
});
|
||||
button.parent().data('preventHide',false);
|
||||
if(settings.createText){
|
||||
var li=$('<li class="creator" title="' + settings.createText +
|
||||
'">+ ' + settings.createText + '</li>');
|
||||
li.click(function(event){
|
||||
li.empty();
|
||||
var input=$('<input type="text" class="new">');
|
||||
li.append(input);
|
||||
input.focus();
|
||||
input.css('width',button.innerWidth());
|
||||
button.parent().data('preventHide',true);
|
||||
input.keypress(function(event) {
|
||||
if(event.keyCode === 13) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var value = $(this).val();
|
||||
var exists = false;
|
||||
$.each(options,function(index, item) {
|
||||
if ($(item).val() == value || $(item).text() == value) {
|
||||
exists = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (exists) {
|
||||
return false;
|
||||
}
|
||||
var li=$(this).parent();
|
||||
var val = $(this).val();
|
||||
var select=button.parent().next();
|
||||
if(typeof settings.createCallback === 'function') {
|
||||
var response = settings.createCallback(select, val);
|
||||
if(response === false) {
|
||||
return false;
|
||||
} else if(typeof response !== 'undefined') {
|
||||
val = response;
|
||||
}
|
||||
}
|
||||
if(settings.singleSelect) {
|
||||
$.each(select.find('option:selected'), function() {
|
||||
$(this).removeAttr('selected');
|
||||
});
|
||||
}
|
||||
$(this).remove();
|
||||
li.text('+ '+settings.createText);
|
||||
li.before(createItem(this));
|
||||
var option=$('<option selected="selected"/>');
|
||||
option.text($(this).val()).val(val).attr('selected', 'selected');
|
||||
select.append(option);
|
||||
li.prev().children('input').prop('checked', true).trigger('change');
|
||||
button.parent().data('preventHide',false);
|
||||
button.children('span').first().text(settings.labels.length > 0
|
||||
? settings.labels.join(', ')
|
||||
: settings.title);
|
||||
if(self.menuDirection === 'up') {
|
||||
var list = li.parent();
|
||||
list.css('top', list.position().top-li.outerHeight());
|
||||
}
|
||||
}
|
||||
});
|
||||
input.blur(function() {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(this).remove();
|
||||
li.text('+ '+settings.createText);
|
||||
setTimeout(function(){
|
||||
button.parent().data('preventHide',false);
|
||||
},100);
|
||||
});
|
||||
});
|
||||
list.append(li);
|
||||
}
|
||||
|
||||
var doSort = function(list, selector) {
|
||||
var rows = list.find('li'+selector).get();
|
||||
|
||||
if(settings.sort) {
|
||||
rows.sort(function(a, b) {
|
||||
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
|
||||
});
|
||||
}
|
||||
|
||||
$.each(rows, function(index, row) {
|
||||
list.append(row);
|
||||
});
|
||||
};
|
||||
if(settings.sort && settings.selectedFirst) {
|
||||
doSort(list, '.checked');
|
||||
doSort(list, ':not(.checked)');
|
||||
} else if(settings.sort && !settings.selectedFirst) {
|
||||
doSort(list, '');
|
||||
}
|
||||
list.append(list.find('li.creator'));
|
||||
var pos=button.position();
|
||||
if(($(document).height() > (button.offset().top + button.outerHeight() + list.children().length * button.height()) &&
|
||||
$(document).height() - button.offset().top > (button.offset().top+button.outerHeight() + list.children().length * button.height())) ||
|
||||
$(document).height() / 2 > button.offset().top
|
||||
) {
|
||||
list.css({
|
||||
top:pos.top+button.outerHeight()-5,
|
||||
left:pos.left,
|
||||
width:(button.outerWidth()-2)+'px',
|
||||
'max-height':($(document).height()-(button.offset().top+button.outerHeight()+10))+'px'
|
||||
});
|
||||
list.addClass('down');
|
||||
button.addClass('down');
|
||||
list.slideDown(slideDuration);
|
||||
} else {
|
||||
list.css('max-height', $(document).height()-($(document).height()-(pos.top)+50)+'px');
|
||||
list.css({
|
||||
top:pos.top - list.height(),
|
||||
left:pos.left,
|
||||
width:(button.outerWidth()-2)+'px'
|
||||
|
||||
});
|
||||
list.detach().insertBefore($(this));
|
||||
list.addClass('up');
|
||||
button.addClass('up');
|
||||
list.show();
|
||||
self.menuDirection = 'up';
|
||||
}
|
||||
list.click(function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
list.one('shut', closeDropDown);
|
||||
});
|
||||
|
||||
$(window).click(closeDropDown);
|
||||
|
||||
return span;
|
||||
};
|
||||
})( jQuery );
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
style('settings', 'settings');
|
||||
script('settings', [ 'settings', 'admin', 'log', 'certificates'] );
|
||||
script('core', ['multiselect', 'setupchecks']);
|
||||
script('core', 'setupchecks');
|
||||
script('files', 'jquery.fileupload');
|
||||
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue