diff --git a/css/backoffice/components/_prop.scss b/css/backoffice/components/_prop.scss index 521fb59c4..10178df4f 100644 --- a/css/backoffice/components/_prop.scss +++ b/css/backoffice/components/_prop.scss @@ -4,20 +4,40 @@ $ibo-prop--cancel--padding-left: 7px !default; $ibo-prop--apply-cancel--span--height: 28px !default; $ibo-prop--apply-cancel--span--width: 32px !default; +$ibo-prop--apply-cancel--height: $ibo-prop--apply-cancel--span--height !default; +$ibo-prop--apply--width: calc(#{$ibo-prop--apply-cancel--span--width} + #{$ibo-prop--apply--padding-left}) !default; +$ibo-prop--cancel--width: calc(#{$ibo-prop--apply-cancel--span--width} + #{$ibo-prop--cancel--padding-left}) !default; + +$ibo-prop--apply--error--color: $ibo-color-grey-800 !default; + .ibo-prop--apply{ + width: $ibo-prop--apply--width; padding-left: $ibo-prop--apply--padding-left; > span{ @extend .ibo-is-green; } + &.ui-state-error{ + &:after { + color: $ibo-prop--apply--error--color; + content: '\f071'; + vertical-align: bottom; + @extend %fa-solid-base; + } + > span{ + display: none !important; + } + } } .ibo-prop--cancel{ - padding-left: $ibo-prop--cancel--padding-left; + width: $ibo-prop--cancel--width; + padding-left: $ibo-prop--cancel--padding-left; > span{ @extend .ibo-is-red; } } .ibo-prop--apply, .ibo-prop--cancel{ - > span{ + height: $ibo-prop--apply-cancel--height; + > span{ display: block; height: $ibo-prop--apply-cancel--span--height; width: $ibo-prop--apply-cancel--span--width; diff --git a/js/property_field.js b/js/property_field.js index 4357da1cf..2916435a9 100644 --- a/js/property_field.js +++ b/js/property_field.js @@ -51,19 +51,19 @@ $(function() { this.element.addClass("itop-property-field-modified"); if (this.options.can_apply) { - this.element.find(".prop_icon.ibo-prop--apply").css({visibility: ''}); + this.element.find(".prop_icon.ibo-prop--apply > span").show(); CombodoTooltip.InitTooltipFromMarkup(this.element.find(".prop_icon.ibo-prop--apply [data-tooltip-content]"), true); } else { - this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'}); + this.element.find(".prop_icon.ibo-prop--apply > span").hide(); } - this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: ''}); + this.element.find(".prop_icon.ibo-prop--cancel > span").show(); CombodoTooltip.InitTooltipFromMarkup(this.element.find(".prop_icon.ibo-prop--cancel [data-tooltip-content]"), true); } else { this.element.removeClass("itop-property-field-modified"); - this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'}); - this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: 'hidden'}); + this.element.find(".prop_icon.ibo-prop--apply > span").hide(); + this.element.find(".prop_icon.ibo-prop--cancel > span").hide(); } }, @@ -539,7 +539,7 @@ function ValidateWithPattern(sFieldId, bMandatory, sPattern, sFormId, aForbidden if (oFormValidation[sFormId] == undefined) oFormValidation[sFormId] = []; if (!bValid) { - $('#v_'+sFieldId).addClass('ui-state-error'); + $('#v_'+sFieldId).parent('.ibo-prop--apply').addClass('ui-state-error'); iFieldIdPos = jQuery.inArray(sFieldId, oFormValidation[sFormId]); if (iFieldIdPos == -1) { @@ -556,7 +556,7 @@ function ValidateWithPattern(sFieldId, bMandatory, sPattern, sFormId, aForbidden } else { - $('#v_'+sFieldId).removeClass('ui-state-error'); + $('#v_'+sFieldId).parent('.ibo-prop--apply').removeClass('ui-state-error'); if ($('#'+sFieldId).data('uiTooltip')) { $('#'+sFieldId).tooltip('close'); @@ -611,7 +611,7 @@ function ValidateInteger(sFieldId, bMandatory, sFormId, iMin, iMax, sExplainForm if (oFormValidation[sFormId] == undefined) oFormValidation[sFormId] = []; if (!bValid) { - $('#v_'+sFieldId).addClass('ui-state-error'); + $('#v_'+sFieldId).parent('.ibo-prop--apply').addClass('ui-state-error'); iFieldIdPos = jQuery.inArray(sFieldId, oFormValidation[sFormId]); if (iFieldIdPos == -1) { @@ -628,7 +628,7 @@ function ValidateInteger(sFieldId, bMandatory, sFormId, iMin, iMax, sExplainForm } else { - $('#v_'+sFieldId).removeClass('ui-state-error'); + $('#v_'+sFieldId).parent('.ibo-prop--apply').removeClass('ui-state-error'); if ($('#'+sFieldId).data('uiTooltip')) { $('#'+sFieldId).tooltip('close');