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="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="container repo" ng-show="!loading && repo">
  <!-- Repo Header -->
  <div class="header">
    <h3>
      <span class="repo-circle" repo="repo"></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="fa fa-cog fa-lg"></i>
        </a>
      </span>
    </h3>   
    
    <!-- Pull command -->
    <div class="pull-command visible-md visible-lg" style="display: none;">
      <span class="pull-command-title">Pull repository:</span>
      <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="fa fa-copy"></i>
          </span>
        </div>
      </div>

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

  <!-- Status boxes -->
  <div class="status-boxes">
    <div id="buildInfoBox" class="status-box" ng-show="repo.is_building"
         bs-popover="'static/partials/build-status-item.html'" data-placement="bottom">
      <span class="title">
        <i class="fa fa-spinner fa-spin"></i>
        <b>Building Images</b>
      </span>
      <span class="count" ng-class="buildsInfo ? 'visible' : ''"><span>{{ buildsInfo ? buildsInfo.length : '-' }}</span></span>
    </div>
  </div>

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

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

  <div class="repo-content" ng-show="!currentTag.image && repo.is_building">
    <div class="empty-message">Your build is currently processing, if this takes longer than an hour, please contact quay support</div>
  </div>

  <!-- Content view -->
  <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 -->
              <div class="tag-dropdown dropdown" title="Tags">
                <i class="fa fa-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>
              </div>
              <span class="right-title">Tags</span>
              
            </div>

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

            <!-- Tree View itself -->
            <div id="image-history-container" onresize="tree.notifyResized()"></div>
          </div>	
        </div>

        <!-- Side Panel -->
        <div class="col-md-4">
         <div class="panel panel-default">
           <div class="panel-heading">
             <!-- Image dropdown -->
              <div class="tag-dropdown dropdown" title="Images">
                <i class="fa fa-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>
              </div>
              <span class="right-title">Image</span>
            </div>
           
            <div class="panel-body">
              <div id="current-image">
                <div ng-show="currentImage.comment">
                  <blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentImage.comment)">
                  </blockquote>
                </div>

                <dl class="dl-normal">
                  <dt>Created</dt>
                  <dd am-time-ago="parseDate(currentImage.created)"></dd>
                  <dt>Image ID</dt>
                  <dd><a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">{{ currentImage.id }}</a></dd>
                </dl>

               <!-- Image changes loading -->
                <div ng-hide="currentImageChanges">
                  <i class="fa fa-spinner fa-spin fa-3x"></i>
                </div>

                <div class="changes-container small-changes-container"
                            ng-show="currentImageChanges.changed.length || currentImageChanges.added.length || currentImageChanges.removed.length">
                  <div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
                    <span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added">
                      <i class="fa fa-plus-square"></i>
                      <b>{{currentImageChanges.added.length}}</b>
                    </span>
                    <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed">
                      <i class="fa fa-minus-square"></i>
                      <b>{{currentImageChanges.removed.length}}</b>
                    </span>
                    <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed">
                      <i class="fa fa-pencil-square"></i>
                      <b>{{currentImageChanges.changed.length}}</b>
                    </span>
                  </div>

                  <div id="collapseChanges" class="panel-collapse collapse in">
                    <div class="well well-sm">		     
                      <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
                        <i class="fa fa-plus-square"></i>
                        <span title="{{file}}">{{file}}</span>
                      </div>
                      <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
                        <i class="fa fa-minus-square"></i>
                        <span title="{{file}}">{{file}}</span>
                      </div>
                      <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
                        <i class="fa fa-pencil-square"></i>
                        <span title="{{file}}">{{file}}</span>
                      </div>
                    </div>
                    <div class="more-changes" ng-show="getMoreCount(currentImageChanges) > 0">
                      <a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">And {{getMoreCount(currentImageChanges)}} more...</a>
                    </div>
                  </div>
                </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>