From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 19 Feb 2022 22:03:55 +0000 (-0800)
Subject: Indicate disabled but active All button
X-Git-Tag: ngx-1.6.0-rc1~73^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10%2Fhead;p=thirdparty%2Fpaperless-ngx.git

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 fa4497573a..3cc116171e 100644
--- 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 ef60902122..e728ca16b4 100644
--- 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 25abac7734..4735eb3a9a 100644
--- 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 {