LP#1929749: tweak styling on PO view

- turn the activate and cancel PO actions into buttons
- move the LI status, price, and LI actions to be on the same line as the
  order ID widget
- adjust the style of the LI status so that it doesn't look like a button

Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html
index e8abd50..63bb22b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html
@@ -308,11 +308,38 @@
           </div>
         </div>
         <div class="row">
-          <div class="col-lg-12">
-          <div class="flex-1"> </div>
+          <div class="col-lg-12 d-flex">
+            <div class="mr-2">
+              <ng-container [ngSwitch]="li.state()">   
+                <div i18n 
+                  class="p-1 text-dark border border-dark bg-light rounded-pill"
+                  *ngSwitchCase="'new'">New</div>
+                <div i18n 
+                  class="p-1 text-dark border border-dark bg-light rounded-pill" 
+                  *ngSwitchCase="'selector-ready'">Selector-Ready</div>
+                <div i18n 
+                  class="p-1 text-dark border border-dark bg-light rounded-pill" 
+                  *ngSwitchCase="'order-ready'">Order-Ready</div>
+                <div i18n 
+                  class="p-1 text-dark border border-dark bg-light rounded-pill" 
+                  *ngSwitchCase="'approved'">Approved</div>
+                <div i18n 
+                  class="p-1 text-dark border border-dark bg-light rounded-pill" 
+                  *ngSwitchCase="'pending-order'">Pending-Order</div>
+                <div i18n 
+                  class="p-1 text-primary border border-primary bg-light rounded-pill" 
+                  *ngSwitchCase="'on-order'">On-Order</div>
+                <div i18n 
+                  class="p-1 text-success border border-success bg-light rounded-pill" 
+                  *ngSwitchCase="'received'">Received</div>
+                <div i18n 
+                  class="p-1 text-danger border border-danger bg-light rounded-pill" 
+                  *ngSwitchCase="'cancelled'">{{li.cancel_reason().label()}}</div>
+              </ng-container>
+            </div>
             <!-- w-auto allows the input group to stick to the right 
                  as the status label grows -->
-            <div class="input-group w-auto">
+            <div class="input-group w-auto mr-2">
               <div class="input-group-prepend">
                 <span *ngIf="identOptions(li).length > 1" class="text-danger mr-1"
                   i18n-title title="Multiple Order Identifier Options" i18n>
@@ -343,6 +370,30 @@
                 (onChange)="orderIdentChanged(li, $event)">
               </eg-combobox>
             </div>
+            <div class="mr-2">
+              <input type="text" class="form-control-sm medium"
+                [ngClass]="{'border border-danger text-danger': !liPriceIsValid(li)}"
+                placeholder='Price...' i18n-placeholder
+                (change)="liPriceChange(li)" [ngModel]="li.estimated_unit_price()"
+                (ngModelChange)="li.estimated_unit_price($event)"/>
+            </div>
+            <div>
+              <div ngbDropdown>
+                <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
+                <div ngbDropdownMenu>
+                  <button ngbDropdownItem [disabled]="li.state() != 'on-order' && lineitemDisposition(li) != 'delayed'"
+                    (click)="markReceived([li.id()])" i18n>Mark Received</button>
+                  <button ngbDropdownItem [disabled]="li.state() != 'received'"
+                    (click)="markUnReceived([li.id()])" i18n>Mark Un-Received</button>
+                  <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
+                    (click)="editHoldings(li)" i18n>Update Barcodes</button>
+                  <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
+                    (click)="jumpToHoldings(li)" i18n>Open Holdings View</button>
+                  <a ngbDropdownItem routerLink="lineitem/{{li.id()}}/history"
+                    queryParamsHandling="merge" i18n>View History</a>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="row" *ngIf="li.purchase_order()">
@@ -450,67 +501,6 @@
           </div>
         </div>
       </div>
-
-      <!-- actions along the right -->
-      <div class="d-flex flex-column justify-content-end">
-        <div class="row">
-          <div class="col-lg-12 d-flex">
-            <div class="flex-1"></div>
-            <div class="mr-2">
-              <ng-container [ngSwitch]="li.state()">   
-                <div i18n 
-                  class="p-1 text-dark border border-dark bg-light rounded-lg" 
-                  *ngSwitchCase="'new'">New</div>
-                <div i18n 
-                  class="p-1 text-dark border border-dark bg-light rounded-lg" 
-                  *ngSwitchCase="'selector-ready'">Selector-Ready</div>
-                <div i18n 
-                  class="p-1 text-dark border border-dark bg-light rounded-lg" 
-                  *ngSwitchCase="'order-ready'">Order-Ready</div>
-                <div i18n 
-                  class="p-1 text-dark border border-dark bg-light rounded-lg" 
-                  *ngSwitchCase="'approved'">Approved</div>
-                <div i18n 
-                  class="p-1 text-dark border border-dark bg-light rounded-lg" 
-                  *ngSwitchCase="'pending-order'">Pending-Order</div>
-                <div i18n 
-                  class="p-1 text-primary border border-primary bg-light rounded-lg" 
-                  *ngSwitchCase="'on-order'">On-Order</div>
-                <div i18n 
-                  class="p-1 text-success border border-success bg-light rounded-lg" 
-                  *ngSwitchCase="'received'">Received</div>
-                <div i18n 
-                  class="p-1 text-danger border border-danger bg-light rounded-lg" 
-                  *ngSwitchCase="'cancelled'">{{li.cancel_reason().label()}}</div>
-              </ng-container>
-            </div>
-            <div class="mr-2">
-              <div ngbDropdown>
-                <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
-                <div ngbDropdownMenu>
-                  <button ngbDropdownItem [disabled]="li.state() != 'on-order' && lineitemDisposition(li) != 'delayed'"
-                    (click)="markReceived([li.id()])" i18n>Mark Received</button>
-                  <button ngbDropdownItem [disabled]="li.state() != 'received'"
-                    (click)="markUnReceived([li.id()])" i18n>Mark Un-Received</button>
-                  <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
-                    (click)="editHoldings(li)" i18n>Update Barcodes</button>
-                  <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
-                    (click)="jumpToHoldings(li)" i18n>Open Holdings View</button>
-                  <a ngbDropdownItem routerLink="lineitem/{{li.id()}}/history"
-                    queryParamsHandling="merge" i18n>View History</a>
-                </div>
-              </div>
-            </div>
-            <div>
-              <input type="text" class="form-control-sm medium"
-                [ngClass]="{'border border-danger text-danger': !liPriceIsValid(li)}"
-                placeholder='Price...' i18n-placeholder
-                (change)="liPriceChange(li)" [ngModel]="li.estimated_unit_price()"
-                (ngModelChange)="li.estimated_unit_price($event)"/>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 

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 51dcfdf..04220b8 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
@@ -211,23 +211,15 @@
       </a>
       <ng-container *ngIf="po().state() == 'on-order'">
         <span class="pl-2 pr-2" i18n> | </span>
-        <a (click)="cancelPo()" href="javascript:;" class="label-with-material-icon">
-          <span class="material-icons small mr-1">cancel</span>
-          <span i18n>Cancel Order</span>
-        </a>
+        <button class="btn btn-sm btn-danger" (click)="cancelPo()" i18n>Cancel Order</button>
       </ng-container>
       <ng-container *ngIf="canActivate === true">
         <span class="pl-2 pr-2" i18n> | </span>
-        <a (click)="activatePo(true)" href="javascript:;" i18n>
-          Activate Without Loading Items
-        </a>
+        <button class="btn btn-sm btn-primary" (click)="activatePo(true)" i18n>Activate Without Loading Items</button>
       </ng-container>
       <ng-container *ngIf="canActivate === true">
         <span class="pl-2 pr-2" i18n> | </span>
-        <a (click)="activatePo()" href="javascript:;" class="label-with-material-icon">
-          <span class="material-icons small mr-1">launch</span>
-          <span i18n>Activate Order</span>
-        </a>
+        <button class="btn btn-sm btn-success" (click)="activatePo()" i18n>Activate Order</button>
       </ng-container>
       <ng-container *ngIf="canFinalize">
         <span class="pl-2 pr-2" i18n> | </span>