kwk/docker-registry-frontend
1
1
Fork 0
mirror of https://github.com/kwk/docker-registry-frontend.git synced 2024-09-20 15:26:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add angular-bootstrap for tabset directive. Add loading bar for all XHR requests.

Browse source
This commit is contained in:
Konrad Kleine 2014-09-29 12:28:07 +02:00
parent c5185d6f18
commit 26b714e9c6
7 changed files with 119 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/index.html
View file

@ -10,6 +10,7 @@
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/toastr/toastr.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
@ -64,6 +65,8 @@
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/toastr/toastr.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<!-- endbower -->
<!-- endbuild -->

9
app/scripts/app.js
View file

@ -29,8 +29,15 @@ angular
'create-tag-controller',
'delete-tag-controller',
'delete-repository-controller',
'ui.bootstrap',
'angular-loading-bar',
])
.config(['$routeProvider', '$resourceProvider', function($routeProvider, $resourceProvider){
.config(['$routeProvider', '$resourceProvider', 'cfpLoadingBarProvider', function($routeProvider, $resourceProvider, cfpLoadingBarProvider){
// Don't show the spinner when making XHR requests.
// Also, show the bar only if an XHR request takes longer than 50ms.
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.latencyThreshold = 10;
// Don't strip trailing slashes from calculated URLs
$resourceProvider.defaults.stripTrailingSlashes = false;

127
app/scripts/directives/image-details-directive.html
View file

@ -7,62 +7,75 @@
</a>
</div>
</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-user"></span> Author</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.author}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-comment"></span> Comment</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.comment}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-calendar"></span> Created</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-eye-open"></span> Docker version</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.docker_version}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-cog"></span> OS</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.os}}/{{imageDetails.architecture}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-qrcode"></span> ID</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.id | limitTo: 12}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-arrow-up"></span> Parent's ID</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.parent | limitTo:12}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-compressed"></span> Size <small>(in Bytes, not including base image sizes)</small></label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.Size}}</p>
</div>
</div>
</form>
<h2>Image Ancestry</h2>
<tabset>
<tab>
<tab-heading>
General information
</tab-heading>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-user"></span> Author</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.author}}</p>
</div>
</div>
<div class="form-group" ng-if="imageDetails.comment">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-comment"></span> Comment</label>
<div class="col-sm-10">
<p class="form-control-static">
<pre>{{imageDetails.comment}}</pre>
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-calendar"></span> Created</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-eye-open"></span> Docker version</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.docker_version}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-cog"></span> OS</label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.os}}/{{imageDetails.architecture}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-qrcode"></span> ID</label>
<div class="col-sm-10">
<p class="form-control-static"><a href="#/image/{{imageDetails.id}}">{{imageDetails.id | limitTo: 12}}</a></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-arrow-up"></span> Parent's ID</label>
<div class="col-sm-10">
<p class="form-control-static"><a href="#/image/{{imageDetails.parent}}">{{imageDetails.parent | limitTo: 12}}</a></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span class="glyphicon glyphicon-compressed"></span> Size <small>(in Bytes, not including base image sizes)</small></label>
<div class="col-sm-10">
<p class="form-control-static">{{imageDetails.Size}}</p>
</div>
</div>
</form>
</tab>
<tab>
<tab-heading>
Image Ancestry
</tab-heading>
<div class="list-group">
<a ng-repeat="img in imageAncestry" href="#/image/{{img}}" class="list-group-item" ng-class="{active: imageDetails.id==img}">
<span class="glyphicon" ng-class="{'glyphicon-arrow-down': ($first&&!$last)||$middle}"></span>
{{img | limitTo:12}}
</a>
</div>
</tab>
</tabset>
<div class="list-group">
<a ng-repeat="img in imageAncestry" href="#/image/{{img}}" class="list-group-item" ng-class="{active: imageDetails.id==img}">
<span class="glyphicon" ng-class="{'glyphicon-arrow-down': ($first&&!$last)||$middle}"></span>
{{img | limitTo:12}}
</a>
</div>

30
app/scripts/directives/repository-list-directive.html
View file

@ -7,17 +7,21 @@
<span ng-if="filteredRepositories.length > 1 || filteredRepositories.length == 0">repositories.</span>
<span ng-if="filteredRepositories.length == 1">repository.</span>
</p>
<div class="list-group">
<a href="#/repository/{{repo.name}}" class="list-group-item" ng-repeat="repo in filteredRepositories=(repositories | filter:searchTerm)">
<h4 class="list-group-item-heading">
<span class="glyphicon glyphicon-book"></span> {{repo.name}}
</h4>
<p class="list-group-item-text" ng-if="repo.description.length > 0">
{{repo.description}}
</p>
</a>
<span class="list-group-item" ng-if="filteredRepositories.length == 0">
<h4 class="list-group-item-heading">Sorry!</h4>
<p class="list-group-item-text">No repositories match the given search term: "{{searchTerm}}".</p>
</span>
<div class="panel panel-default">
<div class="panel-heading">Repositories<span ng-if="searchTerm"> filtered by "{{searchTerm}}"</span>:</div>
<div class="list-group">
<a href="#/repository/{{repo.name}}" class="list-group-item" ng-repeat="repo in filteredRepositories=(repositories | filter:searchTerm)">
<span class="list-group-item-heading">
<span class="glyphicon glyphicon-book"></span> {{repo.name}}
</span>
<p class="list-group-item-text" ng-if="repo.description.length > 0">
{{repo.description}}
</p>
</a>
<span class="list-group-item" ng-if="filteredRepositories.length == 0">
<h4 class="list-group-item-heading">Sorry!</h4>
<p class="list-group-item-text">No repositories match the given search term: "{{searchTerm}}".</p>
</span>
</div>
</div>

21
app/scripts/directives/tag-list-directive.html
View file

@ -9,13 +9,16 @@
<span ng-if="filteredTags.length == 1">tag.</span>
</p>
<div class="list-group">
<a ng-repeat="tag in filteredTags = (tags | filter:searchName)" href="#/tag/{{repositoryUser}}/{{repositoryName}}/{{tag.name}}/{{tag.imageId}}" class="list-group-item">
<span class="badge">{{tag.imageId|limitTo: 12}}</span>
<span><span class="glyphicon glyphicon-tag"></span> {{tag.name}}</span>
</a>
<span class="list-group-item" ng-if="filteredTags.length == 0">
<p class="list-group-item-heading">Sorry!</p>
<span class="list-group-item-text">No tags match the given search term: "{{searchName}}".</span>
</span>
<div class="panel panel-default">
<div class="panel-heading">Tags<span ng-if="searchName"> filtered by "{{searchName}}"</span>:</div>
<div class="list-group">
<a ng-repeat="tag in filteredTags = (tags | filter:searchName | orderBy:-name)" href="#/tag/{{repositoryUser}}/{{repositoryName}}/{{tag.name}}/{{tag.imageId}}" class="list-group-item">
<span class="badge">{{tag.imageId|limitTo: 12}}</span>
<span><span class="glyphicon glyphicon-tag"></span> {{tag.name}}</span>
</a>
<span class="list-group-item" ng-if="filteredTags.length == 0">
<p class="list-group-item-heading">Sorry!</p>
<span class="list-group-item-text">No tags match the given search term: "{{searchName}}".</span>
</span>
</div>
</div>

12
app/styles/main.css
View file

@ -3,11 +3,7 @@ body {
}
.container {
margin-top: 10px;
}
ol.breadcrumb {
margin-top: 20px;
margin-top: 0px;
}
ol.breadcrumb li:first-child::before {
@ -106,6 +102,10 @@ ol.breadcrumb li:first-child::before {
}
}
.panel-heading {
font-weight: bold;
}
/** Form validation */
@ -115,4 +115,4 @@ ol.breadcrumb li:first-child::before {
.css-form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
}

4
bower.json
View file

@ -12,7 +12,9 @@
"angular-animate": "~1.3.0",
"angular-touch": "~1.3.0",
"angular-route": "~1.3.0",
"toastr": "~2.0.3"
"toastr": "~2.0.3",
"angular-bootstrap": "~0.11.2",
"angular-loading-bar": "~0.6.0"
},
"devDependencies": {
"angular-mocks": "~1.3.0",