diff --git a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js index 2863b27c0..cf6a5541a 100644 --- a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js +++ b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js @@ -29,7 +29,7 @@ var RepositoryStatusColumnType = (function() { if (stringLength < GLOBAL_CONSTANTS.NAME_MIN_LENGTH || stringLength > GLOBAL_CONSTANTS.NAME_MAX_LENGTH || iconPlaceholder) { - $row.addClass('error'); + $row.addClass('error').attr('data-error-text', I18n.t('libraries.manange_modal_column.status_type.errors.icon_and_name_error')); } else { $row.removeClass('error'); } diff --git a/app/assets/stylesheets/repository_columns/status_type.scss b/app/assets/stylesheets/repository_columns/status_type.scss index 57b6dc1e1..95cd22fe8 100644 --- a/app/assets/stylesheets/repository_columns/status_type.scss +++ b/app/assets/stylesheets/repository_columns/status_type.scss @@ -6,6 +6,7 @@ height: 34px; margin-bottom: 5px; transition: .3s; + position: relative; .status-item-field { border: 1px solid $input-border; @@ -62,6 +63,8 @@ } &.error.error-highlight { + margin-bottom: 15px; + .status-item-icon, .status-item-field { border-color: $brand-danger; @@ -70,6 +73,18 @@ .status-item-icon { border-right-color: $input-border; } + + &::before { + @include font-small; + bottom: -14px; + color: $brand-danger; + content: attr(data-error-text); + left: 0; + line-height: 15px; + position: absolute; + white-space: nowrap; + width: 100%; + } } } diff --git a/config/locales/en.yml b/config/locales/en.yml index 464592d7d..039119a4f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1201,6 +1201,8 @@ en: status_type: status_options_label: "Status options" add_status_label: "Add status option" + errors: + icon_and_name_error: "Status icon and status name should be filled" datetime_type: range_label: 'Range' checklist_type: