Styled the breadcrumbs bar
Change-Id: I1930e95532fed2e1842b59c0bec73e6fa09988b3
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.css b/web/gui/src/main/webapp/app/view/topo2/topo2.css
index 02ad958..6c98150 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -52,15 +52,35 @@
}
#breadcrumbs {
+ font-size: 13px;
+ background: #f5f5f5;
+ border-bottom: 1px solid #c7c7c0;
position: absolute;
- padding: 10px 30px;
- top: 54px;
+ padding: 10px 20px;
+ left: 0;
+ top: 48px;
width: 100%;
}
#breadcrumbs .breadcrumb {
display: inline-block;
- margin-right: 20px;
+ margin-right: 5px;
+}
+
+#breadcrumbs .breadcrumb a {
+ cursor: pointer;
+}
+
+#breadcrumbs .breadcrumb:after {
+ content: '»';
+ pointer-events: none;
+ color: #353535;
+ line-height: 20px;
+ margin-left: 5px;
+}
+
+#breadcrumbs .breadcrumb:last-child:after {
+ display: none;
}
#topo2-p-instance.floatpanel {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.html b/web/gui/src/main/webapp/app/view/topo2/topo2.html
index 6d6dbb5..b36a036 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.html
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.html
@@ -37,3 +37,5 @@
notifier="notifyResize()">
</svg>
</div>
+
+<div id="breadcrumbs"></div>
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
index c56ddf68..3f7cb0e 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
@@ -32,7 +32,8 @@
function init() {
$log.debug("Topo2BreadcrumbService Initiated");
breadcrumbs = [];
- breadcrumbContainer = d3.select('#breadcrumbs');
+ breadcrumbContainer = d3.select('#breadcrumbs').append('span')
+ .text('Regions: ');
render();
}
@@ -69,7 +70,7 @@
.append('div')
.attr('class', 'breadcrumb')
.on('click', navigateToRegion)
- .append('text')
+ .append('a')
.text(function (d) {
return d.name;
});
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 7caeb04..5acc0ca 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -238,7 +238,6 @@
ng-controller="NavCtrl as navCtrl"
ng-include="'nav.html'"></div>
- <div id="breadcrumbs"></div>
<div id="floatpanels"></div>
<div id="alerts"></div>
<div id="tooltip"></div>