LP1904036 help popover custom button css; smaller mat icon
authorBill Erickson <berickxx@gmail.com>
Mon, 29 Mar 2021 19:41:41 +0000 (15:41 -0400)
committerBill Erickson <berickxx@gmail.com>
Mon, 29 Mar 2021 19:41:41 +0000 (15:41 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.html
Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.ts
Open-ILS/src/eg2/src/styles.css

index b75422b..6b5e8ee 100644 (file)
@@ -2,7 +2,9 @@
   <a target="_blank" href="{{helpLink}}" *ngIf="helpLink.length >= 1">{{helpText}}</a>
   <span *ngIf="helpLink.length < 1">{{helpText}}</span>
 </ng-template>
-<button class="btn btn-sm" placement="{{placement}}" [ngbPopover]="popContent" triggers="click"i
+<button class="btn {{buttonClass}}" placement="{{placement}}" 
+  [ngbPopover]="popContent" triggers="click"
   i18n-aria-label aria-label="Show help" aria-haspopup="true">
-  <span class="material-icons" i18n-aria-label aria-label="Show help">live_help</span>
+  <span class="material-icons mat-icon-shrunk-in-button" 
+    i18n-aria-label aria-label="Show help">live_help</span>
 </button>
index ffad186..35b0ee6 100644 (file)
@@ -24,6 +24,11 @@ export class EgHelpPopoverComponent implements OnInit {
     @Input()
     placement = '';
 
+    // Allow for overriding the default button class.
+    // This augments the basic 'btn' class
+    @Input()
+    buttonClass = 'btn-sm';
+
     constructor() { }
 
     ngOnInit() {
index 17d59fa..b9e8b6d 100644 (file)
@@ -95,11 +95,6 @@ h5 {font-size: .95rem}
     line-height: inherit;
 }
 
-.mat-icon-shrunk-in-button {
-    line-height: inherit;
-    font-size: 18px;
-}
-
 .input-group .mat-icon-in-button {
     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
 }
@@ -109,6 +104,11 @@ h5 {font-size: .95rem}
   font-size: 22px;
 }
 
+.mat-icon-shrunk-in-button {
+    line-height: inherit;
+    font-size: 18px;
+}
+
 /* allow spans/labels to vertically orient with material icons */
 .label-with-material-icon {
     display: inline-flex;