This is an automated email from the git hooks/post-receive script. It was generated because a ref change was pushed to the repository containing the project "Evergreen ILS". The branch, main has been updated via 63a2b3e6a3dec545e3bb5da1719824baa7909351 (commit) via 9f52ac5625bb7cf8c2682b17133ab012663e2c61 (commit) from 7f1e4162b54a062b5f24c556a59cd1545bc6bfc7 (commit) Those revisions listed above that are new to this repository have not appeared on any other notification email; so we list those revisions in full, below. - Log ----------------------------------------------------------------- commit 63a2b3e6a3dec545e3bb5da1719824baa7909351 Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Wed Mar 19 20:10:02 2025 +0000 LP2091038 Self check: force light mode; button colors Follow-up to force the self checkout screens to appear in light mode (pending full support for color modes) and fix a hover color contrast issue on inactive checkbox button toggles. Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org> diff --git a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css index 5ae8c2f1d7..dbb1806abb 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css +++ b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css @@ -9,7 +9,7 @@ a { h1 { font-size: 1.5rem; - font-color: #00593d; + color: #00593d; display: inline; } @@ -102,7 +102,10 @@ label.btn-outline-success { } .scko-button { - border: 1px solid #007a54; + --bs-btn-border-color: #007a54; + --bs-btn-color: white; + color: var(--bs-btn-color); + border: 1px solid var(--bs-btn-border-color); background: linear-gradient(#007a54, #00593d); background: -moz-linear-gradient(#007a54, #00593d); background: -o-linear-gradient(#007a54, #00593d); @@ -116,7 +119,10 @@ label.btn-outline-success { .btn-check:checked + label.btn-outline-success, label.btn-outline-success.active, label.btn-outline-success:active { - border: 1px solid #2e3b91; + --bs-btn-border-color: #2e3b91; + --bs-btn-color: white; + color: var(--bs-btn-color); + border: 1px solid var(--bs-btn-border-color); background: linear-gradient(#2e3b91, #424fa6); background: -moz-linear-gradient(#2e3b91, #424fa6); background: -o-linear-gradient(#2e3b91, #424fa6); diff --git a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.ts b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.ts index 8221b8e661..2817b5811e 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.ts @@ -32,6 +32,9 @@ export class SckoComponent implements OnInit, AfterViewInit { this.scko.logoutStaff(); }); + // force light mode (for now) + document.documentElement.setAttribute('data-bs-theme', 'light'); + this.scko.load(); } commit 9f52ac5625bb7cf8c2682b17133ab012663e2c61 Author: Terran McCanna <tmccanna@georgialibraries.org> Date: Mon Jan 13 18:17:49 2025 -0500 LP2091038 Angular Self Check Usability Issues - Fixed invisible receipt option buttons and changed their color and shape to distinguish them from the action buttons. Also moved them to one line. - Changed receipt options section title from "Receipt:" to "Type of Receipt" to make it more easily understandable. - Fixed dark text on dark buttons problem. - Added H1 page titles to each section to make it easier for the user to tell what kind of list they are looking at. - Added a more visible hover color to button text. - Added icon to Logout button to more easily distinguish it from the Home button. Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org> Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org> diff --git a/Open-ILS/src/eg2/src/app/staff/scko/checkout.component.html b/Open-ILS/src/eg2/src/app/staff/scko/checkout.component.html index f716f2b357..e781137115 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/checkout.component.html +++ b/Open-ILS/src/eg2/src/app/staff/scko/checkout.component.html @@ -1,5 +1,7 @@ <div class="d-flex"> - <div class="flex-1"></div> + <div class="flex-1 section-title"> + <h1 i18n>Currently Checking Out</h1> + </div> <div> <button type="button" class="scko-button" (click)="printList()" i18n>Print List</button> </div> diff --git a/Open-ILS/src/eg2/src/app/staff/scko/fines.component.html b/Open-ILS/src/eg2/src/app/staff/scko/fines.component.html index f2ce71d6f2..e1a42066cc 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/fines.component.html +++ b/Open-ILS/src/eg2/src/app/staff/scko/fines.component.html @@ -1,5 +1,7 @@ <div class="d-flex"> - <div class="flex-1"></div> + <div class="flex-1 section-title"> + <h1 i18n>Fines</h1> + </div> <div> <button type="button" class="scko-button" (click)="printList()" i18n>Print List</button> </div> diff --git a/Open-ILS/src/eg2/src/app/staff/scko/items.component.html b/Open-ILS/src/eg2/src/app/staff/scko/items.component.html index a92c0ea0c4..621c816a6e 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/items.component.html +++ b/Open-ILS/src/eg2/src/app/staff/scko/items.component.html @@ -1,7 +1,9 @@ <div class="d-flex"> - <div class="flex-1"></div> + <div class="flex-1 section-title"> + <h1 i18n>Items Out</h1> + </div> <div> - <button type="button" class="scko-button mr-2" + <button type="button" class="scko-button" (click)="renewSelected()" i18n>Renew Selected</button> <button type="button" class="scko-button" (click)="printList()" i18n>Print List</button> diff --git a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css index 055aa1f4a5..5ae8c2f1d7 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css +++ b/Open-ILS/src/eg2/src/app/staff/scko/scko.component.css @@ -3,9 +3,24 @@ body { font-size: 13px; } -A { +a { text-decoration: none; } + +h1 { + font-size: 1.5rem; + font-color: #00593d; + display: inline; +} + +.section-title { + padding-top: 10px; + padding-left: 20px; +} + +h2 { + font-size: 1.2rem; +} #scko-banner { background: #00593d; /* Old browsers */ @@ -64,47 +79,76 @@ A { } label.btn-outline-success { - border-radius: 1rem; } -.scko-button, -.btn-check:active + label.btn-outline-success, -.btn-check:checked + label.btn-outline-success, -label.btn-outline-success.active, -label.btn-outline-success:active { +.scko-button, .btn-check-label, .btn-check { color: #FBF9F9; font-weight: bold; text-shadow: 1px 1px 1px #555555; border-radius: 1rem; + padding: .5rem 1rem; + text-decoration: none; + display: inline-block; +} + +.btn-check-label { + height: 2rem; +} + +.material-icons { + display: inline-flex; + vertical-align: middle; + font-size: 1rem; +} + +.scko-button { border: 1px solid #007a54; background: linear-gradient(#007a54, #00593d); background: -moz-linear-gradient(#007a54, #00593d); background: -o-linear-gradient(#007a54, #00593d); background: -webkit-linear-gradient(#007a54, #00593d); - background-color: #00593d; - padding: .5rem 1rem; - text-decoration: none; + margin: 10px; + height: 2.5rem; +} + +.btn-check-label, +.btn-check:active + label.btn-outline-success, +.btn-check:checked + label.btn-outline-success, +label.btn-outline-success.active, +label.btn-outline-success:active { + border: 1px solid #2e3b91; + background: linear-gradient(#2e3b91, #424fa6); + background: -moz-linear-gradient(#2e3b91, #424fa6); + background: -o-linear-gradient(#2e3b91, #424fa6); + background: -webkit-linear-gradient(#2e3b91, #424fa6); + padding: 5px; + margin: 5px 10px 20px 0px; + border-radius: .25em; } .scko-button:hover, .scko-button:focus, -.scko-button:active { - color: #FBF9F9; - background: linear-gradient(#007a54, #00593d); - background: -moz-linear-gradient(#007a54, #00593d); - background: -o-linear-gradient(#007a54, #00593d); - background: -webkit-linear-gradient(#007a54, #00593d); - background-color: #00593d; +.scko-button:active, +.btn-check-label:hover, +.btn-check-label:focus, +.btn-check-label:active { + color: #F8E473; } -label.btn.active:before { +label.btn-check-label.active:before { font-family: "Material Icons"; content: "\e876"; /* a check mark, equivalent to "done" keyword */ line-height: 1; margin-right: 0.35rem; - vertical-align: middle; } +.receipt-option-wrapper { + display: flex; + flex-direction: row; +} + +.receipt-option {} + .oils-selfck-item-table { width: 98%; margin-top: 15px; diff --git a/Open-ILS/src/eg2/src/app/staff/scko/summary.component.html b/Open-ILS/src/eg2/src/app/staff/scko/summary.component.html index 54794ada97..d523b8a819 100644 --- a/Open-ILS/src/eg2/src/app/staff/scko/summary.component.html +++ b/Open-ILS/src/eg2/src/app/staff/scko/summary.component.html @@ -2,29 +2,39 @@ <div id="scko-circ-info-div"> <div class="ps-2"> - <a routerLink="/staff/selfcheck" class="me-1 btn btn-link scko-button" i18n>Home</a> - <button type="button" class="btn btn-link scko-button ms-1" (click)="scko.logoutPatron(receiptType)" i18n>Logout</button> + <a routerLink="/staff/selfcheck" class="btn scko-button" i18n> + <span class="material-icons" aria-label="hidden">home</span> + Home + </a> + <button type="button" class="btn scko-button" (click)="scko.logoutPatron(receiptType)" i18n> + <span class="material-icons" aria-label="hidden">logout</span> + Logout</button> </div> <div class="ps-2 mt-3" role="region" attr.aria-label="Receipt" i18n-aria-label> - <h2 class="me-2 d-inline" i18n>Receipt:</h2> + <h2 class="me-2 d-inline" i18n>Type of Receipt:</h2> + <div class="receipt-option-wrapper"> + <div class="receipt-option" *ngIf="showEmailOption"> + <input class="btn-check" name="receipt-type" type="radio" + [(ngModel)]="receiptType" id="receipt-email" value="email"> + <label class="btn btn-check-label btn-outline-success m1" for="receipt-email" i18n + [ngClass]="{'active': receiptType === 'email'}">Email</label> + </div> - <div *ngIf="showEmailOption"> - <input class="btn-check" name="receipt-type" type="radio" - [(ngModel)]="receiptType" id="receipt-email" value="email"> - <label class="btn btn-outline-success m-1" for="receipt-email" i18n - [ngClass]="{'active': receiptType === 'email'}">Email</label> - </div> - - <input class="btn-check" name="receipt-type" type="radio" - [(ngModel)]="receiptType" id="receipt-print" value="print"> - <label class="btn btn-outline-success m-1" for="receipt-print" i18n - [ngClass]="{'active': receiptType === 'print'}">Print</label> + <div class="receipt-option"> + <input class="btn-check" name="receipt-type" type="radio" + [(ngModel)]="receiptType" id="receipt-print" value="print"> + <label class="btn btn-check-label btn-outline-success m1" for="receipt-print" i18n + [ngClass]="{'active': receiptType === 'print'}">Print</label> + </div> - <input class="btn-check" name="receipt-type" type="radio" - [(ngModel)]="receiptType" id="receipt-none" value="none"> - <label class="btn btn-outline-success m-1" for="receipt-none" i18n - [ngClass]="{'active': receiptType === 'none'}">None</label> + <div class="receipt-option"> + <input class="btn-check" name="receipt-type" type="radio" + [(ngModel)]="receiptType" id="receipt-none" value="none"> + <label class="btn btn-check-label btn-outline-success m1" for="receipt-none" i18n + [ngClass]="{'active': receiptType === 'none'}">None</label> + </div> + </div> </div> <fieldset> @@ -37,7 +47,7 @@ <span i18n>Total items on account: </span> <b>{{scko.accountTotalCheckouts()}}</b> </div> - <a routerLink="/staff/selfcheck/items" class="mt-2 btn btn-link scko-button" i18n>View Items Out</a> + <a routerLink="/staff/selfcheck/items" class="btn scko-button mt-2" i18n>View Items Out</a> </fieldset> <fieldset> <legend i18n>Holds</legend> @@ -51,7 +61,7 @@ <b>{{scko.patronSummary.stats.holds.total}}</b> total holds. </div> - <a routerLink="/staff/selfcheck/holds" id="oils-selfck-hold-details-link" class="mt-2 btn btn-link scko-button" i18n>View Holds</a> + <a routerLink="/staff/selfcheck/holds" id="oils-selfck-hold-details-link" class="btn scko-button mt-2" i18n>View Holds</a> </fieldset> <fieldset> <legend i18n>Fines</legend> @@ -59,7 +69,7 @@ <span i18n>Total fines on account:</span> <b>{{scko.patronSummary.stats.fines.balance_owed | currency}}</b> </div> - <a routerLink="/staff/selfcheck/fines" id="oils-selfck-view-fines-link" class="mt-2 btn btn-link scko-button" i18n>View Details</a> + <a routerLink="/staff/selfcheck/fines" id="oils-selfck-view-fines-link" class="btn scko-button mt-2" i18n>View Details</a> </fieldset> </div> ----------------------------------------------------------------------- Summary of changes: .../eg2/src/app/staff/scko/checkout.component.html | 4 +- .../eg2/src/app/staff/scko/fines.component.html | 4 +- .../eg2/src/app/staff/scko/items.component.html | 6 +- .../src/eg2/src/app/staff/scko/scko.component.css | 90 +++++++++++++++++----- .../src/eg2/src/app/staff/scko/scko.component.ts | 3 + .../eg2/src/app/staff/scko/summary.component.html | 52 ++++++++----- 6 files changed, 114 insertions(+), 45 deletions(-) hooks/post-receive -- Evergreen ILS