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 08cf04f..f93c977 100644 (file)
--- 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 735f44a..e75f31d 100644 (file)
--- 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 25fc636..6e968c7 100644 (file)
--- 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 363536b..e8c1d9d 100644 (file)
--- 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 44c9000..e9e27a7 100644 (file)
--- 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 0934d1d..9c7bd15 100644 (file)
--- 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.