Redo the UI for the run trigger dialog to be much cleaner

Fixes #774
This commit is contained in:
Joseph Schorr 2016-09-29 15:19:21 +02:00
parent edc2bc8b93
commit e85a1bce0a
13 changed files with 541 additions and 369 deletions

View file

@ -1,55 +1,68 @@
<div class="dockerfile-build-dialog-element">
<!-- Modal message dialog -->
<div class="modal fade dockerfilebuildModal">
<div class="modal-dialog">
<div class="co-dialog modal-dialog">
<div class="modal-content" ng-show="triggersResource && triggersResource.loading">
<div class="cor-loader"></div>
</div>
<div class="modal-content" ng-show="!triggersResource || !triggersResource.loading">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal-header ahead-of-tabs">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-show="!buildStarting">&times;</button>
<h4 class="modal-title">
Start new Dockerfile build
Start Repository Build
</h4>
</div>
<ul class="co-top-tab-bar" ng-show="triggers.length > 0">
<li class="co-top-tab" ng-class="viewTriggers ? 'active': ''" ng-click="showTriggers(true)">Invoke Build Trigger</li>
<li class="co-top-tab" ng-class="!viewTriggers ? 'active': ''" ng-click="showTriggers(false)">Upload Dockerfile</li>
</ul>
<div class="modal-body">
<div class="btn-group btn-group-sm" ng-show="triggers.length > 0">
<button class="btn" ng-class="viewTriggers ? 'btn-default' : 'btn-info active'" ng-click="showTriggers(false)">
<i class="fa fa-upload"></i>Upload Dockerfile
</button>
<button class="btn" ng-class="viewTriggers ? 'btn-info active' : 'btn-default'" ng-click="showTriggers(true)">
<i class="fa fa-flash"></i>Start Build Trigger
</button>
</div>
<div class="co-alert co-alert-danger" ng-show="errorMessage">
{{ errorMessage }}
</div>
<!-- Upload Dockerfile -->
<div ng-show="!viewTriggers">
<div class="dockerfile-build-form" repository="repository" upload-failed="handleBuildFailed(message)"
build-started="handleBuildStarted(build)" build-failed="handleBuildFailed(message)" start-now="startCounter"
is-ready="hasDockerfile" uploading="uploading" building="building"></div>
<div class="dockerfile-build-form" repository="repository" is-ready="hasDockerfile"
ready-for-build="readyForBuild(startBuild)"></div>
</div>
<!-- Start Build Trigger -->
<div ng-show="viewTriggers">
<table class="trigger-list">
<tr ng-repeat="trigger in triggers">
<td><span class="trigger-description" trigger="trigger"></span></td>
<td>
<button class="btn btn-primary" ng-click="runTriggerNow(trigger)" ng-if="trigger.can_invoke">Run Trigger</button>
<span class="empty" ng-if="!trigger.can_invoke">You do not have permission to run this trigger</span>
</td>
</tr>
<p style="padding: 10px;">Manually running a build trigger provides the means for invoking a build trigger as-if
called from the underlying service for the latest commit to a particular branch or tag.</p>
<table class="cor-table">
<thead>
<tr>
<td>Trigger Description</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="trigger in triggers">
<td><span class="trigger-description" trigger="trigger"></span></td>
<td>
<a href="javascript:void(0)" ng-click="runTriggerNow(trigger)"
ng-if="trigger.can_invoke">Run Trigger Now</a>
<span ng-if="!trigger.can_invoke"
data-title="You do not have permission to run this trigger" bs-tooltip>
<i class="fa fa-exclamation-triangle"></i> No permission to run
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="startBuild()" ng-disabled="building || uploading || !hasDockerfile" ng-show="!viewTriggers">Start Build</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="startBuild()"
ng-disabled="!hasDockerfile || buildStarting"
ng-show="!viewTriggers">Start Build</button>
<button type="button" class="btn btn-default" data-dismiss="modal"
ng-disabled="buildStarting">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->