quay/static/partials/image-view.html

<div class="resource-view" resource="image" error-message="'No image found'">
  <div class="container repo repo-image-view">
    <div class="header">
      <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
      <h3>       
        <span class="repo-circle no-background" repo="repo"></span>
        <span class="repo-breadcrumb" repo="repo" image="image.value"></span>
      </h3>
    </div>

    <!-- Comment -->
    <blockquote ng-show="image.value.comment">
      <span class="markdown-view" content="image.value.comment"></span>
    </blockquote>

    <!-- Information -->
    <dl class="dl-normal">
      <dt>Full Image ID</dt>
      <dd>
        <div class="copy-box" value="image.value.id"></div>
      </dd>
      <dt>Created</dt>
      <dd am-time-ago="parseDate(image.value.created)"></dd>
      <dt>Compressed Image Size</dt>
      <dd><span class="context-tooltip"
                data-title="The amount of data sent between Docker and Quay.io when pushing/pulling"
                bs-tooltip="tooltip.title" data-container="body">{{ image.value.size | bytes }}</span>
      </dd>

      <dt ng-show="image.value.command && image.value.command.length">Command</dt>
      <dd ng-show="image.value.command && image.value.command.length">
        <pre class="formatted-command">{{ getFormattedCommand(image.value) }}</pre>
      </dd>
    </dl>

    <!-- Changes tabs -->
    <div ng-show="combinedChanges.length > 0">
      <b>File Changes:</b>
      <br>
      <br>
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#filterable">Filterable View</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#tree" ng-click="initializeTree()">Tree View</a></li>
      </ul>
    </div>

    <!-- Changes tab content -->
    <div class="tab-content" ng-show="combinedChanges.length > 0">
      <!-- Filterable view -->
      <div class="tab-pane active" id="filterable">
        <div class="changes-container full-changes-container">
          <div class="change-side-controls">      
            <div class="result-count">
              Showing {{(combinedChanges | filter:search | limitTo:50).length}} of {{(combinedChanges | filter:search).length}} results
            </div>
            <div class="filter-input">        
              <input id="change-filter" class="form-control" placeholder="Filter Changes" type="text" ng-model="search.$">
            </div>
          </div> 
          <div style="height: 28px;"></div>
          <div class="changes-list well well-sm">
            <div ng-show="(combinedChanges | filter:search | limitTo:1).length == 0">
              No matching changes
            </div>
            <div class="change" ng-repeat="change in combinedChanges | filter:search | limitTo:50">
              <i ng-class="{'added': 'fa fa-plus-square', 'removed': 'fa fa-minus-square', 'changed': 'fa fa-pencil-square'}[change.kind]"></i>
              <span data-title="{{change.file}}">
                <span style="color: #888;">
                  <span ng-repeat="folder in getFolders(change.file)"><a href="javascript:void(0)" ng-click="setFolderFilter(getFolder(change.file), $index)">{{folder}}</a>/</span></span><span>{{getFilename(change.file)}}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Tree view -->
      <div class="tab-pane" id="tree">
        <div id="changes-tree-container" class="changes-container" onresize="tree && tree.notifyResized()"></div>
      </div>
    </div>  
  </div>
</div>