composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-17 14:28:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°7264 - Fix visual glitches due to seletize.js upgrade

Browse Source
This commit is contained in:
Molkobain
2024-04-04 15:01:57 +02:00
parent 3f401e4de0
commit 4ca92affcf
5 changed files with 80 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/backoffice/components/input/_input-select.scss
View File

@@ -49,10 +49,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
.ibo-input-select {
display: inline-flex;
min-width: $ibo-input-select--value--min-midth;
&:not(.ibo-input-select-autocomplete):not(.ibo-input-selectize) {
appearance: none;
}
appearance: none;
&.ibo-input-selectize {
padding-right: 0;
@@ -108,7 +105,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
outline: none !important; /* Overwrite browsers default focus outline */
}
}
&.input-active{
border: 1px solid $ibo-input--focus--border-color;
}
@@ -123,15 +120,16 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
}
.ibo-input-select-wrapper::after{
position: absolute;
z-index: 1;
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-weight: 600;
height: $ibo-input-select-wrapper--after--height;
margin-left: $ibo-input-select-wrapper--after--margin-left;
margin-top: $ibo-input-select-wrapper--after--margin-top;
padding-top: $ibo-input-select-wrapper--after--padding-top;
background-color: $ibo-input-select-wrapper--after--background-color;
color: $ibo-input-select-wrapper--after--color;
pointer-events: none;
@@ -146,6 +144,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
.ibo-input-select-wrapper--with-buttons:not(.ibo-input-select-autocomplete-wrapper)::after {
position: absolute;
z-index: 1;
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-weight: 600;
@@ -163,6 +162,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
}
.ibo-input-select--action-buttons{
position: absolute;
z-index: 1;
display: flex;
height: $ibo-input-select--action-button--height;
margin-top: $ibo-input-select--action-button--margin-top;

12
css/backoffice/components/input/_input.scss
View File

@@ -8,7 +8,11 @@ $ibo-input--width: 100% !default;
$ibo-input--color: $ibo-color-grey-900 !default;
$ibo-input--background-color: $ibo-color-white-100 !default;
$ibo-input--border-color: $ibo-color-grey-500 !default;
$ibo-input--border-size: 1px !default;
$ibo-input--border-style: solid !default;
$ibo-input--border: $ibo-input--border-size $ibo-input--border-style $ibo-input--border-color !default;
$ibo-input--padding-x: 10px !default;
$ibo-input--padding-y: $ibo-spacing-0 !default;
@@ -34,13 +38,13 @@ $ibo-input--margin-x: $ibo-spacing-200 !default;
background-color: $ibo-input--background-color;
color: $ibo-input--color;
padding: $ibo-input--padding-y $ibo-input--padding-x;
border: 1px solid $ibo-input--border-color;
border: $ibo-input--border;
border-radius: $ibo-input--border-radius;
@extend %ibo-font-ral-nor-150;
&:focus{
border: 1px solid $ibo-input--focus--border-color;
border-color: $ibo-input--focus--border-color;
}
&:disabled{
background-color: $ibo-input--disabled--background-color;
@@ -54,8 +58,8 @@ textarea.ibo-input{
height:unset;
}
.ibo-input-wrapper.is-error, .ibo-input-field-wrapper.is-error {
.ibo-input, .ibo-input-vanilla, .cke, textarea {
border: 1px solid $ibo-input-wrapper--is-error--border-color;
.ibo-input, .ibo-input-vanilla, .cke, textarea {
border-color: $ibo-input-wrapper--is-error--border-color;
}
.ibo-input-vanilla input{
border: 0;

109
css/backoffice/vendors/_selectize.scss vendored
View File

@@ -21,82 +21,87 @@ $ibo-vendors-selectize--item--ignore-partial--background-color: $ibo-color-grey-
$ibo-vendors-selectize--input-error--border: 1px solid $ibo-color-red-600 !default;
.selectize-dropdown-content {
max-height: unset; /* Overloaded as it will be handled by the _input-select.scss partial */
}
.selectize-input input{
color: $ibo-vendors-selectize-input--color;
.selectize-control.single .selectize-input {
box-shadow: unset;
background-color: unset;
background-image: unset;
background-repeat: unset;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: unset;
cursor: text;
display: inline-flex;
}
.selectize-control.plugin-combodo_add_button{
display: flex;
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: unset;
border-width: unset;
border-color: unset;
}
.selectize-control.single .selectize-input:after {
content: unset;
}
.selectize-input::after {
content: unset;
}
.selectize-add-option {
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
right: $ibo-vendors-selectize-control--plugin-add-button--add-option--right;
height: $ibo-vendors-selectize-control--plugin-add-button--add-option--height;
width: $ibo-vendors-selectize-control--plugin-add-button--add-option--width;
z-index: 1;
color: $ibo-vendors-selectize-control--plugin-add-button--add-option--color;
@extend %ibo-font-size-100;
.selectize-input>* {
display: inline-flex;
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
border-color: $ibo-color-grey-500;
}
.selectize-dropdown {
.selected,
.active,
.active:not(.selected){
background: #f5fafd;
color: #495c68;
}
[data-selectable],
.optgroup-header {
padding: 5px 8px;
}
.option {
opacity: 1;
}
}
// Simple options renderer
.simple-option-renderer--container {
display: flex;
align-items: center;
}
.simple-option-renderer--container--icon {
width: 25px;
text-align: center;
}
.simple-option-renderer--container--label {
margin-left: 3px;
flex-grow: 1;
}
.selectize-input{
.attribute-set-item{
>* {
// Bulk modification: add / remove / partial items states
.selectize-input {
.attribute-set-item {
> * {
display: inline;
}
&.item-add::before,&.item-remove::before{
&.item-add::before,&.item-remove::before {
@extend %fa-solid-base;
margin-right: $ibo-vendors-selectize--item--icon--margin-right;
}
&.item-add{
&.item-add {
background-color: $ibo-vendors-selectize--item--add--background-color !important;
&::before{
&::before {
color: $ibo-vendors-selectize--item--add--icon--color;
content: '\f067';
}
}
&.item-remove{
&.item-remove {
background-color: $ibo-vendors-selectize--item--remove--background-color !important;
&::before{
&::before {
color: $ibo-vendors-selectize--item--remove--icon--color;
content: '\f1f8';
}
}
&.item-ignore-partial{
&.item-ignore-partial {
background-color: $ibo-vendors-selectize--item--ignore-partial--background-color !important;
}
}
&.selectize-input-error{
&.selectize-input-error {
border: $ibo-vendors-selectize--input-error--border;
}
}
}

6
css/setup.css
View File

File diff suppressed because one or more lines are too long

5
js/extkeywidget.js
View File

@@ -321,6 +321,11 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
* @return {void}
*/
this.UpdateDropdownPosition = function (oControlElem, oDropdownElem) {
// First fix width to ensure it's not too long
const fControlWidth = oControlElem.outerWidth();
oDropdownElem.css('width', fControlWidth);
// Then, fix height / position to ensure it's within the viewport
const fWindowHeight = window.innerHeight;
const fControlTopY = oControlElem.offset().top;