From 3d37b10d61cf059ee4a4cff1c2849cdefbf6f999 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 15 Apr 2025 10:03:39 +0200 Subject: [PATCH] Some new icons with logic (not completed yet) --- client/SEAWebClient.html | 5 ++- client/cssFiles/SEAWebClientGroup.css | 20 +++++++++--- client/cssFiles/SEAWebClientMain.css | 12 ++++++- client/jsFiles/SEAWebClientCommunication.js | 1 + client/jsFiles/SEAWebClientGroup.js | 35 +++++++++++---------- client/jsFiles/SEAWebClientMain.js | 13 ++++++-- 6 files changed, 61 insertions(+), 25 deletions(-) diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html index 01279c0..7e7aa7b 100644 --- a/client/SEAWebClient.html +++ b/client/SEAWebClient.html @@ -81,7 +81,10 @@
-
×
+
+ + +
diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index 79ae4ce..d598194 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -89,10 +89,14 @@ height: 16px; line-height: 16px; margin-left: 4px; + opacity: .8; } .status-icon { - + border-radius: 50%; + background-color: dimgray; + opacity: .8; + /* box-shadow: -2px -2px 5px inset; */ } .status-icon-busy { @@ -107,12 +111,18 @@ background-color: red; } -.edit-icon { - +.info-icon:hover { + /* opacity: .6; */ + cursor: pointer; + transform: scale(90%); + transition: .5s; } -.info-icon { - +.edit-icon:hover { + /* opacity: .6; */ + cursor: pointer; + transform: scale(90%); + transition: .5s; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css index 55eae5c..068ebf9 100644 --- a/client/cssFiles/SEAWebClientMain.css +++ b/client/cssFiles/SEAWebClientMain.css @@ -139,11 +139,21 @@ meta, body { /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CLOSE CROSS */ -#close-cross{ +#close-cross { z-index: 50; top: 9px; right: 12px; position: fixed; color: white; cursor: pointer; +} + +.icon-close { + height: 20px; + width: 20px; +} + +.icon-close:hover { + transform: scale(90%); + transition: .5s; } \ No newline at end of file diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index a3c0d9e..53108ac 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -357,6 +357,7 @@ function successHandler(s, message) { // -> write parameter-block to grid-element2 showParams = true; + document.getElementById('close-cross').innerHTML = ''; isl = insertSlide(2, message.title, 'parameters', createContent(2, message)); if (nColumns == 1) { elements[1].style.display = "none"; // hide modules diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index a08f15a..53daf80 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -13,7 +13,7 @@ function getGroup(s, name) { if (debug_group_daniel) { console.log("%cfunction: getGroup", "color:white;background:salmon"); } - // console.log('name: ',name, ', id: '.ClientID); + console.log('name: ',name, ', id: '.ClientID); reqJSON(s, "http://" + hostPort + "/getblock?path=" + name + "&id=" + clientID, successHandler, errorHandler); } @@ -148,11 +148,10 @@ function create_rdlink_row(s, component) { var left = createTitle(component, 1); left.id = component.name; left.name = component.title; // or setAttribute('name'.. ? - // left.classList.add("interactive", "link"); - left.onclick = function () { - getGroup(s, component.title); - } + // left.onclick = function () { + // getGroup(s, component.title); + // } return appendToContent(component, left, createParElement(component)); } @@ -504,11 +503,13 @@ function createTitle(component, modules) { // Creates left side of row-tag containing title. Title may hold additional // information, which is shown, when title-tag is clicked. - // At the modules-block a status-oicon is added + // At the modules-block a status-icon is added var left = document.createElement('span'); - var status_icon = document.createElement('p'); - status_icon.classList.add("status-icon"); + // var status_icon = document.createElement('p'); + // status_icon.classList.add("status-icon"); + console.log(component); + var title = component.title; if (component.info) { left.classList.add("col-left", "event-toggle-info"); @@ -524,14 +525,16 @@ function createTitle(component, modules) { left.innerHTML = component.title + "(i)"; } else { if (modules) { - left.innerHTML = '' + component.title + '' - // + 's' - + '' - // + 'e' - + '' - // + 'i' - + '' - ; + var icon_status = ''; + var icon_edit = ''; + var icon_info = ''; + + left.innerHTML = '' + component.title + ''; + if (component.statusname) { + left.innerHTML += icon_status; + } + left.innerHTML += icon_edit; + left.innerHTML += icon_info; } else { left.innerHTML = component.title; } diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index 5ca011a..55ab88b 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -81,7 +81,7 @@ function to_bool(string) { // example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1 // hostPort given and debugCommunication switched on new Settings() - .treat("debugCommunication", "dc", 0, 2) // 1: debug synchronous comm. 2: debug syn and asyn comm + .treat("debugCommunication", "dc", 0, 0) // 1: debug synchronous comm. 2: debug syn and asyn comm .treat("debugGraphics", "dg", to_bool, false) .treat("hostPort", "hp", 0, location.hostname + ":" + location.port) .treat("showMain", "sm", to_bool, true) @@ -179,15 +179,24 @@ window.onload = function() { adjustGrid(); let crossElement = document.getElementById("close-cross"); + // crossElement.innerHTML = ''; if(window.hideRightPart){ document.body.removeChild(crossElement); }else{ crossElement.onclick = function(){ + console.log(showParams); if (showParams) { showParams = false; + document.getElementById('close-cross').innerHTML = ''; } else { - window.wideGraphs = ! window.wideGraphs; + if (window.wideGraphs) { + window.wideGraphs = false; + document.getElementById('close-cross').innerHTML = ''; + } else { + window.wideGraphs = true; + document.getElementById('close-cross').innerHTML = ''; + } } adjustGrid(); }