feat: show more attrs in group-by selector summary

spraakbanken · Mar 8, 2025 · e29cbfb · e29cbfb
1 parent c870d8e
commit e29cbfb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 20 deletions.
diff --git a/app/scripts/components/reduce-select.ts b/app/scripts/components/reduce-select.ts
@@ -28,21 +28,18 @@ type ReduceSelectController = IController & {
 }
 
 angular.module("korpApp").component("reduceSelect", {
-    template: html`<div
-        uib-dropdown
-        auto-close="outsideClick"
-        class="inline-block"
-        on-toggle="toggled(open)"
-        style="width: 200px"
-    >
+    template: html`<div uib-dropdown auto-close="outsideClick" class="inline-block w-52" on-toggle="toggled(open)">
         <div
             uib-dropdown-toggle
             class="reduce-dropdown-button inline-block align-middle bg-white border border-gray-400"
         >
-            <div class="reduce-dropdown-button-text">
-                <span> {{keyItems[$ctrl.selected[0]].label | locObj:$root.lang}} </span>
-                <span ng-if="$ctrl.selected.length > 1"> (+{{ $ctrl.selected.length - 1 }}) </span>
-                <span class="caret"></span>
+            <div class="px-1 flex items-center">
+                <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
+                    <span ng-repeat="name in $ctrl.selected">
+                        {{keyItems[name].label | locObj:$root.lang}}<span ng-if="!$last">,</span>
+                    </span>
+                </div>
+                <span class="ml-auto caret"></span>
             </div>
         </div>
         <div class="reduce-dropdown-menu" uib-dropdown-menu>

diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -1835,20 +1835,11 @@ li.active a span .num-to-find {
   height: 22px;
   overflow: hidden;
   background-color: rgba(255,255,255,0.5);
-  .caret {
-    right: 7px;
-    position: absolute;
-    top: 10px;
-  }
   transition : border-color 200ms;
   &:hover {
     border-color : #999;
   }
 }
-.reduce-dropdown-button-text {
-  width: 1000px;
-  padding: 0px 5px;
-}
 .reduce-dropdown-menu {
   width: 100%;
   max-height: 400px;