first pass at choosing flows from the full list
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index e46f165..7b9da5e 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -44,26 +44,34 @@
-webkit-box-orient: vertical;
}
+#flowChooser {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ display: -webkit-box;
+ overflow: scroll;
+}
+
.selectedFlow {
display: -webkit-box;
+ position: relative;
+}
+
+.selectedFlow .srcDPID, .selectedFlow .dstDPID {
-webkit-user-select: auto;
}
#selectedFlowsHeader {
display: -webkit-box;
+ height: 1.5em;
}
-.flowIndex {
- width: 1.5em;
-}
.flowId {
width: 5em;
}
-.srcDPID, .dstDPID {
- width: 20em;
-}
.iperf {
width: 100%;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index fbdc1fe..6a72b7e 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -95,6 +95,16 @@
background-color: black;
}
+#flowChooser .selectedFlow {
+ background-color: rgba(255, 255, 255, .75);
+ color: black;
+}
+
+#flowChooser .flowId {
+ padding-left: 2em;
+}
+
+
.selectedFlow.selected {
color: black;
background-color:#AAA;
@@ -126,13 +136,24 @@
border-top: 1px solid #AAA;
}
-.flowIndex, .flowId, .srcDPID, .dstDPID, .iperf {
+#flowChooser {
+ pointer-events: none;
+ background-color: rgba(0, 0, 0, .25);
+}
+
+
+.flowId, .srcDPID, .dstDPID, .iperf {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
-.flowIndex, .flowId, .srcDPID, .dstDPID {
+.srcDPID, .dstDPID {
+ width: 12em;
+}
+
+
+.flowId, .srcDPID, .dstDPID {
border-right: 1px solid #AAA;
}
@@ -147,12 +168,12 @@
position: relative;
}
-.controllerEye {
+.eye {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
- width: 2em;
+ width: 2.25em;
background-image: url('../assets/eye.svg');
background-size: auto 100%;
background-repeat: no-repeat;