Move indicator to bottom right for #66

hawtio · May 16, 2013 · d7e3fc4 · d7e3fc4
1 parent 59e4a57
commit d7e3fc4
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 43 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/app.ts b/hawtio-web/src/main/webapp/app/core/js/app.ts
@@ -0,0 +1,55 @@
+module Core {
+
+  export function AppController($scope, $location, workspace, $document, pageTitle, localStorage) {
+
+    $scope.collapse = '';
+    $scope.match = null;
+    $scope.pageTitle = pageTitle.exclude('hawtio');
+
+    $scope.setPageTitle = () => {
+      var tab = workspace.getActiveTab();
+      if (tab && tab.content) {
+        var foo:any = Array;
+        setPageTitle($document, foo.create(pageTitle, tab.content));
+      } else {
+        setPageTitle($document, pageTitle);
+      }
+    }
+
+    $scope.setRegexIndicator = () => {
+      try {
+        var regexs = angular.fromJson(localStorage['regexs']);
+        if (regexs) {
+          regexs.reverse().each((regex) => {
+            var r = new RegExp(regex.regex, 'g');
+            if (r.test($location.absUrl())) {
+              $scope.match = {
+                name: regex.name,
+                color: regex.color
+              }
+            }
+          });
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    $scope.$watch(() => { return localStorage['regexs'] }, $scope.setRegexIndicator);
+
+    $scope.$on('$routeChangeSuccess', function() {
+      $scope.setPageTitle();
+      $scope.setRegexIndicator();
+    });
+
+    $scope.fullScreen = () => {
+      var tab = $location.search()['tab'];
+      if (tab) {
+        return tab === "fullscreen";
+      }
+      return false;
+    }
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/core/js/navbar.ts b/hawtio-web/src/main/webapp/app/core/js/navbar.ts
@@ -4,8 +4,6 @@ module Core {
 
     $scope.hash = null;
 
-    $scope.match = null;
-
     $scope.topLevelTabs = () => workspace.topLevelTabs;
 
     $scope.subLevelTabs = () => workspace.subLevelTabs;
@@ -17,30 +15,6 @@ module Core {
     // when we change the view/selection lets update the hash so links have the latest stuff
     $scope.$on('$routeChangeSuccess', function () {
       $scope.hash = workspace.hash();
-      var tab = workspace.getActiveTab();
-      if (tab && tab.content) {
-        var foo:any = Array;
-        setPageTitle($document, foo.create(pageTitle, tab.content));
-      } else {
-        setPageTitle($document, pageTitle);
-      }
-
-      try {
-        var regexs = angular.fromJson(localStorage['regexs']);
-        if (regexs) {
-          regexs.reverse().each((regex) => {
-            var r = new RegExp(regex.regex, 'g');
-            if (r.test($location.absUrl())) {
-              $scope.match = {
-                name: regex.name,
-                color: regex.color
-              }
-            }
-          });
-        }
-      } catch (e) {
-        // ignore
-      }
     });
 
     /*
@@ -102,12 +76,5 @@ module Core {
       return tab ? tab['content'] : "";
     };
 
-    $scope.fullScreen = () => {
-      var tab = $location.search()['tab'];
-      if (tab) {
-        return tab === "fullscreen";
-      }
-      return false;
-    }
   }
 }
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1290,10 +1290,39 @@ li.stacktrace {
 .host-indicator {
   margin-top: 12px;
   margin-right: 3px;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
+  display: inline;
   border-radius: 4px;
   border: 1px solid #d4d4d4;
   opacity: .5;
+  padding: 3px;
+}
+
+.instance-name {
+  display: block;
+  float: left;
+  white-space: nowrap;
+  padding: 3px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #d4d4d4;
+  background: white;
+  text-align: right;
+  opacity: .8;
+  transition: all 1s ease-in-out;
+  border-top-left-radius: 4px;
+  padding-right: 2em;
+  overflow: hidden;
+  box-shadow: 0 1px 13px rgba(0, 0, 0, 0.12);
+  width: auto;
+}
+
+.instance-name-collapse {
+  width: 10px;
+  padding-right: 0px;
+}
+
+.instance-name:hover {
+  opacity: 1;
 }
diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -38,15 +38,15 @@
   <link rel='stylesheet' media='screen and (max-width: 979px)' href='css/site-narrow.css' type='text/css'>
 
 </head>
-<body ng-controller="Core.NavBarController">
+<body ng-controller="Core.AppController">
 <style>
   .ng-cloak {
     display: none;
   }
 </style>
 
 <!--  navbar-inverse -->
-<div id="main-nav" class="navbar navbar-fixed-top" ng-show="!fullScreen()">
+<div id="main-nav" class="navbar navbar-fixed-top" ng-show="!fullScreen()" ng-controller="Core.NavBarController">
   <div class="navbar-inner" ng-cloak class="ng-cloak">
     <div class="container">
       <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
@@ -58,7 +58,6 @@
       </a>
 
 
-
       <div class="nav-collapse collapsed">
         <ul class="nav">
           <li ng-repeat="nav in topLevelTabs()" ng-class="{active : isActive(nav)}" ng-show="isValid(nav)">
@@ -69,16 +68,14 @@
 
         <div class="pull-right">
           <ul class="nav pull-right">
-            <li>
-              <div ng-show="match" class="host-indicator" title="{{match.name}}" style="background: {{match.color}}"></div>
-            </li>
             <li ng-class="{active : isActive('#/preferences')}">
               <a ng-href="{{link('#/preferences')}}" title="Edit your preferences" data-placement="bottom">
                 <i class="icon-cogs"></i>
               </a>
             </li>
             <li ng-class="{active : isActive('#/help')}">
-              <a ng-href="{{link('#/help')}}" title="Read the help about how to use this console" data-placement="bottom">
+              <a ng-href="{{link('#/help')}}" title="Read the help about how to use this console"
+                 data-placement="bottom">
                 <i class="icon-question-sign"></i>
               </a>
             </li>
@@ -93,6 +90,16 @@
   <div ng-include src="viewPartial"></div>
 </div>
 
+<div class='instance-name clearfix ng-cloak' ng-class="collapse">
+  <i ng-show="collapse === ''" class="clickable icon-caret-right" title="Hide" ng-click="collapse = 'instance-name-collapse'"></i>
+  <i ng-show="collapse === 'instance-name-collapse'" class="clickable icon-caret-left" title="Show" ng-click="collapse = ''"></i>
+  <div ng-show="match" class="host-indicator" style="background: {{match.color}}">{{match.name}}</div>
+  <ul class='unstyled inline'>
+    <li ng-repeat='title in pageTitle'>{{title}}</li>
+  </ul>
+</div>
+
+
 <!-- charts and jolokia for jmx -->
 <script type="text/javascript" src="lib/d3.v3.min.js"></script>