AMBARI-14525. Longer cluster names extend beyond the frame in the Ambari Admin view. (alexantonenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2be0ec36 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2be0ec36 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2be0ec36 Branch: refs/heads/branch-dev-patch-upgrade Commit: 2be0ec36231e7fd07216066d53e1b973b4dc8b78 Parents: f6a75a6 Author: Alex Antonenko <hiv...@gmail.com> Authored: Wed Feb 3 14:52:59 2016 +0200 Committer: Alex Antonenko <hiv...@gmail.com> Committed: Wed Feb 3 14:53:19 2016 +0200 ---------------------------------------------------------------------- .../app/scripts/controllers/NavbarCtrl.js | 9 +++++++++ .../resources/ui/admin-web/app/styles/main.css | 18 +++++++++++++++++- .../ui/admin-web/app/views/leftNavbar.html | 4 ++-- 3 files changed, 28 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/2be0ec36/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/NavbarCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/NavbarCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/NavbarCtrl.js index 319a8f2..f1eb5c5 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/NavbarCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/NavbarCtrl.js @@ -56,6 +56,15 @@ angular.module('ambariAdminConsole') $scope.editCluster.editingName = !$scope.editCluster.editingName; }; + $scope.clusterDisplayName = function () { + var name=""; + if($scope.cluster && $scope.cluster.Clusters) + { + name = $scope.cluster.Clusters.cluster_name; + } + return name.length > 13 ? name.substr(0, 13) + "..." : name; + }; + $scope.confirmClusterNameChange = function() { ConfirmationModal.show( $t('common.clusterNameChangeConfirmation.title'), http://git-wip-us.apache.org/repos/asf/ambari/blob/2be0ec36/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css index 0474e9c..7a91296 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css @@ -1052,6 +1052,22 @@ button.btn.btn-xs{ line-height: 1.5; border-radius: 3px; } + +.clusterDisplayName { + display:inline-block; + width:90%; + word-wrap:break-word; +} + +.renameCluster { + display:inline-block; + width:10%; +} + +.default-body { + word-wrap:break-word; +} + .alert-info { background-color: #E6F1F6; border-color: #D2D9DD; @@ -1095,7 +1111,7 @@ button.btn.btn-xs{ box-sizing: border-box; } .ambariAlert .content { - display: inline-block; + word-wrap: break-word; padding-right: 10px; } .ambariAlert .icon-box { http://git-wip-us.apache.org/repos/asf/ambari/blob/2be0ec36/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html index 17f8f0b..3f01e38 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html @@ -21,10 +21,10 @@ <div class="panel-body"> <div class="cluster-section" ng-show="cluster"> <div id="cluster-name" ng-switch on="editCluster.editingName"> - <h5 ng-switch-when="false">{{cluster.Clusters.cluster_name}} + <h5 ng-switch-when="false"><div title={{cluster.Clusters.cluster_name}} class="clusterDisplayName">{{clusterDisplayName()}}</div> <i ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" ng-click="toggleEditName()" - class="glyphicon glyphicon-edit pull-right edit-cluster-name" tooltip="{{'common.renameCluster' | translate}}"> + class="glyphicon glyphicon-edit pull-right edit-cluster-name renameCluster" tooltip="{{'common.renameCluster' | translate}}"> </i> </h5>
