scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-06 15:05:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

Adding arrow to drop down [SCI-3212] (#1594)

Browse source 
* Adding arrow to dropdown
This commit is contained in:
aignatov-bio 2019-03-26 16:49:12 +01:00 committed by GitHub
parent 6012513c13
commit a3c1796497
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/javascripts/select2_customization.js
View file

@ -24,6 +24,10 @@ $.fn.extend({
select2.next().find('.select2-selection .select2-selection__rendered').css('width', '100%');
}
// Create arrow
$('<div class="select2-arrow"><span class="caret"></span></div>').appendTo(select2.next())
.click(() => select2.next().find('.select2-selection').click());
// select all check
this[0].dataset.singleDisplay = config.singleDisplay || false;
if (this[0].dataset.selectAll === 'true') {
@ -39,7 +43,7 @@ $.fn.extend({
var selectElement = this;
var groups;
var groupChildrens;
$('.select2-dropdown').removeClass('custom-group')
$('.select2-dropdown').removeClass('custom-group');
$('.select2-selection').scrollTo(0);
$('.select2_select_all').remove();
// Adding select_all_button
@ -57,10 +61,13 @@ $.fn.extend({
if (selectElement.dataset.dropdownPosition === 'left') {
$('.select2-dropdown').parent().addClass('left-position');
if (selectElement.dataset.selectAllButton === undefined) {
$('.select2-dropdown').parent().addClass('full');
}
}
// Adding select all group members event
if (selectElement.dataset.selectByGroup === 'true') {
$('.select2-dropdown').addClass('custom-group')
$('.select2-dropdown').addClass('custom-group');
setTimeout(() => {
groups = $('.select2-dropdown').find('.select2-results__group');
groups.click(e => {

34
app/assets/stylesheets/select2_customizations.scss
View file

@ -13,7 +13,7 @@
}
.select2-selection__rendered {
width: 200%;
width: calc(100% - 26px)
}
.select2-selection__choice {
@ -28,6 +28,30 @@
}
}
.select2-arrow {
align-items: center;
background: $color-white;
border: 1px solid $color-alto;
border-radius: 0px 4px 4px 0px;
cursor: pointer;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
right: 0;
top :0;
width: 26px;
&:hover {
background: $color-gainsboro;
border: 1px solid $color-silver-chalice;
}
.caret {
margin: 0;
}
}
.select2-dropdown {
border: 1px solid $color-alto;
z-index: 1000;
@ -139,6 +163,7 @@
.select2-container--open.left-position {
left: calc(75% - 280px) !important;
top: 60px !important;
position: fixed !important;
.select2-dropdown {
border-radius: 0px;
@ -153,5 +178,12 @@
max-height: 100%;
}
}
&.full {
.select2-results {
height: 100%;
}
}
}
}