Skip to content

Commit

Permalink
fixed problem with elapsing text in shortstyle mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@julianpoemp
julianpoemp committed Jun 3, 2018
1 parent 5189cb6 commit f3f3f0b
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 44 deletions.
1 change: 1 addition & 0 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,7 @@ export class AppComponent implements OnDestroy {
} else if (this.selectedOperation.state !== TaskState.FINISHED) {
this.selectedOperation.changeState(TaskState.READY);
}
this.proceedings.selectedOperation = undefined;
}

@HostListener('window:beforeunload', ['$event'])
Expand Down
6 changes: 5 additions & 1 deletion src/app/components/proceedings/proceedings.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
text-overflow: ellipsis;
overflow: hidden;
text-wrap: none;
max-width: 100px;
width: 100%;
white-space: nowrap;
}

Expand Down Expand Up @@ -135,4 +135,8 @@ table thead tr th:hover {
text-align: center;
margin-top: 10%;
color: rgba(104, 168, 255, 0.53)
}

.table-striped .tool-selected {
background-color: lightyellow;
}
88 changes: 55 additions & 33 deletions src/app/components/proceedings/proceedings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
</ng-container>
</ng-container>
<ng-container *ngIf="popover.operation === null && popover.task !== null && popover.task !== undefined">

{{popover.y}}
<ng-container *ngIf="popover.task.state === 'FINISHED'">
<!-- <a [href]="getMailToLink(popover.task)">Share results <i class="fa fa-envelope" aria-hidden="true"
style="color:cornflowerblue;"></i></a> -->
Expand Down Expand Up @@ -134,47 +134,57 @@

<tr appProceedingsRow style="cursor:pointer;" [ngClass]="{'selected': (isEntrySelected(entry))}">
<td *ngIf="entry.files !== undefined" (click)="onRowSelected(entry)"
[ngClass]="{
[ngStyle]="{
'max-width': (shortstyle) ? '150px' : 'auto'
}"
>
<div (mouseenter)="onTaskMouseEnter($event, entry, td)"
(mouseleave)="onTaskMouseLeave($event, entry)"
(mouseover)="onTaskMouseOver($event, entry)">
<div [ngClass]="{
'shorten': shortstyle
}">
<ng-container>
<i class="fa fa-file-audio-o"
aria-hidden="true"
[ngClass]="{
<ng-container>
<i class="fa fa-file-audio-o"
aria-hidden="true"
[ngClass]="{
green: (entry.state === 'FINISHED'),
red: (entry.state === 'ERROR'),
blue: (entry.state === 'PENDING' || entry.state === 'READY'),
yellow: (entry.state === 'PROCESSING')
}"></i>
</ng-container>
<span [ngClass]="{
'green': ((entry.files[0].extension === '.wav' && entry.files[0].file !== undefined) ||
(entry.operations[0].results.length > 0 && entry.operations[0].lastResult.online)),
</ng-container>
<span [ngClass]="{
'shorten': shortstyle,
'green': ((entry.files[0].extension === '.wav' && entry.files[0].file !== undefined)),
'yellow': ((entry.files[0].extension === '.wav' && entry.files[0].file === undefined) || entry.files[0].extension !== '.wav') && entry.operations[0].state !== 'FINISHED'
}" title="{{entry.files[0].attributes.originalFileName}}"
(mouseenter)="onTaskMouseEnter($event, entry)"
(mouseleave)="onTaskMouseLeave($event, entry)"
(mouseover)="onTaskMouseOver($event, entry)"> {{entry.files[0].name.replace('_annot', '') + '.wav'}}
> {{entry.files[0].name.replace('_annot', '') + '.wav'}}
</span>
<ng-container *ngIf=" entry.files.length > 1 || entry.files[0].extension !== '.wav'">
<ng-container *ngIf=" entry.files.length > 1 || entry.files[0].extension !== '.wav'">
<span class="badge" [ngClass]="{
'badge-info': getBadge(entry).type === 'info',
'badge-warning': getBadge(entry).type === 'warning'
}" (click)="onPreviewClick(entry.files[1])">
{{getBadge(entry).label}}
</span>
</ng-container>
</ng-container>
</div>
</div>
</td>

<td *ngIf="entry.files === undefined" [attr.colspan]="taskService.operations.length + 1"
(click)="onRowSelected(entry)" [ngClass]="{
'shorten': shortstyle
}">
<td [ngStyle]="{
'max-width': (shortstyle) ? '150px' : 'auto'
}"
*ngIf="entry.files === undefined" [attr.colspan]="taskService.operations.length + 1"
(click)="onRowSelected(entry)">
<ng-container>
<i class="fa fa-folder-open blue"
aria-hidden="true"></i>
</ng-container>
<span title="{{entry.foldername}}">
<span [ngClass]="{
'shorten': shortstyle
}" title="{{entry.foldername}}">
{{entry.foldername}}
</span>
<span *ngIf="entry.entries.length > 0">
Expand Down Expand Up @@ -214,22 +224,32 @@
</ng-container>
</tr>
<ng-container *ngIf="entry.files === undefined">
<tr *ngFor="let dirEntry of entry.entries" [ngClass]="{'selected': (isEntrySelected(dirEntry))}">
<td (click)="onRowSelected(dirEntry)" [ngClass]="{
'shorten': shortstyle
}">
<img style="height:20px;margin-right:3px;" src="./assets/directory.png"> <i
class="fa fa-file-audio-o" aria-hidden="true"
[ngClass]="{
<tr *ngFor="let dirEntry of entry.entries" [ngClass]="{
'tool-selected': ((selectedOperation !== undefined) && selectedOperation.task.id === dirEntry.id),
'selected': (isEntrySelected(dirEntry))
}"
>
<td [ngStyle]="{
'max-width': (shortstyle) ? '150px' : 'auto'
}"
(click)="onRowSelected(dirEntry)" #td
>
<div (mouseenter)="onTaskMouseEnter($event, dirEntry, td)"
(mouseleave)="onTaskMouseLeave($event, dirEntry)"
(mouseover)="onTaskMouseOver($event, dirEntry)">
<div [ngClass]="{
shorten: shortstyle
}">
<img style="height:20px;margin-right:3px;" src="./assets/directory.png"> <i
class="fa fa-file-audio-o" aria-hidden="true"
[ngClass]="{
green: (dirEntry.state === 'FINISHED'),
red: (dirEntry.state === 'ERROR'),
blue: (dirEntry.state === 'PENDING' || dirEntry.state === 'READY'),
yellow: (dirEntry.state === 'PROCESSING')
}"></i> <span
(mouseenter)="onTaskMouseEnter($event, dirEntry)"
(mouseleave)="onTaskMouseLeave($event, dirEntry)"
(mouseover)="onTaskMouseOver($event, dirEntry)"
[ngClass]="{
[ngClass]="{
'shorten': shortstyle,
'green': dirEntry.files[0].file !== undefined,
'yellow': (dirEntry.files[0].file === undefined && dirEntry.operations[0].results.length === 0)
}">
Expand All @@ -242,15 +262,17 @@
{{dirEntry.files[0].attributes?.originalFileName}}
</ng-container>
</span>
<ng-container *ngIf="dirEntry.files.length > 1">
<ng-container *ngIf="dirEntry.files.length > 1">
<span class="badge" [ngClass]="
{
'badge-info': getBadge(dirEntry).type === 'info',
'badge-warning': getBadge(dirEntry).type === 'warning'
}
" (click)="onPreviewClick(dirEntry.files[1])">
{{getBadge(dirEntry).label}}</span>
</ng-container>
</ng-container>
</div>
</div>
</td>
<td *ngFor="let operation of dirEntry.operations" style="text-align: center;" [ngClass]="{
'op-deactivated': !operation.enabled
Expand Down
11 changes: 7 additions & 4 deletions src/app/components/proceedings/proceedings.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,14 +419,17 @@ export class ProceedingsComponent implements OnInit, OnDestroy {
this.operationhover.emit();
}

onTaskMouseEnter($event, task: Task) {
onTaskMouseEnter($event, task: Task, td: HTMLTableDataCellElement) {
// show Popover for normal operations only
console.log($event);
const y = $event.layerY + 10;
this.popover.task = task;
this.popover.x = $event.offsetX + 60;
this.popover.x = $event.layerX + 10;
this.popover.width = 600;
this.popover.height = 320;
this.popover.pointer = ($event.layerY + this.popoverRef.height > window.innerHeight) ? 'bottom-left' : 'left';
this.popover.y = ($event.layerY + this.popoverRef.height > window.innerHeight) ? $event.layerY - this.popoverRef.height : $event.layerY;
this.popover.pointer = (y + this.popoverRef.height > window.innerHeight) ? 'bottom-left' : 'left';
this.popover.y = (y + this.popoverRef.height > window.innerHeight) ? y - this.popoverRef.height : y;
console.log(`set to ${this.popover.y}`);
this.togglePopover(true);

this.popover.operation = null;
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/results-table/results-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<i class="fa fa-file-text"></i>
</a>
<i *ngIf="elem.input.extension !== '.wav'" (click)="onPreviewClick(elem.input.file)" class="fa fa-eye"
style="cursor: pointer;"></i>
style="margin-left:3px;cursor: pointer;"></i>
</td>
<td *ngIf="!elem.input.available" style="border-right: 1px solid lightgray;"><i class="fa fa-unlink"
style="color:red;"></i>
Expand All @@ -38,7 +38,7 @@
<i class="fa fa-file-text" [ngStyle]="{ color: converter.converter.color}"></i>
</a>
<i (click)="onPreviewClick(converter.result.file)" class="fa fa-eye"
[ngStyle]="{ color: converter.converter.color}" style="cursor: pointer;"></i>
[ngStyle]="{ color: converter.converter.color}" style="cursor: pointer;margin-left:3px;"></i>
</ng-container>
</td>
</ng-container>
Expand Down
11 changes: 7 additions & 4 deletions src/app/obj/tasks/emu-operation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,13 @@ export class EmuOperation extends ToolOperation {
};

public getToolURL(): string {
const uploadOP = <UploadOperation> this.operations[0];
const audio = encodeURIComponent(uploadOP.wavFile.url);
const transcript = encodeURIComponent(this.previousOperation.lastResult.url);
return `https://ips-lmu.github.io/EMU-webApp/?audioGetUrl=${audio}&labelGetUrl=${transcript}&labelType=annotJSON`;
if (!isNullOrUndefined(this.previousOperation.lastResult)) {
const uploadOP = <UploadOperation> this.operations[0];
const audio = encodeURIComponent(uploadOP.wavFile.url);
const transcript = encodeURIComponent(this.previousOperation.lastResult.url);
return `https://ips-lmu.github.io/EMU-webApp/?audioGetUrl=${audio}&labelGetUrl=${transcript}&labelType=annotJSON`;
}
return ``;
}

public fromAny(operationObj: any, task: Task): Operation {
Expand Down
4 changes: 4 additions & 0 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,8 @@ tbody .fa.fa-arrow-up {

.yellow {
color: #ffc33b;
}

.tool-selected {
background-color: lightyellow;
}

0 comments on commit f3f3f0b

Please sign in to comment.