quay/static/partials/view-repo.html

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

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

<div class="container repo" ng-show="!loading && repo">
  <!-- Repo Header -->
  <div class="header">
    <h3>
      <span class="icon-container">
        <i class="icon-lock icon-large" ng-show="!repo.is_public" title="Private Repository"></i>
        <i class="icon-hdd icon-large"></i>
      </span>

      <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}

      <span class="settings-cog" ng-show="repo.can_admin" title="Repository Settings">
        <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/admin' }}">
          <i class="icon-cog icon-large"></i>
        </a>
      </span>
    </h3>   

    <!-- Pull command -->
    <div class="pull-command">
      Get this repository: 

      <div class="pull-container">
        <div class="input-group">
          <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
          <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
            <i class="icon-copy"></i>
          </span>
        </div>
      </div>

      <div id="clipboardCopied" class="hovering" style="display: none">
        Copied to clipboard
      </div>
    </div>
  </div>


  <!-- Description -->
  <p ng-class="'description lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()">
    <span class="content" ng-bind-html-unsafe="getMarkedDown(repo.description)"></span>
    <i class="icon-edit"></i>
  </p>

  <div class="repo-content" ng-show="!currentTag.image">
    <div class="empty-message">(This repository is empty)</div>
  </div>

  <div class="repo-content" ng-show="currentTag.image">
    <!-- Image History -->
    <div id="image-history">     
      <div class="row">
        <!-- Tree View container -->
        <div  class="col-md-8">

          <div class="panel panel-default">
            <div class="panel-heading">
              <!-- Tag dropdown -->
              <span class="tag-dropdown dropdown" title="Tags">
                <i class="icon-tag"><span class="tag-count">{{getTagCount(repo)}}</span></i>
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentTag.name}} <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li ng-repeat="tag in repo.tags">
                    <a href="javascript:void(0)" ng-click="setTag(tag.name)">{{tag.name}}</a>
                  </li>
                </ul>
              </span>
              <span class="right-title">Tags</span>
              
            </div>

	    <!-- Image history loading -->
	    <div ng-hide="imageHistory" style="padding: 10px; text-align: center;">
	      <i class="icon-spinner icon-spin icon-3x"></i>
	    </div>

            <!-- Tree View itself -->
            <div id="image-history-container"></div>
          </div>	
        </div>

        <!-- Side Panel -->
        <div class="col-md-4">
         <div class="panel panel-default">
           <div class="panel-heading">
             <!-- Image dropdown -->
              <span class="tag-dropdown dropdown" title="Images">
                <i class="icon-archive"><span class="tag-count">{{imageHistory.length}}</span></i>
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentImage.id.substr(0, 12)}} <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li ng-repeat="image in imageHistory">
                    <a href="javascript:void(0)" ng-click="setImage(image)">{{image.id.substr(0, 12)}}</a>
                  </li>
                </ul>
              </span>
              <span class="right-title">Image</span>

           </div>
           
           <div class="panel-body">
             <div id="current-image">
               <dl class="dl-horizontal">
                 <dt>Created</dt>
                 <dd am-time-ago="parseDate(currentTag.image.created)"></dd>
               </dl>

               <div ng-show="currentTag.image.comment">
                 <strong>Description:</strong>
                 <blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentTag.image.comment)">
                 </blockquote>
               </div>
             </div>
           </div>
         </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal edit for the description -->
  <div class="modal fade" id="editModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Edit Repository Description</h4>
        </div>
        <div class="modal-body">
          <div class="wmd-panel">
            <div id="wmd-button-bar-description"></div>	    
            <textarea class="wmd-input" id="wmd-input-description" placeholder="Enter description">{{ repo.description }}</textarea>
          </div>

          <div id="wmd-preview-description" class="wmd-panel wmd-preview"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" ng-click="saveDescription()">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
</div>