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="currentRepo && nextStepCounter > 0">
        <td width="200px">
          Repository:
        </td>
        <td>
          <div class="current-repo">
            <img class="dropdown-select-icon github-org-icon"
               ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
            {{ currentRepo.repo }}
          </div>
        </td>
      </tr>

      <tr ng-show="nextStepCounter > 1">
        <td>
          Branches:
        </td>
        <td>
          <div class="branch-filter">
            <span ng-if="!state.hasBranchFilter">(All Branches)</span>
            <span ng-if="state.hasBranchFilter">Regular Expression: <code>{{ state.branchFilter }}</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="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="'Select a repository'" selected-item="currentRepo"
           lookahead-items="repoLookahead">
        <!-- Icons -->
        <i class="dropdown-select-icon none-icon fa fa-github fa-lg"></i>
        <img class="dropdown-select-icon github-org-icon"
             ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">

        <!-- Dropdown menu -->
        <ul class="dropdown-select-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 filter/select -->
    <div class="step-view-step" complete-condition="!state.hasBranchFilter || state.branchFilter"
         load-callback="loadBranches(callback)"
         load-message="Loading Branches">

      <div style="margin-bottom: 12px">Please choose the branches 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.hasBranchFilter ? '' : 'active btn-info'" ng-click="state.hasBranchFilter = false">
                  All Branches
          </button>
          <button type="button" class="btn btn-default"
                  ng-class="state.hasBranchFilter ? 'active btn-info' : ''" ng-click="state.hasBranchFilter = true">
                  Matching Regular Expression
          </button>
        </div>

        <div ng-show="state.hasBranchFilter" style="margin-top: 10px;">
          <form>
            <input class="form-control" type="text" ng-model="state.branchFilter"
                   placeholder="(Regular expression)" required>
          </form>

          <div style="margin-top: 10px">
            <div ng-if="branchNames.length">
              Branches:
              <ul class="matching-branches">
                <li ng-repeat="branchName in branchNames | limitTo:20"
                    class="branch-reference"
                    ng-class="isMatchingBranch(branchName, state.branchFilter) ? 'match' : 'not-match'">                  
                  <a href="https://github.com/{{ currentRepo.repo }}/tree/{{ branchName }}" target="_blank">
                    {{ branchName }}
                  </a>
                </li> 
              </ul>
              <span ng-if="branchNames.length > 20">...</span>
            </div>
            <div ng-if="state.branchFilter && !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 {{ 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>