markup-text-buttons-component.component.html
b182f70473a1master

markup-text-buttons-component.component.html
View Options

			<!-- just a normal button if there is only one semantic within the text segment -->
			<button mat-button
			*ngIf="segment[3].length <= 1"
			class = "annotation-button"
			[matMenuTriggerFor]="simpleMenu">
			<span class = "semantic-markup">{{segment[1]}}</span>
			</button>
			<!-- If there is a semantic overlap, e.g. the segment is polysemantic, Then the
			style is defined by class "polysemantic" and onClick opens a menu with a submenues -->
			<button mat-button
			*ngIf="segment[3].length > 1"
			class = "annotation-button"
			[matMenuTriggerFor]="polyMenuOpen"
			[matMenuTriggerData]= segment[3]>
			<span class = "semantic-markup polysemantic">{{segment[1]}}</span>
			</button>
			<!-- 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"></app-submenu-component>
			</button>
			</mat-menu>