[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

ui/src/scss/_base.scss

@@ -192,7 +192,7 @@ a {
 .txt-ellipsis {
     display: inline-block;
     vertical-align: top;
-    flex-shrink: 0;
+    flex-shrink: 1;
     max-width: 100%;
     overflow: hidden;
     white-space: nowrap;
@@ -329,6 +329,7 @@ a,
 
 .content {
     @extend %block;
+    min-width: 0;
     & > :first-child {
         margin-top: 0;
     }
@@ -369,6 +370,7 @@ a,
     display: flex;
     align-items: center;
     width: 100%;
+    min-width: 0;
     gap: var(--smSpacing);
 }
 .flex-fill {
@@ -447,22 +449,33 @@ a,
 }
 
 .label {
+    --labelVPadding: 3px;
+    --labelHPadding: 8px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     gap: 5px;
-    line-height: 1;
-    padding: 3px 8px;
+    padding: var(--labelVPadding) var(--labelHPadding);
     min-height: 23px;
+    max-width: 100%;
     text-align: center;
     font-size: var(--smFontSize);
+    line-height: var(--smLineHeight);
     border-radius: 30px;
     background: var(--baseAlt2Color);
     color: var(--txtPrimaryColor);
     white-space: nowrap;
+
+    .btn:last-child {
+        margin-right: calc(-0.5 * var(--labelHPadding));
+    }
+    .btn:first-child {
+        margin-left: calc(-0.5 * var(--labelHPadding));
+    }
+
+    // styles
     &.label-sm {
+        --labelHPadding: 5px;
         font-size: var(--xsFontSize);
-        padding: 3px 5px;
         min-height: 18px;
         line-height: 1;
     }
@@ -609,6 +622,7 @@ a.thumb:not(.thumb-active) {
 
     position: relative;
     display: inline-flex;
+    vertical-align: top;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -695,6 +709,8 @@ a.thumb:not(.thumb-active) {
 .list {
     @extend %block;
     position: relative;
+    overflow: auto; /* fallback */
+    overflow: overlay;
     border: 1px solid var(--baseAlt2Color);
     border-radius: var(--baseRadius);
     .list-item {
@@ -703,11 +719,77 @@ a.thumb:not(.thumb-active) {
         display: flex;
         align-items: center;
         width: 100%;
-        gap: 10px;
-        padding: 10px;
-        border-bottom: 1px solid var(--baseAlt2Color);
+        gap: var(--xsSpacing);
+        outline: 0;
+        padding: 10px var(--xsSpacing);
+        min-height: 50px;
+        border-top: 1px solid var(--baseAlt2Color);
+        transition: background var(--baseAnimationSpeed);
+        &:first-child {
+            border-top: 0;
+        }
         &:last-child {
-            border-bottom: 0;
+            border-radius: inherit;
+        }
+        .content {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            min-width: 0;
+            max-width: 100%;
+            user-select: text;
+        }
+        .actions {
+            margin-left: auto;
+            gap: 10px;
+            flex-shrink: 0;
+            display: inline-flex;
+            align-items: center;
+            margin: -1px -5px -1px 0;
+            &.nonintrusive {
+                @include hide();
+                transform: translateX(5px);
+                transition: transform var(--baseAnimationSpeed),
+                            opacity var(--baseAnimationSpeed),
+                            visibility var(--baseAnimationSpeed);
+            }
+        }
+        &:hover,
+        &:active {
+            .actions.nonintrusive {
+                @include show();
+                transform: translateX(0);
+            }
+        }
+        // styles
+        &.selected {
+            background: var(--bodyColor);
+        }
+        &.handle:not(.disabled) {
+            cursor: pointer;
+            user-select: none;
+            &:hover,
+            &:focus-visible {
+                background: var(--baseAlt1Color);
+            }
+            &:active {
+                background: var(--baseAlt2Color);
+            }
+        }
+        &.disabled:not(.selected) {
+            cursor: default;
+            opacity: 0.6;
+        }
+    }
+
+    .list-item-btn {
+        padding: 5px;
+        min-height: auto;
+    }
+
+    &.list-compact {
+        .list-item {
+            min-height: 40px;
         }
     }
 }