From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 4 May 2023 02:39:26 +0000 (+0000)
Subject: LP1984007 Acq warning/stop percentage styles
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=a79cdae92fe5668a3a9a495d96db544857ae6d64;p=working%2FEvergreen.git

LP1984007 Acq warning/stop percentage styles

Styles the background and font color of warning and stop percentages and
adds an icon prefix in the PO summary table. These colors are in keeping
with the less intense badges in my branch for bug 1999282.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
index 08cf04f027..f93c97777f 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
@@ -1,13 +1,13 @@
 
 <ng-template #defaultDisplayTemplate let-r="result">
-  <span id="{{domId}}-{{r.id}}">{{r.label}}</span>
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">{{r.label}}</span>
 </ng-template>
 
 <ng-template #acqfTemplate egIdlClass="acqf" let-r="result">
-  <span id="{{domId}}-{{r.id}}">{{r.fm.code()}} ({{r.fm.year()}}) ({{getOrgShortname(r.fm.org())}})</span>
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">{{r.fm.code()}} ({{r.fm.year()}}) ({{getOrgShortname(r.fm.org())}})</span>
 </ng-template>
 <ng-template #acplTemplate egIdlClass="acpl" let-r="result">
-  <span id="{{domId}}-{{r.id}}">
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">
     {{r.fm.name()}} ({{getOrgShortname(r.fm.owning_lib())}})
   </span>
 </ng-template>
diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
index 735f44a64f..e75f31db20 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
@@ -69,6 +69,9 @@ export class ComboboxComponent
     // Placeholder text for selector input
     @Input() placeholder = '';
 
+    // Optional array of CSS class names
+    @Input() classNames?: string[];
+
     @Input() persistKey: string; // TODO
 
     @Input() allowFreeText = false;
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
index 25fc6360da..6e968c750b 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
@@ -22,6 +22,7 @@ export class PoChargesComponent implements OnInit, OnDestroy {
     autoId = -1;
     poSubscription: Subscription;
     owners: number[];
+    classNames: string[];
 
     @ViewChild('disencumberChargeDialog') disencumberChargeDialog: DisencumberChargeDialogComponent;
 
@@ -49,6 +50,10 @@ export class PoChargesComponent implements OnInit, OnDestroy {
         });
 
         this.owners = this.org.ancestors(this.auth.user().ws_ou(), true);
+        if (this.po().activationEvent)
+            this.classNames.push('text-bg-danger');
+        if (this.po().activationWarnings.length)
+            this.classNames.push('text-bg-warning');
     }
 
     ngOnDestroy() {
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
index 363536b9e1..e8c1d9d72d 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
@@ -1,26 +1,7 @@
-.text-danger {
-  background-color: #f8d7da;
-  color: #58151c !important;
-  font-weight: 600;
-  padding: 0 .25rem;
-}
-
-.text-danger::before {
-  content: "\e160";
-  font-family: "Material Icons";
-  font-weight: normal;
-  vertical-align: sub;
-}
-
-.bg-warning {
-  background-color: #ffe69c !important;
-  color: #723809;
-  font-weight: 600;
-}
-
-.bg-warning::before {
-  content: "\e002";
-  font-family: "Material Icons";
-  font-weight: normal;
+.text-bg-danger .material-icons,
+.text-bg-warning .material-icons {
+  font-size: 1rem;
+  line-height: inherit;
+  margin-inline-start: .25ch;
   vertical-align: sub;
 }
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
index 44c9000653..e9e27a76ce 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
@@ -35,35 +35,43 @@
             <span *ngIf="po().state() === 'received'" i18n>Received</span>
             <ng-container *ngIf="canActivate">
               <span *ngIf="!activationEvent" i18n>Pending / Activatable</span>
-              <span *ngIf="activationEvent" i18n>
-                Activation Error: {{activationEvent.textcode}} {{activationEvent.desc}}
+              <span *ngIf="activationEvent">
+                <span class="text-bg-danger">
+                  <span class="material-icons" aria-label="danger" title="danger" i18n-aria-label i18n-title>report</span>
+                  <span i18n>Activation Error: {{activationEvent.textcode}} {{activationEvent.desc}}</span>
+                </span>
               </span>
             </ng-container>
 
             <!-- canceled -->
             <ng-container *ngIf="po().cancel_reason()">
-              <span class="text-danger" i18n>
-                {{po().cancel_reason().label()}} =&gt; {{po().cancel_reason().description()}}
+              <span class="text-bg-danger">
+                <span class="material-icons" aria-label="danger" title="danger" i18n-aria-label i18n-title>report</span>
+                <span i18n>{{po().cancel_reason().label()}} =&gt; {{po().cancel_reason().description()}}</span>
               </span>
             </ng-container>
 
             <!-- activation warnings -->
             <ng-container *ngIf='activationWarnings.length'>
-              <span i18n> (Warning: </span>
-              <ng-container *ngFor="let evt of activationWarnings">
-                <ng-container 
-                 *ngIf="evt.textcode === 'ACQ_FUND_EXCEEDS_WARN_PERCENT'">
-                  <span class="bg-warning" i18n>
-                    Fund exceeds warning percent: 
-                    {{evt.payload.fund.code()}} ({{evt.payload.fund.year()}}).
-                  </span>
+              <span class="text-bg-warning">
+              <span class="material-icons" aria-label="warning" title="warning" i18n-aria-label i18n-title>warning</span>
+                <span i18n> (Warning: </span>
+                <ng-container *ngFor="let evt of activationWarnings">
+                  <ng-container 
+                  *ngIf="evt.textcode === 'ACQ_FUND_EXCEEDS_WARN_PERCENT'">
+                    <span i18n>
+                      Fund exceeds warning percent: 
+                      {{evt.payload.fund.code()}} ({{evt.payload.fund.year()}}).
+                    </span>
+                  </ng-container>
                 </ng-container>
-              </ng-container>
-              <span i18n>)</span>
+                <span i18n>)</span>
+              </span>
             </ng-container>
 
             <!-- activation blocks -->
-            <div class="text-danger" *ngFor="let evt of activationBlocks">
+            <div class="text-bg-danger" *ngFor="let evt of activationBlocks">
+              <span class="material-icons" aria-label="danger" title="danger" i18n-aria-label i18n-title>report</span>
               <ng-container 
                 *ngIf="evt.textcode === 'ACQ_FUND_EXCEEDS_STOP_PERCENT'; else noPrice">
                 <span i18n>
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 0934d1da2a..9c7bd15a99 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -451,6 +451,7 @@ input.small {
 .btn-info.focus {
   background-color: #076376;
   border-color: #076376;
+  color: #fff;
 }
 
 .btn-outline-info {
@@ -544,6 +545,18 @@ input.small {
   background: #adb5bd;
 }
 
+.text-bg-danger {
+  background-color: #f8d7da;
+  color: #58151c;
+  font-weight: 600;
+}
+
+.text-bg-warning {
+  background-color: #ffe69c;
+  color: #723809;
+  font-weight: 600;
+}
+
 /* 
  * https://getbootstrap.com/docs/5.0/migration/#content-reboot-etc
  * Links are underlined by default.