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;