diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css index b91e11ad8..fa0d5babb 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css @@ -1,4 +1,9 @@ -.mimic-wrapper { +.tooltip.show .tooltip-inner { + text-align: left; + max-width: none; + white-space: nowrap; +} +.mimic-wrapper { overflow: auto; overscroll-behavior: none; position: relative; @@ -38,7 +43,6 @@ .mimic-wrapper.view-mode .mimic .comp.wait-action { cursor: wait !important; } - .mimic-wrapper.edit-mode { cursor: default; } diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css index 299cd313e..dc555b956 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css @@ -1 +1 @@ -.mimic-wrapper{overflow:auto;overscroll-behavior:none;position:relative;}.mimic-wrapper .mimic{background-color:#fff;background-repeat:no-repeat;position:absolute;}.mimic-wrapper .mimic .comp{box-sizing:border-box;line-height:normal;position:absolute;}.mimic-wrapper .mimic .comp.text .text-content{overflow:hidden;}.mimic-wrapper .mimic .comp.picture .picture-content{background-clip:content-box;background-repeat:no-repeat;height:100%;width:100%;}.mimic-wrapper .mimic .comp.panel{background-color:inherit;}.mimic-wrapper.view-mode .mimic .comp.invisible-state{display:none;}.mimic-wrapper.view-mode .mimic .comp.disabled-state{pointer-events:none;}.mimic-wrapper.view-mode .mimic .comp.has-action{cursor:pointer;}.mimic-wrapper.view-mode .mimic .comp.wait-action{cursor:wait!important;}.mimic-wrapper.edit-mode{cursor:default;}.mimic-wrapper.edit-mode .mimic{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp::before{content:"";inset:var(--border-width,0);position:absolute;}.mimic-wrapper.edit-mode .mimic .comp.selected::before{box-shadow:0 0 0 3px lime;}.mimic-wrapper.edit-mode .mimic .comp:not(.selected):hover::before{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp.fiction-border::before{border:1px dashed var(--bs-gray-600);}.mimic-wrapper.edit-mode .mimic .comp.picture.blank .picture-content{background-image:url("../images/picture-blank.svg");}.mimic-wrapper.edit-mode .mimic .comp.faceplate .comp:hover::before{box-shadow:none;} \ No newline at end of file +.tooltip.show .tooltip-inner{text-align:left;max-width:none;white-space:nowrap;}.mimic-wrapper{overflow:auto;overscroll-behavior:none;position:relative;}.mimic-wrapper .mimic{background-color:#fff;background-repeat:no-repeat;position:absolute;}.mimic-wrapper .mimic .comp{box-sizing:border-box;line-height:normal;position:absolute;}.mimic-wrapper .mimic .comp.text .text-content{overflow:hidden;}.mimic-wrapper .mimic .comp.picture .picture-content{background-clip:content-box;background-repeat:no-repeat;height:100%;width:100%;}.mimic-wrapper .mimic .comp.panel{background-color:inherit;}.mimic-wrapper.view-mode .mimic .comp.invisible-state{display:none;}.mimic-wrapper.view-mode .mimic .comp.disabled-state{pointer-events:none;}.mimic-wrapper.view-mode .mimic .comp.has-action{cursor:pointer;}.mimic-wrapper.view-mode .mimic .comp.wait-action{cursor:wait !important;}.mimic-wrapper.edit-mode{cursor:default;}.mimic-wrapper.edit-mode .mimic{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp::before{content:"";inset:var(--border-width,0);position:absolute;}.mimic-wrapper.edit-mode .mimic .comp.selected::before{box-shadow:0 0 0 3px lime;}.mimic-wrapper.edit-mode .mimic .comp:not(.selected):hover::before{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp.fiction-border::before{border:1px dashed var(--bs-gray-600);}.mimic-wrapper.edit-mode .mimic .comp.picture.blank .picture-content{background-image:url("../images/picture-blank.svg");}.mimic-wrapper.edit-mode .mimic .comp.faceplate .comp:hover::before{box-shadow:none;} \ No newline at end of file diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss index 579839787..43f622194 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss @@ -4,6 +4,13 @@ $component-selected-box-shadow: 0 0 0 3px lime; $component-hover-box-shadow: 0 0 0 1px var(--bs-gray-500); $component-fiction-border: 1px dashed var(--bs-gray-600); +// Bootstrap tooltip override +.tooltip.show .tooltip-inner { + text-align: left; + max-width: none; + white-space: nowrap; +} + .mimic-wrapper { overflow: auto; overscroll-behavior: none; diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js index a444621fb..6b66fbe1c 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js @@ -4704,12 +4704,24 @@ rs.mimic.MimicRenderer = class MimicRenderer extends rs.mimic.Renderer { this._setCornerRadius(mimicElem, props.cornerRadius); } - mimicElem - .attr("title", props.tooltip) - .css({ - "background-color": props.backColor, - "color": props.foreColor - }); + // Tooltip: native title for desktop, Bootstrap for touch devices + if (props.tooltip) { + const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0); + + if (isTouchDevice) { + mimicElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
')); + mimicElem.attr("data-bs-toggle", "tooltip"); + mimicElem.attr("data-bs-html", true); + mimicElem.addClass("user-select-none"); + } else { + mimicElem.attr("title", props.tooltip); + } + } + + mimicElem.css({ + "background-color": props.backColor, + "color": props.foreColor + }); if (props.backgroundImage) { let x = props.backgroundPadding.left; @@ -5134,7 +5146,20 @@ rs.mimic.RegularComponentRenderer = class extends rs.mimic.ComponentRenderer { this._setBorder(componentElem, props.border); this._setCornerRadius(componentElem, props.cornerRadius); this._setFont(componentElem, props.font, renderContext.fontMap); - componentElem.attr("title", props.tooltip); + + // Tooltip: native title for desktop, Bootstrap for touch devices + if (props.tooltip) { + const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0); + + if (isTouchDevice) { + componentElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
')); + componentElem.attr("data-bs-toggle", "tooltip"); + componentElem.attr("data-bs-html", true); + componentElem.addClass("user-select-none"); + } else { + componentElem.attr("title", props.tooltip); + } + } if (props.enabled) { this._restoreVisualState(componentElem, props); diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js index f57b39d5b..415914b9a 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js @@ -322,12 +322,24 @@ rs.mimic.MimicRenderer = class MimicRenderer extends rs.mimic.Renderer { this._setCornerRadius(mimicElem, props.cornerRadius); } - mimicElem - .attr("title", props.tooltip) - .css({ - "background-color": props.backColor, - "color": props.foreColor - }); + // Tooltip: native title for desktop, Bootstrap for touch devices + if (props.tooltip) { + const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0); + + if (isTouchDevice) { + mimicElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
')); + mimicElem.attr("data-bs-toggle", "tooltip"); + mimicElem.attr("data-bs-html", true); + mimicElem.addClass("user-select-none"); + } else { + mimicElem.attr("title", props.tooltip); + } + } + + mimicElem.css({ + "background-color": props.backColor, + "color": props.foreColor + }); if (props.backgroundImage) { let x = props.backgroundPadding.left; @@ -752,7 +764,20 @@ rs.mimic.RegularComponentRenderer = class extends rs.mimic.ComponentRenderer { this._setBorder(componentElem, props.border); this._setCornerRadius(componentElem, props.cornerRadius); this._setFont(componentElem, props.font, renderContext.fontMap); - componentElem.attr("title", props.tooltip); + + // Tooltip: native title for desktop, Bootstrap for touch devices + if (props.tooltip) { + const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0); + + if (isTouchDevice) { + componentElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
')); + componentElem.attr("data-bs-toggle", "tooltip"); + componentElem.attr("data-bs-html", true); + componentElem.addClass("user-select-none"); + } else { + componentElem.attr("title", props.tooltip); + } + } if (props.enabled) { this._restoreVisualState(componentElem, props); diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js index b58407116..928933d8f 100644 --- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js +++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js @@ -147,6 +147,15 @@ function updateLayout() { alignHorizontally(); } +// Initialize Bootstrap tooltips on all mimic elements +function initTooltips() { + if (mimic.dom && typeof bootstrap !== "undefined") { + mimic.dom.find("[data-bs-toggle='tooltip']").each(function () { + bootstrap.Tooltip.getOrCreateInstance(this); + }); + } +} + async function loadMimic() { spinnerElem.removeClass("d-none"); let result = await mimic.load(getLoaderUrl(), viewID); @@ -159,6 +168,7 @@ async function loadMimic() { mimicWrapperElem.append(unitedRenderer.createMimicDom()); toolbarElem.removeClass("d-none"); initScale(); + initTooltips(); startUpdatingData(); startBlinking(); }