mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-11-27 04:11:03 +00:00
Adding a list-view layout
This commit is contained in:
Andy Gardner
parent
350d056d34
commit
5ea14a73af
5 changed files with 212 additions and 7 deletions
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.5.0/pure-min.css" />
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.5.0/pure-min.css" />
|
||||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.5.0/grids-responsive-min.css" />
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.5.0/grids-responsive-min.css" />
|
||||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" />
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600" />
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Orbitron" />
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Orbitron" />
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
|
||||||
<link rel="stylesheet" href="/static/styles/drone.css" />
|
<link rel="stylesheet" href="/static/styles/drone.css" />
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('app').controller("RepoController", function($scope, $http, $routeParams, $route, repos, feed, repo) {
|
angular.module('app').controller("RepoController", function($scope, $filter, $http, $routeParams, $route, repos, feed, repo) {
|
||||||
$scope.repo = repo;
|
$scope.repo = repo;
|
||||||
$scope.activating = false;
|
$scope.activating = false;
|
||||||
|
$scope.build_filter = 'build_history';
|
||||||
|
$scope.layout = 'grid';
|
||||||
|
|
||||||
// subscribes to the global feed to receive
|
// subscribes to the global feed to receive
|
||||||
// build status updates.
|
// build status updates.
|
||||||
|
|
@ -83,6 +85,34 @@ angular.module('app').controller("RepoController", function($scope, $http, $rout
|
||||||
// });
|
// });
|
||||||
//};
|
//};
|
||||||
|
|
||||||
|
$scope.setCommitFilter = function(filter) {
|
||||||
|
$scope.build_filter = filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.setLayout = function(layout) {
|
||||||
|
$scope.layout = layout;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.filteredCommits = function() {
|
||||||
|
var filteredCommits;
|
||||||
|
switch ($scope.build_filter) {
|
||||||
|
// Latest commit for each branch (excluding PR branches)
|
||||||
|
case 'branch_summary':
|
||||||
|
filteredCommits = $filter('filter')($scope.commits, { pull_request: '' }, true);
|
||||||
|
filteredCommits = $filter('unique')($scope.commits, 'branch');
|
||||||
|
break;
|
||||||
|
// Latest commit for each PR
|
||||||
|
case 'pull_requests':
|
||||||
|
filteredCommits = $filter('pullRequests')($scope.commits);
|
||||||
|
filteredCommits = $filter('unique')(filteredCommits, 'pull_request');
|
||||||
|
break;
|
||||||
|
// All commits for a full build history
|
||||||
|
default:
|
||||||
|
filteredCommits = $scope.commits;
|
||||||
|
}
|
||||||
|
|
||||||
|
return filteredCommits;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -500,6 +500,24 @@ nav {
|
||||||
background-color: @csuccess;
|
background-color: @csuccess;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
font-size:inherit;
|
||||||
|
padding-left: 0px;
|
||||||
|
line-height: initial;
|
||||||
|
min-height:initial;
|
||||||
|
margin-bottom:10px;
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
|
||||||
|
.pure-button {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: rgba(0,0,0,.8);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#commitpage {
|
#commitpage {
|
||||||
|
|
@ -1584,3 +1602,112 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.list-view {
|
||||||
|
font-size: 11.8px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #666;
|
||||||
|
border-spacing: 0;
|
||||||
|
width:100%;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
td:first-child:before {
|
||||||
|
display: block;
|
||||||
|
content: ".";
|
||||||
|
color: transparent;
|
||||||
|
font-size: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 32px;
|
||||||
|
float: left;
|
||||||
|
margin: -5px 5px -5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-status=Started], &[data-status=Pending] {
|
||||||
|
td {
|
||||||
|
background-color: #fffcf4;
|
||||||
|
}
|
||||||
|
&:hover td {
|
||||||
|
background-color: #ffffe1;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child:before {
|
||||||
|
background-color: #e7c600;
|
||||||
|
animation: progress 2s linear infinite;
|
||||||
|
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .55) 75%, transparent 75%, transparent);
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 10px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-status=Error], &[data-status=Failure], &[data-status=Killed] {
|
||||||
|
td {
|
||||||
|
background-color: snow;
|
||||||
|
}
|
||||||
|
&:hover td {
|
||||||
|
background-color: #ffdcdc;
|
||||||
|
}
|
||||||
|
td:first-child {
|
||||||
|
color: #c00;
|
||||||
|
&:before {
|
||||||
|
background-color: #c00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-status=Success] {
|
||||||
|
td {
|
||||||
|
background-color: #fafffa;
|
||||||
|
}
|
||||||
|
&:hover td {
|
||||||
|
background-color: #dcffdc;
|
||||||
|
}
|
||||||
|
td:first-child {
|
||||||
|
color: #038035;
|
||||||
|
&:before {
|
||||||
|
background-color: #038035;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #666;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
text-align: left;
|
||||||
|
padding: 5px 20px 5px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
text-align: left;
|
||||||
|
padding: 5px 20px 5px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
a:before {
|
||||||
|
margin:0 4px 0 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
width: 100%;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -9,11 +9,17 @@
|
||||||
|
|
||||||
<article id="repopage">
|
<article id="repopage">
|
||||||
<nav>
|
<nav>
|
||||||
<div class="options" ng-if="repo.role.admin">
|
<div class="options">
|
||||||
<a class="pure-button pure-button-primary" ng-href="/{{ repo | fullPath }}/settings">
|
<a ng-if="repo.role.admin" class="pure-button pure-button-primary" ng-href="/{{ repo | fullPath }}/settings">
|
||||||
<i class="fa fa-sliders"></i>
|
<i class="fa fa-sliders"></i>
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
</a>
|
</a>
|
||||||
|
<a ng-if="layout == 'row'" class="pure-button pure-button-primary" ng-click="setLayout('grid')">
|
||||||
|
<i class="fa fa-th-large" style="margin-right:-10px;"></i>
|
||||||
|
</a>
|
||||||
|
<a ng-if="layout == 'grid'" class="pure-button pure-button-primary" ng-click="setLayout('row')">
|
||||||
|
<i class="fa fa-th-list" style="margin-right:-10px;"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="/"><span class="fa fa-th"></span></a>
|
<a href="/"><span class="fa fa-th"></span></a>
|
||||||
|
|
@ -34,7 +40,49 @@
|
||||||
<p>Add a .drone.yml file and make a commit to trigger a build</p>
|
<p>Add a .drone.yml file and make a commit to trigger a build</p>
|
||||||
<div><i class="fa fa-file-code-o"></i></div>
|
<div><i class="fa fa-file-code-o"></i></div>
|
||||||
</section>
|
</section>
|
||||||
<section ng-repeat="group in commits | filter:{ pull_request: '' }:true | unique: 'branch'">
|
|
||||||
|
<section ng-if="(commits).length!=0 && layout == 'row'" style="border:0px;">
|
||||||
|
<div class="cards">
|
||||||
|
<div class="tabs">
|
||||||
|
<a class="pure-button" ng-class="{active: build_filter=='build_history'}" ng-click="setCommitFilter('build_history')">
|
||||||
|
<i class="fa fa-history"></i>
|
||||||
|
<span>Build History</span>
|
||||||
|
</a>
|
||||||
|
<a class="pure-button" ng-if="(commits | pullRequests).length!=0" ng-class="{active: build_filter=='pull_requests'}" ng-click="setCommitFilter('pull_requests')">
|
||||||
|
<i class="fa fa-code-fork"></i>
|
||||||
|
<span>Pull Requests</span>
|
||||||
|
</a>
|
||||||
|
<a class="pure-button" ng-class="{active: build_filter=='branch_summary'}" ng-click="setCommitFilter('branch_summary')">
|
||||||
|
<i class="fa fa-code-fork"></i>
|
||||||
|
<span>Branch Summary</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<table class="list-view">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Build</th><th>Message</th><th>Commit</th><th>Committer</th><th>Duration</th><th>Finished</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr ng-repeat="commit in filteredCommits() | limitTo:25" data-status="{{ commit.status }}">
|
||||||
|
<td><a href='/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}'>{{ commit.id }}</a></td>
|
||||||
|
<td>{{ commit.message }}</td>
|
||||||
|
<td><a href='{{ repo.url }}/commit/{{ commit.sha }}'>{{ commit.sha | shortHash }}</a> (<a href='{{ repo.url }}/tree/{{ commit.branch }}'>{{ commit.branch }}</a>)</td>
|
||||||
|
<td>{{ commit.author }}</td>
|
||||||
|
|
||||||
|
<td ng-if="commit.finished_at != 0" title="{{ commit.duration }} seconds">{{ commit.duration | toDuration }}</td>
|
||||||
|
<td ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.started_at | fromNow }}</td>
|
||||||
|
<td ng-if="commit.finished_at == 0 && commit.started_at == 0">-</td>
|
||||||
|
|
||||||
|
<td ng-if="commit.finished_at != 0" title="{{ commit.finished_at * 1000 | date:'medium' }}">{{ commit.finished_at | fromNow }}</td>
|
||||||
|
<td ng-if="commit.finished_at == 0">-</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section ng-if="layout == 'grid'" ng-repeat="group in commits | filter:{ pull_request: '' }:true | unique: 'branch'">
|
||||||
<div class="pure-g cards">
|
<div class="pure-g cards">
|
||||||
<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> {{group.branch}}</h2>
|
<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> {{group.branch}}</h2>
|
||||||
<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | filter:{ branch:group.branch }:true | limitTo:4" data-status="{{ commit.status }}">
|
<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | filter:{ branch:group.branch }:true | limitTo:4" data-status="{{ commit.status }}">
|
||||||
|
|
@ -49,7 +97,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section ng-if="(commits | pullRequests).length!=0">
|
<section ng-if="(commits | pullRequests).length!=0 && layout == 'grid'"">
|
||||||
<div class="pure-g cards">
|
<div class="pure-g cards">
|
||||||
<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> Pull Requests</h2>
|
<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> Pull Requests</h2>
|
||||||
<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | pullRequests | limitTo:4" data-status="{{ commit.status }}">
|
<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | pullRequests | limitTo:4" data-status="{{ commit.status }}">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue