role enum label

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';
                 }

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 = '<span class="text-muted small"> &#187; </span>' +
-                '<span class="text-'+style+' small">' +
+                var className = 'text';
+
+                if (this.displayRoleAsLabel) {
+                    className = 'label label-sm label';
+                    if (style === 'muted') {
+                        style = 'default';
+                    }
+                }
+
+                roleHtml = '<span class="test-muted small"> &#187; </span>' +
+                '<span class="'+className+'-'+style+' small">' +
                 this.getHelper().stripTags(this.getLanguage().translateOption(role, this.roleField, this.roleFieldScope)) +
                 '</span>';
             }

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 {

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;