From 2940cbe090ea1dbe117d5f5e01a0d10644087097 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 00:24:13 +0300 Subject: [PATCH 1/7] For ".block-button-center" change position from absolute to relative (skin.css) --- web/skins/classic/css/base/skin.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index d5737a66c..53c962b55 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1142,9 +1142,9 @@ html::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, nav::-webkit-scroll /* +++ Control button block in the Stream image*/ .block-button-center { - position: absolute; - left: 35%; - right: 35%; + display: inline-block; + position: relative; + margin: 0 auto; top: 2px; z-index: 10; } From 08e9fa654897fed01fe3c48e2d20cf622ee9556a Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 00:30:48 +0300 Subject: [PATCH 2/7] Update watch.css --- web/skins/classic/css/base/views/watch.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/skins/classic/css/base/views/watch.css b/web/skins/classic/css/base/views/watch.css index c0d1ca76a..41e220466 100644 --- a/web/skins/classic/css/base/views/watch.css +++ b/web/skins/classic/css/base/views/watch.css @@ -60,6 +60,12 @@ .monitorStream { text-align: center; margin: 0 auto; + display: grid; +} + +.monitorStream .button_zoom, +.monitorStream .zoompan { + grid-area: 1/1; } #monitorStatus { From 3cdbae20cfe8bac3f88ec32ac8ea46b01f0aede7 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 13:23:20 +0300 Subject: [PATCH 3/7] Changed the method for controlling the visibility of the "#button_zoom" button bar (watch.js) If we use "slideDown" & "slideUp", then with "display=grid" for the external block, there may be problems, Perhaps because we also used "display=none" for the button block. --- web/skins/classic/views/js/watch.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js index be84506e3..12a75e3d7 100644 --- a/web/skins/classic/views/js/watch.js +++ b/web/skins/classic/views/js/watch.js @@ -842,12 +842,14 @@ function streamPrepareStart(monitor=null) { function handleMouseEnter(event) { //Displaying "Scale" and other buttons at the top of the monitor image const id = stringToNumber(this.id); - $j('#button_zoom' + id).stop(true, true).slideDown('fast'); + //$j('#button_zoom' + id).stop(true, true).slideDown('fast'); + $j('#button_zoom' + id).removeClass('hidden'); } function handleMouseLeave(event) { const id = stringToNumber(this.id); - $j('#button_zoom' + id).stop(true, true).slideUp('fast'); + //$j('#button_zoom' + id).stop(true, true).slideUp('fast'); + $j('#button_zoom' + id).addClass('hidden'); } function streamStart(monitor = null) { From 0bb06461ba03506ad1b641d34e5246da8428c289 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 13:32:55 +0300 Subject: [PATCH 4/7] Changed the method for controlling the visibility of the "#button_zoom" button bar (event.js) If we use "slideDown" & "slideUp", then with "display=grid" for the external block, there may be problems, Perhaps because we also used "display=none" for the button block. --- web/skins/classic/views/js/event.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index bc5926752..27cfc5808 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -1704,12 +1704,14 @@ function initPage() { function() { //const id = stringToNumber(this.id); //Montage & Watch page const id = eventData.MonitorId; // Event page - $j('#button_zoom' + id).stop(true, true).slideDown('fast'); + //$j('#button_zoom' + id).stop(true, true).slideDown('fast'); + $j('#button_zoom' + id).removeClass('hidden'); }, function() { //const id = stringToNumber(this.id); //Montage & Watch page const id = eventData.MonitorId; // Event page - $j('#button_zoom' + id).stop(true, true).slideUp('fast'); + //$j('#button_zoom' + id).stop(true, true).slideUp('fast'); + $j('#button_zoom' + id).addClass('hidden'); } ); From d6c4de7b84324d284dba840e2b8b34288ff70079 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 13:37:19 +0300 Subject: [PATCH 5/7] Use "grid-area" for buttons block zoom (event.css) --- web/skins/classic/css/base/views/event.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/skins/classic/css/base/views/event.css b/web/skins/classic/css/base/views/event.css index 8149fae18..1effbdfaa 100644 --- a/web/skins/classic/css/base/views/event.css +++ b/web/skins/classic/css/base/views/event.css @@ -113,11 +113,17 @@ height: 100%; } #videoFeed { - display: inline-block; + /*display: inline-block;*/ + display: inline-grid; position: relative; text-align: center; } +#videoFeed .button_zoom, +[id^="videoFeedStream"] { + grid-area: 1/1; +} + #monitorStatus { width: 100%; margin-top: 3px; From 780e6062bec33c457287d81a64cd9922d7c66023 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 3 Jan 2025 13:57:15 +0300 Subject: [PATCH 6/7] Use "grid-area" for buttons block zoom (montage.css) --- web/skins/classic/css/base/views/montage.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/skins/classic/css/base/views/montage.css b/web/skins/classic/css/base/views/montage.css index 17a99101e..4f2819b75 100644 --- a/web/skins/classic/css/base/views/montage.css +++ b/web/skins/classic/css/base/views/montage.css @@ -34,6 +34,12 @@ .monitorStream { position: relative; #overflow: auto; + display: grid; +} + +.monitorStream .button_zoom, +.monitorStream .zoompan { + grid-area: 1/1; } .monitorStream, .monitor { From bc228b82402699f8bcc6b6b5ebf2638a264a7f62 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Sat, 4 Jan 2025 11:23:28 +0300 Subject: [PATCH 7/7] Avoid overlapping the central button block with the zoom buttons (skin.css) 20% - calculated approximately. A precise calculation will take additional resources (since our buttons are scalable) and there is no need for a precise calculation yet. --- web/skins/classic/css/base/skin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 53c962b55..563bf5afb 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1144,7 +1144,7 @@ html::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, nav::-webkit-scroll .block-button-center { display: inline-block; position: relative; - margin: 0 auto; + margin: 0 20%; top: 2px; z-index: 10; }