quay/static/partials/image-view.html

<div class="container" ng-show="!loading && !image">
  No image found
</div>

<div class="loading" ng-show="loading">
  <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="container repo repo-image-view" ng-show="!loading && image">
  <div class="header">
    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
    <h3>
      <i class="fa fa-archive fa-lg" style="color: #aaa; margin-right: 10px;"></i>
      <span style="color: #aaa;"> {{repo.namespace}}</span>
      <span style="color: #ccc">/</span>
      <span style="color: #666;">{{repo.name}}</span>
      <span style="color: #ccc">/</span>
      <span>{{image.id.substr(0, 12)}}</span>
    </h3>
   </div>

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

  <!-- Information -->
  <dl class="dl-normal">
    <dt>Full Image ID</dt>
    <dd>
      <div>
        <div class="id-container">
          <div class="input-group">
            <input id="full-id" type="text" class="form-control" value="{{ image.id }}" readonly>
            <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="full-id">
              <i class="fa fa-copy"></i>
            </span>
          </div>
        </div>
        
        <div id="clipboardCopied" style="display: none">
          Copied to clipboard
        </div>
      </div>
    </dd>
    <dt>Created</dt>
    <dd am-time-ago="parseDate(image.created)"></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 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>