all the dockables
This commit is contained in:
M
carbotaniuman
parent
83663a786b
commit
b56a86495a
|
|
@ -8,13 +8,160 @@ let maxConsoleLines;
|
|||
let graphTimeFrame;
|
||||
let showConsoleLatest;
|
||||
let doAnimations;
|
||||
let lockDash;
|
||||
//non-option var
|
||||
let statRequest;
|
||||
//stat vars
|
||||
|
||||
//dockable things
|
||||
let config = {
|
||||
settings: {
|
||||
hasHeaders: true,
|
||||
constrainDragToContainer: false,
|
||||
reorderEnabled: true,
|
||||
selectionEnabled: false,
|
||||
popoutWholeStack: false,
|
||||
blockedPopoutsThrowError: true,
|
||||
closePopoutsOnUnload: true,
|
||||
showPopoutIcon: false,
|
||||
showMaximiseIcon: false,
|
||||
showCloseIcon: lockDash
|
||||
},
|
||||
dimensions: {
|
||||
borderWidth: 20,
|
||||
minItemHeight: 10,
|
||||
minItemWidth: 10,
|
||||
headerHeight: 20,
|
||||
dragProxyWidth: 300,
|
||||
dragProxyHeight: 200
|
||||
},
|
||||
labels: {
|
||||
close: 'close',
|
||||
maximise: 'maximise',
|
||||
minimise: 'minimise',
|
||||
popout: 'open in new window'
|
||||
},
|
||||
content: [{
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'row',
|
||||
content: [{
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'row',
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'Hit Percent',
|
||||
width: 50,
|
||||
componentState: {label: 'F'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'Hits',
|
||||
componentState: {label: 'B'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'Misses',
|
||||
componentState: {label: 'C'}
|
||||
}]
|
||||
}, {
|
||||
type: 'row',
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'Requests Served',
|
||||
componentState: {label: 'B'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'Bytes Sent',
|
||||
componentState: {label: 'C'}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'Network Utilization',
|
||||
componentState: {label: 'B'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'CPU Utilization',
|
||||
componentState: {label: 'C'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'Disk Utilization',
|
||||
componentState: {label: 'D'}
|
||||
}, {
|
||||
type: 'component',
|
||||
componentName: 'RAM Utilization',
|
||||
componentState: {label: 'E'}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
type: 'row',
|
||||
height: 20,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'Cache Size',
|
||||
componentState: {label: 'F'}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
let dashlayout;
|
||||
|
||||
function loadDash() {
|
||||
let savedState = localStorage.getItem("dashState");
|
||||
if (savedState !== null) {
|
||||
dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
|
||||
} else {
|
||||
dashlayout = new GoldenLayout(config, $("#dashboard"));
|
||||
}
|
||||
//graphs
|
||||
dashlayout.registerComponent('Network Utilization', function (container, state) {
|
||||
container.getElement().append('<div id="networkUtil" class="line_graph_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('CPU Utilization', function (container, state) {
|
||||
container.getElement().append('<div id="cpuUtil" class="line_graph_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Disk Utilization', function (container, state) {
|
||||
container.getElement().append('<div id="discUtil" class="line_graph_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Cache Size', function (container, state) {
|
||||
|
||||
container.getElement().append('<div id="cacheSize" class="line_graph_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('RAM Utilization', function (container, state) {
|
||||
container.getElement().append(' <div id="ramUtil" class="line_graph_data"></div>');
|
||||
});
|
||||
// numbers
|
||||
dashlayout.registerComponent('Hits', function (container, state) {
|
||||
container.getElement().append('<div id="hits" class="numerical_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Misses', function (container, state) {
|
||||
container.getElement().append('<div id="misses" class="numerical_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Requests Served', function (container, state) {
|
||||
container.getElement().append('<div id="reqServed" class="numerical_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Bytes Sent', function (container, state) {
|
||||
container.getElement().append('<div id="bytesSent" class="numerical_data"></div>');
|
||||
});
|
||||
dashlayout.registerComponent('Hit Percent', function (container, state) {
|
||||
container.getElement().append('<div id="hitPercent" class="numerical_data"></div>');
|
||||
});
|
||||
|
||||
dashlayout.init();
|
||||
dashlayout.on('stateChanged', function () {
|
||||
localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
loadDash();
|
||||
loadOptions();
|
||||
$(window).resize(function () {
|
||||
let dash = $("#dashboard");
|
||||
dashlayout.updateSize(dash.width(), dash.height());
|
||||
});
|
||||
$("#theme").attr("href", "themes/" + theme + ".css");
|
||||
$("#style").attr("href", "themes/" + style + ".css");
|
||||
if (doAnimations) {
|
||||
|
|
@ -62,7 +209,8 @@ function loadOptions() {
|
|||
max_console_lines: 1000,
|
||||
show_console_latest: false,
|
||||
graph_time_frame: 30000,
|
||||
do_animations: true
|
||||
do_animations: true,
|
||||
lock_dashboard: true
|
||||
}
|
||||
}
|
||||
theme = options.theme;
|
||||
|
|
@ -74,6 +222,7 @@ function loadOptions() {
|
|||
graphTimeFrame = options.graph_time_frame;
|
||||
showConsoleLatest = options.show_console_latest;
|
||||
doAnimations = options.do_animations;
|
||||
lockDash = options.lock_dashboard;
|
||||
$("#dataRefreshRate").val(refreshRate);
|
||||
$("#port").val(port);
|
||||
$("#ip").val(ip);
|
||||
|
|
@ -83,10 +232,11 @@ function loadOptions() {
|
|||
$("#styleIn").val(style);
|
||||
$("#newestconsole").prop("checked", showConsoleLatest);
|
||||
$("#doAnimations").prop("checked", doAnimations);
|
||||
$("#lockDash").prop("checked", lockDash)
|
||||
}
|
||||
|
||||
function resetOptions() {
|
||||
if (confirm("Do you really want to reset to defaults?")) {
|
||||
if (confirm("Do you really want to reset all customizations to defaults?")) {
|
||||
$("#dataRefreshRate").val(5000);
|
||||
$("#port").val(33333);
|
||||
$("#ip").val("localhost");
|
||||
|
|
@ -96,6 +246,12 @@ function resetOptions() {
|
|||
$("#styleIn").val("sharpStyle");
|
||||
$("#newestconsole").prop("checked", false);
|
||||
$("#doAnimations").prop("checked", true);
|
||||
dashlayout.destroy();
|
||||
localStorage.removeItem('dashState');
|
||||
loadDash();
|
||||
selectTab('dash', 'dashb');
|
||||
let dash = $("#dashboard");
|
||||
dashlayout.updateSize(dash.width(), dash.height());
|
||||
applyOptions()
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +266,8 @@ function applyOptions() {
|
|||
max_console_lines: parseInt($("#maxConsoleLines").val()),
|
||||
show_console_latest: $("#newestconsole").prop("checked"),
|
||||
graph_time_frame: parseInt($("#graphTimeFrame").val()),
|
||||
do_animations: $("#doAnimations").prop("checked")
|
||||
do_animations: $("#doAnimations").prop("checked"),
|
||||
lock_dashboard: $("#lockDash").prop("checked")
|
||||
};
|
||||
if (options.do_animations !== doAnimations) {
|
||||
doAnimations = options.do_animations;
|
||||
|
|
@ -215,6 +372,19 @@ function applyOptions() {
|
|||
}
|
||||
).prop("checked", showConsoleLatest);
|
||||
}
|
||||
if (options.lock_dashboard !== lockDash) {
|
||||
lockDash = options.lock_dashboard;
|
||||
config.settings.showCloseIcon = !lockDash;
|
||||
// localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
|
||||
// $("#dashboard").empty();
|
||||
// loadDash();
|
||||
$("#lockDashcb").addClass("updated").on(
|
||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
||||
function () {
|
||||
$(this).removeClass("updated");
|
||||
}
|
||||
).prop("checked", showConsoleLatest);
|
||||
}
|
||||
localStorage.setItem("options", JSON.stringify(options));
|
||||
}
|
||||
|
||||
|
|
@ -266,8 +436,8 @@ function expSide() {
|
|||
|
||||
function applyTheme(t) {
|
||||
if (doAnimations)
|
||||
$("*").each(function () {
|
||||
if (!$(this).attr("hidden"))
|
||||
$(document.body).children().each(function () {
|
||||
if (!($(this).attr("hidden")))
|
||||
$(this).addClass("tempsmooth").on(
|
||||
"webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
|
||||
function () {
|
||||
|
|
@ -280,8 +450,8 @@ function applyTheme(t) {
|
|||
|
||||
function applyStyle(s) {
|
||||
if (doAnimations)
|
||||
$("*").each(function () {
|
||||
if (!$(this).attr("hidden"))
|
||||
$(document.body).children().each(function () {
|
||||
if (!($(this).attr("hidden")))
|
||||
$(this).addClass("tempsmooth").on(
|
||||
"webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
|
||||
function () {
|
||||
|
|
|
|||
BIN
src/main/resources/webui/icons/close.png
Normal file
BIN
src/main/resources/webui/icons/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 460 B |
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>MD@H Client</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
|
||||
<script src="dataReceive.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="layout.css">
|
||||
<link rel="stylesheet" type="text/css" href="" id="style">
|
||||
|
|
@ -46,19 +47,9 @@
|
|||
<div class="contentHeader">
|
||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
||||
</div>
|
||||
<div id="nDat">
|
||||
<div id="hits" class="numerical_data"></div>
|
||||
<div id="misses" class="numerical_data"></div>
|
||||
<div id="hitPercent" class="numerical_data"></div>
|
||||
<div id="reqServed" class="numerical_data"></div>
|
||||
<div id="bytesSent" class="numerical_data"></div>
|
||||
</div>
|
||||
<div id="gDat">
|
||||
<div id="cpuUtil" class="line_graph_data"></div>
|
||||
<div id="networkUtil" class="line_graph_data"></div>
|
||||
<div id="discUtil" class="line_graph_data"></div>
|
||||
<div id="cacheSize" class="line_graph_data"></div>
|
||||
<div id="ramUtil" class="line_graph_data"></div>
|
||||
<div id="dashboard"></div>
|
||||
<div id="gDat" hidden>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="console" class="content" hidden>
|
||||
|
|
@ -107,8 +98,8 @@
|
|||
<label><select id="themeIn" class="optionInput input">
|
||||
<option value="lightTheme">Light</option>
|
||||
<option value="darkTheme">Dark</option>
|
||||
<option value="midnightTheme">Midnight</option>
|
||||
<option value="eyekillerTheme">High Vibrancy</option>
|
||||
<option value="midnightTheme">Midnight (not maintained)</option>
|
||||
<option value="eyekillerTheme">High Vibrancy (not maintained)</option>
|
||||
</select></label>
|
||||
</div>
|
||||
<div class="option">
|
||||
|
|
@ -132,6 +123,13 @@
|
|||
<span id="doAnimationscb" class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<h4>Lock Dashboard <br>(does not work)</h4>
|
||||
<label class="switch switchInput">
|
||||
<input id="lockDash" type="checkbox">
|
||||
<span id="lockDashcb" class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button id="apply" class="button" onclick="applyOptions()">Apply</button>
|
||||
<button id="reset" class="button" onclick="resetOptions()">Reset</button>
|
||||
|
|
|
|||
|
|
@ -123,20 +123,17 @@ body {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
#nDat {
|
||||
width: 40%;
|
||||
height: calc(100% - 140px);
|
||||
margin: 20px;
|
||||
top: 100px;
|
||||
#dashboard{
|
||||
position: absolute;
|
||||
|
||||
margin: 20px;
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100% - 140px);
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.numerical_data {
|
||||
height: 150px;
|
||||
width: calc(50% - 20px);
|
||||
margin: 10px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gDat {
|
||||
|
|
@ -150,10 +147,8 @@ body {
|
|||
}
|
||||
|
||||
.line_graph_data {
|
||||
height: 200px;
|
||||
width: calc((100% - 20px));
|
||||
margin: 10px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*Console and options positions*/
|
||||
|
|
@ -369,4 +364,317 @@ body {
|
|||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*golden layout*/
|
||||
.lm_root {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.lm_row > .lm_item {
|
||||
float: left
|
||||
}
|
||||
|
||||
.lm_content {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.lm_dragging, .lm_dragging * {
|
||||
cursor: move !important;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.lm_maximised {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 40
|
||||
}
|
||||
|
||||
.lm_maximise_placeholder {
|
||||
display: none
|
||||
}
|
||||
|
||||
.lm_splitter {
|
||||
position: relative;
|
||||
z-index: 20
|
||||
}
|
||||
|
||||
.lm_splitter:hover, .lm_splitter.lm_dragging {
|
||||
background: orange
|
||||
}
|
||||
|
||||
.lm_splitter.lm_vertical .lm_drag_handle {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
cursor: ns-resize
|
||||
}
|
||||
|
||||
.lm_splitter.lm_horizontal {
|
||||
float: left;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.lm_splitter.lm_horizontal .lm_drag_handle {
|
||||
width: 15px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
cursor: ew-resize
|
||||
}
|
||||
|
||||
.lm_header {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.lm_header [class^=lm_] {
|
||||
box-sizing: content-box !important
|
||||
}
|
||||
|
||||
.lm_header .lm_controls {
|
||||
position: absolute;
|
||||
right: 3px
|
||||
}
|
||||
|
||||
.lm_header .lm_controls > li {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.lm_header ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none
|
||||
}
|
||||
|
||||
.lm_header .lm_tabs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lm_header .lm_tab {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 14px;
|
||||
padding: 0 25px 5px 10px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.lm_header .lm_tab i {
|
||||
width: 2px;
|
||||
height: 19px;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.lm_header .lm_tab i.lm_left {
|
||||
top: 0;
|
||||
left: -2px
|
||||
}
|
||||
|
||||
.lm_header .lm_tab i.lm_right {
|
||||
top: 0;
|
||||
right: -2px
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_title {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_close_tab {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.lm_stack.lm_left .lm_header, .lm_stack.lm_right .lm_header {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header, .lm_dragProxy.lm_right .lm_header, .lm_stack.lm_left .lm_header, .lm_stack.lm_right .lm_header {
|
||||
width: 20px;
|
||||
float: left;
|
||||
vertical-align: top
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs {
|
||||
transform-origin: left top;
|
||||
top: 0;
|
||||
width: 1000px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header .lm_controls, .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_left .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls {
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_items, .lm_dragProxy.lm_right .lm_items, .lm_stack.lm_left .lm_items, .lm_stack.lm_right .lm_items {
|
||||
float: left
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs {
|
||||
transform: rotate(-90deg) scaleX(-1);
|
||||
left: 0
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
|
||||
transform: scaleX(-1);
|
||||
margin-top: 1px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list {
|
||||
top: initial;
|
||||
right: initial;
|
||||
left: 20px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_right .lm_content {
|
||||
float: left
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs {
|
||||
transform: rotate(90deg) scaleX(1);
|
||||
left: 100%;
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls {
|
||||
left: 3px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list {
|
||||
top: initial;
|
||||
right: 20px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
|
||||
margin-top: 0;
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls {
|
||||
top: 3px
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {
|
||||
top: initial;
|
||||
bottom: 20px
|
||||
}
|
||||
|
||||
.lm_drop_tab_placeholder {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.lm_header .lm_controls .lm_tabdropdown:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
border-top: 5px dashed;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: white
|
||||
}
|
||||
|
||||
.lm_header .lm_tabdropdown_list {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.lm_header .lm_tabdropdown_list .lm_tab {
|
||||
clear: both;
|
||||
padding-right: 10px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
|
||||
width: 100px
|
||||
}
|
||||
|
||||
.lm_header .lm_tabdropdown_list .lm_close_tab {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.lm_dragProxy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.lm_dragProxy .lm_header {
|
||||
background: transparent
|
||||
}
|
||||
|
||||
.lm_dragProxy .lm_content {
|
||||
border-top: none;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator .lm_inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.lm_transition_indicator {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20
|
||||
}
|
||||
|
||||
.lm_popin {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999
|
||||
}
|
||||
|
||||
.lm_popin > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.lm_popin > .lm_bg {
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.lm_popin > .lm_icon {
|
||||
z-index: 20
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=goldenlayout-base.css.map */
|
||||
|
|
@ -165,3 +165,170 @@ input:checked + .slider {
|
|||
::-webkit-scrollbar-track {
|
||||
|
||||
}
|
||||
|
||||
/*golden layout*/
|
||||
.lm_goldenlayout {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.lm_content {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.lm_dragProxy .lm_content {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9)
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator {
|
||||
box-shadow: inset 0 0 30px #000000;
|
||||
outline: 1px dashed #cccccc;
|
||||
transition: all 200ms ease
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator .lm_inner {
|
||||
background: #000000;
|
||||
opacity: .2
|
||||
}
|
||||
|
||||
.lm_splitter {
|
||||
background: inherit;
|
||||
opacity: .001;
|
||||
transition: opacity 200ms ease
|
||||
}
|
||||
|
||||
.lm_splitter:hover, .lm_splitter.lm_dragging {
|
||||
background: #303030;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_header {
|
||||
background-color: #606060;
|
||||
height: 20px;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.lm_header.lm_selectable {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.lm_header .lm_tab {
|
||||
font-size: 12px;
|
||||
color: #f0f0f0;
|
||||
background-color: #303030;
|
||||
margin-right: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 1px
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_close_tab {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background-image: url("../icons/close.png");
|
||||
filter: invert(100%);
|
||||
background-size: 14px 14px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_close_tab:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_header .lm_tab.lm_active {
|
||||
background-color: #909090;
|
||||
}
|
||||
|
||||
.lm_header .lm_tab.lm_active .lm_close_tab:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, .lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
|
||||
box-shadow: 0 2px 2px #000000
|
||||
}
|
||||
|
||||
.lm_selected .lm_header {
|
||||
background-color: #452500
|
||||
}
|
||||
|
||||
.lm_tab:hover, .lm_tab.lm_active {
|
||||
background: #202020;
|
||||
color: #f0f0f0
|
||||
}
|
||||
|
||||
.lm_header .lm_controls .lm_tabdropdown:before {
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
.lm_controls > li {
|
||||
position: relative;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: .4;
|
||||
transition: opacity 300ms ease
|
||||
}
|
||||
|
||||
.lm_controls > li:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_controls .lm_popout {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.lm_controls .lm_maximise {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.lm_controls .lm_close {
|
||||
top: 2px;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
background-image: url("../icons/close.png");
|
||||
background-size: 16px 16px;
|
||||
background-position: center center;
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.lm_maximised .lm_header {
|
||||
background-color: #000000
|
||||
}
|
||||
|
||||
.lm_maximised .lm_controls .lm_maximise {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.lm_transition_indicator {
|
||||
background-color: #000000;
|
||||
border: 1px dashed #555555
|
||||
}
|
||||
|
||||
.lm_popin {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.lm_popin .lm_bg {
|
||||
background: #ffffff;
|
||||
opacity: .3
|
||||
}
|
||||
|
||||
.lm_popin .lm_icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid #eeeeee;
|
||||
border-top: 1px solid #eeeeee;
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
.lm_popin:hover .lm_icon {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=goldenlayout-dark-theme.css.map */
|
||||
|
|
@ -164,3 +164,166 @@ input:checked + .slider {
|
|||
::-webkit-scrollbar-track {
|
||||
|
||||
}
|
||||
|
||||
/*golden layout overrides*/
|
||||
|
||||
.lm_goldenlayout {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.lm_content {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.lm_dragProxy .lm_content {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9)
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator {
|
||||
box-shadow: inset 0 0 30px #000000;
|
||||
outline: 1px dashed #cccccc;
|
||||
transition: all 200ms ease
|
||||
}
|
||||
|
||||
.lm_dropTargetIndicator .lm_inner {
|
||||
background: #000000;
|
||||
opacity: .2
|
||||
}
|
||||
|
||||
.lm_splitter {
|
||||
background: inherit;
|
||||
opacity: .001;
|
||||
transition: opacity 200ms ease
|
||||
}
|
||||
|
||||
.lm_splitter:hover, .lm_splitter.lm_dragging {
|
||||
background-color: #dadada;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_header {
|
||||
background-color: #ededed;
|
||||
height: 20px;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.lm_header.lm_selectable {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.lm_header .lm_tab {
|
||||
font-size: 12px;
|
||||
color: #202020;
|
||||
background-color: #f8f9fa;
|
||||
margin-right: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 1px
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_close_tab {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background-image: url("../icons/close.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.lm_header .lm_tab .lm_close_tab:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_header .lm_tab.lm_active {
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.lm_header .lm_tab.lm_active .lm_close_tab:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, .lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
|
||||
box-shadow: 0 2px 2px #000000
|
||||
}
|
||||
|
||||
.lm_selected .lm_header {
|
||||
background-color: #452500
|
||||
}
|
||||
|
||||
.lm_tab:hover, .lm_tab.lm_active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
|
||||
.lm_header .lm_controls .lm_tabdropdown:before {
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
.lm_controls > li {
|
||||
position: relative;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: .4;
|
||||
transition: opacity 300ms ease
|
||||
}
|
||||
|
||||
.lm_controls > li:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lm_controls .lm_popout {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.lm_controls .lm_maximise {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.lm_controls .lm_close {
|
||||
top: 2px;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
background-image: url("../icons/close.png");
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.lm_maximised .lm_header {
|
||||
background-color: #000000
|
||||
}
|
||||
|
||||
.lm_maximised .lm_controls .lm_maximise {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.lm_transition_indicator {
|
||||
background-color: #000000;
|
||||
border: 1px dashed #555555
|
||||
}
|
||||
|
||||
.lm_popin {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.lm_popin .lm_bg {
|
||||
background: #ffffff;
|
||||
opacity: .3
|
||||
}
|
||||
|
||||
.lm_popin .lm_icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid #eeeeee;
|
||||
border-top: 1px solid #eeeeee;
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
.lm_popin:hover .lm_icon {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=goldenlayout-dark-theme.css.map */
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
.numerical_data {
|
||||
border-radius: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
#gDat {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
|
||||
.line_graph_data {
|
||||
border-radius: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
/*Console and options positions*/
|
||||
|
|
@ -142,4 +142,22 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
}
|
||||
}
|
||||
|
||||
/*Golden Layout Overrides*/
|
||||
|
||||
.lm_header {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.lm_tabs:first-child .lm_tab{
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.lm_tabs:first-child .lm_tab ~ .lm_tab{
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.lm_splitter {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue