From a40d93a9411890502a3fe56826f4ee9c5efdb14c Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 16 Dec 2022 11:41:09 +0100 Subject: [PATCH 01/30] 97399 Implemented basic working tooltip on top level community list --- .../top-level-community-list.component.html | 6 +++- .../context-help-wrapper.component.html | 26 +++++++++++++++++ .../context-help-wrapper.component.scss | 25 ++++++++++++++++ .../context-help-wrapper.component.spec.ts | 25 ++++++++++++++++ .../context-help-wrapper.component.ts | 23 +++++++++++++++ src/app/shared/context-help.directive.spec.ts | 8 +++++ src/app/shared/context-help.directive.ts | 29 +++++++++++++++++++ src/app/shared/shared.module.ts | 7 ++++- src/assets/i18n/en.json5 | 5 +++- src/styles/_custom_variables.scss | 3 ++ 10 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.html create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.scss create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.ts create mode 100644 src/app/shared/context-help.directive.spec.ts create mode 100644 src/app/shared/context-help.directive.ts 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; } From 28a127ca0e8493872265fb19d0b1caa5cf15deaf Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 16 Dec 2022 16:50:17 +0100 Subject: [PATCH 02/30] 97399 Improvements to ContextHelpDirective and ContextHelpWrapperComponent --- .../top-level-community-list.component.html | 7 ++-- .../context-help-wrapper.component.html | 22 +++---------- .../context-help-wrapper.component.scss | 18 ++++++----- .../context-help-wrapper.component.ts | 17 ++++------ .../placement-dir.model.ts | 1 + src/app/shared/context-help.directive.ts | 32 ++++++++++++------- src/app/shared/shared.module.ts | 1 + src/styles/_custom_variables.scss | 2 +- 8 files changed, 49 insertions(+), 51 deletions(-) create mode 100644 src/app/shared/context-help-wrapper/placement-dir.model.ts 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 064b308ed5..71ffee7dc6 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,9 +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 index 30bbac02ff..a58feda71f 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss @@ -3,21 +3,23 @@ } .ds-context-help-icon { - position: absolute; - top: 0; + position: absolute; + 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 { 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 index b39c2b2f06..bed977f858 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts +++ b/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; @Input() content: string; - @Input() tooltipPlacement: PlacementArray; // TODO: type - // @Input('iconPlacement') iconPlacement: string; + @Input() tooltipPlacement: PlacementArray; + @Input() iconPlacement: PlacementDir; constructor() { } - - ngOnInit(): void { - // console.log("In ContextHelpWrapperComponent.ngOnInit:", this.content); // XXX - } - } diff --git a/src/app/shared/context-help-wrapper/placement-dir.model.ts b/src/app/shared/context-help-wrapper/placement-dir.model.ts new file mode 100644 index 0000000000..a02c3e3ec9 --- /dev/null +++ b/src/app/shared/context-help-wrapper/placement-dir.model.ts @@ -0,0 +1 @@ +export type PlacementDir = 'left' | 'right'; diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 712950a6f1..2473b6505d 100644 --- a/src/app/shared/context-help.directive.ts +++ b/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 { - @Input('dsContextHelp') content: string; - @Input('dsTooltipPlacement') tooltipPlacement: PlacementArray; - // @Input('iconPlacement') iconPlacement: PlacementDir; +export class ContextHelpDirective implements OnChanges { + @Input() dsContextHelp: string | ContextHelpDirectiveInput; protected wrapper: ComponentRef; constructor( private templateRef: TemplateRef, 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.tooltipPlacement = this.tooltipPlacement; + this.wrapper.instance.content = input.content; + this.wrapper.instance.tooltipPlacement = input.tooltipPlacement; + this.wrapper.instance.iconPlacement = input.iconPlacement; } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 0b51ba131c..d97da4562b 100644 --- a/src/app/shared/shared.module.ts +++ b/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, diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 15c595a564..2013562dec 100644 --- a/src/styles/_custom_variables.scss +++ b/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; } From 1ae18ec9f7abc8ac2e27a084e6d716599910a620 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Mon, 19 Dec 2022 14:55:55 +0100 Subject: [PATCH 03/30] 97399 Added support for links in tooltips --- src/app/footer/footer.component.html | 6 +- .../context-help-wrapper.component.html | 18 ++++- .../context-help-wrapper.component.scss | 2 +- .../context-help-wrapper.component.ts | 70 +++++++++++++++++-- src/app/shared/context-help.directive.ts | 11 +++ src/assets/i18n/en.json5 | 2 +- 6 files changed, 96 insertions(+), 13 deletions(-) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index 2c1a34ccae..58f264a5ef 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -64,7 +64,11 @@

  • - {{ 'footer.link.cookies' | translate}}
  • diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index f75eb77e2e..e6fd49608f 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -1,9 +1,21 @@ + + -
    {{ content | translate }}
    +
    + + + {{elem.text}} + + + {{ elem }} + + + +
    ; - @Input() content: string; - @Input() tooltipPlacement: PlacementArray; - @Input() iconPlacement: PlacementDir; + @Input() tooltipPlacement?: PlacementArray; + @Input() iconPlacement?: PlacementDir; + @Input() dontParseLinks?: boolean; - constructor() { } + // TODO: dependent on evaluation order of input setters? + parsedContent$: Observable<(string | {href: string, text: string})[]> = observableOf([]); + @Input() set content(content : string) { + this.parsedContent$ = this.translateService.get(content).pipe( + map(this.dontParseLinks + ? ((text: string) => [text]) + : this.parseLinks) + ); + } + + constructor(private translateService: TranslateService) { } + + /* + * Parses Markdown-style links, splitting up a given text + * into link-free pieces of text and objects of the form + * {href: string, text: string} (which represent links). + * This function makes no effort to check whether the href is a + * correct URL. Currently this function does not support escape + * characters: its behavior when given a string containing square + * brackets that do not deliminate a link is undefined. + * Regular parentheses outside of links do work, however. + * + * For example: + * parseLinks("This is text, [this](https://google.com) is a link, and [so is this](https://youtube.com)") + * = + * [ "This is text, ", + * {href: "https://google.com", text: "this"}, + * " is a link, and ", + * {href: "https://youtube.com", text: "so is this"} + * ] + */ + private parseLinks(content: string): (string | {href: string, text: string})[] { + // Implementation note: due to unavailability of `matchAll` method on strings, + // separate "split" and "parse" steps are needed. + + // We use splitRegexp (the outer `match` call) to split the text + // into link-free pieces of text (matched by /[^\[]+/) and pieces + // of text of the form "[some link text](some.link.here)" (matched + // by /\[([^\]]*)\]\(([^\)]*)\)/) + const splitRegexp = /[^\[]+|\[([^\]]*)\]\(([^\)]*)\)/g; + + // Once the array is split up in link-representing strings and + // non-link-representing strings, we use parseRegexp (the inner + // `match` call) to transform the link-representing strings into + // {href: string, text: string} objects. + const parseRegexp = /^\[([^\]]*)\]\(([^\)]*)\)$/; + + return content.match(splitRegexp).map((substring: string) => { + const match = substring.match(parseRegexp); + return match === null + ? substring + : ({href: match[2], text: match[1]}); + }); + } } + + + diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 2473b6505d..4ffa4d24d6 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -9,10 +9,21 @@ export type ContextHelpDirectiveInput = { iconPlacement?: PlacementDir } +/* + * Directive to add a clickable tooltip icon to an element. + * The tooltip icon's position is configurable ('left' or 'right') + * and so is the position of the tooltip itself (PlacementArray). + */ @Directive({ selector: '[dsContextHelp]', }) export class ContextHelpDirective implements OnChanges { + /* + * Expects an object with the following fields: + * - content: a string referring to an entry in the i18n files + * - tooltipPlacement: a PlacementArray describing where the tooltip should expand, relative to the tooltip icon + * - iconPlacement: a string 'left' or 'right', describing where the tooltip icon should be placed, relative to the element + */ @Input() dsContextHelp: string | ContextHelpDirectiveInput; protected wrapper: ComponentRef; diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index c9d9a32699..4151e4202d 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -4164,6 +4164,6 @@ "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.", + "context-help.multi-para.test": "Lorem ipsum dolor [sit amet](https://google.com), consectetur adipiscing [elit](https://youtube.com). 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.", } From c158fd18c9b26278f528bc4001a39e8c377fd5ee Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Mon, 19 Dec 2022 17:05:26 +0100 Subject: [PATCH 04/30] 97399 Documentation --- .../context-help-wrapper.component.html | 3 --- .../context-help-wrapper.component.ts | 20 +++++++++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index e6fd49608f..939ad8323c 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -1,5 +1,3 @@ - -
    @@ -10,7 +8,6 @@ {{ elem }} -

    500

    -

    {{"500.page-internal-server-error" | translate}}

    +

    {{"500.page-internal-server-error" | translate}}


    {{"500.help" | translate}}


    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 index 1792425798..0ef535bf95 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -53,7 +53,7 @@ export class ContextHelpWrapperComponent { * into link-free pieces of text and objects of the form * {href: string, text: string} (which represent links). * This function makes no effort to check whether the href is a - * correct URL. Currently this function does not support escape + * correct URL. Currently, this function does not support escape * characters: its behavior when given a string containing square * brackets that do not deliminate a link is undefined. * Regular parentheses outside of links do work, however. @@ -66,7 +66,7 @@ export class ContextHelpWrapperComponent { * " is a link, and ", * {href: "https://youtube.com", text: "so is this"} * ] - */ + */ private parseLinks(content: string): (string | {href: string, text: string})[] { // Implementation note: due to unavailability of `matchAll` method on strings, // separate "split" and "parse" steps are needed. @@ -93,4 +93,4 @@ export class ContextHelpWrapperComponent { } - + diff --git a/src/app/shared/context-help.directive.spec.ts b/src/app/shared/context-help.directive.spec.ts index f00fb9d355..35770b6038 100644 --- a/src/app/shared/context-help.directive.spec.ts +++ b/src/app/shared/context-help.directive.spec.ts @@ -1,8 +1,65 @@ -import { ContextHelpDirective } from './context-help.directive'; +import { Component, DebugElement, Input } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { of as observableOf, Observable } from 'rxjs'; +import { ContextHelpDirective, ContextHelpDirectiveInput } from './context-help.directive'; +import { TranslateService } from '@ngx-translate/core'; +import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; +import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + template: `
    some text
    ` +}) +class TestComponent { + @Input() content = ''; + contextHelpParams(): ContextHelpDirectiveInput { + return { + content: this.content + }; + } +} + +// tslint:disable-next-line:max-classes-per-file +class MockTranslateService { + messages: {[index: string]: string} = { + lorem: 'lorem ipsum dolor sit amet', + linkTest: 'This is text, [this](https://dspace.lyrasis.org) is a link, and [so is this](https://google.com)' + }; + + get(key: string): Observable { + return observableOf(this.messages[key]); + } +} describe('ContextHelpDirective', () => { - it('should create an instance', () => { - const directive = new ContextHelpDirective(); - expect(directive).toBeTruthy(); + let component: TestComponent; + let fixture: ComponentFixture; + // let el: DebugElement; + // let translateService: TranslateService; + + beforeEach(() => { + console.log('Anyone hear that?'); + fixture = TestBed.configureTestingModule({ + imports: [NgbTooltipModule], + providers: [ + { provide: TranslateService, useClass: MockTranslateService } + ], + declarations: [TestComponent, ContextHelpWrapperComponent, ContextHelpDirective] + }).createComponent(TestComponent); + component = fixture.componentInstance; + }); + + it('should add the tooltip icon', () => { + component.content = 'lorem'; + fixture.detectChanges(); + + expect(component).toBeDefined(); + const [wrapper] = fixture.nativeElement.children; + const [i, div] = wrapper.children; + expect(wrapper.tagName).toBe('DS-CONTEXT-HELP-WRAPPER'); + expect(i.tagName).toBe('I'); + expect(div.tagName).toBe('DIV'); + expect(div.innerHTML).toBe('some text'); + i.click(); // TODO: triggers a type error }); }); diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 4ffa4d24d6..1d8bcccfa7 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -3,10 +3,10 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; 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 +export interface ContextHelpDirectiveInput { + content: string; + tooltipPlacement?: PlacementArray; + iconPlacement?: PlacementDir; } /* From c156e1ca6f57c9c914a772e349ea8182ff54ad73 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 11:43:15 +0100 Subject: [PATCH 06/30] 97732 Context help model, actions and reducer --- src/app/shared/context-help.actions.ts | 81 +++++++++++++++++++++ src/app/shared/context-help.model.ts | 4 + src/app/shared/context-help.reducer.ts | 47 ++++++++++++ src/app/shared/context-help.service.spec.ts | 16 ++++ src/app/shared/context-help.service.ts | 33 +++++++++ 5 files changed, 181 insertions(+) create mode 100644 src/app/shared/context-help.actions.ts create mode 100644 src/app/shared/context-help.model.ts create mode 100644 src/app/shared/context-help.reducer.ts create mode 100644 src/app/shared/context-help.service.spec.ts create mode 100644 src/app/shared/context-help.service.ts diff --git a/src/app/shared/context-help.actions.ts b/src/app/shared/context-help.actions.ts new file mode 100644 index 0000000000..2bd8b6a163 --- /dev/null +++ b/src/app/shared/context-help.actions.ts @@ -0,0 +1,81 @@ +import { Action } from '@ngrx/store'; +import { type } from './ngrx/type'; +import { ContextHelpModel } from './context-help.model'; + +export const ContextHelpActionTypes = { + 'CONTEXT_HELP_TOGGLE_ICONS': type('dspace/context-help/CONTEXT_HELP_TOGGLE_ICONS'), + 'CONTEXT_HELP_ADD': type('dspace/context-help/CONTEXT_HELP_ADD'), + 'CONTEXT_HELP_REMOVE': type('dspace/context-help/CONTEXT_HELP_REMOVE'), + 'CONTEXT_HELP_TOGGLE_TOOLTIP': type('dspace/context-help/CONTEXT_HELP_TOGGLE_TOOLTIP'), + 'CONTEXT_HELP_SHOW_TOOLTIP': type('dspace/context-help/CONTEXT_HELP_SHOW_TOOLTIP'), + 'CONTEXT_HELP_HIDE_TOOLTIP' : type('dspace/context-help/CONTEXT_HELP_HIDE_TOOLTIP'), +}; + +/** + * Toggles the visibility of all context help icons. + */ +export class ContextHelpToggleIconsAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS; +} + +/** + * Registers a new context help icon to the store. + */ +export class ContextHelpAddAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_ADD; + model: ContextHelpModel; + + constructor (model: ContextHelpModel) { + this.model = model; + } +} + +/** + * Removes a context help icon from the store. + */ +export class ContextHelpRemoveAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_REMOVE; + id: string; + + constructor(id: string) { + this.id = id; + } +} + +export abstract class ContextHelpTooltipAction implements Action { + type; + id: string; + + constructor(id: string) { + this.id = id; + } +} + +/** + * Toggles the tooltip of a single context help icon. + */ +export class ContextHelpToggleTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_TOOLTIP; +} + +/** + * Shows the tooltip of a single context help icon. + */ +export class ContextHelpShowTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_SHOW_TOOLTIP; +} + +/** + * Hides the tooltip of a single context help icon. + */ +export class ContextHelpHideTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_HIDE_TOOLTIP; +} + +export type ContextHelpAction + = ContextHelpToggleIconsAction + | ContextHelpAddAction + | ContextHelpRemoveAction + | ContextHelpToggleTooltipAction + | ContextHelpShowTooltipAction + | ContextHelpHideTooltipAction; diff --git a/src/app/shared/context-help.model.ts b/src/app/shared/context-help.model.ts new file mode 100644 index 0000000000..4b2b344f60 --- /dev/null +++ b/src/app/shared/context-help.model.ts @@ -0,0 +1,4 @@ +export class ContextHelpModel { + id: string; + tooltipVisible?: boolean = false; +} diff --git a/src/app/shared/context-help.reducer.ts b/src/app/shared/context-help.reducer.ts new file mode 100644 index 0000000000..b5f683956f --- /dev/null +++ b/src/app/shared/context-help.reducer.ts @@ -0,0 +1,47 @@ +import { ContextHelpModel } from './context-help.model'; +import { ContextHelpAction, ContextHelpActionTypes } from './context-help.actions'; + +export type ContextHelpModels = { + [id: string]: ContextHelpModel; +}; + +export interface ContextHelpState { + allIconsVisible: boolean; + models: ContextHelpModels; +} + +export function contextHelpReducer(state: ContextHelpState, action: ContextHelpAction): ContextHelpState { + switch (action.type) { + case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS: { + return {...state, allIconsVisible: true}; + } + case ContextHelpActionTypes.CONTEXT_HELP_ADD: { + const newModels = {...state.models, [action.model.id]: action.model}; + return {...state, models: newModels}; + } + case ContextHelpActionTypes.CONTEXT_HELP_REMOVE: { + const {[action.id]: _, ...remainingModels} = state.models; + return {...state, models: remainingModels}; + } + case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, v => !v); + } + case ContextHelpActionTypes.CONTEXT_HELP_SHOW_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, _ => true); + } + case ContextHelpActionTypes.CONTEXT_HELP_HIDE_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, _ => false); + } + default: { + return state; + } + } +} + +function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean) + : ContextHelpState { + const {[id]: matchingModel, ...otherModels} = state.models; + const modifiedModel = {...matchingModel, tooltipVisible: modify(matchingModel.tooltipVisible)}; + const newModels = {...otherModels, [id]: modifiedModel}; + return {...state, models: newModels}; +} diff --git a/src/app/shared/context-help.service.spec.ts b/src/app/shared/context-help.service.spec.ts new file mode 100644 index 0000000000..d2d29121b0 --- /dev/null +++ b/src/app/shared/context-help.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ContextHelpService } from './context-help.service'; + +describe('ContextHelpService', () => { + let service: ContextHelpService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ContextHelpService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts new file mode 100644 index 0000000000..071308c713 --- /dev/null +++ b/src/app/shared/context-help.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { ContextHelpModel } from './context-help.model'; + +@Injectable({ + providedIn: 'root' +}) +export class ContextHelpService { + constructor() { } + + toggleIcons() { + + } + + add(contextHelp: ContextHelpModel) { + + } + + remove(id: string) { + + } + + showTooltip(id: string) { + + } + + hideTooltip(id: string) { + + } + + toggleTooltip(id: string) { + + } +} From 5ba45cb0fac564bfd701a92da6824b831ada0976 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 15:54:09 +0100 Subject: [PATCH 07/30] 97732 Context help service, changes to directive and component --- src/app/app.reducer.ts | 5 +- .../page-internal-server-error.component.html | 2 +- .../context-help-wrapper.component.html | 8 +- .../context-help-wrapper.component.ts | 75 +++++++++++++-- src/app/shared/context-help.actions.ts | 6 +- src/app/shared/context-help.directive.ts | 48 +++++++--- src/app/shared/context-help.model.ts | 4 +- src/app/shared/context-help.reducer.ts | 11 ++- src/app/shared/context-help.service.ts | 95 ++++++++++++++++--- 9 files changed, 206 insertions(+), 48 deletions(-) diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts index 5bd4f745d9..e842c0efd3 100644 --- a/src/app/app.reducer.ts +++ b/src/app/app.reducer.ts @@ -50,6 +50,7 @@ import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer'; import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer'; import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer'; import { correlationIdReducer } from './correlation-id/correlation-id.reducer'; +import { contextHelpReducer, ContextHelpState } from './shared/context-help.reducer'; export interface AppState { router: fromRouter.RouterReducerState; @@ -71,6 +72,7 @@ export interface AppState { epeopleRegistry: EPeopleRegistryState; groupRegistry: GroupRegistryState; correlationId: string; + contextHelp: ContextHelpState; } export const appReducers: ActionReducerMap = { @@ -92,7 +94,8 @@ export const appReducers: ActionReducerMap = { communityList: CommunityListReducer, epeopleRegistry: ePeopleRegistryReducer, groupRegistry: groupRegistryReducer, - correlationId: correlationIdReducer + correlationId: correlationIdReducer, + contextHelp: contextHelpReducer, }; export const routerStateSelector = (state: AppState) => state.router; diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html index 595fd9961b..bb43cdc678 100644 --- a/src/app/page-internal-server-error/page-internal-server-error.component.html +++ b/src/app/page-internal-server-error/page-internal-server-error.component.html @@ -1,6 +1,6 @@

    500

    -

    {{"500.page-internal-server-error" | translate}}

    +

    {{"500.page-internal-server-error" | translate}}


    {{"500.help" | translate}}


    diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index 939ad8323c..03fc46c172 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -10,12 +10,16 @@
    - + #tooltip="ngbTooltip" + (click)="onClick()"> 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 index 0ef535bf95..e4e22d7ebc 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -1,11 +1,16 @@ -import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { Component, Input, OnInit, TemplateRef, OnDestroy, AfterViewInit, ViewChild } from '@angular/core'; import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; import { TranslateService } from '@ngx-translate/core'; -import { Observable, of as observableOf } from 'rxjs'; +import { Observable, of as observableOf, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import { PlacementDir } from './placement-dir.model'; +import content from '*.scss'; +import { ContextHelpService } from '../context-help.service'; +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; +import { hasValueOperator } from '../empty.util'; +import { ContextHelp } from '../context-help.model'; -/* +/** * This component renders an info icon next to the wrapped element which * produces a tooltip when clicked. */ @@ -14,28 +19,39 @@ import { PlacementDir } from './placement-dir.model'; templateUrl: './context-help-wrapper.component.html', styleUrls: ['./context-help-wrapper.component.scss'], }) -export class ContextHelpWrapperComponent { - /* +export class ContextHelpWrapperComponent implements OnInit, AfterViewInit, OnDestroy { + /** * Template reference for the wrapped element. */ @Input() templateRef: TemplateRef; - /* + /** + * Identifier for the context help tooltip. + */ + @Input() id: string; + + /** * Indicate where the tooltip should show up, relative to the info icon. */ @Input() tooltipPlacement?: PlacementArray; - /* + /** * Indicate whether the info icon should appear to the left or to * the right of the wrapped element. */ @Input() iconPlacement?: PlacementDir; - /* + /** * If true, don't process text to render links. */ @Input() dontParseLinks?: boolean; + @ViewChild('tooltip', { static: false }) tooltip: NgbTooltip; + + shouldShowIcon$: Observable; + + private subs: Subscription[] = []; + // TODO: dependent on evaluation order of input setters? parsedContent$: Observable<(string | {href: string, text: string})[]> = observableOf([]); @Input() set content(content : string) { @@ -46,9 +62,48 @@ export class ContextHelpWrapperComponent { ); } - constructor(private translateService: TranslateService) { } + constructor( + private translateService: TranslateService, + private contextHelpService: ContextHelpService + ) { } - /* + ngOnInit() { + this.shouldShowIcon$ = this.contextHelpService.shouldShowIcons$(); + } + + ngAfterViewInit() { + this.subs = [ + this.contextHelpService.getContextHelp$(this.id) + .pipe(hasValueOperator()) + .subscribe((ch: ContextHelp) => { + if (ch.isTooltipVisible && !this.tooltip.isOpen()) { + this.tooltip.open(); + } else if (!ch.isTooltipVisible && this.tooltip.isOpen()) { + this.tooltip.close() + } + }), + + this.tooltip.shown.subscribe(() => { + this.contextHelpService.showTooltip(this.id); + }), + + this.tooltip.hidden.subscribe(() => { + this.contextHelpService.hideTooltip(this.id); + }) + ]; + } + + ngOnDestroy() { + for (let sub of this.subs) { + sub.unsubscribe(); + } + } + + onClick() { + this.contextHelpService.toggleTooltip(this.id); + } + + /** * Parses Markdown-style links, splitting up a given text * into link-free pieces of text and objects of the form * {href: string, text: string} (which represent links). diff --git a/src/app/shared/context-help.actions.ts b/src/app/shared/context-help.actions.ts index 2bd8b6a163..5f985c2f73 100644 --- a/src/app/shared/context-help.actions.ts +++ b/src/app/shared/context-help.actions.ts @@ -1,6 +1,6 @@ import { Action } from '@ngrx/store'; import { type } from './ngrx/type'; -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; export const ContextHelpActionTypes = { 'CONTEXT_HELP_TOGGLE_ICONS': type('dspace/context-help/CONTEXT_HELP_TOGGLE_ICONS'), @@ -23,9 +23,9 @@ export class ContextHelpToggleIconsAction implements Action { */ export class ContextHelpAddAction implements Action { type = ContextHelpActionTypes.CONTEXT_HELP_ADD; - model: ContextHelpModel; + model: ContextHelp; - constructor (model: ContextHelpModel) { + constructor (model: ContextHelp) { this.model = model; } } diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 1d8bcccfa7..89e283715a 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -1,15 +1,28 @@ -import { ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Input, OnChanges, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; +import { + ComponentFactoryResolver, + ComponentRef, + Directive, + ElementRef, + Input, + OnChanges, + OnInit, + TemplateRef, + ViewContainerRef, + OnDestroy +} from '@angular/core'; import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; import { PlacementDir } from './context-help-wrapper/placement-dir.model'; +import { ContextHelpService } from './context-help.service'; export interface ContextHelpDirectiveInput { content: string; + id: string; tooltipPlacement?: PlacementArray; iconPlacement?: PlacementDir; } -/* +/** * Directive to add a clickable tooltip icon to an element. * The tooltip icon's position is configurable ('left' or 'right') * and so is the position of the tooltip itself (PlacementArray). @@ -17,14 +30,15 @@ export interface ContextHelpDirectiveInput { @Directive({ selector: '[dsContextHelp]', }) -export class ContextHelpDirective implements OnChanges { - /* +export class ContextHelpDirective implements OnChanges, OnDestroy { + /** * Expects an object with the following fields: * - content: a string referring to an entry in the i18n files * - tooltipPlacement: a PlacementArray describing where the tooltip should expand, relative to the tooltip icon * - iconPlacement: a string 'left' or 'right', describing where the tooltip icon should be placed, relative to the element */ - @Input() dsContextHelp: string | ContextHelpDirectiveInput; + @Input() dsContextHelp: ContextHelpDirectiveInput; + mostRecentId: string | undefined = undefined; protected wrapper: ComponentRef; @@ -32,19 +46,31 @@ export class ContextHelpDirective implements OnChanges { private templateRef: TemplateRef, private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver, + private contextHelpService: ContextHelpService ){} ngOnChanges() { - const input: ContextHelpDirectiveInput = typeof(this.dsContextHelp) === 'string' - ? {content: this.dsContextHelp} - : this.dsContextHelp; + this.clearMostRecentId(); + this.mostRecentId = this.dsContextHelp.id; + this.contextHelpService.add({id: this.dsContextHelp.id}); // TODO: tooltipVisible field const factory = this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent); this.wrapper = this.viewContainerRef.createComponent(factory); this.wrapper.instance.templateRef = this.templateRef; - this.wrapper.instance.content = input.content; - this.wrapper.instance.tooltipPlacement = input.tooltipPlacement; - this.wrapper.instance.iconPlacement = input.iconPlacement; + this.wrapper.instance.content = this.dsContextHelp.content; + this.wrapper.instance.id = this.dsContextHelp.id; + this.wrapper.instance.tooltipPlacement = this.dsContextHelp.tooltipPlacement; + this.wrapper.instance.iconPlacement = this.dsContextHelp.iconPlacement; + } + + ngOnDestroy() { + this.clearMostRecentId(); + } + + private clearMostRecentId(): void { + if (this.mostRecentId !== undefined) { + this.contextHelpService.remove(this.mostRecentId); + } } } diff --git a/src/app/shared/context-help.model.ts b/src/app/shared/context-help.model.ts index 4b2b344f60..9c024dbf1f 100644 --- a/src/app/shared/context-help.model.ts +++ b/src/app/shared/context-help.model.ts @@ -1,4 +1,4 @@ -export class ContextHelpModel { +export class ContextHelp { id: string; - tooltipVisible?: boolean = false; + isTooltipVisible?: boolean = false; } diff --git a/src/app/shared/context-help.reducer.ts b/src/app/shared/context-help.reducer.ts index b5f683956f..b705c797ac 100644 --- a/src/app/shared/context-help.reducer.ts +++ b/src/app/shared/context-help.reducer.ts @@ -1,8 +1,8 @@ -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; import { ContextHelpAction, ContextHelpActionTypes } from './context-help.actions'; export type ContextHelpModels = { - [id: string]: ContextHelpModel; + [id: string]: ContextHelp; }; export interface ContextHelpState { @@ -10,7 +10,10 @@ export interface ContextHelpState { models: ContextHelpModels; } -export function contextHelpReducer(state: ContextHelpState, action: ContextHelpAction): ContextHelpState { +// TODO +const initialState: ContextHelpState = {allIconsVisible: true, models: {}}; + +export function contextHelpReducer(state: ContextHelpState = initialState, action: ContextHelpAction): ContextHelpState { switch (action.type) { case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS: { return {...state, allIconsVisible: true}; @@ -41,7 +44,7 @@ export function contextHelpReducer(state: ContextHelpState, action: ContextHelpA function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean) : ContextHelpState { const {[id]: matchingModel, ...otherModels} = state.models; - const modifiedModel = {...matchingModel, tooltipVisible: modify(matchingModel.tooltipVisible)}; + const modifiedModel = {...matchingModel, isTooltipVisible: modify(matchingModel.isTooltipVisible)}; const newModels = {...otherModels, [id]: modifiedModel}; return {...state, models: newModels}; } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index 071308c713..7bbd1216e1 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -1,33 +1,100 @@ import { Injectable } from '@angular/core'; -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; +import { Store, createFeatureSelector, createSelector, select, MemoizedSelector } from '@ngrx/store'; +import { ContextHelpState } from './context-help.reducer'; +import { + ContextHelpToggleIconsAction, + ContextHelpAddAction, + ContextHelpRemoveAction, + ContextHelpShowTooltipAction, + ContextHelpHideTooltipAction, + ContextHelpToggleTooltipAction +} from './context-help.actions'; +import { Observable } from 'rxjs'; + +const contextHelpStateSelector = + createFeatureSelector('contextHelp'); +const allIconsVisibleSelector = createSelector( + contextHelpStateSelector, + (state: ContextHelpState): boolean => state.allIconsVisible +); +const contextHelpSelector = + (id: string): MemoizedSelector => createSelector( + contextHelpStateSelector, + (state: ContextHelpState) => state.models[id] + ); @Injectable({ providedIn: 'root' }) export class ContextHelpService { - constructor() { } + constructor(private store: Store) { } + /** + * Observable keeping track of whether context help icons should be visible globally. + */ + shouldShowIcons$(): Observable { + return this.store.pipe(select(allIconsVisibleSelector)); + } + + /** + * Observable that tracks the state for a specific context help icon. + * + * @param id: id of the context help icon. + */ + getContextHelp$(id: string): Observable { + return this.store.pipe(select(contextHelpSelector(id))); + } + + /** + * Toggles the visibility of all context help icons. + */ toggleIcons() { - + this.store.dispatch(new ContextHelpToggleIconsAction()); } - add(contextHelp: ContextHelpModel) { - + /** + * Registers a new context help icon to the store. + * + * @param contextHelp: the initial state of the new help icon. + */ + add(contextHelp: ContextHelp) { + this.store.dispatch(new ContextHelpAddAction(contextHelp)); } + /** + * Removes a context help icon from the store. + * + * @id: the id of the help icon to be removed. + */ remove(id: string) { - - } - - showTooltip(id: string) { - - } - - hideTooltip(id: string) { - + this.store.dispatch(new ContextHelpRemoveAction(id)); } + /** + * Toggles the tooltip of a single context help icon. + * + * @id: the id of the help icon for which the visibility will be toggled. + */ toggleTooltip(id: string) { + this.store.dispatch(new ContextHelpToggleTooltipAction(id)); + } + /** + * Shows the tooltip of a single context help icon. + * + * @id: the id of the help icon that will be made visible. + */ + showTooltip(id: string) { + this.store.dispatch(new ContextHelpShowTooltipAction(id)); + } + + /** + * Hides the tooltip of a single context help icon. + * + * @id: the id of the help icon that will be made invisible. + */ + hideTooltip(id: string) { + this.store.dispatch(new ContextHelpHideTooltipAction(id)); } } From e16a3edf785ec23dd77ab3e4dde579239e3bbdfd Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 17:02:39 +0100 Subject: [PATCH 08/30] 97732 ContextHelpToggleComponent added --- src/app/app.module.ts | 2 ++ .../context-help-toggle.component.html | 8 ++++++ .../context-help-toggle.component.scss | 8 ++++++ .../context-help-toggle.component.spec.ts | 25 +++++++++++++++++++ .../context-help-toggle.component.ts | 22 ++++++++++++++++ src/app/header/header.component.html | 1 + .../page-internal-server-error.component.html | 1 + .../context-help-wrapper.component.ts | 5 ++-- src/app/shared/context-help.reducer.ts | 2 +- 9 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.html create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.scss create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.spec.ts create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 67bccd9105..189d203256 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -58,6 +58,7 @@ import { ThemedPageInternalServerErrorComponent } from './page-internal-server-e import { PageInternalServerErrorComponent } from './page-internal-server-error/page-internal-server-error.component'; import { APP_CONFIG, AppConfig } from '../config/app-config.interface'; +import { ContextHelpToggleComponent } from './header/context-help-toggle/context-help-toggle.component'; export function getConfig() { return environment; @@ -167,6 +168,7 @@ const DECLARATIONS = [ RootComponent, ThemedRootComponent, HeaderComponent, + ContextHelpToggleComponent, ThemedHeaderComponent, HeaderNavbarWrapperComponent, ThemedHeaderNavbarWrapperComponent, diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.html b/src/app/header/context-help-toggle/context-help-toggle.component.html new file mode 100644 index 0000000000..caf1bf5daf --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.html @@ -0,0 +1,8 @@ + diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss new file mode 100644 index 0000000000..ba34ba8b89 --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss @@ -0,0 +1,8 @@ +.ds-context-help-toggle { + color: var(--ds-header-icon-color); + background-color: var(--ds-header-bg); +} + +.ds-context-help-toggle:hover { + color: var(--ds-header-icon-color-hover); +} diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts new file mode 100644 index 0000000000..16d82f1a0a --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContextHelpToggleComponent } from './context-help-toggle.component'; + +describe('ContextHelpToggleComponent', () => { + let component: ContextHelpToggleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContextHelpToggleComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContextHelpToggleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.ts b/src/app/header/context-help-toggle/context-help-toggle.component.ts new file mode 100644 index 0000000000..cc5e779d6e --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { ContextHelpService } from '../../shared/context-help.service'; + +@Component({ + selector: 'ds-context-help-toggle', + templateUrl: './context-help-toggle.component.html', + styleUrls: ['./context-help-toggle.component.scss'] +}) +export class ContextHelpToggleComponent implements OnInit { + + constructor( + private contextHelpService: ContextHelpService + ) { } + + ngOnInit(): void { + } + + onClick() { + console.log('toggling icons'); + this.contextHelpService.toggleIcons(); + } +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index c7b979d266..d04f095156 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -8,6 +8,7 @@ \ No newline at end of file + From 5a1e57408fd546df71d500981c3fb2bd3274be22 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Thu, 5 Jan 2023 13:21:50 +0100 Subject: [PATCH 10/30] 97732 Fixed some display issues --- .../page-internal-server-error.component.html | 7 ++++++- .../context-help-wrapper.component.html | 2 +- .../context-help-wrapper.component.scss | 19 ++++++++++--------- src/styles/_custom_variables.scss | 1 + 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html index bb43cdc678..a60624dbd5 100644 --- a/src/app/page-internal-server-error/page-internal-server-error.component.html +++ b/src/app/page-internal-server-error/page-internal-server-error.component.html @@ -1,6 +1,11 @@

    500

    -

    {{"500.page-internal-server-error" | translate}}

    +

    + {{"500.page-internal-server-error" | translate}} +


    {{"500.help" | translate}}


    diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index 03fc46c172..b031d0f42d 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -18,7 +18,7 @@ [placement]="tooltipPlacement" autoClose="outside" triggers="manual" - container="'body'" + container="body" #tooltip="ngbTooltip" (click)="onClick()">     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 index 3bf9c7bba8..d28883cae3 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss @@ -3,14 +3,14 @@ } .ds-context-help-icon { - position: absolute; - 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%; + position: absolute; + 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 { @@ -22,5 +22,6 @@ } ::ng-deep .tooltip-inner { - width: 300px; + width: var(--ds-context-help-tooltip-width); + max-width: var(--ds-context-help-tooltip-width); } diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 2013562dec..4098bb6417 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -88,4 +88,5 @@ --ds-context-x-offset: -16px; --ds-context-help-icon-size: 16px; + --ds-context-help-tooltip-width: 300px; } From 84c053575f0a9c2eb019a9cab0332f861d94cec5 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Thu, 5 Jan 2023 14:50:25 +0100 Subject: [PATCH 11/30] 97732 Some example tooltips for the edit group page --- .../group-form/group-form.component.html | 11 ++++++++++- .../members-list/members-list.component.html | 12 ++++++++++-- .../subgroup-list/subgroups-list.component.html | 11 +++++++++-- src/app/footer/footer.component.html | 7 +------ .../top-level-community-list.component.html | 5 +---- .../page-internal-server-error.component.html | 5 +---- src/assets/i18n/en.json5 | 6 ++++-- 7 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html index 0fc5a574b7..c0bcc854e7 100644 --- a/src/app/access-control/group-registry/group-form/group-form.component.html +++ b/src/app/access-control/group-registry/group-form/group-form.component.html @@ -9,7 +9,16 @@ -

    {{messagePrefix + '.head.edit' | translate}}

    +

    + {{messagePrefix + '.head.edit' | translate}} +

    {{messagePrefix + '.head' | translate}}

    - +