Skip to content
GitLab
Commit a006c415 authored by Marc Duez's avatar Marc Duez
Browse files

list.js : change list css (add data list)

parent 46c54dc0
Hide whitespace changes
Inline Side-by-side
browser/css/dark.css
View file @ a006c415
......@@ -85,6 +85,7 @@ ul {
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display: table;
}
#visu,
#visu2 {
......@@ -100,12 +101,17 @@ line {
stroke-width: 0.5;
}
/* left-container - info */
#info-row {
height: 200px;
display: table-row;
}
#info {
font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
font-size: 13px;
height: 200px;
padding: 3px;
height: 100%
padding:3px;
background: #000000;
display: table-cell;
}
.info_line {
border-bottom: solid;
......@@ -297,26 +303,37 @@ line {
.sp_subline_hidden {
stroke-width: 0px;
}
/*style list element*/
/*style list/data element*/
/*Metric*/
.list:hover,
.tagElem:hover,
.data:hover {
background: #333333;
}
#list {
height: -moz-calc(100% - 240px);
height: -webkit-calc(100% - 240px);
height: calc(100% - 240px);
#list-row,
#data-row {
display: table-row;
}
#list,
#data {
display: table-cell;
}
#data-row {
height: 0px;
}
#list_clones {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
height: calc(100% - 30px);
/*100% - list_menu height */
padding: 2px;
}
#list_data {
display: block;
border-top: solid;
border-width: 4px;
border-color: #333333;
overflow-y: scroll;
}
.data_name {
margin-left: 40px;
......@@ -325,7 +342,7 @@ line {
display: inline-block;
}
.list {
width: 475px;
width: 445px;
display: block;
padding: 2px;
}
......@@ -397,7 +414,7 @@ line {
}
.systemBoxNameMenu {
display: inline-block;
min-width: 85px;
min-width: 70px;
height: 20px;
cursor: pointer;
}
......@@ -1107,6 +1124,7 @@ span.alert {
display: block;
bottom: 0px;
right: 0px;
z-index: 100;
}
#log_container {
height: 500px;
......
browser/css/light.css
View file @ a006c415
......@@ -85,6 +85,7 @@ ul {
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display: table;
}
#visu,
#visu2 {
......@@ -100,12 +101,17 @@ line {
stroke-width: 0.5;
}
/* left-container - info */
#info-row {
height: 200px;
display: table-row;
}
#info {
font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
font-size: 13px;
height: 200px;
padding: 3px;
height: 100%
padding:3px;
background: #ffffff;
display: table-cell;
}
.info_line {
border-bottom: solid;
......@@ -297,26 +303,37 @@ line {
.sp_subline_hidden {
stroke-width: 0px;
}
/*style list element*/
/*style list/data element*/
/*Metric*/
.list:hover,
.tagElem:hover,
.data:hover {
background: #cccccc;
}
#list {
height: -moz-calc(100% - 240px);
height: -webkit-calc(100% - 240px);
height: calc(100% - 240px);
#list-row,
#data-row {
display: table-row;
}
#list,
#data {
display: table-cell;
}
#data-row {
height: 0px;
}
#list_clones {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
height: calc(100% - 30px);
/*100% - list_menu height */
padding: 2px;
}
#list_data {
display: block;
border-top: solid;
border-width: 4px;
border-color: #cccccc;
overflow-y: scroll;
}
.data_name {
margin-left: 40px;
......@@ -325,7 +342,7 @@ line {
display: inline-block;
}
.list {
width: 475px;
width: 445px;
display: block;
padding: 2px;
}
......@@ -397,7 +414,7 @@ line {
}
.systemBoxNameMenu {
display: inline-block;
min-width: 85px;
min-width: 70px;
height: 20px;
cursor: pointer;
}
......@@ -1107,6 +1124,7 @@ span.alert {
display: block;
bottom: 0px;
right: 0px;
z-index: 100;
}
#log_container {
height: 500px;
......
browser/css/vidjil.less
View file @ a006c415
......@@ -102,6 +102,7 @@ ul{
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display : table;
}
#visu, #visu2 {
......@@ -121,12 +122,18 @@ line {
/* left-container - info */
#info-row{
height : 200px;
display : table-row;
}
#info{
font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
font-size: 13px;
height :200px;
height:100%
padding:3px;
background : @background;
display : table-cell;
}
.info_line {
......@@ -363,7 +370,7 @@ line {
stroke-width : 0px;
}
/*style list element*/
/*style list/data element*/
/*Metric*/
......@@ -385,21 +392,31 @@ line {
background :@border;
}
#list{
height: -moz-calc(~"100% - 240px");
height: -webkit-calc(~"100% - 240px");
height: calc(~"100% - 240px");
#list-row, #data-row{
display: table-row;
}
#list, #data{
display:table-cell;
}
#data-row{
height : 0px;
}
#list_clones{
overflow-y : scroll;
overflow-x : hidden;
height : 100%;
height : calc(~"100% - 30px"); /*100% - list_menu height */
padding:2px;
}
#list_data{
display: block;
display: block;
border-top: solid;
border-width: 4px;
border-color: @border;
overflow-y: scroll;
}
.data_name{
......@@ -413,7 +430,7 @@ line {
}
.list{
width : @width_left_container;
width : 445px;
display : block;
padding : 2px;
}
......
browser/index.html
View file @ a006c415
......@@ -275,16 +275,13 @@
<!-- LEFT-CONTAINER -->
<div id="left-container">
<div id="info"> </div>
<div id="list"> </div>
<div id="info-row"><div id="info"> </div></div>
<div id="list-row"><div id="list"> </div></div>
<div id="data-row"><div id="data"> </div></div>
</div>
<!-- fin left-container -->
<div id="vertical-separator">
</div>
<div id="vertical-separator"></div>
<!-- RIGHT-CONTAINER -->
<div id="right-container"></div>
......
browser/js/list.js
View file @ a006c415
......@@ -29,8 +29,9 @@
/* List constructor
*
* */
function List(id, model) {
this.id = id; //ID de la div contenant la liste
function List(id_list, id_data, model) {
this.id = id_list; //ID de la div contenant la liste
this.id_data = id_data;
this.m = model; //Model utilisé
this.index = []
this.index_data = {};
......@@ -46,6 +47,7 @@ List.prototype = {
* */
init: function () {
this.build_list()
this.build_data_list()
this.update();
},
......@@ -70,10 +72,6 @@ List.prototype = {
this.index[i] = div;
}
//data list
var div_list_data = this.build_data_list()
div_list_clones.appendChild(div_list_data);
div_parent.appendChild(div_list_menu)
div_parent.appendChild(div_list_clones)
......@@ -82,6 +80,9 @@ List.prototype = {
build_data_list: function () {
this.index_data = {}
var div_parent = document.getElementById(this.id_data);
div_parent.innerHTML = "";
var div_list_data = document.createElement('div');
div_list_data.id = "list_data";
for (var key in this.m.data) {
......@@ -104,7 +105,8 @@ List.prototype = {
div_list_data.appendChild(div);
}
return div_list_data
div_parent.appendChild(div_list_data);
},
update_data_list: function () {
......@@ -208,10 +210,23 @@ List.prototype = {
myConsole.log("update Liste: " + elapsedTime + "ms", -1);
},
/*
* TODO
* */
resize: function () {},
resize: function () {
//hardcore resize (for firefox and ...)
//seriously 7 years after the first release of the html5 specs there is no simple way (except with chrome) to put a scrollbar inside a table-cell
document.getElementById("list_data").style.height = ""
var total = document.getElementById("mid-container").offsetHeight
var info = document.getElementById("info-row").offsetHeight
var menu = document.getElementById("list_menu").offsetHeight
var data = document.getElementById("list_data").offsetHeight
if (data>100)data = 100
console.log(total+"/"+info +"/"+menu +"/"+data +"/")
document.getElementById("list_clones").style.height = (total-info-menu-data)+"px"
document.getElementById("list_data").style.height = data+"px"
},
/* genere le code HTML des infos d'un clone
* @div_elem : element HTML a remplir
......
browser/js/main.js
View file @ a006c415
......@@ -77,7 +77,7 @@ window.onresize = function () { m.resize(); };
/* views
*/
var graph = new Graph("visu2",m);
var list = new List("list",m);
var list = new List("list", "data", m);
var sp = new ScatterPlot("visu",m, graph, stats);
var segment = new Segment("bot-container",m, CGI_ADDRESS);
var builder = new Builder(m);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment