ATLAS-3009 UI - Please provide Full screen support for Lineage Signed-off-by: kevalbhatt <kbh...@apache.org> (cherry picked from commit 2a3b8830241a6bec7093bacfd91de44655adc28f) Signed-off-by: kevalbhatt <kbh...@apache.org>
Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/c51ab2d8 Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/c51ab2d8 Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/c51ab2d8 Branch: refs/heads/branch-1.0 Commit: c51ab2d8aa5c38ac9ee376f04ba7dc9b343bb6bb Parents: 8a62f97 Author: Abhishek Kadam <abhishek.kada...@gmail.com> Authored: Wed Jan 2 16:45:36 2019 +0530 Committer: kevalbhatt <kbh...@apache.org> Committed: Thu Jan 3 16:49:05 2019 +0530 ---------------------------------------------------------------------- dashboardv2/public/css/scss/form.scss | 7 +++ dashboardv2/public/css/scss/graph.scss | 58 +++++++++++++------- dashboardv2/public/css/scss/relationship.scss | 4 ++ .../detail_page/DetailPageLayoutView_tmpl.html | 19 +++---- .../templates/graph/LineageLayoutView_tmpl.html | 17 +++--- .../graph/RelationshipLayoutView_tmpl.html | 14 ++--- .../search/SearchResultLayoutView_tmpl.html | 2 +- dashboardv2/public/js/utils/Utils.js | 37 ------------- .../views/detail_page/DetailPageLayoutView.js | 14 +---- .../public/js/views/graph/LineageLayoutView.js | 25 +++++++-- .../js/views/graph/RelationshipLayoutView.js | 3 +- 11 files changed, 98 insertions(+), 102 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/css/scss/form.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss index 0789978..b7ade88 100644 --- a/dashboardv2/public/css/scss/form.scss +++ b/dashboardv2/public/css/scss/form.scss @@ -342,6 +342,13 @@ button:focus { } } +.btn-group { + .btn-atlas, + .btn-action { + margin: 0px; + } +} + .pagination>.active { >a { background-color: $color_curious_blue_approx; http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 23a1904..b84d59e 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -185,6 +185,10 @@ g.type-TK>rect { } .lineage-box { + position: absolute; + height: 100%; + width: 100%; + overflow: hidden; .lineage-edge-details { position: absolute; left: 0; @@ -261,22 +265,10 @@ g.type-TK>rect { } .graph-button-group { - position: absolute; - top: 5px; - right: 5px; - - .zoom-button-group { - margin-top: 8px; - border: 1px solid; - border-radius: 5px; - background-color: white; - - [type="button"] { - display: block; - padding: 2px 6px; - cursor: pointer; - } + &>div { + display: inline-block; } + .zoom-button-group {} } .lineage-fltr-panel { @@ -287,9 +279,8 @@ g.type-TK>rect { overflow: auto; transition: all 0.3s ease; right: -273px; - box-shadow: 9px -14px 26px 6px; + box-shadow: 7px 1px 28px -3px; background-color: #f5f5f5; - //color: $white; z-index: 999; .header { @@ -336,7 +327,7 @@ g.type-TK>rect { .btn-gray:hover { border: 1px solid #686868; color: $dark_gray !important; - background-color: transparent !important; + background-color: white !important; } @@ -344,11 +335,40 @@ span#zoom_in { border-bottom: 1px solid #625555; } -.depthContainer { +.depth-container { //display: inline-block; //margin-top: 3px; .inline { display: inline-block; } +} + +.resizeGraph { + position: relative; + width: 100%; + height: 64vh; +} + +.active.fullscreen-mode { + position: fixed; + height: 100% !important; + top: 0; + bottom: 0; + left: 0; + width: 100%; + right: 0; + padding: 0 !important; + z-index: 999; + overflow: hidden !important; + .resizeGraph { + position: fixed; + height: 100% !important; + .ui-resizable-handle { + display: none; + } + } + .lineage-box { + padding: 10px !important; + } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/css/scss/relationship.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/relationship.scss b/dashboardv2/public/css/scss/relationship.scss index 57772d7..e41fe58 100644 --- a/dashboardv2/public/css/scss/relationship.scss +++ b/dashboardv2/public/css/scss/relationship.scss @@ -17,6 +17,10 @@ */ .relationship-box { + position: absolute; + height: 100%; + width: 100%; + overflow: hidden; .relatioship-link { fill: none; stroke-width: 1.5px; http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html index 6cdaff8..c395799 100644 --- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html @@ -22,8 +22,7 @@ <h1 class="title row"> <div data-id="entityIcon" class="entity-icon-box"></div> <span data-id="title"></span> - </h1> - {{#if entityUpdate}} + </h1> {{#if entityUpdate}} <div data-id="editButtonContainer" class="pull-right"></div> {{/if}} <div class="form-group"> @@ -73,20 +72,16 @@ </div> </div> <div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn"> - <div class="resizeGraph animated position-relative" align="center" style="height:64vh;"> - <div id="r_lineageLayoutView"> - <div class="fontLoader-relative"> - <i class="fa fa-refresh fa-spin-custom"></i> - </div> + <div id="r_lineageLayoutView" class="animated position-relative" align="center"> + <div class="fontLoader-relative"> + <i class="fa fa-refresh fa-spin-custom"></i> </div> </div> </div> <div id="tab-relationship" role="relationship" class="tab-pane animated fadeIn"> - <div class="resizeGraph animated position-relative" align="center" style="height:64vh;"> - <div id="r_relationshipLayoutView"> - <div class="fontLoader-relative"> - <i class="fa fa-refresh fa-spin-custom"></i> - </div> + <div id="r_relationshipLayoutView" class="animated position-relative"> + <div class="fontLoader-relative"> + <i class="fa fa-refresh fa-spin-custom"></i> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html index be19895..b93a89c 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -15,7 +15,7 @@ * limitations under the License. --> <!-- <div class="graph-toolbar clearfix"></div> --> -<div style="position: absolute;height:100%;width:100%;overflow: hidden;" class="white-bg no-padding lineage-box"> +<div class="white-bg no-padding lineage-box"> <div class="lineage-fltr-panel"> <div class="header clearfix"> <h4>Filters</h4> @@ -38,7 +38,7 @@ </div> </div> </div> - <div class="depthContainer form-group select2-mini"> + <div class="depth-container form-group select2-mini"> <label class="control-label col-sm-4">Depth:</label> <div class="col-sm-4 no-padding"> <select data-id="selectDepth" class="form-control"></select> @@ -46,19 +46,22 @@ </div> </div> </div> - <div class="graph-button-group"> + <div class="graph-button-group pull-right"> <div> <button type="button" data-id="fltr-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button> </div> - <div class="zoom-button-group pull-right"> - <span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span> - <span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span> + <div> + <button type="button" data-id="fullScreen-toggler" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button> + </div> + <div class="btn-group"> + <button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button> + <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button> </div> </div> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> - <div class="legends" style="height: 25px; padding: 2px;"> + <div class="legends pull-left" style="height: 25px; padding: 2px;"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw" aria-hidden="true"></i>Current Entity</span> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Lineage</span> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span> http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html index b9946af..3d130ec 100644 --- a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html @@ -15,19 +15,17 @@ * limitations under the License. --> <!-- <div class="graph-toolbar clearfix"></div> --> -<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding relationship-box"> +<div class="white-bg no-padding relationship-box"> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> - <div style="position: absolute;height:100%;width:100%;"> - <div class="graph-button-group"> - <div class="zoom-button-group"> - <span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In"> <i class="fa fa-search-plus"></i></span> - <span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out"> <i class="fa fa-search-minus"></i></span> - </div> + <div class="graph-button-group pull-right"> + <div class="btn-group"> + <button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button> + <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button> </div> - <svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> </div> + <svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <div class="relationship-details"> <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> <!-- <div data-id="close" class="close-details"><i class="fa fa-times"></i></div> --> http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html index 31cae24..6675664 100644 --- a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html @@ -85,7 +85,7 @@ <div class="input-group" data-id="goToPageDiv"> <input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" /> <span class="input-group-btn"> - <button class="btn btn-atlas btn-md no-margin" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> + <button class="btn btn-default" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> </span> </div> </div> http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/utils/Utils.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index 6ebfe94..e14ba67 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -756,43 +756,6 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', this.attr(attributeName, firstString); } } - $('body').on('click', '.expand_collapse_panel', function() { - var icon = $(this).find('i'), - panel = $(this).parents('.panel').first(), - panelBody = panel.find('.panel-body'); - icon.toggleClass('fa-chevron-up fa-chevron-down'); - $(this).toggleAttribute('title', 'Collapse', 'Expand'); - panelBody.toggle(); - $(this).trigger('expand_collapse_panel', [$(this).parents('.panel')]); - }); - $('body').on('click', '.fullscreen_panel', function() { - var icon = $(this).find('i'), - panel = $(this).parents('.panel').first(), - 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')) { - $('body').removeAttr("style"); - $(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')]); - } - }); $('body').on('click', 'pre.code-block .expand-collapse-button', function(e) { var $el = $(this).parents('.code-block'); http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js index 46d427b..9f5dc30 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -25,8 +25,7 @@ define(['require', 'utils/Globals', 'utils/Enums', 'utils/Messages', - 'utils/UrlLinks', - 'jquery-ui' + 'utils/UrlLinks' ], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) { 'use strict'; @@ -65,7 +64,6 @@ define(['require', tagList: '[data-id="tagList"]', termList: '[data-id="termList"]', propagatedTagList: '[data-id="propagatedTagList"]', - fullscreenPanel: "#fullscreen_panel", tablist: '[data-id="tab-list"] li', entityIcon: '[data-id="entityIcon"]' }, @@ -280,16 +278,6 @@ define(['require', guid: this.id, entityDefCollection: this.entityDefCollection, fetchCollection: this.fetchCollection.bind(this), - actionCallBack: function() { - that.$('#expand_collapse_panel').click(); - } - }); - this.$(".resizeGraph").resizable({ - handles: ' s', - minHeight: 375, - stop: function(event, ui) { - ui.element.height(($(this).height())); - }, }); } else if (this.value && this.value.tabActive == "lineage") { Utils.setUrl({ http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/views/graph/LineageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index 1edffbc..2f64f1e 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -27,7 +27,8 @@ define(['require', 'utils/Enums', 'utils/UrlLinks', 'utils/Globals', - 'platform' + 'platform', + 'jquery-ui' ], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) { 'use strict'; @@ -37,6 +38,7 @@ define(['require', _viewName: 'LineageLayoutView', template: LineageLayoutViewtmpl, + className: "resizeGraph", /** Layout sub regions */ regions: {}, @@ -48,7 +50,8 @@ define(['require', checkDeletedEntity: "[data-id='checkDeletedEntity']", selectDepth: 'select[data-id="selectDepth"]', fltrTogler: '[data-id="fltr-togler"]', - lineageFilterPanel: '.lineage-fltr-panel' + lineageFilterPanel: '.lineage-fltr-panel', + LineageFullscreenToggler: '[data-id="fullScreen-toggler"]' }, /** ui events hash */ @@ -58,6 +61,7 @@ define(['require', events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity'; events['change ' + this.ui.selectDepth] = 'onSelectDepthChange'; events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler'; + events["click " + this.ui.LineageFullscreenToggler] = 'onClickLineageFullscreenToggler'; return events; }, @@ -120,6 +124,19 @@ define(['require', }, onShow: function() { this.$('.fontLoader').show(); + this.$el.resizable({ + handles: ' s', + minHeight: 375, + stop: function(event, ui) { + ui.element.height(($(this).height())); + }, + }); + }, + onClickLineageFullscreenToggler: function(e) { + var icon = $(e.target).find('i'), + panel = $(e.target).parents('.tab-pane').first(); + icon.toggleClass('fa-expand fa-compress'); + panel.toggleClass('fullscreen-mode'); }, onCheckUnwantedEntity: function(e) { var data = $.extend(true, {}, this.lineageData); @@ -173,7 +190,7 @@ define(['require', }, noLineage: function() { this.$('.fontLoader').hide(); - this.$('.depthContainer').hide(); + this.$('.depth-container').hide(); //this.$('svg').height('100'); this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>'); if (this.actionCallBack) { @@ -484,7 +501,7 @@ define(['require', interpolateZoom([view.x, view.y], view.k); } - d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick); + d3.selectAll(this.$('.lineageZoomButton')).on('click', zoomClick); var tooltip = d3Tip() .attr('class', 'd3-tip') .offset([10, 0]) http://git-wip-us.apache.org/repos/asf/atlas/blob/c51ab2d8/dashboardv2/public/js/views/graph/RelationshipLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js index c3d46da..ba0ea62 100644 --- a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js +++ b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js @@ -35,6 +35,7 @@ define(['require', _viewName: 'RelationshipLayoutView', template: RelationshipLayoutViewtmpl, + className: "resizeGraph", /** Layout sub regions */ regions: {}, @@ -225,7 +226,7 @@ define(['require', - d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick); + d3.selectAll(this.$('.lineageZoomButton')).on('click', zoomClick); var svg = d3.select(this.$("svg")[0]) .attr("viewBox", "0 0 " + width + " " + height)