diff --git a/core/attributedef.class.inc.php b/core/attributedef.class.inc.php index 9d9e3e473..d41b93af1 100644 --- a/core/attributedef.class.inc.php +++ b/core/attributedef.class.inc.php @@ -7084,7 +7084,7 @@ class AttributeTagSet extends AttributeDBFieldVoid $sHTML = ''; if (!empty($aValues)) { - $sHTML .= $this->GenerateViewHtmlForValues($aValues, 'attribute-tagset-undefined'); + $sHTML .= $this->GenerateViewHtmlForValues($aValues, 'attribute-set-item-undefined'); } $aValues = $oTagSet->GetTags(); if (!empty($aValues)) @@ -7177,7 +7177,7 @@ class AttributeTagSet extends AttributeDBFieldVoid * @return string * @throws \CoreException */ - private function GenerateViewHtmlForValues($aValues, $sCssClass = 'attribute-tagset') + private function GenerateViewHtmlForValues($aValues, $sCssClass = 'attribute-set') { if (empty($aValues)) {return '';} $sHtml = ''; @@ -7197,11 +7197,11 @@ class AttributeTagSet extends AttributeDBFieldVoid $sFilter = urlencode($oFilter->serialize()); $sUrl = utils::GetAbsoluteUrlAppRoot()."pages/$sUIPage?operation=search&filter=".$sFilter."&{$sContext}"; - $sHtml .= ''.$sTagLabel.''; + $sHtml .= ''.$sTagLabel.''; } else { - $sHtml .= ''.$oTag.''; + $sHtml .= ''.$oTag.''; } } $sHtml .= ''; diff --git a/css/light-grey.css b/css/light-grey.css index c1261f988..a8df0c05d 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -1956,30 +1956,14 @@ fieldset .details > .field_container { border: 1px solid #ababab; border-radius: 0; } -.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .item { - /* Overloading default theming */ - padding-right: 4px !important; - text-shadow: none; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - border-radius: 2px; - background-image: none; - background-color: #fdfdfd; +.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input.has-items:after { + content: "+"; + display: inline-block; + font-size: 17px; + font-weight: bold; color: #222; - border: 1px solid #ddd; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px #f1f1f1; } -.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .item .remove { - /* Overloading default theming */ - position: relative; - top: initial; - right: initial; - bottom: initial; - vertical-align: initial; - padding: initial; - border: none; - margin-left: 4px; -} -.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .item.partial-code { +.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .attribute-set-item.partial-code { color: rgba(34, 34, 34, 0.6); background-color: #eaeaea; } @@ -2915,46 +2899,32 @@ table.listResults .originColor { .menu-icon-select > .ui-menu-item { padding: 0.3em 3%; } -.attribute-tagset .attribute-tag { +div.selectize-control > div.selectize-input > div.item[data-value], div.selectize-control > div.selectize-input > div.item[data-value].active, .attribute-set .attribute-set-item { display: inline-block; margin-right: 3px; margin-bottom: 3px; padding: 4px 6px; + padding-right: 4px !important; max-width: 120px; + background-color: #fdfdfd; + background-image: none; + border-radius: 2px; + border: 1px solid #ddd; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px #f1f1f1; + color: #222; + text-shadow: none; vertical-align: middle; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - background-color: #fdfdfd; - border-radius: 2px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px #f1f1f1; } -.selectize-control { - position: static; - display: inline-block; - vertical-align: middle; - width: 100%; -} -.selectize-input { - width: auto; - min-width: 8em; -} -.selectize-input.has-items:after { - content: "+"; - display: inline-block; - font-size: 17px; - font-weight: bold; - color: #222; -} -.selectize-control > .selectize-input > .item.partial-code { - color: floralwhite; - background-color: grey; - background-image: linear-gradient(to bottom, white, grey); - border-color: darkgray; -} -.selectize-control > .selectize-input > .item.partial-code.active { - background-image: linear-gradient(to bottom, grey, darkgrey); -} -.selectize-control > .selectize-input > .item.partial-code > a.remove { - border-color: grey; +div.selectize-control > div.selectize-input > div.item[data-value] > .remove { + position: relative; + top: initial; + right: initial; + bottom: initial; + vertical-align: initial; + padding: initial; + border: none; + margin-left: 4px; } diff --git a/css/light-grey.scss b/css/light-grey.scss index 330d2ef34..8d3f49f9c 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -2279,36 +2279,17 @@ fieldset .details>.field_container { border: 1px solid #ABABAB; border-radius: 0; - .item{ - /* Overloading default theming */ - padding-right: 4px !important; - text-shadow: none; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - border-radius: 2px; - background-image: none; - - background-color: #fdfdfd; + &.has-items:after { + content: "+"; + display: inline-block; + font-size: 17px; + font-weight: bold; color: $gray-darker; - border: 1px solid $gray-lighter; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgb(241, 241, 241, 0.7); + } - .remove{ - /* Overloading default theming */ - position: relative; - top: initial; - right: initial; - bottom: initial; - vertical-align: initial; - padding: initial; - border: none; - - margin-left: 4px; - } - - &.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%); } } } @@ -3339,55 +3320,42 @@ table.listResults .originColor{ ////////////////////// // Tagset attribute // // - Readonly (object viewing, objects list) -.attribute-tagset .attribute-tag{ +////////////////////// +// Selectize widget // +// +div.selectize-control > div.selectize-input > div.item[data-value], +div.selectize-control > div.selectize-input > div.item[data-value].active, +.attribute-set .attribute-set-item { display: inline-block; margin-right: 3px; margin-bottom: 3px; padding: 4px 6px; + padding-right: 4px !important; max-width: 120px; + + background-color: #fdfdfd; + background-image: none; + border-radius: 2px; + border: 1px solid $gray-lighter; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgb(241, 241, 241, 0.7); + + color: $gray-darker; + text-shadow: none; vertical-align: middle; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - background-color: #fdfdfd; - border-radius: 2px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgb(241, 241, 241, 0.7); -} -// - Edition done in the xxx part - -////////////////////// -// Selectize widget // -// -// Theming should not be done for a specific use-case (eg. tagset attribute) -// as it can be used anywhere in the application) -.selectize-control { - position: static; - display: inline-block; - vertical-align: middle; - width: 100%; } -.selectize-input { - width: auto; - min-width: 8em; -} -.selectize-input.has-items:after { - content: "+"; - display: inline-block; - font-size: 17px; - font-weight: bold; - color: $gray-darker; -} -.selectize-control > .selectize-input > .item.partial-code { - color: floralwhite; - background-color: grey; - background-image: linear-gradient(to bottom, white, grey); - border-color: darkgray; -} -.selectize-control > .selectize-input > .item.partial-code.active { - background-image: linear-gradient(to bottom, grey, darkgrey); -} -.selectize-control > .selectize-input > .item.partial-code > a.remove { - border-color: grey; -} +div.selectize-control > div.selectize-input > div.item[data-value] > .remove { + position: relative; + top: initial; + right: initial; + bottom: initial; + vertical-align: initial; + padding: initial; + border: none; + + margin-left: 4px; +} \ No newline at end of file diff --git a/js/jquery.itop-set-widget.js b/js/jquery.itop-set-widget.js index 6797af6c0..ed5b5d11a 100644 --- a/js/jquery.itop-set-widget.js +++ b/js/jquery.itop-set-widget.js @@ -64,6 +64,9 @@ $.widget('itop.set_widget', // default options options: {isDebug: false}, + PARENT_CSS_CLASS: "attribute-set", + ITEM_CSS_CLASS: "attribute-set-item", + POSSIBLE_VAL_KEY: 'possible_values', PARTIAL_VAL_KEY: "partial_values", ORIG_VAL_KEY: "orig_value", @@ -183,18 +186,32 @@ $.widget('itop.set_widget', }, /** - * Updating items to have a specific rendering for partial codes.
- * At first I was thinking about using the Selectize render callback, but it is called before onItemAdd/onItemRemove :(
- * Indeed as we only need to have partial items on first display, this callback is the right place O:) - * @param selectionWidget Selectize object - * @private - */ + *

Updating selection widget : + *

+ * + *

For partial codes at first I was thinking about using the Selectize render callback, but it is called before onItemAdd/onItemRemove :(
+ * Indeed as we only need to have partial items on first display, this callback is the right place O:) + * + * @param selectionWidget Selectize object + * @private + */ _onInitialize: function (selectionWidget) { + var setWidget = this; if (this.options.isDebug) { - console.debug("onInit", this); + console.debug("onInit", selectionWidget, setWidget); } - var setWidget = this; + + selectionWidget.$control.addClass(setWidget.PARENT_CSS_CLASS); + selectionWidget.items.forEach(function (setItemCode) { + var $item = selectionWidget.getItem(setItemCode); + $item.addClass(setWidget.ITEM_CSS_CLASS); + $item.addClass(setWidget.ITEM_CSS_CLASS + '-' + setItemCode); // no escape as codes are already pretty restrictive + if (setWidget._isCodeInPartialValues(setItemCode)) { selectionWidget.getItem(setItemCode).addClass("partial-code"); } diff --git a/test/attributeset_widget_poc.html b/test/attributeset_widget_poc.html index 5355452bb..06b566e9b 100644 --- a/test/attributeset_widget_poc.html +++ b/test/attributeset_widget_poc.html @@ -97,10 +97,10 @@ $("#tagset-field").set_widget({isDebug: true});

Visualisation

- - Ville 🏢 - Mer 🌊 - Soleil 🌞 + + Ville 🏢 + Mer 🌊 + Soleil 🌞