Homec4science
Diffusion svg-test-app (master) Browse

svg-test-app/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.html
6940a26ce785master

Last Change
Raw File

markup-text-icon.component.html
View Options

<span *ngIf="position === 'after'" [ngClass] = "segment[2]"> {{segment[1]}}</span>
<!-- opening a menu if there is only one semem within the text segment -->
<button mat-button
*ngIf="action === 'menu' && segment[3].length <= 1"
class = "annotation-button-icon"
[matMenuTriggerFor]="simpleMenu">
<mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
</button>
<!-- hyperlink if there is only one semem within the text segment -->
<button mat-button
*ngIf="action === 'external' && segment[3].length === 1"
class = "annotation-button-icon"
(click)="openLink(segment[3][0].link)">
<mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
</button>
<!-- If there is a semantic overlap, e.g. the segment is polysemantic, Then the
style is defined by class "polysemantic" and onClick opens always a menu with a submenues -->
<button mat-button
*ngIf="segment[3].length > 1"
class = "annotation-button-icon"
[matMenuTriggerFor]="polyMenuOpen">
<mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
</button>
<span *ngIf="position === 'before'" [ngClass] = "segment[2]"> {{segment[1]}}</span>
<!-- simple menu -->
<mat-menu #simpleMenu="matMenu">
<div mat-menu-item title = 'open resource "{{segment[3][0].link}}" in data browser'>open resource in data browser</div>
<div mat-menu-item title = 'edit text "{{segment[3][0].linkText}}"'>edit text</div>
<div mat-menu-item title = 'edit semantic annotation "{{segment[3][0].cssClass}}"'>edit semantic annotation "{{segment[3][0].cssClass}}"</div>
<div mat-menu-item title = 'delete semantic annotation "{{segment[3][0].cssClass}}"'>delete semantic annotation "{{segment[3][0].cssClass}}"</div>
</mat-menu>
<!-- submenu if polysemantic -->
<mat-menu #polyMenuOpen="matMenu" class="poly-menu">
<button mat-menu-item *ngFor="let item of segment[3], let i = index" (click)="$event.stopPropagation()" >
<app-submenu-component [item] = "item" [action]="action"></app-submenu-component>
</button>
</mat-menu>
c4science · Help