Indicate disabled but active All button

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index fa4497573a9a85b7fadc66c11a355b72d5321f19..3cc116171e5258b34cd65c561d7a7f7be39c6c20 100644 (file)
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -13,12 +13,12 @@
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <div *ngIf="!editing && multiple" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()">
+        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()" [disabled]="!operatorToggleEnabled">
           <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" name="logicalOperator" value="and" [disabled]="!operatorToggleEnabled"> All
+            <input ngbButton type="radio" name="logicalOperator" value="and"> All
           </label>
           <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" name="logicalOperator" value="or" [disabled]="!operatorToggleEnabled"> Any
+            <input ngbButton type="radio" name="logicalOperator" value="or"> Any
           </label>
         </div>
       </div>

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
index ef6090212254cb65e79ba62d57dfda5684a750e0..e728ca16b4a654acf574640edef4e8ee571e01ae 100644 (file)
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
@@ -1,3 +1,5 @@
+@import "/src/theme";
+
 .badge-corner {
   position: absolute;
   top: -8px;
@@ -34,8 +36,13 @@
 
 .btn-group > label.disabled {
   filter: brightness(0.5);
+
+  &.active {
+    background-color: lighten($primary, 30%);
+  }
 }
 
+
 small > svg {
   margin-top: -2px;
 }

diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 25abac77349bd1f2c4523d6632686bed67e449d0..4735eb3a9ac1e06b547581797f344dca4d19dbcd 100644 (file)
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -231,6 +231,10 @@ $border-color-dark-mode: #47494f;
       border-color: darken($primary-dark-mode, 10%);
       color: $text-color-dark-mode-accent;
     }
+
+    &.disabled.active {
+      background-color: darken($primary-dark-mode, 10%);
+    }
   }
 
   .btn-outline-secondary {