quay/static/directives/trigger-setup-github.html

<div class="trigger-setup-github-element">
  <!-- Current selected info -->
  <div class="selected-info" ng-show="nextStepCounter > 0">
    <table style="width: 100%;">
      <tr ng-show="state.currentRepo && nextStepCounter > 0">
        <td width="200px">
          Repository:
        </td>
        <td>
          <div class="current-repo">
            <img class="dropdown-select-icon github-org-icon"
               ng-src="{{ state.currentRepo.avatar_url ? state.currentRepo.avatar_url : '/static/img/empty.png' }}">
            <a ng-href="https://github.com/{{ state.currentRepo.repo }}" target="_blank">{{ state.currentRepo.repo }}</a>
          </div>
        </td>
      </tr>

      <tr ng-show="nextStepCounter > 1">
        <td>
          Branches and Tags:
        </td>
        <td>
          <div class="ref-filter">
            <span ng-if="!state.hasBranchTagFilter">(Build All)</span>
            <span ng-if="state.hasBranchTagFilter">Regular Expression: <code>{{ state.branchTagFilter }}</code></span>
          </div>
        </td>
      </tr>

      <tr ng-show="nextStepCounter > 2">
        <td>
          Dockerfile Location:
        </td>
        <td>
          <div class="dockerfile-location">
            <i class="fa fa-folder fa-lg"></i> {{ state.currentLocation || '(Repository Root)' }}
          </div>
        </td>
      </tr>
    </table>
  </div>


  <!-- Step view -->
  <div class="step-view" next-step-counter="nextStepCounter" current-step-valid="currentStepValid"
                         steps-completed="stepsCompleted()">
    <!-- Repository select -->
    <div class="step-view-step" complete-condition="state.currentRepo" load-callback="loadRepositories(callback)"
         load-message="Loading Repositories">
      <div style="margin-bottom: 12px">Please choose the GitHub repository that will trigger the build:</div>
      <div class="dropdown-select" placeholder="'Enter or select a repository'" selected-item="state.currentRepo"
           lookahead-items="repoLookahead" allow-custom-input="true">
        <!-- Icons -->
        <i class="dropdown-select-icon none-icon fa fa-github fa-lg"></i>
        <img class="dropdown-select-icon github-org-icon"
             ng-src="{{ state.currentRepo.avatar_url ? state.currentRepo.avatar_url : '/static/image/empty.png' }}">

        <!-- Dropdown menu -->
        <ul class="dropdown-select-menu scrollable-menu" role="menu">
          <li ng-repeat-start="org in orgs" role="presentation" class="dropdown-header github-org-header">
            <img ng-src="{{ org.info.avatar_url }}" class="github-org-icon">{{ org.info.name }}
          </li>
          <li ng-repeat="repo in org.repos" class="github-repo-listing">
            <a href="javascript:void(0)" ng-click="selectRepo(repo, org)"><i class="fa fa-github fa-lg"></i> {{ repo }}</a>
          </li>
          <li role="presentation" class="divider" ng-repeat-end ng-show="$index < orgs.length - 1"></li>
        </ul>
      </div>
    </div>

    <!-- Branch/Tag filter/select -->
    <div class="step-view-step" complete-condition="!state.hasBranchTagFilter || state.branchTagFilter"
         load-callback="loadBranchesAndTags(callback)"
         load-message="Loading Branches and Tags">

      <div style="margin-bottom: 12px">Please choose the branches and tags to which this trigger will apply:</div>
      <div style="margin-left: 20px;">
        <div class="btn-group btn-group-sm" style="margin-bottom: 12px">
          <button type="button" class="btn btn-default"
                  ng-class="state.hasBranchTagFilter ? '' : 'active btn-info'" ng-click="state.hasBranchTagFilter = false">
                  All Branches and Tags
          </button>
          <button type="button" class="btn btn-default"
                  ng-class="state.hasBranchTagFilter ? 'active btn-info' : ''" ng-click="state.hasBranchTagFilter = true">
                  Matching Regular Expression
          </button>
        </div>

        <div ng-show="state.hasBranchTagFilter" style="margin-top: 10px;">
          <form>
            <div class="form-group">
              <div class="input-group">
                <input class="form-control" type="text" ng-model="state.branchTagFilter"
                       placeholder="(Regular expression. Examples: heads/branchname, tags/tagname)" required>
                <div class="dropdown input-group-addon">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                    <li><a href="javascript:void(0)" ng-click="state.branchTagFilter = 'heads/.+'">
                      <i class="fa fa-code-fork"></i>All Branches</a>
                    </li>
                    <li><a href="javascript:void(0)" ng-click="state.branchTagFilter = 'tags/.+'">
                      <i class="fa fa-tag"></i>All Tags</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </form>


          <div style="margin-top: 10px">
            <div class="ref-matches" ng-if="branchNames.length">
              <span class="kind">Branches:</span>
              <ul class="matching-refs branches">
                <li ng-repeat="branchName in branchNames | limitTo:20"
                    class="ref-reference"
                    ng-class="isMatching('heads', branchName, state.branchTagFilter) ? 'match' : 'not-match'">
                  <span ng-click="addRef('heads', branchName)" target="_blank">
                    {{ branchName }}
                  </span>
                </li>
              </ul>
              <span ng-if="branchNames.length > 20">...</span>
            </div>
            <div class="ref-matches" ng-if="tagNames.length" style="margin-bottom: -20px">
              <span class="kind">Tags:</span>
              <ul class="matching-refs tags">
                <li ng-repeat="tagName in tagNames | limitTo:20"
                    class="ref-reference"
                    ng-class="isMatching('tags', tagName, state.branchTagFilter) ? 'match' : 'not-match'">
                  <span ng-click="addRef('tags', tagName)" target="_blank">
                    {{ tagName }}
                  </span>
                </li>
              </ul>
              <span ng-if="tagNames.length > 20">...</span>
            </div>
            <div ng-if="state.branchTagFilter && !branchNames.length"
                 style="margin-top: 10px">
              <strong>Warning:</strong> No branches found
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Dockerfile folder select -->
    <div class="step-view-step" complete-condition="trigger.$ready" load-callback="loadLocations(callback)"
         load-message="Loading Folders">

      <div style="margin-bottom: 12px">Dockerfile Location:</div>
      <div class="dropdown-select" placeholder="'(Repository Root)'" selected-item="state.currentLocation"
           lookahead-items="locations" handle-input="handleLocationInput(input)"
           handle-item-selected="handleLocationSelected(datum)"
           allow-custom-input="true">
        <!-- Icons -->
        <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg" ng-show="state.isInvalidLocation"></i>
        <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;" ng-show="!state.isInvalidLocation"></i>
        <i class="dropdown-select-icon fa fa-folder fa-lg"></i>

        <!-- Dropdown menu -->
        <ul class="dropdown-select-menu" role="menu">
          <li ng-repeat="location in locations">
            <a href="javascript:void(0)" ng-click="setLocation(location)" ng-if="!location">
                <i class="fa fa-github fa-lg"></i> Repository Root
            </a>
            <a href="javascript:void(0)" ng-click="setLocation(location)" ng-if="location">
              <i class="fa fa-folder fa-lg"></i> {{ location }}
            </a>
          </li>
          <li class="dropdown-header" role="presentation" ng-show="!locations.length">
            No Dockerfiles found in repository
          </li>
        </ul>
      </div>

      <div class="quay-spinner" ng-show="!locations && !locationError"></div>
      <div class="alert alert-warning" ng-show="locations && !locations.length">
        Warning: No Dockerfiles were found in {{ state.currentRepo.repo }}
      </div>
      <div class="alert alert-warning" ng-show="locationError">
        {{ locationError }}
      </div>
      <div class="alert alert-info" ng-show="locations.length && state.isInvalidLocation">
        Note: The folder does not currently exist or contain a Dockerfile
      </div>
    </div>
  <!-- /step-view -->
  </div>
</div>