Skip to content

A
atlas
Commit d0cb5c37 by kalyani Committed by Madhan Neethiraj
Options

ATLAS-1688: fix lineage UI resize issues

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 401d39af
Showing with 270 additions and 108 deletions
dashboardv2/public/css/scss/graph.scss
......@@ -28,11 +28,6 @@
.node {
cursor: pointer;
circle {
fill: $white;
stroke: $steel_blue;
stroke-width: 1.5px;
}
text {
font-size: 10px;
font-family: $font_1;
......@@ -45,11 +40,21 @@
.label {
fill: $color_suva_gray_approx;
}
image {
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.nodeImage {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
&.green:hover {
stroke: #8bc152;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
......@@ -57,6 +62,21 @@
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #8bc152;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.overlay {}
......@@ -74,19 +94,12 @@
background: $black_80;
color: $white;
z-index: 999;
max-width: 300px;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px;
&:after {
//Instead of the line below you could use @include box-sizing($bs)
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: $black_80;
content: "\25BC";
position: absolute;
text-align: center;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
}
&.n:after {
margin: -1px 0 0;
......@@ -100,6 +113,7 @@ g.type-TK > rect {
}
.zoomButtonGroup {
background-color: $white;
position: absolute;
top: 4px;
right: 5px;
......
dashboardv2/public/css/scss/main.scss
......@@ -320,8 +320,23 @@ ul {
@media (min-width: 768px) {
.col-sm-custom {
width: 92%;
margin: 36px 36px 0px;
//width: 92%;
margin: 25px 25px 0px;
position: relative;
}
}
.panel-fullscreen {
position: fixed;
height: 100%;
top: 0px;
bottom: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
}
.no-padding {
padding: 0px !important;
}
dashboardv2/public/css/scss/override.scss
......@@ -72,7 +72,7 @@
.table-quickMenu>thead>tr>th {
border-width: thin;
border-color: $action_gray;
border-color: $color_jungle_green_approx;
border-bottom-style: solid;
box-shadow: none;
padding: 20px 30px;
......
dashboardv2/public/css/scss/panel.scss
......@@ -19,27 +19,57 @@
/* panel.scss */
.panel {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0;
}
.panel-primary {
border-color: $color_hoki_approx;
.panel-default {
> .panel-heading {
color: $white;
background-color: $color_hoki_approx;
border-color: $color_hoki_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0;
color: $color_jungle_green_approx;
background: $white;
border-color: $color_jungle_green_approx;
button {
color: $color_jungle_green_approx;
background: $white;
border: none;
}
.panel-title {
font-weight: bold;
padding-top: 8px;
}
}
.nav-tabs {
> li {
&.active {
>a {
color: $color_jungle_green_approx;
}
}
>a {
color: $black;
}
}
}
}
.appForm {
.panel-fullscreen {
.panel-body {
padding-bottom: 0;
//overflow: hidden;
height: calc(100% - 46px)!important;
}
.panel-footer {
margin-bottom: 0;
.ui-resizable-handle{
display: none !important;
}
}
.nav-tabs {
>li {
&:first-child {
margin-left: 25px;
}
}
}
.with-nav-tabs {
.tab-content {
> .tab-pane.active {
padding: 20px 10px 0px 10px;
}
}
}
\ No newline at end of file
dashboardv2/public/css/scss/tab.scss
......@@ -20,7 +20,7 @@
/* tab.scss */
.atlast-tabbable {
margin: 50px 0;
margin: 25px 0;
.nav-tabs {
border-bottom: 1px solid $color_mystic_approx;
> li {
......@@ -119,7 +119,7 @@ ul.tabs li.tab {
}
.atlast-tabbable {
margin: 50px 0;
margin: 25px 0;
.nav-tabs {
border-bottom: 1px solid $color_mystic_approx;
> li {
......
dashboardv2/public/css/scss/theme.scss
......@@ -70,7 +70,7 @@
.page-title {
background-color: $white;
padding: 50px;
padding: 25px;
h1 {
margin-top: 50px;
margin-bottom: 10px;
......
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
......@@ -14,21 +14,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="panel-body graph-bg resize-graph" align="center">
<div class="graph" id="tree-container">
<div style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div style="position:relative">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<svg width=100% height=350></svg>
<div class="legends">
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
</div>
<div class="zoomButtonGroup">
<button type="button" class="zoomButton" id="zoom_in">+</button>
<button type="button" class="zoomButton" id="zoom_out">-</button>
</div>
<svg width="100%" height="100%"></svg>
<div class="legends" style="height: 20px">
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
</div>
<div class="zoomButtonGroup">
<span type="button" id="zoom_in" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div>
</div>
dashboardv2/public/js/utils/Utils.js
......@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
loaderEl.hide();
titleBoxEl.fadeIn();
}
$.fn.toggleAttribute = function(attributeName, firstString, secondString) {
if (this.attr(attributeName) == firstString) {
this.attr(attributeName, secondString);
} else {
this.attr(attributeName, firstString);
}
}
$('body').on('click', '.expand_collapse_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
panelBody = panel.find('.panel-body');
icon.toggleClass('fa-chevron-up fa-chevron-down');
$(this).toggleAttribute('title', 'Collapse', 'Expand');
panelBody.toggle('0.5', 'linear');
$(this).trigger('expand_collapse_panel', [$(this).parents('.panel')]);
});
$('body').on('click', '.fullscreen_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
panelBody = panel.find('.panel-body');
icon.toggleClass('fa-expand fa-compress');
$(this).toggleAttribute('title', 'Fullscreen', 'Exit Fullscreen');
panel.toggleClass('panel-fullscreen');
panel.find('.expand_collapse_panel').toggle();
// Condition if user clicks on fullscree button and body is in collapse mode.
if (panel.hasClass('panel-fullscreen')) {
$('body').css("position", "fixed");
if (!panelBody.is(':visible')) {
panelBody.show();
panelBody.addClass('full-visible');
}
//first show body to get width and height for postion then trigger the event.
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
} else if (panelBody.hasClass('full-visible')) {
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
//first trigger the event to getwidth and height for postion then hide body.
panelBody.hide();
panelBody.removeClass('full-visible');
} else {
$('body').removeAttr("style");
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
}
});
return Utils;
});
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -24,7 +24,8 @@ define(['require',
'utils/Globals',
'utils/Enums',
'utils/Messages',
'utils/UrlLinks'
'utils/UrlLinks',
'jquery-ui'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
......@@ -57,7 +58,8 @@ define(['require',
addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]',
tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]'
termList: '[data-id="termList"]',
fullscreenPanel: "#fullscreen_panel"
},
templateHelpers: function() {
return {
......@@ -197,7 +199,43 @@ define(['require',
var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader
this.renderLineageLayoutView({ guid: this.id, entityDefCollection: this.entityDefCollection });
this.renderLineageLayoutView({
guid: this.id,
entityDefCollection: this.entityDefCollection,
actionCallBack: function() {
that.$('#expand_collapse_panel').click();
}
});
this.$(".resize-graph").resizable({
handles: ' s',
minHeight: 375,
stop: function(event, ui) {
that.$('.resize-graph').height(($(this).height()));
},
});
this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
var svgEl = panel.find('.panel-body svg'),
scaleEl = svgEl.find('>g'),
zoom = that.RLineageLayoutView.currentView.zoom,
svg = that.RLineageLayoutView.currentView.svg,
viewThis = that.RLineageLayoutView.currentView,
setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
zoomed = that.RLineageLayoutView.currentView.zoomed;;
if (zoom) {
setGraphZoomPositionCal.call(viewThis);
zoomed.call(viewThis);
if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) {
svg.call(zoom)
.on("dblclick.zoom", null);
} else {
svg.call(zoom)
.on("wheel.zoom", null)
.on("dblclick.zoom", null);
}
}
})
},
fetchCollection: function() {
this.collection.fetch({ reset: true });
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
......@@ -99,7 +99,7 @@ define(['require',
includePagination: true,
includePageSize: false,
includeFooterRecords: true,
includeOrderAbleColumns: true,
includeOrderAbleColumns: false,
gridOpts: {
className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!'
......@@ -204,8 +204,7 @@ define(['require',
var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort();
that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns,
includeOrderAbleColumns: true
columns: columns
})));
that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').hide();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment