refine static file structures and updates for repository page.

This commit is contained in:
kunw 2016-04-17 23:53:26 +08:00
parent 0d5da49175
commit 285f4d8d9a
45 changed files with 11590 additions and 444 deletions

View File

@ -61,6 +61,10 @@
margin-left: -1.2em; margin-left: -1.2em;
} }
.list-group {
box-shadow: none;
}
.list-group-item { .list-group-item {
text-align: left; text-align: left;
margin-left: 20%; margin-left: 20%;

View File

@ -0,0 +1,21 @@
<div class="switch-pane-drop-down" ng-show="vm.visible">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="form-inline search-projects">
<div class="input-group">
<input type="text" class="form-control search-icon" placeholder="" ng-keyup="vm.filterProjects(vm.filterInput)" ng-model="vm.filterInput" size="30">
</div>
</div>
<h5 class="page-header">My Projects: <span class="badge">//vm.projects.length//</span></h5>
<div class="project-list pane-container">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in vm.projects" ng-click="vm.selectItem(item)">
<span ng-show="item.id == vm.selectedId" class="glyphicon glyphicon-ok project-selected"></span> <a href="#">//item.name//</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,72 @@
(function() {
'use strict';
angular
.module('harbor.details')
.constant('mockupProjects', mockupProjects)
.directive('retrieveProjects', retrieveProjects);
function mockupProjects() {
var data = [
{ "id": 1, "name" : "myrepo"},
{ "id": 2, "name" : "myproject"},
{ "id": 3, "name" : "harbor_project"},
{ "id": 4, "name" : "legacy"}
];
return data;
}
RetrieveProjectsController.$inject = ['mockupProjects'];
function RetrieveProjectsController(mockupProjects) {
var vm = this;
vm.projects = mockupProjects();
vm.selectItem = selectItem;
vm.filterProjects = filterProjects;
function selectItem(item) {
vm.selectedId = item.id;
}
var totalProjects = mockupProjects();
function filterProjects(input) {
if(input == "") {
vm.projects = totalProjects;
}else{
var filteredResults = [];
for(var i = 0; i < totalProjects.length; i++) {
var item = totalProjects[i];
if(item.name.indexOf(input) >= 0) {
filteredResults.push(item);
continue;
}
}
vm.projects = filteredResults;
}
}
}
function retrieveProjects() {
var directive = {
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html',
scope: {
'visible': '='
},
replace: true,
controller: RetrieveProjectsController,
bindToController: true,
controllerAs: 'vm'
}
return directive;
}
})();

View File

@ -0,0 +1,5 @@
<div class="switch-pane-projects" ng-switch="vm.open">
<a href="#" ng-click="vm.switchPane()">//vm.projectName//</a>
<span ng-switch-default class="glyphicon glyphicon-triangle-right" style="font-size: 12px;"></span>
<span ng-switch-when="true" class="glyphicon glyphicon-triangle-bottom" style="font-size: 12px;"></span>
</div>

View File

@ -0,0 +1,43 @@
(function() {
'use strict';
angular
.module('harbor.details')
.directive('switchPaneProjects', switchPaneProjects);
function SwitchPaneProjectsController() {
var vm = this;
vm.projectName = "myrepo1";
vm.open = false;
vm.switchPane = switchPane;
function switchPane() {
if(vm.open) {
vm.open = false;
}else{
vm.open = true;
}
}
}
function switchPaneProjects() {
var directive = {
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/details/switch-pane-projects.directive.html',
replace: true,
scope: {
'projectName': '@',
'open': '='
},
controller: SwitchPaneProjectsController,
controllerAs: 'vm',
bindToController: true
}
return directive;
}
})();

View File

@ -0,0 +1,28 @@
<div role="tabpanel" class="tab-pane" id="logs">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<table class="table table-pane">
<thead>
<th>Username</th><th>Repository Name</th><th>Operation</th><th>Timestamp</th>
</thead>
<tbody>
<tr>
<td>Haox</td><td>myrepo/Ubuntu</td><td>Create</td><td>2016-03-22 12:35:00</td>
</tr>
<tr>
<td>Haox</td><td>myrepo/MySQL</td><td>Push</td><td>2016-03-22 12:35:00</td>
</tr>
<tr>
<td>Daniel</td><td>myproject/Golang</td><td>Create</td><td>2016-03-12 12:35:00</td>
</tr>
</tbody>
</table>
</div>
</div>

View File

@ -0,0 +1,28 @@
(function() {
'use strict';
angular
.module('harbor.log')
.directive('listLog', listLog);
// ListLogController.$inject = ['ListLogService'];
function ListLogController() {
}
function listLog() {
var directive = {
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/log/list-log.directive.html',
replace: true,
controller: ListLogController,
controllerAs: 'vm',
bindToController: true
}
return directive;
}
})();

View File

@ -1,5 +0,0 @@
<ul class="switch-pane-tabs" role="tablist">
<li><a role="presentation" href="#repositories" aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
<li><a role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
<li><a role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
</ul>

View File

@ -0,0 +1,187 @@
<div role="tabpanel" class="tab-pane active" id="repositories">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<span class="glyphicon glyphicon-book"></span> myrepo/ubuntu
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/ubuntu:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>14.04</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/ubuntu:14.04</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
<span class="glyphicon glyphicon-book"></span> myrepo/mysql
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/mysql:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>5.6</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/mysql:5.6</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
<span class="glyphicon glyphicon-book"></span> myrepo/nginx
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/nginx:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>1.9</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/nginx:1.9</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="true" aria-controls="collapse4">
<span class="glyphicon glyphicon-book"></span> myrepo/registry
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/registry:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>2.3</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/registry:2.3</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading5">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="true" aria-controls="collapse5">
<span class="glyphicon glyphicon-book"></span> myrepo/alpine
</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/alpine:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>1.2</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/alpine:1.2</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,27 @@
(function() {
'use strict';
angular
.module('harbor.repository')
.directive('listRepository', listRepository);
ListRepositoryController.$inject = ['ListRepositoryService'];
function ListRepositoryController(ListRepositoryService) {
}
function listRepository() {
var directive = {
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/repository/list-repository.directive.html',
replace: true,
controller: ListRepositoryController,
controllerAs: 'vm',
bindToController: true
}
return directive;
}
})();

View File

@ -0,0 +1,61 @@
<div role="tabpanel" class="tab-pane" id="users">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span>Add Member</button>
</div>
<div class="pane">
<div class="well panel-group">
<div class="row">
<div class="col-xs-10 col-md-10">
<form>
<div class="form-group">
<input type="text" class="form-control" id="addUsername" placeholder="Username">
</div>
</form>
<form class="form-inline clearfix">
<div class="form-group">
<label for="roleIdList">Role:</label>&nbsp;&nbsp;
<input type="radio" name="roleId" value="1">&nbsp;Project Admin&nbsp;&nbsp;
<input type="radio" name="roleId" value="2">&nbsp;Developer&nbsp;&nbsp;
<input type="radio" name="roleId" value="3">&nbsp;Guest
</div>
</form>
</div>
<div class="col-xs-2 col-md-2">
<form>
<div class="form-group" style="margin-top: 20%;">
<button type="button" class="btn btn-default" id="btnCancel">Cancel</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="sub-pane">
<table class="table table-pane">
<thead>
<th>Username</th><th>Role</th><th>Operation</th>
</thead>
<tbody>
<tr>
<td>user1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>tester1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>user1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,28 @@
(function() {
'use strict';
angular
.module('harbor.user')
.directive('listUser', listUser);
ListUserController.$inject = ['ListUserService'];
function ListUserController(ListUserService) {
}
function listUser() {
var directive = {
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/user/list-user.directive.html',
replace: true,
controller: ListUserController,
controllerAs: 'vm',
bindToController: true
}
return directive;
}
})();

View File

@ -3,8 +3,12 @@
angular angular
.module('harbor.app', [ .module('harbor.app', [
'harbor.services.user', 'harbor.services.user',
'harbor.services.repository',
'harbor.session', 'harbor.session',
'harbor.header', 'harbor.header',
'harbor.details' 'harbor.details',
'harbor.repository',
'harbor.user',
'harbor.log'
]); ]);
})(); })();

View File

@ -1,15 +0,0 @@
(function() {
'use strict';
angular
.module('harbor.log')
.controller('ListLogController', ListLogController);
ListLogController.$inject = ['ListLogService']
function ListLogController(ListLogService) {
}
})();

View File

@ -0,0 +1,5 @@
<ul class="switch-pane-tabs" role="tablist">
<li><a ng-click="vm.closePane()" role="presentation" href="#repositories" aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
<li><a ng-click="vm.closePane()" role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
<li><a ng-click="vm.closePane()" role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
</ul>

View File

@ -6,18 +6,36 @@
.module('harbor.app') .module('harbor.app')
.directive('navigationTab', navigationTab); .directive('navigationTab', navigationTab);
NavigationTabController.$inject = ['$window'];
function NavigationTabController($window) {
var vm = this;
vm.location = $window.location.pathname;
vm.closePane = closePane;
function closePane() {
vm.visible = false;
}
}
function navigationTab() { function navigationTab() {
var directive = { var directive = {
restrict: 'E', restrict: 'E',
templateUrl: getTemplateUrl, templateUrl: getTemplateUrl,
link: link, link: link,
controller: controller scope: {
templateUrl: "@",
visible: "="
},
replace: true,
controller: NavigationTabController,
controllerAs: 'vm',
bindToController: true
} }
return directive; return directive;
function getTemplateUrl(element, attrs) { function getTemplateUrl(element, attrs) {
return '/static/ng/resources/js/components/'+ attrs.templateUrl; return '/static/ng/resources/js/layout/'+ attrs.templateUrl;
} }
function link(scope, element, attrs, ctrl) { function link(scope, element, attrs, ctrl) {
@ -34,17 +52,11 @@
function click(event) { function click(event) {
element.find('a').removeClass('active'); element.find('a').removeClass('active');
$(event.target).addClass('active'); $(event.target).not('span').addClass('active');
} }
} }
controller.$inject = ['$window'];
function controller($window) {
var vm = this;
vm.location = $window.location.pathname;
}
} }
})(); })();

View File

@ -1,15 +0,0 @@
(function() {
'use strict';
angular
.module('harbor.repository')
.controller('ListRepositoryController', ListRepositoryController);
ListRepositoryController.$inject = ['ListRepositoryService'];
function ListRepositoryController(ListRepositoryService) {
}
})();

View File

@ -1,15 +0,0 @@
(function() {
'use strict';
angular
.module('harbor.user');
.controller('ListUserController', ListUserController);
ListUserController.$inject = ['ListUserService'];
function ListUserController(ListUserService) {
}
})();

View File

@ -6,7 +6,7 @@
.module('harbor.services.log') .module('harbor.services.log')
.factory('ListLogService', ListLogService); .factory('ListLogService', ListLogService);
CurrentUserService.$inject = ['$http', '$log']; ListLogService.$inject = ['$http', '$log'];
function ListLogService($http, $log) { function ListLogService($http, $log) {

11015
static/ng/vendors/jquery/jquery-1.12.3.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -5,379 +5,15 @@
<div class="section"> <div class="section">
<h4 class="page-header">My Projects<span class="gutter">|</span><a href="#" class="title-color">Public Projects</a></h4> <h4 class="page-header">My Projects<span class="gutter">|</span><a href="#" class="title-color">Public Projects</a></h4>
<div class="switch-pane"> <div class="switch-pane">
<div class="switch-pane-projects">myrepo</div> <switch-pane-projects open="vm.open" project-name="myproject"></switch-pane-projects>
<navigation-tab template-url="navigation-details.directive.html"></navigation-tab> <navigation-tab template-url="navigation-details.directive.html" visible="vm.open"></navigation-tab>
<!--ul class="switch-pane-tabs" role="tablist">
<li><a role="presentation" href="#repositories" aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
<li><a role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
<li><a role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
</ul-->
</div>
<div class="switch-pane-drop-down" style="visibility: hidden;">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="form-inline search-projects">
<div class="input-group">
<input type="text" class="form-control search-icon" placeholder="" size="30">
</div>
</div>
<h5 class="page-header">My Projects: <span class="badge">23</span></h5>
<div class="project-list pane-container">
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok project-selected"></span> myrepo
</li>
<li class="list-group-item">
target1
</li>
<li class="list-group-item">
test
</li>
<li class="list-group-item">
harbor
</li>
<li class="list-group-item">
distribution
</li>
<li class="list-group-item">
demo
</li>
<li class="list-group-item">
undefined
</li>
<li class="list-group-item">
myrepo
</li>
<li class="list-group-item">
target1
</li>
<li class="list-group-item">
test
</li>
<li class="list-group-item">
harbor
</li>
<li class="list-group-item">
distribution
</li>
<li class="list-group-item">
demo
</li>
<li class="list-group-item">
undefined
</li>
<li class="list-group-item">
myrepo
</li>
<li class="list-group-item">
target1
</li>
<li class="list-group-item">
test
</li>
<li class="list-group-item">
harbor
</li>
<li class="list-group-item">
distribution
</li>
<li class="list-group-item">
demo
</li>
<li class="list-group-item">
undefined
</li>
</ul>
</div>
</div>
</div>
</div>
</div> </div>
<retrieve-projects visible="vm.open"></retrieve-projects>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="repositories"> <list-repository></list-repository>
<div class="col-xs-12 col-md-12 each-tab-pane"> <list-user></list-user>
<div class="form-inline"> <list-log></list-log>
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<span class="glyphicon glyphicon-book"></span> myrepo/ubuntu
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/ubuntu:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>14.04</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/ubuntu:14.04</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
<span class="glyphicon glyphicon-book"></span> myrepo/mysql
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/mysql:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>5.6</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/mysql:5.6</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
<span class="glyphicon glyphicon-book"></span> myrepo/nginx
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/nginx:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>1.9</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/nginx:1.9</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="true" aria-controls="collapse4">
<span class="glyphicon glyphicon-book"></span> myrepo/registry
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/registry:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>2.3</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/registry:2.3</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-heading" role="tab" id="heading5">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="true" aria-controls="collapse5">
<span class="glyphicon glyphicon-book"></span> myrepo/alpine
</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
</thead>
<tbody>
<tr>
<td>latest</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/alpine:latest</td>
<td><a href="#">Copy</a></td>
</tr>
<tr>
<td>1.2</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull myrepo/alpine:1.2</td>
<td><a href="#">Copy</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="users">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span>Add Member</button>
</div>
<div class="pane">
<div class="well panel-group">
<div class="row">
<div class="col-xs-10 col-md-10">
<form>
<div class="form-group">
<input type="text" class="form-control" id="addUsername" placeholder="Username">
</div>
</form>
<form class="form-inline clearfix">
<div class="form-group">
<label for="roleIdList">Role:</label>&nbsp;&nbsp;
<input type="radio" name="roleId" value="1">&nbsp;Project Admin&nbsp;&nbsp;
<input type="radio" name="roleId" value="2">&nbsp;Developer&nbsp;&nbsp;
<input type="radio" name="roleId" value="3">&nbsp;Guest
</div>
</form>
</div>
<div class="col-xs-2 col-md-2">
<form>
<div class="form-group" style="margin-top: 20%;">
<button type="button" class="btn btn-default" id="btnCancel">Cancel</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="sub-pane">
<table class="table table-pane">
<thead>
<th>Username</th><th>Role</th><th>Operation</th>
</thead>
<tbody>
<tr>
<td>user1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>tester1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>user1</td><td>3</td><td>Project Admin</td><td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="logs">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<table class="table table-pane">
<thead>
<th>Username</th><th>Repository Name</th><th>Operation</th><th>Timestamp</th>
</thead>
<tbody>
<tr>
<td>Haox</td><td>myrepo/Ubuntu</td><td>Create</td><td>2016-03-22 12:35:00</td>
</tr>
<tr>
<td>Haox</td><td>myrepo/MySQL</td><td>Push</td><td>2016-03-22 12:35:00</td>
</tr>
<tr>
<td>Daniel</td><td>myproject/Golang</td><td>Create</td><td>2016-03-12 12:35:00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -35,7 +35,7 @@
</ul--> </ul-->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<navigation-tab template-url="navigation-tab.directive.html"></navigation-tab> <navigation-tab template-url="navigation-tab.directive.html" visible="vm.open"></navigation-tab>
</li> </li>
<li> <li>
<form class="navbar-form pull-right" role="search"> <form class="navbar-form pull-right" role="search">

View File

@ -1,7 +1,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Include meta tag to ensure proper rendering and touch zooming --> <!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!--script src="https://code.jquery.com/jquery-1.11.2.min.js"></script-->
<script src="/static/ng/vendors/jquery/jquery-1.12.3.js"></script>
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
@ -28,14 +29,33 @@
<script src="/static/ng/resources/js/harbor.initialize.js"></script> <script src="/static/ng/resources/js/harbor.initialize.js"></script>
<script src="/static/ng/resources/js/harbor.constants.js"></script> <script src="/static/ng/resources/js/harbor.constants.js"></script>
<script src="/static/ng/resources/js/layout/navigation-tab.directive.js"></script>
<script src="/static/ng/resources/js/session/session.module.js"></script> <script src="/static/ng/resources/js/session/session.module.js"></script>
<script src="/static/ng/resources/js/session/session.current-user.js"></script> <script src="/static/ng/resources/js/session/session.current-user.js"></script>
<script src="/static/ng/resources/js/services/user/services.user.module.js"></script> <script src="/static/ng/resources/js/services/user/services.user.module.js"></script>
<script src="/static/ng/resources/js/services/user/services.current-user.js"></script> <script src="/static/ng/resources/js/services/user/services.current-user.js"></script>
<script src="/static/ng/resources/js/services/user/services.list-user.js"></script>
<script src="/static/ng/resources/js/layout/header/header.module.js"></script> <script src="/static/ng/resources/js/services/repository/services.repository.module.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-repository.js"></script>
<script src="/static/ng/resources/js/layout/details/details.module.js"></script> <script src="/static/ng/resources/js/services/log/services.log.module.js"></script>
<script src="/static/ng/resources/js/services/log/services.list-log.js"></script>
<script src="/static/ng/resources/js/components/header/header.module.js"></script>
<script src="/static/ng/resources/js/components/details/details.module.js"></script>
<script src="/static/ng/resources/js/components/details/switch-pane-projects.directive.js"></script>
<script src="/static/ng/resources/js/components/details/retrieve-projects.directive.js"></script>
<script src="/static/ng/resources/js/components/repository/repository.module.js"></script>
<script src="/static/ng/resources/js/components/repository/list-repository.controller.js"></script>
<script src="/static/ng/resources/js/components/user/user.module.js"></script>
<script src="/static/ng/resources/js/components/user/list-user.directive.js"></script>
<script src="/static/ng/resources/js/components/log/log.module.js"></script>
<script src="/static/ng/resources/js/components/log/list-log.directive.js"></script>
<script src="/static/ng/resources/js/components/navigation-tab.directive.js"></script>