mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
zep_2813 UI for REVISIONS COMPARATOR.
This commit is contained in:
tinkoff-dwh
parent
3d4f86c3e8
commit
310760edf0
3 changed files with 287 additions and 71 deletions
|
|
@ -22,10 +22,11 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
$scope.firstNoteRevisionForCompare = null
|
||||
$scope.secondNoteRevisionForCompare = null
|
||||
$scope.mergeNoteRevisionsForCompare = null
|
||||
$scope.currentParagraphDiffDisplay = null
|
||||
$scope.currentFirstRevisionForCompare = 'Choose...'
|
||||
$scope.currentSecondRevisionForCompare = 'Choose...'
|
||||
|
||||
$scope.getNoteRevisionForReview = function(revision, position) {
|
||||
$scope.getNoteRevisionForReview = function (revision, position) {
|
||||
if (position) {
|
||||
if (position === 'first') {
|
||||
$scope.currentFirstRevisionForCompare = revision.message
|
||||
|
|
@ -37,7 +38,7 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
}
|
||||
|
||||
// compare revisions
|
||||
$scope.compareRevisions = function() {
|
||||
$scope.compareRevisions = function () {
|
||||
if ($scope.firstNoteRevisionForCompare && $scope.secondNoteRevisionForCompare) {
|
||||
let paragraphs1 = $scope.firstNoteRevisionForCompare.note.paragraphs
|
||||
let paragraphs2 = $scope.secondNoteRevisionForCompare.note.paragraphs
|
||||
|
|
@ -67,13 +68,20 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
let identicalClass = 'color-black'
|
||||
|
||||
diff.forEach(function (part) {
|
||||
colorClass = part.added ? 'color-green' : part.removed ? 'color-red' : identicalClass
|
||||
colorClass = part.added ? 'color-green-row' : part.removed ? 'color-red-row' : identicalClass
|
||||
span = document.createElement('span')
|
||||
span.className = colorClass
|
||||
if (identical && colorClass !== identicalClass) {
|
||||
identical = false
|
||||
}
|
||||
span.appendChild(document.createTextNode(part.value))
|
||||
|
||||
let str = part.value
|
||||
|
||||
if (str[str.length - 1] !== '\n') {
|
||||
str = str + '\n'
|
||||
}
|
||||
|
||||
span.appendChild(document.createTextNode(str))
|
||||
diffHtml.appendChild(span)
|
||||
})
|
||||
|
||||
|
|
@ -104,7 +112,7 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
}
|
||||
}
|
||||
|
||||
merge.sort(function(a, b) {
|
||||
merge.sort(function (a, b) {
|
||||
if (a.type === added) {
|
||||
return -1
|
||||
}
|
||||
|
|
@ -121,6 +129,10 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
})
|
||||
|
||||
$scope.mergeNoteRevisionsForCompare = merge
|
||||
|
||||
if ($scope.currentParagraphDiffDisplay !== null) {
|
||||
$scope.changeCurrentParagraphDiffDisplay($scope.currentParagraphDiffDisplay.paragraph.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,8 +152,18 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
|
|||
}
|
||||
})
|
||||
|
||||
$scope.formatRevisionDate = function(date) {
|
||||
return moment.unix(date).format('MMMM Do YYYY, h:mm a')
|
||||
$scope.formatRevisionDate = function (date) {
|
||||
return moment.unix(date).format('MMMM Do YYYY, h:mm:ss a')
|
||||
}
|
||||
|
||||
$scope.changeCurrentParagraphDiffDisplay = function (paragraphId) {
|
||||
for (let p of $scope.mergeNoteRevisionsForCompare) {
|
||||
if (p.paragraph.id === paragraphId) {
|
||||
$scope.currentParagraphDiffDisplay = p
|
||||
return
|
||||
}
|
||||
}
|
||||
$scope.currentParagraphDiffDisplay = null
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,17 +22,157 @@
|
|||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.revisions-comparator-panel {
|
||||
transition-property: border, left, background-color;
|
||||
transition-duration: 250ms, 500ms, 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 95%;
|
||||
background-color: rgba(255, 255, 0, 0.10);
|
||||
border: 1px solid rgba(120, 129, 82, 0.08);
|
||||
margin-right: 15px;
|
||||
min-width: 270px;
|
||||
}
|
||||
|
||||
.revisions-comparator-panel:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.revisions-comparator-panel:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.revisions-comparator-panel:hover {
|
||||
left: 6px;
|
||||
border: 1px solid rgba(55, 54, 35, 0.35);
|
||||
background-color: rgba(255, 204, 0, 0.25);
|
||||
}
|
||||
|
||||
.revisions-comparator-panel-selected {
|
||||
left: 18px !important;
|
||||
background-color: rgba(252, 255, 0, 0.53) !important;
|
||||
border: 1px solid rgba(55, 54, 35, 0.49)
|
||||
}
|
||||
|
||||
.revisions-comparator-panel-heading {
|
||||
padding: 10px 0px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.revisions-comparator-panel.ng-enter,
|
||||
.revisions-comparator-panel.ng-enter.ng-enter-active ,
|
||||
.revisions-comparator-panel.ng-leave,
|
||||
.revisions-comparator-panel.ng-leave-active {
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
|
||||
.cursor-hand {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paragraphs-div {
|
||||
overflow: auto;
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
.paragraphs-div-border {
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.commit-tree {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid grey;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
.commit-rows {
|
||||
height: 30vh;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commit-rows tr:nth-child(even) {
|
||||
background-color: rgba(128, 128, 128, 0.06);
|
||||
}
|
||||
|
||||
.commit-tree tr:hover {
|
||||
background-color: rgba(0, 146, 164, 0.21);
|
||||
}
|
||||
|
||||
.selected-revision {
|
||||
background-color: rgba(0, 161, 255, 0.43) !important;
|
||||
}
|
||||
|
||||
.commit-tree table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
padding: 2px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.commit-tree tr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commit-tree td:nth-child(1),
|
||||
.commit-tree th:nth-child(1) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.commit-tree td:nth-child(2),
|
||||
.commit-tree th:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.commit-tree th{
|
||||
background-color: rgba(32, 141, 172, 0.68);
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commit-tree thead tr {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-code-panel {
|
||||
text-align: center;
|
||||
padding-top: 25%;
|
||||
font-size: 30px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.empty-paragraph-message {
|
||||
font-size: 2em;
|
||||
color: grey;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.revisions-comparator-bar {
|
||||
margin-left: 25px;
|
||||
|
||||
}
|
||||
|
||||
.revisions-comparator-bar .btn-group {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.revisions-comparator-code-panel {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 95%;
|
||||
float: left;
|
||||
height: 300px;
|
||||
height: 70vh;
|
||||
overflow-y: auto;
|
||||
max-height: 300px
|
||||
}
|
||||
|
||||
.revisions-comparator-code-panel-title {
|
||||
|
|
@ -40,7 +180,6 @@
|
|||
float: left;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.revisions-comparator-bar {
|
||||
|
|
@ -55,6 +194,9 @@
|
|||
|
||||
#diffPanel {
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
border: 2px solid grey;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
#diffPanel .panel-group {
|
||||
|
|
@ -84,7 +226,10 @@
|
|||
|
||||
.revisions-comparator-first-string {
|
||||
display: block;
|
||||
height: 2em;
|
||||
overflow: hidden;
|
||||
padding-top: 6px;
|
||||
padding-left: 5px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
|
|
@ -97,6 +242,18 @@
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.color-green-row {
|
||||
background-color: rgba(0, 226, 0, 0.22);
|
||||
display: block;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.color-red-row {
|
||||
background-color: rgba(226, 0, 0, 0.22);
|
||||
display: block;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
color: green;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,77 +11,114 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="revisions-comparator-bar">
|
||||
<div class="btn-group">
|
||||
<button type="button" ng-if="$ctrl.noteRevisions.length > 0"
|
||||
class="btn btn-default revisions-comparator-dropdown dropdown-toggle"
|
||||
data-toggle="dropdown" id="firstRevisionDropdown" title="{{currentFirstRevisionForCompare}}">
|
||||
<div class="revision-name-for-compare">{{currentFirstRevisionForCompare}}</div>
|
||||
<span class="caret revisions-comparator-caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="firstRevisionDropdown">
|
||||
<li></li>
|
||||
<li ng-repeat="revision in $ctrl.noteRevisions | orderBy:'time':true" class="revision">
|
||||
<a style="cursor:pointer" ng-click="getNoteRevisionForReview(revision, 'first')">
|
||||
<div class="commit-tree">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Revision name</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="commit-rows">
|
||||
<tr ng-repeat="revision in $ctrl.noteRevisions | orderBy:'time':true"
|
||||
ng-class="{'cursor-hand': !$last, 'selected-revision': revision.message === currentSecondRevisionForCompare}"
|
||||
ng-click="getNoteRevisionForReview($ctrl.noteRevisions[$index + 1], 'first'); getNoteRevisionForReview(revision, 'second')">
|
||||
<td>{{revision.message}}</td>
|
||||
<td>{{formatRevisionDate(revision.time)}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="revisions-comparator-bar">
|
||||
<div class="btn-group">
|
||||
<button type="button" ng-if="$ctrl.noteRevisions.length > 0"
|
||||
class="btn btn-default revisions-comparator-dropdown dropdown-toggle"
|
||||
data-toggle="dropdown" id="firstRevisionDropdown" title="{{currentFirstRevisionForCompare}}">
|
||||
<div class="revision-name-for-compare">{{currentFirstRevisionForCompare}}</div>
|
||||
<span class="caret revisions-comparator-caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="firstRevisionDropdown">
|
||||
<li></li>
|
||||
<li ng-repeat="revision in $ctrl.noteRevisions | orderBy:'time':true" class="revision">
|
||||
<a style="cursor:pointer" ng-click="getNoteRevisionForReview(revision, 'first')">
|
||||
<span style="display: block;">
|
||||
<strong>{{revision.message}}</strong>
|
||||
</span>
|
||||
<span class="revisionDate">
|
||||
<span class="revisionDate">
|
||||
<em>{{formatRevisionDate(revision.time)}}</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span>compare with</span>
|
||||
<div class="btn-group">
|
||||
<button type="button" ng-if="$ctrl.noteRevisions.length > 0"
|
||||
class="btn btn-default revisions-comparator-dropdown dropdown-toggle"
|
||||
ng-disabled="firstNoteRevisionForCompare === null"
|
||||
data-toggle="dropdown" id="secondRevisionDropdown" title="{{currentSecondRevisionForCompare}}">
|
||||
<div class="revision-name-for-compare">{{currentSecondRevisionForCompare}}</div>
|
||||
<span class="caret revisions-comparator-caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="secondRevisionDropdown">
|
||||
<li ng-repeat="revision in $ctrl.noteRevisions | orderBy:'time':true" class="revision">
|
||||
<a style="cursor:pointer" ng-click="getNoteRevisionForReview(revision, 'second')">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span>compare with</span>
|
||||
<div class="btn-group">
|
||||
<button type="button" ng-if="$ctrl.noteRevisions.length > 0"
|
||||
class="btn btn-default revisions-comparator-dropdown dropdown-toggle"
|
||||
ng-disabled="firstNoteRevisionForCompare === null"
|
||||
data-toggle="dropdown" id="secondRevisionDropdown" title="{{currentSecondRevisionForCompare}}">
|
||||
<div class="revision-name-for-compare">{{currentSecondRevisionForCompare}}</div>
|
||||
<span class="caret revisions-comparator-caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="secondRevisionDropdown">
|
||||
<li ng-repeat="revision in $ctrl.noteRevisions | orderBy:'time':true" class="revision">
|
||||
<a style="cursor:pointer" ng-click="getNoteRevisionForReview(revision, 'second')">
|
||||
<span style="display: block;">
|
||||
<strong>{{revision.message}}</strong>
|
||||
</span>
|
||||
<span class="revisionDate">
|
||||
<span class="revisionDate">
|
||||
<em>{{formatRevisionDate(revision.time)}}</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diffPanel">
|
||||
<div class="panel-group">
|
||||
<div class="panel" data-ng-repeat="p in mergeNoteRevisionsForCompare">
|
||||
<div class="revisions-comparator-panel-heading">
|
||||
<a class="revisions-comparator-link" data-toggle="collapse" data-parent="#diffPanel" href="#{{p.paragraph.id}}">
|
||||
<h4 class="panel-title">
|
||||
{{p.paragraph.id}}<strong style="padding: 5px;" ng-if="p.paragraph.title">({{p.paragraph.title}})</strong>
|
||||
<i ng-if="p.type === 'added'" class="revisions-comparator-status color-green">added</i>
|
||||
<i ng-if="p.type === 'deleted'" class="revisions-comparator-status color-red">deleted</i>
|
||||
<i ng-if="p.type === 'compared' && !(p.identical)" class="revisions-comparator-status color-orange">there are differences</i>
|
||||
<i ng-if="p.type === 'compared' && p.identical" class="revisions-comparator-status">contents are identical</i>
|
||||
<i class="revisions-comparator-first-string">{{p.firstString}}</i>
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div id="{{p.paragraph.id}}" class="panel-collapse collapse">
|
||||
<span class="revisions-comparator-code-panel-title">Revision: <strong>{{currentFirstRevisionForCompare}}</strong></span>
|
||||
<span class="revisions-comparator-code-panel-title">Revision: <strong>{{currentSecondRevisionForCompare}}</strong></span>
|
||||
<pre ng-if="p.type === 'added'" class="revisions-comparator-code-panel"></pre>
|
||||
<pre ng-if="p.type === 'added'" class="revisions-comparator-code-panel color-green">{{p.paragraph.text}}</pre>
|
||||
<pre ng-if="p.type === 'deleted'" class="revisions-comparator-code-panel color-red">{{p.paragraph.text}}</pre>
|
||||
<pre ng-if="p.type === 'deleted'" class="revisions-comparator-code-panel"></pre>
|
||||
<pre ng-if="p.type === 'compared'" class="revisions-comparator-code-panel">{{p.paragraph.text}}</pre>
|
||||
<pre ng-if="p.type === 'compared'" class="revisions-comparator-code-panel" ng-bind-html="p.diff"></pre>
|
||||
|
||||
<div id="diffPanel">
|
||||
<div class="panel-group" style="margin-bottom: 0px">
|
||||
<div class="paragraphs-div">
|
||||
<div class="panel revisions-comparator-panel" data-ng-repeat="p in mergeNoteRevisionsForCompare"
|
||||
ng-class="{'revisions-comparator-panel-selected' : currentParagraphDiffDisplay.paragraph.id === p.paragraph.id}">
|
||||
<div class="revisions-comparator-panel-heading"
|
||||
ng-click="changeCurrentParagraphDiffDisplay(p.paragraph.id)">
|
||||
<h4 class="panel-title">
|
||||
{{p.paragraph.id}}<strong style="padding: 5px;" ng-if="p.paragraph.title">({{p.paragraph.title}})</strong>
|
||||
<i ng-if="p.type === 'added'" class="revisions-comparator-status color-green">added</i>
|
||||
<i ng-if="p.type === 'deleted'" class="revisions-comparator-status color-red">deleted</i>
|
||||
<i ng-if="p.type === 'compared' && !(p.identical)" class="revisions-comparator-status color-orange">there
|
||||
are differences</i>
|
||||
<i ng-if="p.type === 'compared' && p.identical" class="revisions-comparator-status">contents are
|
||||
identical</i>
|
||||
<i class="revisions-comparator-first-string">{{p.firstString}}</i>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: table; width: 100%; height: 100%"
|
||||
ng-if="currentSecondRevisionForCompare === 'Choose...'">
|
||||
<div class="empty-paragraph-message">
|
||||
Please select a revision
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="revisions-comparator-code-panel-id center-block" class="panel col-md-8">
|
||||
<span
|
||||
class="revisions-comparator-code-panel-title">Revision: <strong>{{currentFirstRevisionForCompare}} --> {{currentSecondRevisionForCompare}}</strong></span>
|
||||
<pre ng-if="currentParagraphDiffDisplay.type === 'added'"
|
||||
class="revisions-comparator-code-panel color-green-row">{{currentParagraphDiffDisplay.paragraph.text}}</pre>
|
||||
<pre ng-if="currentParagraphDiffDisplay.type === 'deleted'"
|
||||
class="revisions-comparator-code-panel color-red-row">{{currentParagraphDiffDisplay.paragraph.text}}</pre>
|
||||
<pre ng-if="currentParagraphDiffDisplay.type === 'compared'"
|
||||
class="revisions-comparator-code-panel" ng-bind-html="currentParagraphDiffDisplay.diff"></pre>
|
||||
<pre ng-if="currentParagraphDiffDisplay === null"
|
||||
class="revisions-comparator-code-panel empty-code-panel"><div>Nothing to display</div></pre>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue