diff --git a/src/app/home-page/top-level-community-list/top-level-community-list.component.html b/src/app/home-page/top-level-community-list/top-level-community-list.component.html index dbea87a175..064b308ed5 100644 --- a/src/app/home-page/top-level-community-list/top-level-community-list.component.html +++ b/src/app/home-page/top-level-community-list/top-level-community-list.component.html @@ -1,6 +1,10 @@
-

{{'home.top-level-communities.head' | translate}}

+

+ + {{'home.top-level-communities.head' | translate}} +

{{'home.top-level-communities.help' | translate}}

+ +
{{ content | translate }}
+ + + + + + + + + + + + + + + + + + diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss new file mode 100644 index 0000000000..30bbac02ff --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss @@ -0,0 +1,25 @@ +:host { + position: relative; +} + +.ds-context-help-icon { + position: absolute; + top: 0; +} + +.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); +} + +::ng-deep .tooltip-inner { + max-width: 300px; +} diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts new file mode 100644 index 0000000000..aee7a0c696 --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContextHelpWrapperComponent } from './context-help-wrapper.component'; + +describe('ContextHelpWrapperComponent', () => { + let component: ContextHelpWrapperComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContextHelpWrapperComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContextHelpWrapperComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts new file mode 100644 index 0000000000..b39c2b2f06 --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -0,0 +1,23 @@ +import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; + +export type PlacementDir = 'left' | 'right'; + +@Component({ + selector: 'ds-context-help-wrapper', + templateUrl: './context-help-wrapper.component.html', + styleUrls: ['./context-help-wrapper.component.scss'] +}) +export class ContextHelpWrapperComponent implements OnInit { + @Input() templateRef: TemplateRef; + @Input() content: string; + @Input() tooltipPlacement: PlacementArray; // TODO: type + // @Input('iconPlacement') iconPlacement: string; + + constructor() { } + + ngOnInit(): void { + // console.log("In ContextHelpWrapperComponent.ngOnInit:", this.content); // XXX + } + +} diff --git a/src/app/shared/context-help.directive.spec.ts b/src/app/shared/context-help.directive.spec.ts new file mode 100644 index 0000000000..f00fb9d355 --- /dev/null +++ b/src/app/shared/context-help.directive.spec.ts @@ -0,0 +1,8 @@ +import { ContextHelpDirective } from './context-help.directive'; + +describe('ContextHelpDirective', () => { + it('should create an instance', () => { + const directive = new ContextHelpDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts new file mode 100644 index 0000000000..712950a6f1 --- /dev/null +++ b/src/app/shared/context-help.directive.ts @@ -0,0 +1,29 @@ +import { ComponentFactoryResolver, ComponentRef, Directive, Input, 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'; + +@Directive({ + selector: '[dsContextHelp]' +}) +export class ContextHelpDirective implements OnInit { + @Input('dsContextHelp') content: string; + @Input('dsTooltipPlacement') tooltipPlacement: PlacementArray; + // @Input('iconPlacement') iconPlacement: PlacementDir; + + protected wrapper: ComponentRef; + + constructor( + private templateRef: TemplateRef, + private viewContainerRef: ViewContainerRef, + private componentFactoryResolver: ComponentFactoryResolver + ){} + + ngOnInit() { + 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.tooltipPlacement = this.tooltipPlacement; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 715ee66a99..0b51ba131c 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -177,6 +177,8 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/ import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component'; import { DsSelectComponent } from './ds-select/ds-select.component'; 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 @@ -454,6 +456,8 @@ const DIRECTIVES = [ ...SHARED_ITEM_PAGE_COMPONENTS, ItemVersionsSummaryModalComponent, ItemVersionsDeleteModalComponent, + ContextHelpDirective, + ContextHelpWrapperComponent, ], providers: [ ...PROVIDERS @@ -464,7 +468,8 @@ const DIRECTIVES = [ ...COMPONENTS, ...SHARED_ITEM_PAGE_COMPONENTS, ...DIRECTIVES, - TranslateModule + TranslateModule, + ContextHelpDirective ] }) diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index f742273edb..c9d9a32699 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -4162,5 +4162,8 @@ "idle-modal.log-out": "Log out", - "idle-modal.extend-session": "Extend session" + "idle-modal.extend-session": "Extend session", + + "context-help.multi-para.test": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis ac metus ut tristique. Integer eros risus, efficitur non urna eu, ultrices mollis felis. Nullam mi sapien, mattis eu nunc in, rhoncus vulputate risus. \n\nDuis pharetra et nibh aliquam sodales. Integer ut rutrum dolor, ut maximus quam. Nunc sit amet maximus urna. In nec erat vulputate, facilisis nulla a, scelerisque orci. Ut pellentesque sapien et eros euismod scelerisque finibus at sem. Duis egestas convallis ligula nec laoreet. \n\nProin ut magna sit amet libero consequat ultrices et sed mi. Nam congue sed risus ac fringilla. Suspendisse potenti. Cras mattis, est non laoreet elementum, erat enim interdum tortor, eu placerat enim metus sit amet enim.", + } diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 66e0e87f93..15c595a564 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -85,4 +85,7 @@ --ds-slider-handle-width: 18px; --ds-search-form-scope-max-width: 150px; + + --ds-context-x-offset: -16px; + --dscontext-help-icon-size: 16px; }