step.component.html 2.09 KB
Newer Older
1 2
<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
[ngClass]="{'isActive': (pieceDetailsService.piece == step ? true : false)}">
Romain DELEAU's avatar
Romain DELEAU committed
3 4 5 6
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">
7 8 9 10 11 12 13 14 15 16 17 18
        <mat-icon fontIcon="arrow_back_ios" (click)="moveStep('left')" *ngIf="index > 0"
        matTooltip="Décaler la tuile vers la gauche."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
        matTooltip="Effacer le contenu de cette tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
        matTooltip="Supprimer la tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="arrow_forward_ios" (click)="moveStep('right')"
        matTooltip="Décaler la tuile vers la droite."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
Romain DELEAU's avatar
Romain DELEAU committed
19 20 21
    </div>

    <div class="piece-form">
Romain DELEAU's avatar
Romain DELEAU committed
22
        <div class="piece-form-title">Étape {{index+1}}</div>
Romain DELEAU's avatar
Romain DELEAU committed
23
        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="step.comments.length > 0"></mat-icon>
24
        <textarea [(ngModel)]="step.description" [style.background-image]="index == FirstStepIndex() ? urlIcon : ''"></textarea>
Romain DELEAU's avatar
Romain DELEAU committed
25 26
        <div class="piece-form-duration">
            <label for="duration">Durée</label>
Romain DELEAU's avatar
Romain DELEAU committed
27
            <input name="duration" type="number" [(ngModel)]="step.duration" (input)="durationChange()"/>
28
            <select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
Romain DELEAU's avatar
Romain DELEAU committed
29 30 31 32 33 34 35
                <option value="UT">UT</option>
                <option value="min">min</option>
                <option value="tours">tours</option>
            </select>
        </div>
    </div>
</div>