97399 Improvements to ContextHelpDirective and ContextHelpWrapperComponent

src/app/home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,9 +1,10 @@
 <ng-container *ngVar="(communitiesRD$ | async) as communitiesRD">
   <div *ngIf="communitiesRD?.hasSucceeded ">
     <h2>
-      <span *dsContextHelp="'context-help.multi-para.test'"
+        <span *dsContextHelp="{content: 'context-help.multi-para.test',
-            dsTooltipPlacment="right left">
+                               tooltipPlacement: 'top',
-          {{'home.top-level-communities.head' | translate}}</span>
+                               iconPlacement: 'right'}">
+            {{'home.top-level-communities.head' | translate}}</span>
     </h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection

src/app/shared/context-help-wrapper/context-help-wrapper.component.html

@@ -1,26 +1,12 @@
-<!-- Set tooltip text. -->
 <ng-template #help>
   <div class="preserve-line-breaks ds-context-help-content">{{ content | translate }}</div>
 </ng-template>
-
+<i [ngClass]="{'ds-context-help-icon fas fa-question-circle shadow-sm': true,
-<!-- Help icon, add tooltip to help icon. -->
+              'ds-context-help-icon-right': iconPlacement == 'right',
-<i class="ds-context-help-icon fas fa-question-circle shadow-sm"
+              'ds-context-help-icon-left': iconPlacement == 'left'}"
    [ngbTooltip]="help"
+   [placement]="tooltipPlacement"
    container="'body'"
    triggers="click:blur">
 </i>
-
-<!-- Indicate where to put the template (that is, the contents of
-     whatever component the context help directive was used on).
--->
 <ng-container *ngTemplateOutlet="templateRef"></ng-container>
-
-
-
-<!-- <i class="ds-context-help-icon fas fa-question-circle shadow-sm"></i> -->
-<!-- <ng-container *ngTemplateOutlet="templateRef"></ng-container> -->
-
-
-<!--    *ngClass="{'ds-context-help-icon-right': tooltipPlacement === 'right', 'ds-context-help-icon-left': tooltipPlacement === 'left'}" -->
-
-

src/app/shared/context-help-wrapper/context-help-wrapper.component.scss

@@ -3,21 +3,23 @@
 }
 
 .ds-context-help-icon {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
+  cursor: pointer;
+  color: var(--bs-info);
+  background-color: var(--bs-white);
+  font-size: 16px; // not relative, because we don't want the icon to resize based on the container
+  line-height: 1;
+  border-radius: 50%;
 }
 
+
 .ds-context-help-icon-left {
     left: var(--ds-context-x-offset);
-    color: var(--bs-info);
-    background-color: var(--bs-white);
-    font-size: (--dscontext-help-icon-size);
-    line-height: 1;
-    border-radius: 50%;
 }
 
 .ds-context-help-icon-right {
-    right: var(--ds-context-icon-width);
+    right: calc(-1 * var(--ds-context-help-icon-size));
 }
 
 ::ng-deep .tooltip-inner {

src/app/shared/context-help-wrapper/context-help-wrapper.component.ts

@@ -1,23 +1,20 @@
 import { Component, Input, OnInit, TemplateRef } from '@angular/core';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
+import { PlacementDir } from './placement-dir.model';
+
+// export type PlacementDir = 'left' | 'right';
 
-export type PlacementDir = 'left' | 'right';
 
 @Component({
   selector: 'ds-context-help-wrapper',
   templateUrl: './context-help-wrapper.component.html',
-  styleUrls: ['./context-help-wrapper.component.scss']
+  styleUrls: ['./context-help-wrapper.component.scss'],
 })
-export class ContextHelpWrapperComponent implements OnInit {
+export class ContextHelpWrapperComponent {
   @Input() templateRef: TemplateRef<any>;
   @Input() content: string;
-  @Input() tooltipPlacement: PlacementArray; // TODO: type
+  @Input() tooltipPlacement: PlacementArray;
-  // @Input('iconPlacement') iconPlacement: string;
+  @Input() iconPlacement: PlacementDir;
 
   constructor() { }
-
-  ngOnInit(): void {
-    // console.log("In ContextHelpWrapperComponent.ngOnInit:", this.content); // XXX
-  }
-
 }

src/app/shared/context-help-wrapper/placement-dir.model.ts

@@ -0,0 +1 @@
+export type PlacementDir = 'left' | 'right';

src/app/shared/context-help.directive.ts

@@ -1,29 +1,39 @@
-import { ComponentFactoryResolver, ComponentRef, Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Input, OnChanges, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
-import { ContextHelpWrapperComponent, PlacementDir } from './context-help-wrapper/context-help-wrapper.component';
+import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
+import { PlacementDir } from './context-help-wrapper/placement-dir.model';
+
+export type ContextHelpDirectiveInput = {
+  content: string,
+  tooltipPlacement?: PlacementArray,
+  iconPlacement?: PlacementDir
+}
 
 @Directive({
-  selector: '[dsContextHelp]'
+  selector: '[dsContextHelp]',
 })
-export class ContextHelpDirective implements OnInit {
+export class ContextHelpDirective implements OnChanges {
-  @Input('dsContextHelp') content: string;
+  @Input() dsContextHelp: string | ContextHelpDirectiveInput;
-  @Input('dsTooltipPlacement') tooltipPlacement: PlacementArray;
-  // @Input('iconPlacement') iconPlacement: PlacementDir;
 
   protected wrapper: ComponentRef<ContextHelpWrapperComponent>;
 
   constructor(
     private templateRef: TemplateRef<any>,
     private viewContainerRef: ViewContainerRef,
-    private componentFactoryResolver: ComponentFactoryResolver
+    private componentFactoryResolver: ComponentFactoryResolver,
   ){}
 
-  ngOnInit() {
+  ngOnChanges() {
+    const input: ContextHelpDirectiveInput = typeof(this.dsContextHelp) === 'string'
+      ? {content: this.dsContextHelp}
+      : this.dsContextHelp;
+
     const factory
       = this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent);
     this.wrapper = this.viewContainerRef.createComponent(factory);
     this.wrapper.instance.templateRef = this.templateRef;
-    this.wrapper.instance.content = this.content;
+    this.wrapper.instance.content = input.content;
-    this.wrapper.instance.tooltipPlacement = this.tooltipPlacement;
+    this.wrapper.instance.tooltipPlacement = input.tooltipPlacement;
+    this.wrapper.instance.iconPlacement = input.iconPlacement;
   }
 }

src/app/shared/shared.module.ts

@@ -180,6 +180,7 @@ import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component'
 import { ContextHelpDirective } from './context-help.directive';
 import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
 
+
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
   CommonModule,

src/styles/_custom_variables.scss

@@ -87,5 +87,5 @@
   --ds-search-form-scope-max-width: 150px;
 
   --ds-context-x-offset: -16px;
-  --dscontext-help-icon-size: 16px;
+  --ds-context-help-icon-size: 16px;
 }