client/client/app/components/ngbTracksView/ngbTrack/ngbTrack.tpl.html

<div
        flex
        layout="row"
        layout-wrap="100"
        class="ngb-track-container"
        ng-class="{'collapsed': !ctrl.showTracksHeaders}"
        ng-show="ctrl.trackIsVisible"
>
    <div
            flex="100"
            class="ngb-track-header"
            layout="row"
            layout-align="start center"
            ng-mousedown="ctrl.onHeaderMouseDown($event)"
            ng-class="{'collapsed': !ctrl.showTracksHeaders }"
    >
        <input
                ng-if="ctrl.selectable"
                type="checkbox"
                dnd-nodrag
                ng-checked="ctrl.trackIsSelected"
                ng-click="ctrl.trackSelectionChanged($event)"
        />
        <div class="ngb-track-header-type" ng-if="ctrl.track.format !== 'MOTIFS'">{{ctrl.track.format}}</div>
        <input
                ngb-autofocus
                emit-focus="ctrl.nameInputVisible"
                spellcheck="false"
                dnd-nodrag
                class="ngb-track-header-file-input"
                ng-model="ctrl.customNameTemp"
                ng-show="ctrl.nameInputVisible"
                ng-style="ctrl.customNameTemp && ctrl.trackHeaderStyle"
                ng-Blur="ctrl.setCustomName(ctrl.customNameTemp)"
                ng-keydown="ctrl.handleNameInputKeydown($event)"
                placeholder="Enter new track name..."
        />
        <div
                dnd-nodrag
                class="ngb-track-header-file-name"
                ng-hide="ctrl.nameInputVisible"
                ng-click="ctrl.showTrackNameInput()"
                ng-style="ctrl.trackHeaderStyle"
        >
            {{ctrl.truncate(ctrl.customName || ctrl.trackName)}}
            <md-tooltip md-direction="top">
                {{ctrl.customName || ctrl.trackName}}
            </md-tooltip>
        </div>
        <div
                class="ngb-track-header-file-hint"
                ng-show="ctrl.showFileNameHint"
        >
            {{ctrl.truncate(ctrl.trackName)}}
            <md-tooltip md-direction="top">
                {{ctrl.trackName}}
            </md-tooltip>
        </div>
        <div class="ngb-track-error"
             ng-class="{'displayed': ctrl.trackInstance && ctrl.trackInstance.error}"
             dnd-nodrag>
            <ng-md-icon icon="error"
                        size="16"
                        class="ngb-track-error-icon"
            ></ng-md-icon>
            <md-tooltip md-direction="top">
                {{ctrl.trackInstance ? ctrl.trackInstance.error : ''}}
            </md-tooltip>
        </div>
        <ngb-track-settings style="flex: 1; overflow: hidden;"
                            ng-if="ctrl.trackInstance !== undefined && ctrl.trackInstance.getSettings"
                            settings="ctrl.trackInstance.getSettings()">
        </ngb-track-settings>
        <ngb-track-actions dnd-nodrag
                           ng-if="ctrl.trackInstance !== undefined && ctrl.trackInstance.actions"
                           actions="ctrl.trackInstance.actions">
        </ngb-track-actions>

        <div ng-style="{'visibility': ctrl.trackDataIsLoading ? 'visible' : 'hidden'}">
            <md-progress-circular md-mode="indeterminate" md-diameter="12"></md-progress-circular>
        </div>
        <div title="Hide Track" class="buttons-menu-track hide-track" dnd-nodrag>
            <md-button md-no-ink
                       ng-show="ctrl.showHideTrackButton"
                       class="md-icon-button track-button close"
                       ng-click="ctrl.hideTrack($event)"
                       ng-if="!ctrl.silentInteractions && ctrl.trackClosable"
                       aria-label="Hide Track">
                <ng-md-icon class="button-icon" icon="clear" size="16"></ng-md-icon>
            </md-button>
        </div>
    </div>

    <div class="ngb-track-header-floating md-raised md-button"
         ng-class="{'collapsed': ctrl.showTracksHeaders, 'reference': ctrl.isReference, 'opened': ctrl.minifiedMenuIsOpened}"
         ng-mouseleave="ctrl.onMinifiedHeaderMouseLeave()"
         ng-mouseover="ctrl.onMinifiedHeaderMouseOver()"
         layout="row">
        <ng-md-icon
                class="track-button mini button-icon"
                icon="format_line_spacing"
                size="16"
                style="cursor: move;"
        />
        <input
                ng-if="ctrl.selectable"
                type="checkbox"
                ng-model="ctrl.trackIsSelected"
                dnd-nodrag
        />
        <ngb-track-settings
                dnd-nodrag
                ng-if="ctrl.minifiedMenuIsOpened && ctrl.trackInstance !== undefined && ctrl.trackInstance.getSettings"
                style="flex: 1; overflow: hidden"
                settings="ctrl.trackInstance.getSettings()"
                track-controller="ctrl"
                on-menu-opened="::ctrl.onMenuOpened"
                on-menu-closed="::ctrl.onMenuClosed"
                on-handle="::ctrl.onHandleAction"></ngb-track-settings>
        <ngb-track-actions
                dnd-nodrag
                ng-if="ctrl.minifiedMenuIsOpened && ctrl.trackInstance !== undefined && ctrl.trackInstance.actions"
                actions="ctrl.trackInstance.actions"
                track-controller="ctrl"
                on-handle="::ctrl.onHandleAction"></ngb-track-actions>
        <div class="buttons-menu-track"
             ng-show="ctrl.isMinifiedMenuButtonVisible">
            <md-button md-no-ink
                       dnd-nodrag
                       class="md-icon-button track-button mini"
                       aria-label="Menu"
                       ng-click="ctrl.openOrCloseMinifiedMenu()">
                <ng-md-icon class="button-icon" icon="tune" size="16"></ng-md-icon>
            </md-button>
        </div>
        <div ng-show="ctrl.trackDataIsLoading" class="track-loader-minified">
            <md-progress-circular md-mode="indeterminate" md-diameter="12"></md-progress-circular>
        </div>
        <input
                ngb-autofocus
                emit-focus="ctrl.nameInputVisible"
                spellcheck="false"
                dnd-nodrag
                class="ngb-track-header-file-input"
                ng-model="ctrl.customNameTemp"
                ng-show="ctrl.nameInputVisible"
                ng-style="ctrl.trackHeaderStyle"
                ng-Blur="ctrl.setCustomName(ctrl.customNameTemp)"
                ng-keydown="ctrl.handleNameInputKeydown($event)"
                placeholder="Enter new track name..."
        />
        <div
                dnd-nodrag
                class="ngb-track-header-file-name"
                ng-hide="ctrl.nameInputVisible"
                ng-click="ctrl.showTrackNameInput()"
                ng-style="ctrl.trackHeaderStyle"
        >
            {{ctrl.truncate(ctrl.customName || ctrl.trackName)}}
            <md-tooltip md-direction="top">
                {{ctrl.customName || ctrl.trackName}}
            </md-tooltip>
        </div>
        <div class="buttons-menu-track" dnd-nodrag>
            <md-button md-no-ink
                       ng-show="ctrl.showHideTrackButton"
                       class="md-icon-button track-button close mini"
                       ng-click="ctrl.hideTrack($event)"
                       ng-if="!ctrl.silentInteractions && ctrl.trackClosable"
                       aria-label="Hide Track">
                <ng-md-icon class="button-icon" icon="clear" size="16"></ng-md-icon>
            </md-button>
        </div>
    </div>

    <div
            dnd-nodrag
            class="ngb-track-renderer js-ngb-render-container-target"
            flex="100"></div>

    <div
            dnd-nodrag
            flex="100"
            layout-margin
            ng-hide="ctrl.isLoaded"
            ng-style="{height: ctrl.possibleTrackHeight + 'px'}"
            layout="row"
            layout-align="center center">
        <div>
            <ngb-progress-circular ngb-mode="indeterminate" flex></ngb-progress-circular>
        </div>
    </div>

    <div
            ng-if="ctrl.isResizable"
            dnd-nodrag
            class="ngb-resize-panel"
            flex="100"></div>
    <ngb-track-notification
            ng-if="!!ctrl.notification"
            dnd-nodrag
            notification="ctrl.notification"
            track-instance="ctrl.trackInstance">
    </ngb-track-notification>
</div>