align step name/icon, add title attribute for long/truncated step names
popoverTitle="Connection Properties"
outsideClick="true"
container="body">
- <i [class]="getIconClass()"
+ <i [ngClass]="getIconClass()"
*ngIf="step.stepKind === 'endpoint' && !step.connection"></i>
<img class="syn-icon-small"
*ngIf="step.stepKind === 'endpoint' && step.connection"
container="body"></span>
<div class="step-content">
- <div class="step-name">
+ <div class="step-name" title="{{ stepName }}">
{{ stepName }}
</div>
<!-- Default Steps -->
<div *ngSwitchDefault
[ngClass]="getParentActiveClass() + ' step-container'">
-
<!-- Step Heading -->
<div [ngClass]="getParentClass()"
(click)="goto('step-configure')">
+ <div class="step-content">
+ <div class="step-name" title="{{ stepName }}">
{{ stepName }}
-
+ </div>
+ <div class="step-icons">
<!-- Delete Icon -->
<i *ngIf="showDelete()"
class="fa fa-lg fa-trash pull-right"
[class.add-step-or-connection]="step.stepKind !== 'endpoint'"
(click)="deletePrompt(); $event.stopPropagation();"></i>
</div>
+ </div>
+ </div>
<!-- Step Sub Pages -->
<ul [collapse]="isCollapsed()"
</li>
</ul>
</div>
-
</div>
</div>
