open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #12468 from nextcloud/multiselect-removal-fix

Browse Source 
Remove conflicting multiselect
pull/12580/head
John Molakvoæ 7 years ago committed by GitHub
parent f3fb6676e9 a8dafc2ff8
commit 654880da25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1 additions and 480 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      apps/encryption/templates/settings-admin.php
  2. 1
      apps/encryption/templates/settings-personal.php
  3. 132
      core/css/multiselect.scss
  4. 1
      core/css/server.scss
  5. 344
      core/js/multiselect.js
  6. 2
      settings/templates/settings/frame.php

1
apps/encryption/templates/settings-admin.php
Unescape View File

@ -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">

1
apps/encryption/templates/settings-personal.php
Unescape View File

@ -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>

132
core/css/multiselect.scss
Unescape View File

@ -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;
}
}
}

1
core/css/server.scss
Unescape View File

@ -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';

344
core/js/multiselect.js
Unescape View File

@ -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 );

2
settings/templates/settings/frame.php
Unescape View File

@ -23,7 +23,7 @@
style('settings', 'settings');
script('settings', [ 'settings', 'admin', 'log', 'certificates'] );
script('core', ['multiselect', 'setupchecks']);
script('core', 'setupchecks');
script('files', 'jquery.fileupload');
?>

Write Preview
Loading…
Cancel
Save