openmct/platform/features/notebook/res/templates/notebook.html

<div ng-controller="NotebookController as controller" class="mct-notebook w-notebook l-flex-col">
    <div class="l-notebook-head holder l-flex-row flex-elem">
        <div class="c-search flex-elem holder grows">
            <input class="c-search__search-input"
                   type="text" tabindex="10000"
                   ng-model="entrySearch"
                   ng-keyup="controller.search()"/>
            <a class="c-search__clear-input clear-icon icon-x-in-circle"
               ng-class="{show: !(entrySearch === '' || entrySearch === undefined)}"
               ng-click="entrySearch = ''; controller.search()"></a>
        </div>
        <div class="notebook-view-controls l-flex-row flex-elem holder">
            <div class="select notebook-view-controls__filter-time">
                <select ng-model="showTime">
                    <option value="0" selected="selected">Show all</option>
                    <option value="1">Last hour</option>
                    <option value="8">Last 8 hours</option>
                    <option value="24">Last 24 hours</option>
                </select>
            </div>
            <div class="select notebook-view-controls__sort">
                <select ng-model="sortEntries">
                    <option value="-createdOn" selected="selected">Newest first</option>
                    <option value="createdOn">Oldest first</option>
                </select>
            </div>
        </div>
    </div>

    <!--  drag area -->
    <div class="holder flex-elem l-flex-row icon-plus labeled l-notebook-drag-area" ng-click="newEntry($event)"
         id="newEntry" mct-entry-dnd>
        <span class="label">To start a new entry, click here or drag and drop any object</span>
    </div>

    <!-- entries -->
    <div class="holder flex-elem grows w-notebook-entries t-entries-list" ng-mouseover="handleActive()">
        <ul>
            <li class="l-flex-row has-local-controls l-notebook-entry s-notebook-entry"
                id="{{'entry_'+ entry.id}}"
                ng-if="hoursFilter(showTime,entry.createdOn)"
                ng-repeat="entry in model.entries | filter:entrySearch | orderBy: sortEntries track by $index"
                ng-init="$last && finished(model.entries)"
                mct-entry-dnd>
                <div class="holder flex-elem l-flex-row grows w-notebook-entry-time-and-content">
                    <div class="holder flex-elem s-notebook-entry-time">
                        <span>{{entry.createdOn | date:'yyyy-MM-dd'}}</span>
                        <span>{{entry.createdOn | date:'HH:mm:ss'}}</span>
                    </div>
                    <div class="holder flex-elem l-flex-col grows l-notebook-entry-content">
                        <div contenteditable="true"
                             ng-blur="textBlur($event, entry.id)"
                             ng-focus="textFocus($event, entry.id)"
                             ng-model="entry.text"
                             placeholder="Enter text here"
                             class="flex-elem s-input-inline t-notebook-entry-input s-notebook-entry-text"
                             ng-bind="entry.text">
                        </div>
                        <!-- embeds -->
                        <div class="flex-elem entry-embeds l-flex-row">
                            <div class="l-flex-row l-entry-embed {{embed.cssClass}}"
                                 ng-repeat="embed in entry.embeds track by $index"
                                 ng-class="{ 'has-snapshot' : embed.snapshot }"
                                 id="{{embed.id}}">
                                <div class="snap-thumb"
                                     ng-if="embed.snapshot"
                                     ng-click="viewSnapshot($event,embed.snapshot.src,embed.id,entry.createdOn,this,embed)">
                                    <img ng-src="{{embed.snapshot.src}}" src="//:0" alt="{{embed.id}}">
                                </div>
                                <div class="embed-info l-flex-col">
                                    <div class="embed-title object-header">
                                        <a ng-click='navigate($event,embed.type)'>{{embed.name}}</a>
                                        <a class='context-available' ng-click='openMenu($event,embed.type)'></a>
                                    </div>
                                    <div class="hide-menu" ng-show="false">
                                        <div class="menu-element context-menu-wrapper mobile-disable-select">
                                            <div class="menu context-menu">
                                                <ul>
                                                    <li ng-repeat="menu in menuEmbed"
                                                        ng-click="menu.perform($event,embed.snapshot.src,embed.id,entry.createdOn,this,embed)"
                                                        title="{{menu.getMetadata().description}}"
                                                        class="{{menu.getMetadata().cssClass}}"
                                                        ng-if="embed.snapshot">
                                                        {{menu.getMetadata().name}}
                                                    </li>
                                                    <li ng-repeat="menu in menuEmbedNoSnap"
                                                        ng-click="menu.perform($event,embed.snapshot.src,embed.id,entry.createdOn,this)"
                                                        title="{{menu.getMetadata().description}}"
                                                        class="{{menu.getMetadata().cssClass}}"
                                                        ng-if="!embed.snapshot">
                                                        {{menu.getMetadata().name}}
                                                    </li>
                                                    <li ng-repeat="menu in embedActions"
                                                        ng-click="menu.perform()"
                                                        title="{{menu.name}}"
                                                        class="{{menu.cssClass}}">
                                                        {{menu.name}}
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="embed-date"
                                         ng-if="embed.snapshot">{{embed.id| date:'yyyy-MM-dd HH:mm:ss'}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- delete entry -->
                <div class="holder flex-elem local-control local-controls-hidden notebook-entry-delete">
                    <a class="s-icon-button icon-trash" id={{entry.id}} title="Delete Entry" ng-click="deleteEntry($event)"></a>
                </div>
            </li>
        </ul>
    </div>
</div>