AMBARI-20311 Full-height modals overflow viewport vertically. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/dc899c91 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/dc899c91 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/dc899c91 Branch: refs/heads/branch-feature-AMBARI-12556 Commit: dc899c918ec6ab6b698972dfb9b0d632b8fe2d7b Parents: f896b84 Author: ababiichuk <ababiic...@hortonworks.com> Authored: Fri Mar 3 20:02:00 2017 +0200 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Fri Mar 3 22:06:44 2017 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/common.less | 4 ++-- ambari-web/app/styles/log_file_search.less | 3 --- .../app/templates/common/host_progress_popup.hbs | 8 ++++---- .../common/host_progress_popup_body_view.js | 19 ++++++++----------- ambari-web/app/views/common/modal_popup.js | 11 ++++++----- 5 files changed, 20 insertions(+), 25 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/dc899c91/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index ad1da66..c5ab5b9 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -195,9 +195,9 @@ // modal body content padding @modal-body-padding: 15px; // modal header height -@modal-header-height: 50px; +@modal-header-height: 57px; // modal footer height -@modal-footer-height: 60px; +@modal-footer-height: 75px; .btn-primary[disabled] { .icon-spinner { http://git-wip-us.apache.org/repos/asf/ambari/blob/dc899c91/ambari-web/app/styles/log_file_search.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/log_file_search.less b/ambari-web/app/styles/log_file_search.less index cf5ef29..3e02cea 100644 --- a/ambari-web/app/styles/log_file_search.less +++ b/ambari-web/app/styles/log_file_search.less @@ -157,9 +157,6 @@ } .log-tail-popup.full-height-modal { - @log-tail-header-height: 60px; - @log-tail-bottom-wrap-height: 50px; - @log-tail-content-height: calc(~"100%" - (@log-tail-header-height + @log-tail-bottom-wrap-height + @modal-footer-height)); .top-wrap { border-bottom: none !important; http://git-wip-us.apache.org/repos/asf/ambari/blob/dc899c91/ambari-web/app/templates/common/host_progress_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/host_progress_popup.hbs b/ambari-web/app/templates/common/host_progress_popup.hbs index ae411b1..c9d344c 100644 --- a/ambari-web/app/templates/common/host_progress_popup.hbs +++ b/ambari-web/app/templates/common/host_progress_popup.hbs @@ -22,7 +22,7 @@ {{!-- SERVICES --}} <div {{bindAttr class="view.parentView.isServiceListHidden:hidden :task-list-main-wrap :table-body-wrap"}}> - <div class="row"> + <div class="row top-wrap"> <div class="table-controls row col-sm-12 pull-right"> <div class="col-sm-12"> <div class="btn-group pull-right"> @@ -103,7 +103,7 @@ {{!-- HOSTS ---}} <div {{bindAttr class="view.parentView.isHostListHidden:hidden :task-list-main-wrap :table-body-wrap"}}> - <div class="row"> + <div class="row top-wrap"> <h2 class="table-title col-sm-2">{{t common.hosts}}</h2> <div class="table-controls row col-sm-10 pull-right"> <div class="col-sm-12"> @@ -192,7 +192,7 @@ {{!-- TASKS ---}} <div {{bindAttr class="view.parentView.isTaskListHidden:hidden :task-list-main-wrap :table-body-wrap"}}> - <div class="row"> + <div class="row top-wrap"> <h2 class="table-title col-sm-2">{{t common.tasks}}</h2> <div class="table-controls row col-sm-10 pull-right"> <div class="col-sm-12"> @@ -256,7 +256,7 @@ <!-- TASK DETAILS ---> <div {{bindAttr class="view.parentView.isLogWrapHidden:hidden :task-detail-info view.hostComponentLogsExists:task-detail-info-tabbed"}}> - <div class="task-top-wrap"> + <div class="task-top-wrap top-wrap"> <div {{bindAttr class="view.hostComponentLogsExists:task-detail-log-nav-actions :row"}}> <h2 class="table-title col-sm-5"> <i {{bindAttr class="view.openedTask.status :task-detail-status-ico view.openedTask.icon"}}></i> http://git-wip-us.apache.org/repos/asf/ambari/blob/dc899c91/ambari-web/app/views/common/host_progress_popup_body_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/host_progress_popup_body_view.js b/ambari-web/app/views/common/host_progress_popup_body_view.js index f119c3b..25be849 100644 --- a/ambari-web/app/views/common/host_progress_popup_body_view.js +++ b/ambari-web/app/views/common/host_progress_popup_body_view.js @@ -301,14 +301,14 @@ App.HostProgressPopupBodyView = App.TableView.extend({ */ resizeHandler: function() { if (this.get('state') === 'destroyed' || !this.get('parentView.isOpen')) return; - var headerHeight = 48, - modalFooterHeight = 60, - taskTopWrapHeight = 40, - modalTopOffset = $('.modal').offset().top, - contentPaddingBottom = 40, - hostsPageBarHeight = 45, - tabbedContentNavHeight = 68, - logComponentFileNameHeight = 30, + var modal = this.get('parentView').$().find('.modal'), + headerHeight = $(modal).find('.modal-header').outerHeight(true), + modalFooterHeight = $(modal).find('.modal-footer').outerHeight(true), + taskTopWrapHeight = $(modal).find('.top-wrap:visible').outerHeight(true), + modalTopOffset = $(modal).offset().top, + contentPaddingBottom = parseFloat($(modal).find('.modal-dialog').css('marginBottom')) || 0, + hostsPageBarHeight = $(modal).find('#host-info tfoot').outerHeight(true), + logComponentFileNameHeight = $(modal).find('#host-info tfoot').outerHeight(true), levelName = this.get('currentLevelName'), boLevelHeightMap = { 'REQUESTS_LIST': { @@ -334,9 +334,6 @@ App.HostProgressPopupBodyView = App.TableView.extend({ if (levelName && levelName in boLevelHeightMap) { resizeTarget = boLevelHeightMap[levelName].target; currentLevelHeight = boLevelHeightMap[levelName].height; - if (levelName === 'TASK_DETAILS' && $('.task-detail-info').hasClass('task-detail-info-tabbed')) { - currentLevelHeight -= tabbedContentNavHeight; - } if (!Em.isArray(resizeTarget)) { resizeTarget = [resizeTarget]; } http://git-wip-us.apache.org/repos/asf/ambari/blob/dc899c91/ambari-web/app/views/common/modal_popup.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/modal_popup.js b/ambari-web/app/views/common/modal_popup.js index f09ae62..4248301 100644 --- a/ambari-web/app/views/common/modal_popup.js +++ b/ambari-web/app/views/common/modal_popup.js @@ -161,17 +161,18 @@ App.ModalPopup = Ember.View.extend({ fitHeight: function () { if (this.get('state') === 'destroyed') return; - var popup = this.$().find('#modal'); - var block = this.$().find('#modal > .modal-body'); - var wh = $(window).height(); + var popup = this.$().find('#modal'), + wrapper = $(popup).find('.modal-dialog'), + block = $(popup).find('.modal-body'), + wh = $(window).height(), + top = wh * 0.05, + newMaxHeight = wh - top * 2 - (wrapper.height() - block.height()); - var top = wh * 0.05; popup.css({ 'top': top + 'px', 'marginTop': 0 }); - var newMaxHeight = $(window).height() - top * 2 - (popup.height() - block.height()); newMaxHeight = Math.max(newMaxHeight, 500); block.css('max-height', newMaxHeight); }
