diff --git a/client/src/views/fields/enum.js b/client/src/views/fields/enum.js index 13220852b8..75b5a930b5 100644 --- a/client/src/views/fields/enum.js +++ b/client/src/views/fields/enum.js @@ -57,7 +57,7 @@ Espo.define('views/fields/enum', ['views/fields/base', 'lib!Selectize'], functio if (this.isReadMode()) { if (this.params.displayAsLabel) { - data.class = 'label label-lg label'; + data.class = 'label label-md label'; } else { data.class = 'text'; } diff --git a/client/src/views/fields/link-multiple-with-role.js b/client/src/views/fields/link-multiple-with-role.js index 829b915894..87d648b6cc 100644 --- a/client/src/views/fields/link-multiple-with-role.js +++ b/client/src/views/fields/link-multiple-with-role.js @@ -50,6 +50,8 @@ Espo.define('views/fields/link-multiple-with-role', 'views/fields/link-multiple' this.roleField = this.getMetadata().get('entityDefs.' + this.model.name + '.fields.' + this.name + '.columns.' + this.columnName); + this.displayRoleAsLabel = this.getMetadata().get(['entityDefs', this.model.entityType, 'fields', this.roleField, 'displayAsLabel']); + if (this.roleFieldIsForeign) { this.roleFieldScope = this.foreignScope; } else { @@ -81,8 +83,17 @@ Espo.define('views/fields/link-multiple-with-role', 'views/fields/link-multiple' } if (role != '') { var style = this.getMetadata().get(['entityDefs', this.model.entityType, 'fields', this.roleField, 'style', role]) || 'muted'; - roleHtml = ' » ' + - '' + + var className = 'text'; + + if (this.displayRoleAsLabel) { + className = 'label label-sm label'; + if (style === 'muted') { + style = 'default'; + } + } + + roleHtml = ' » ' + + '' + this.getHelper().stripTags(this.getLanguage().translateOption(role, this.roleField, this.roleFieldScope)) + ''; } diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less index 02a95d0fa1..bc914282ee 100644 --- a/frontend/less/espo/custom.less +++ b/frontend/less/espo/custom.less @@ -1876,12 +1876,28 @@ h4.panel-title span.fas.color-icon { .label { padding: .09em .5em .2em; + position: relative; + top: -1px; } -.label-lg { +.label-md { font-weight: normal; font-size: 100%; - padding: 1px 7px 2px; + padding: @label-padding-medium; + top: 0; +} + +.label-sm { + font-weight: normal; + font-size: 75%; + padding: @label-padding-small; +} + +.small .label-md, +.label-lg.small { + font-size: 75%; + padding: @label-padding-small; + top: -1px; } .expanded-row { diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less index dc13fca2c1..30c1f144d1 100644 --- a/frontend/less/espo/variables.less +++ b/frontend/less/espo/variables.less @@ -177,3 +177,6 @@ @grid-column-width-medium: 340px; @navbar-inverse-toggle-border-color: transparent; + +@label-padding-small: .09em .5em .2em; +@label-padding-medium: 1px 7px 2px;