composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set attribute: Fix items display

Browse Source
This commit is contained in:
Molkobain
2021-03-12 16:31:06 +01:00
parent d175bca3cc
commit dfa85df39c
5 changed files with 192 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/backoffice/components/input/_all.scss
View File

@@ -12,5 +12,5 @@
@import "input-select";
@import "input-select-icon";
@import "input-string";
@import "input-tagset";
@import "input-set";
@import "input-textarea";

103
css/backoffice/components/input/_input-set.scss Normal file
View File

@@ -0,0 +1,103 @@
$ibo-input-set--padding-x: 8px !default;
$ibo-input-set--padding-y: 5px !default;
$ibo-input-set--input--height: 100% !default;
$ibo-input-set--remove--padding-top: 0.15em !default;
$ibo-input-set--remove--border-left: none !default;
$ibo-input-set--has-items--after--right: 8px !default;
$ibo-input-set--has-items--after--top: 5px !default;
$ibo-input-set--item--siblings-spacing: 3px !default;
$ibo-input-set--item--margin-y: 2px !default;
$ibo-input-set--item--padding-x: 6px !default;
$ibo-input-set--item--padding-y: 4px !default;
$ibo-input-set--item--max-width: 120px !default;
$ibo-input-set--item--background-color: $ibo-color-white-100 !default;
$ibo-input-set--item--border: none !default;
$ibo-input-set--item--border-radius: $ibo-border-radius-300 !default;
$ibo-input-set--item--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(241, 241, 241, 0.7) !default;
.ibo-input-set {
> input {
height: $ibo-input-set--input--height;
}
.item[data-value] > .remove {
font-size: 18px;
padding-top: $ibo-input-set--remove--padding-top;
border-left: $ibo-input-set--remove--border-left;
}
&.has-items::after {
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: 10px;
position: absolute;
right: $ibo-input-set--has-items--after--right;
top: $ibo-input-set--has-items--after--top;
}
}
/* CSS rules from the old style, retrieved almost as is. Do not change the classes names in the markup without second thought as they are used by the portal as well */
/* - Item style, always the same in read-only or edition */
%ibo-input-set--item {
display: inline-block;
margin-top: $ibo-input-set--item--margin-y;
margin-right: 0;
margin-bottom: $ibo-input-set--item--margin-y;
padding: $ibo-input-set--item--padding-y $ibo-input-set--item--padding-x;
max-width: $ibo-input-set--item--max-width;
background: $ibo-input-set--item--background-color none;
border: $ibo-input-set--item--border;
border-radius: $ibo-input-set--item--border-radius;
box-shadow: $ibo-input-set--item--box-shadow;
color: $ibo-color-grey-900;
text-shadow: none;
@extend %ibo-text-truncated-with-ellipsis;
&:not(:first-child) {
margin-left: $ibo-input-set--item--siblings-spacing;
}
}
/* - Read-only */
.attribute-set {
.attribute-set-item {
@extend %ibo-input-set--item;
}
&.history-added {
.attribute-set-item {
font-weight: bold;
}
}
&.history-removed {
.attribute-set-item {
text-decoration: line-through;
font-style: italic;
}
}
}
/* - Edition */
/* Note: The selector is "precise" on purpose as it needs to override the one from selectize. */
.selectize-control.multi {
.selectize-input {
&.ibo-input-set {
padding: $ibo-input-set--padding-y $ibo-input-set--padding-x;
.attribute-set-item {
@extend %ibo-input-set--item;
}
}
}
}

31
css/backoffice/components/input/_input-tagset.scss
View File

@@ -1,31 +0,0 @@
$ibo-input-tagset--input--height: 100% !default;
$ibo-input-tagset--remove--padding-top: 0.15em !default;
$ibo-input-tagset--remove--border-left: none !default;
$ibo-input-tagset--has-items--after--right: 8px !default;
$ibo-input-tagset--has-items--after--top: 5px !default;
.selectize-control.plugin-remove_button .ibo-input-tagset{
> input{
height: $ibo-input-tagset--input--height;
}
.item[data-value] > .remove{
font-size: 18px;
padding-top: $ibo-input-tagset--remove--padding-top;
border-left: $ibo-input-tagset--remove--border-left;
}
&.has-items::after{
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: 10px;
position: absolute;
right: $ibo-input-tagset--has-items--after--right;
top: $ibo-input-tagset--has-items--after--top;
}
}

170
css/light-grey.scss
View File

@@ -2566,15 +2566,15 @@
}
.selectize-input {
padding: 2px 2px 0px 2px; /* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ABABAB;
border-radius: 0;
padding: 2px 2px 0px 2px; /* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ABABAB;
border-radius: 0;
.attribute-set-item.partial-code {
color: transparentize($gray-darker, 0.4);
background-color: lighten($gray-lighter, 5%);
}
}
//.attribute-set-item.partial-code {
// color: transparentize($gray-darker, 0.4);
// background-color: lighten($gray-lighter, 5%);
//}
}
}
}
}
@@ -3772,87 +3772,87 @@
text-overflow: ellipsis;
> img {
max-width: 80px;
max-height: 45px;
margin-right: 10px;
}
}
}
max-width: 80px;
max-height: 45px;
margin-right: 10px;
}
}
}
//////////////////////
// Set attribute //
// - Readonly (object viewing, objects list)
.attribute {
&.attribute-set {
.attribute-set-item {
&:last-of-type::after {
content: "";
margin-right: 0;
}
}
//////////////////////
// Set attribute //
// - Readonly (object viewing, objects list)
//.attribute {
// &.attribute-set {
// .attribute-set-item {
// &:last-of-type::after {
// content: "";
// margin-right: 0;
// }
// }
//
// &.history-added {
// .attribute-set-item {
// font-weight: bold;
// }
// }
//
// &.history-removed {
// .attribute-set-item {
// text-decoration: line-through;
// font-style: italic;
// }
// }
// }
//}
&.history-added {
.attribute-set-item {
font-weight: bold;
}
}
// - Edit is always styled like the selectize items, see below.
//%attribute-set-item-edition {
// display: inline;
// margin-right: 3px;
// margin-bottom: 3px;
// padding: 4px 6px;
// max-width: 120px;
//
// background: #fdfdfd none;
// border-radius: 2px;
// box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(241, 241, 241, 0.7);
//
// color: $gray-darker;
// text-shadow: none;
// vertical-align: middle;
// overflow-x: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
//
// &::after {
// content: "";
// margin-right: 0;
// }
//}
//
//.attribute-edit .attribute-set .attribute-set-item {
// @extend %attribute-set-item-edition;
//}
&.history-removed {
.attribute-set-item {
text-decoration: line-through;
font-style: italic;
}
}
}
}
//////////////////////
// Set attribute //
// Always styled like the selectize items, see below.
//.attribute-set {
// .attribute-set-item {
// @extend %attribute-set-item-edition;
// }
//}
// - Edit is always styled like the selectize items, see below.
%attribute-set-item-edition {
display: inline;
margin-right: 3px;
margin-bottom: 3px;
padding: 4px 6px;
max-width: 120px;
background: #fdfdfd none;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(241, 241, 241, 0.7);
color: $gray-darker;
text-shadow: none;
vertical-align: middle;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&::after {
content: "";
margin-right: 0;
}
}
.attribute-edit .attribute-set .attribute-set-item {
@extend %attribute-set-item-edition;
}
//////////////////////
// Set attribute //
// Always styled like the selectize items, see below.
.attribute-set {
.attribute-set-item {
@extend %attribute-set-item-edition;
}
}
//////////////////////
// Selectize widget //
//
.selectize-control,
.selectize-control.multi {
> .selectize-input {
//&.has-items:after {
// content: "+";
// display: inline-block;
//////////////////////
// Selectize widget //
//
.selectize-control,
.selectize-control.multi {
> .selectize-input {
//&.has-items:after {
// content: "+";
// display: inline-block;
// font-size: 17px;
// font-weight: bold;
// color: $gray-darker;

4
js/jquery.itop-set-widget.js
View File

@@ -150,7 +150,7 @@ $.widget('itop.set_widget',
options: this.possibleValues,
create: false,
placeholder: Dict.S("Core:AttributeSet:placeholder"),
inputClass: 'selectize-input ibo-input ibo-input-tagset ibo-input-selectize',
inputClass: 'selectize-input ibo-input ibo-input-set ibo-input-selectize',
onInitialize: function () {
var selectizeWidget = this;
setWidget._onInitialize(selectizeWidget);
@@ -270,6 +270,8 @@ $.widget('itop.set_widget',
}
this.setItemsCodesStatus[setItemCode] = this.STATUS_ADDED;
$item.addClass(this.ITEM_CSS_CLASS);
if (this._isCodeInPartialValues(setItemCode)) {
this._partialCodeRemove(setItemCode);
} else {