diff --git a/src/main/resources/webui/dataReceive.js b/src/main/resources/webui/dataReceive.js index a23255a..8f56a07 100644 --- a/src/main/resources/webui/dataReceive.js +++ b/src/main/resources/webui/dataReceive.js @@ -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('
'); + }); + dashlayout.registerComponent('CPU Utilization', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Disk Utilization', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Cache Size', function (container, state) { + + container.getElement().append('
'); + }); + dashlayout.registerComponent('RAM Utilization', function (container, state) { + container.getElement().append('
'); + }); + // numbers + dashlayout.registerComponent('Hits', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Misses', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Requests Served', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Bytes Sent', function (container, state) { + container.getElement().append('
'); + }); + dashlayout.registerComponent('Hit Percent', function (container, state) { + container.getElement().append('
'); + }); + + 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 () { diff --git a/src/main/resources/webui/icons/close.png b/src/main/resources/webui/icons/close.png new file mode 100644 index 0000000..8c030e8 Binary files /dev/null and b/src/main/resources/webui/icons/close.png differ diff --git a/src/main/resources/webui/index.html b/src/main/resources/webui/index.html index 3e89d9d..00774c9 100644 --- a/src/main/resources/webui/index.html +++ b/src/main/resources/webui/index.html @@ -4,6 +4,7 @@ MD@H Client + @@ -46,19 +47,9 @@

Dashboard

-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -132,6 +123,13 @@
+
+

Lock Dashboard
(does not work)

+ +
diff --git a/src/main/resources/webui/layout.css b/src/main/resources/webui/layout.css index 171f9f9..e98bb26 100644 --- a/src/main/resources/webui/layout.css +++ b/src/main/resources/webui/layout.css @@ -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; } -} \ No newline at end of file +} + +/*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 */ \ No newline at end of file diff --git a/src/main/resources/webui/themes/darkTheme.css b/src/main/resources/webui/themes/darkTheme.css index cf2485d..96661bb 100644 --- a/src/main/resources/webui/themes/darkTheme.css +++ b/src/main/resources/webui/themes/darkTheme.css @@ -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 */ \ No newline at end of file diff --git a/src/main/resources/webui/themes/lightTheme.css b/src/main/resources/webui/themes/lightTheme.css index 8076817..0a26f14 100644 --- a/src/main/resources/webui/themes/lightTheme.css +++ b/src/main/resources/webui/themes/lightTheme.css @@ -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 */ \ No newline at end of file diff --git a/src/main/resources/webui/themes/softStyle.css b/src/main/resources/webui/themes/softStyle.css index 2279813..61d3763 100644 --- a/src/main/resources/webui/themes/softStyle.css +++ b/src/main/resources/webui/themes/softStyle.css @@ -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 { -} \ No newline at end of file +} + +/*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; +} +