X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?a=blobdiff_plain;f=test%2Fmonitoring%2Fmonitor-base.css;h=feb61705fc231fd71547add53e6d9ee5e4e87a8d;hb=65353dce81a629e042800bb7b86fcd869a76727e;hp=0cbbe1551ee0df751ce0bd6825d27813d9869d3d;hpb=e3017eacd1b265377d6581fe255d8c0b994a3cec;p=src%2Fapp-framework-binder.git

diff --git a/test/monitoring/monitor-base.css b/test/monitoring/monitor-base.css
index 0cbbe155..feb61705 100644
--- a/test/monitoring/monitor-base.css
+++ b/test/monitoring/monitor-base.css
@@ -1,109 +1,85 @@
+/*
+ * Copyright (C) 2015-2020 "IoT.bzh"
+ * Author: José Bollo <jose.bollo@iot.bzh>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 /*******************************************************************/
 /* top */
 body {
 	position: fixed;
 	top: 0px;
-	bottom: 0px;
 	left: 0px;
 	right: 0px;
+	bottom: 0px;
 }
 
-body.on #params, body.off #main { display: none; }
+body.on #params, body.on #connect, body.off #disconnect { display: none; }
 
 /*******************************************************************/
-/* head */
-#head {
-	position: relative;
+/* utilities */
+.-flex-h {
+	display: flex;
+	flex-flow: row nowrap;
 }
-
-#logo {
-	float: left;
+.-flex-v {
+	display: flex;
+	flex-flow: column nowrap;
 }
-
-#connected {
-	float: right;
+.-flex-v > .-flex-fill {
+	height: 100%;
 }
-
-/*******************************************************************/
-/* connection area */
-
-/*******************************************************************/
-/* main area */
-
-#work {
-	position: relative;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
+.-flex-h > .-flex-fill {
+	width: 100%;
 }
-
-#main {
+.-box-out {
 	position: relative;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
 }
-
-.fillfix {
-	width: 100%;
-	height: 100%;
-}
-
-#controls {
+.-box-in {
 	position: absolute;
-	width: 250px;
 	left: 0px;
-	top: 0px;
-	bottom: 0px;
-	overflow: auto;
-	margin-bottom: 75px;
-}
-
-#logmsg-box {
-	position: absolute;
-	width: 250px;
 	right: 0px;
 	top: 0px;
 	bottom: 0px;
-/*
-	font-size: smaller;
 	overflow: auto;
-	margin-bottom: 75px;
-*/
 }
 
-#logmsgs-inner-box {
+/*******************************************************************/
+/* head */
+#head {
 	position: relative;
-	left: 0px;
-	right: 0px;
-	top: 0px;
-	bottom: 0px;
 }
 
-#logmsgs {
-	position: absolute;
-	left: 0px;
-	right: 0px;
-	top: 0px;
-	bottom: 0px;
-	font-size: smaller;
-	overflow: auto;
-	margin-bottom: 380px;
+#logo {
+	float: left;
 }
 
-
-#trace-events {
-	overflow: auto;
-	position: absolute;
-	right: 250px;
-	left: 250px;
-	top: 0px;
-	bottom: 0px;
-	margin-bottom: 75px;
+#connected {
+	float: right;
 }
 
+/*******************************************************************/
+/* connection area */
+
+/*******************************************************************/
+/* main area */
+
+#work { overflow-x: auto; }
+#controls, #menu { flex: 1; }
+#middle { flex: 3; }
+#controls { min-width: 300px; }
+#menu { min-width: 200px; }
+
 /*******************************************************************/
 /* setting for apis */
 
@@ -113,8 +89,7 @@ body.on #params, body.off #main { display: none; }
 /*******************************************************************/
 /* setting for traces */
 
-#apis .trace-evt {
-	visibility: hidden;
+#apis .event, #apis .global {
 	display: none;
 }
 
@@ -124,6 +99,8 @@ body.on #params, body.off #main { display: none; }
 /*******************************************************************/
 /* display of logmsg */
 
+#experts.closed ~ #expert-pane { visibility: hidden; }
+
 /*******************************************************************/
 /* close box */
 .close {
@@ -151,7 +128,7 @@ body.on #params, body.off #main { display: none; }
 }
 
 .traceevent .time {
-	float: left;
+	float: right;
 }
 
 .traceevent.closed:hover {
@@ -167,16 +144,34 @@ body.on #params, body.off #main { display: none; }
 .traceevent.closed:hover .content {
 	display: block;
 	background: inherit;
+	overflow: hidden;
 	left: 40%;
 	max-width: 55%;
 	position: absolute;
+	animation-name: display-block;
+	animation-duration: 2s;
+	-webkit-animation-name: display-block;
+	-webkit-animation-duration: 2s;
+}
+
+@-webkit-keyframes display-block {
+	from { opacity: 0; }
+	50% { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes display-block {
+	from { opacity: 0; }
+	50% { opacity: 0; }
+	to { opacity: 1; }
 }
 
 .traceevent .content {
 	clear: both;
+	overflow-x: auto;
 }
 
-.traceevent {
+.traceevent, .x-button {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;