Work in progress: Show the diff information in the UI
This commit is contained in:
Joseph Schorr
parent
3d0b165de9
commit
262634555a
3 changed files with 139 additions and 6 deletions
|
|
@ -486,6 +486,11 @@ p.editable:hover i {
|
|||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.repo dl.dl-normal dd {
|
||||
padding-left: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.repo .header h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -660,6 +665,68 @@ p.editable:hover i {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
.repo .changes-container:before {
|
||||
content: "File Changes: ";
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.repo .changes-count-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.repo .change-count {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.repo .changes-container .added i {
|
||||
color: rgb(73, 209, 73);
|
||||
}
|
||||
|
||||
.repo .change-container .removed i {
|
||||
color: rgb(209, 73, 73);
|
||||
}
|
||||
|
||||
.repo .changes-container .changed i {
|
||||
color: rgb(73, 100, 209);
|
||||
}
|
||||
|
||||
.repo .change-count:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.repo .change-count i {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.repo .change i {
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.repo .more-changes {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.repo #collapseChanges .well {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.repo #collapseChanges .change {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-nav > li > .user-dropdown {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
|
|
|
|||
|
|
@ -360,8 +360,30 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
|
|||
});
|
||||
};
|
||||
|
||||
$scope.loadImageChanges = function(image) {
|
||||
$scope.currentImageChanges = null;
|
||||
|
||||
var changesFetch = Restangular.one('repository/' + namespace + '/' + name + '/image/' + image.id + '/changes');
|
||||
changesFetch.get().then(function(changeInfo) {
|
||||
$scope.currentImageChanges = changeInfo;
|
||||
}, function() {
|
||||
$scope.currentImageChanges = {};
|
||||
});
|
||||
};
|
||||
|
||||
$scope.getMoreCount = function(changes) {
|
||||
if (!changes) { return 0; }
|
||||
var addedDisplayed = Math.min(15, changes.added.length);
|
||||
var removedDisplayed = Math.min(15, changes.removed.length);
|
||||
var changedDisplayed = Math.min(15, changes.changed.length);
|
||||
|
||||
return (changes.added.length + changes.removed.length + changes.changed.length) -
|
||||
addedDisplayed - removedDisplayed - changedDisplayed;
|
||||
};
|
||||
|
||||
$scope.setImage = function(image) {
|
||||
$scope.currentImage = image;
|
||||
$scope.loadImageChanges(image);
|
||||
if ($scope.tree) {
|
||||
$scope.tree.setImage($scope.currentImage.id);
|
||||
}
|
||||
|
|
@ -382,6 +404,7 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
|
|||
if (proposedTag) {
|
||||
$scope.currentTag = proposedTag;
|
||||
$scope.currentImage = $scope.currentTag.image;
|
||||
$scope.loadImageChanges($scope.currentImage);
|
||||
if ($scope.tree) {
|
||||
$scope.tree.setTag($scope.currentTag.name);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,15 +107,58 @@
|
|||
|
||||
<div class="panel-body">
|
||||
<div id="current-image">
|
||||
<dl class="dl-horizontal">
|
||||
<div ng-show="currentImage.comment">
|
||||
<blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentImage.comment)">
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<dl class="dl-normal">
|
||||
<dt>Created</dt>
|
||||
<dd am-time-ago="parseDate(currentTag.image.created)"></dd>
|
||||
<dd am-time-ago="parseDate(currentImage.created)"></dd>
|
||||
<dt>Image ID</dt>
|
||||
<dd>{{ currentImage.id }}</dd>
|
||||
</dl>
|
||||
|
||||
<div ng-show="currentTag.image.comment">
|
||||
<strong>Description:</strong>
|
||||
<blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentTag.image.comment)">
|
||||
</blockquote>
|
||||
<!-- Image changes loading -->
|
||||
<div ng-hide="currentImageChanges">
|
||||
<i class="icon-spinner icon-spin icon-3x"></i>
|
||||
</div>
|
||||
|
||||
<div class="changes-container" ng-show="currentImageChanges.changed">
|
||||
<div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
|
||||
<span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added">
|
||||
<i class="icon-plus-sign-alt"></i>
|
||||
<b>{{currentImageChanges.added.length}}</b>
|
||||
</span>
|
||||
<span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed">
|
||||
<i class="icon-minus-sign-alt"></i>
|
||||
<b>{{currentImageChanges.removed.length}}</b>
|
||||
</span>
|
||||
<span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed">
|
||||
<i class="icon-edit-sign"></i>
|
||||
<b>{{currentImageChanges.changed.length}}</b>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="collapseChanges" class="panel-collapse collapse out">
|
||||
<div class="well well-sm">
|
||||
<div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
|
||||
<i class="icon-plus-sign-alt"></i>
|
||||
<span title="{{file}}">{{file}}</span>
|
||||
</div>
|
||||
<div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
|
||||
<i class="icon-minus-sign-alt"></i>
|
||||
<span title="{{file}}">{{file}}</span>
|
||||
</div>
|
||||
<div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
|
||||
<i class="icon-edit-sign"></i>
|
||||
<span title="{{file}}">{{file}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-changes" ng-show="getMoreCount(currentImageChanges) > 0">
|
||||
<a href="">And {{getMoreCount(currentImageChanges)}} more...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue