From dfa85df39ca84f1a022bba378b6b38efbd71c434 Mon Sep 17 00:00:00 2001 From: Molkobain Date: Fri, 12 Mar 2021 16:31:06 +0100 Subject: [PATCH] Set attribute: Fix items display --- css/backoffice/components/input/_all.scss | 2 +- .../components/input/_input-set.scss | 103 +++++++++++ .../components/input/_input-tagset.scss | 31 ---- css/light-grey.scss | 170 +++++++++--------- js/jquery.itop-set-widget.js | 4 +- 5 files changed, 192 insertions(+), 118 deletions(-) create mode 100644 css/backoffice/components/input/_input-set.scss delete mode 100644 css/backoffice/components/input/_input-tagset.scss diff --git a/css/backoffice/components/input/_all.scss b/css/backoffice/components/input/_all.scss index 088f7cd3e..d6af36a65 100644 --- a/css/backoffice/components/input/_all.scss +++ b/css/backoffice/components/input/_all.scss @@ -12,5 +12,5 @@ @import "input-select"; @import "input-select-icon"; @import "input-string"; -@import "input-tagset"; +@import "input-set"; @import "input-textarea"; diff --git a/css/backoffice/components/input/_input-set.scss b/css/backoffice/components/input/_input-set.scss new file mode 100644 index 000000000..464df07c6 --- /dev/null +++ b/css/backoffice/components/input/_input-set.scss @@ -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; + } + } + } +} diff --git a/css/backoffice/components/input/_input-tagset.scss b/css/backoffice/components/input/_input-tagset.scss deleted file mode 100644 index 46802a68b..000000000 --- a/css/backoffice/components/input/_input-tagset.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/css/light-grey.scss b/css/light-grey.scss index c8b700150..4fb3ef973 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -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; diff --git a/js/jquery.itop-set-widget.js b/js/jquery.itop-set-widget.js index 71a13c5b5..b37edc805 100644 --- a/js/jquery.itop-set-widget.js +++ b/js/jquery.itop-set-widget.js @@ -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 {