From bc6ab718cf4aaebda589ef235eef7ee3364cda1c Mon Sep 17 00:00:00 2001 From: AlekPet Date: Sat, 4 May 2024 18:33:14 +0300 Subject: [PATCH] remove style createWindowModal from painter_node And small fixes codes --- ExtrasNode/js/utils.js | 98 +++++++++++++++++++++--------- PainterNode/js/painter_node.js | 54 ---------------- PainterNode/lib/manager_mypaint.js | 2 +- 3 files changed, 70 insertions(+), 84 deletions(-) diff --git a/ExtrasNode/js/utils.js b/ExtrasNode/js/utils.js index e041933..4badf11 100644 --- a/ExtrasNode/js/utils.js +++ b/ExtrasNode/js/utils.js @@ -5,7 +5,7 @@ function makeModal({ type = "info", parent = null, stylePos = "fixed", -}) { +} = {}) { const overlay = document.createElement("div"); Object.assign(overlay.style, { display: "none", @@ -128,7 +128,7 @@ function animateClick(target, opacityVal = 0.9) { }).then(() => showHide({ elements: [target], hide: !hide })); } -function showHide({ elements = [], hide = null, displayProp = "block" }) { +function showHide({ elements = [], hide = null, displayProp = "block" } = {}) { Array.from(elements).forEach((el) => { if (hide !== null) { el.style.display = !hide ? displayProp : "none"; @@ -197,7 +197,7 @@ function createWindowModal({ stylesClose = {}, classesFooter = [], stylesFooter = {}, -}) { +} = {}) { // Function past text(html) function addText(text, parent) { if (!parent) return; @@ -220,44 +220,67 @@ function createWindowModal({ } // Wrapper - const painter_wrapper_settings = makeElement("div", { - class: ["painter__wrapper__window", ...classesWrapper], + const wrapper_settings = makeElement("div", { + class: ["alekpet__wrapper__window", ...classesWrapper], }); - Object.assign(painter_wrapper_settings.style, { + Object.assign(wrapper_settings.style, { display: "none", opacity: 0, minWidth: "220px", + position: "absolute", + left: "50%", + top: "50%", + transform: "translate(-50%, -50%)", + opacity: 0, + transition: "all .8s", ...stylesWrapper, }); // Box - const painter_box__settings = makeElement("div", { - class: ["painter__window__box", ...classesBox], + const box__settings = makeElement("div", { + class: ["alekpet__window__box", ...classesBox], }); - Object.assign(painter_box__settings.style, { + Object.assign(box__settings.style, { + display: "flex", + flexDirection: "column", + background: "#0e0e0e", + padding: "10px", + justifyContent: "center", + alignItems: "center", + gap: "10px", + textAlign: "center", + borderRadius: "6px", + color: "white", + border: "2px solid silver", + fontFamily: "monospace", + boxShadow: "2px 2px 4px silver", ...stylesBox, }); // Title - const painter_box_settings_title = makeElement("div", { - class: ["painter__window__title", , ...classesTitle], + const box_settings_title = makeElement("div", { + class: ["alekpet__window__title", , ...classesTitle], }); - Object.assign(painter_box_settings_title.style, { + Object.assign(box_settings_title.style, { ...stylesTitle, }); // Add text (html) to title - addText(textTitle, painter_box_settings_title); + addText(textTitle, box_settings_title); // Body - const painter_box_settings_body = makeElement("div", { - class: ["painter__window__body", ...classesBody], + const box_settings_body = makeElement("div", { + class: ["alekpet__window__body", ...classesBody], }); - Object.assign(painter_box_settings_body.style, { + Object.assign(box_settings_body.style, { + display: "flex", + flexDirection: "column", + alignItems: "flex-end", + gap: "5px", ...stylesBody, }); // Add text (html) to body - addText(textBody, painter_box_settings_body); + addText(textBody, box_settings_body); // Close button const close__box__button = makeElement("div", { @@ -265,40 +288,57 @@ function createWindowModal({ textContent: "✖", }); Object.assign(close__box__button.style, { + position: "absolute", + top: "-10px", + right: "-10px", + background: "silver", + borderRadius: "50%", + width: "20px", + height: "20px", + cursor: "pointer", + display: "flex", + justifyContent: "center", + alignItems: "center", + fontSize: "0.8rem", ...stylesClose, }); close__box__button.addEventListener("click", () => - animateTransitionProps(painter_wrapper_settings, { + animateTransitionProps(wrapper_settings, { opacity: 0, }).then(() => { - showHide({ elements: [painter_wrapper_settings] }); + showHide({ elements: [wrapper_settings] }); }) ); - painter_box__settings.append( - painter_box_settings_title, - painter_box_settings_body - ); + close__box__button.onmouseenter = () => { + close__box__button.style.opacity = 0.8; + }; + + close__box__button.onmouseleave = () => { + close__box__button.style.opacity = 1; + }; + + box__settings.append(box_settings_title, box_settings_body); // Footer if (textFooter) { - const painter_box_settings_footer = makeElement("div", { + const box_settings_footer = makeElement("div", { class: [...classesFooter], }); - Object.assign(painter_box_settings_footer.style, { + Object.assign(box_settings_footer.style, { ...stylesFooter, }); // Add text (html) to body - addText(textFooter, painter_box_settings_footer); + addText(textFooter, box_settings_footer); - painter_box__settings.append(painter_box_settings_footer); + box__settings.append(box_settings_footer); } - painter_wrapper_settings.append(close__box__button, painter_box__settings); + wrapper_settings.append(close__box__button, box__settings); - return painter_wrapper_settings; + return wrapper_settings; } export { diff --git a/PainterNode/js/painter_node.js b/PainterNode/js/painter_node.js index c694b7c..0b2d906 100644 --- a/PainterNode/js/painter_node.js +++ b/PainterNode/js/painter_node.js @@ -2617,60 +2617,6 @@ app.registerExtension({ .kistey_settings_body input[type="range"]::-webkit-slider-thumb:hover { background-color: rgb(49 49 49); } - - /* Modal */ - .painter__wrapper__window { - display: none; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - opacity: 0; transition: all .8s; - min-width: 200px; - } - - .painter__window__box { - display: flex; - flex-direction: column; - background: #0e0e0e; - padding: 10px; - justify-content: center; - align-items: center; - gap: 10px; - text-align: center; - border-radius: 6px; - color: white; - border: 2px solid silver; - font-family: monospace; - box-shadow: 2px 2px 4px silver; - } - - .close__box__button { - position: absolute; - top: -10px; - right: -10px; - background: silver; - border-radius: 50%; - width: 20px; - height: 20px; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - font-size: 0.8rem; - } - - .close__box__button:hover { - opacity: 0.8; - } - - .painter__window__body { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 5px; - } - /* -- end Styles Settigs Kistey -- */ `; document.head.append(style); diff --git a/PainterNode/lib/manager_mypaint.js b/PainterNode/lib/manager_mypaint.js index fa7f12d..f7a691c 100644 --- a/PainterNode/lib/manager_mypaint.js +++ b/PainterNode/lib/manager_mypaint.js @@ -272,7 +272,7 @@ class MenuBrushes { }); this.wrapper__kistey - .querySelector(".painter__window__box") + .querySelector(".alekpet__window__box") .addEventListener("click", (e) => { let target = e.target;