בירור | עיצוב הצ'אט בפורום
-
זה עובד @פרוזי אולי אתה לא רואה את זה כי הטקסט מוסתר, אבל תגלול בתוך התיבת טקסט ואתה תראה את זה
-
@מים-אחרונים כתב בבירור | עיצוב הצ'אט בפורום:
זה עובד @פרוזי אולי אתה לא רואה את זה כי הטקסט מוסתר, אבל תגלול בתוך התיבת טקסט ואתה תראה את זה
ותרענן את העמוד ואז זה יכנס לתוקף
-
עיצבתי את הקוד קצת יותר, דימיתי אותו ממש לווצאפ
בהצלחה.
כמובן שצריך ליצור קוד חדש בתוסף כי המקורי מתעדכן כל הזמן.// ==UserScript== // @name new style of chat in mitmachim top2 // @namespace http://tampermonkey.net/ // @version 0.1 // @updateURL // @description new style of chat in mitmachim top // @author levi h // @match https://mitmachim.top/* // @icon https://www.google.com/s2/favicons?sz=64&domain=mitmachim.top // @grant none // ==/UserScript== (function () { 'use strict'; let sy = document.createElement('style'); sy.innerHTML = ` /* רקע כללי של הצ'אט */ [class="modal-content ui-resizable"], [component="chat/main-wrapper"] { background-image: url(https://mitmachim.top/assets/uploads/files/1689758993836-%D7%94%D7%95%D7%A8%D7%93%D7%94.png); } /* כותרת עליונה של הצ'אט הראשי */ [component="chat/header"] { background-color: #075E54 !important; color: #ffffff !important; font-weight: bold; font-size: 16px; text-align: center; padding: 10px; } [component="chat/header"] *, [component="chat/header"] i, [component="chat/header"] svg, [component="chat/header"] button { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* כותרת צ'אט מוקטן בצד */ .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle { background-color: #075E54 !important; color: #ffffff !important; padding: 10px; font-weight: bold; font-size: 14px; } .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* הודעות של אחרים */ [data-self="0"][component="chat/message"] { background-color: #fff; border-radius: 20px 20px 0px 20px; margin-left: 50px !important; width: fit-content; } /* ההודעות שלי */ [data-self="1"][component="chat/message"] { background-color: #e7ffdb; width: fit-content; border-radius: 20px 20px 20px 0px; margin-right: auto !important; padding-left: 21px !important; } /* תצוגת הודעות כללית */ .chat-message.mx-2.pe-2.clear { margin-bottom: 10px; padding: 15px 20px 0px 20px !important; } [component="chat/message"] { margin-top: 9px; padding-right: 17px; } [component="chat/message"][data-break="false"] { padding-top: 13px; } /* עבור טקסט שציטטת, ניתן להוסיף קו מפריד צבעוני */ .w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end textarea::before { content: "> "; color: #007bff; /* צבע ציטוט */ font-weight: bold; } `; document.body.append(sy); // לחיצה כפולה על הודעה כדי לצטט $(document).on('dblclick', '[component="chat/message/body"]', function () { const massage = this.innerText; const lines = massage.split('\n'); const [input] = $('[component="chat/input"]'); input.value += `>${lines.join('>')}\n\n`; input.focus(); }); })();
-
@מים-אחרונים שים לב שכעת חלק מהאפשרויות בסרגל העליון לא פועלות.
-
טיפלתי בכמה שיפורים:
עכשיו הקוד גם מציג יפה את הכותרת העליונה כמו ווצאפ ממש
ובנוסף, תיבת ההקלדה מתרחבת עם הטקסט שנכתב.
כמובן כל מה שהיה נשאר.// ==UserScript== // @name new style of chat in mitmachim top // @namespace http://tampermonkey.net/ // @version 0.1 // @updateURL // @description new style of chat in mitmachim top // @author levi h // @match https://mitmachim.top/* // @icon https://www.google.com/s2/favicons?sz=64&domain=mitmachim.top // @grant none // ==/UserScript== (function () { 'use strict'; let sy = document.createElement('style'); sy.innerHTML = ` /* רקע כללי של הצ'אט */ [class="modal-content ui-resizable"], [component="chat/main-wrapper"] { background-image: url(https://mitmachim.top/assets/uploads/files/1689758993836-%D7%94%D7%95%D7%A8%D7%93%D7%94.png); } /* כותרת עליונה של הצ'אט הראשי */ [component="chat/header"] { background-color: #075E54 !important; color: #ffffff !important; font-weight: bold; font-size: 16px; text-align: center; padding: 10px; } [component="chat/header"] *, [component="chat/header"] i, [component="chat/header"] svg, [component="chat/header"] button { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* כותרת צ'אט מוקטן בצד */ .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle { background-color: #075E54 !important; color: #ffffff !important; padding: 10px; font-weight: bold; font-size: 14px; } .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* הודעות של אחרים */ [data-self="0"][component="chat/message"] { background-color: #fff; border-radius: 20px 20px 0px 20px; margin-left: 50px !important; width: fit-content; } /* ההודעות שלי */ [data-self="1"][component="chat/message"] { background-color: #e7ffdb; width: fit-content; border-radius: 20px 20px 20px 0px; margin-right: auto !important; padding-left: 21px !important; } /* תצוגת הודעות כללית */ .chat-message.mx-2.pe-2.clear { margin-bottom: 10px; padding: 15px 20px 0px 20px !important; } [component="chat/message"] { margin-top: 9px; padding-right: 17px; } [component="chat/message"][data-break="false"] { padding-top: 13px; } /* עבור טקסט שציטטת, ניתן להוסיף קו מפריד צבעוני */ .w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end textarea::before { content: "> "; color: #007bff; /* צבע ציטוט */ font-weight: bold; } `; document.body.append(sy); // לחיצה כפולה על הודעה כדי לצטט $(document).on('dblclick', '[component="chat/message/body"]', function () { const massage = this.innerText; const lines = massage.split('\n'); const [input] = $('[component="chat/input"]'); input.value += `>${lines.join('>')}\n\n`; input.focus(); }); })();
-
@מים-אחרונים
שיפרתי קצת:
מיקום האימוג'י ומיקום כלי ההודעה.2040 שניות בג'מיני, לא מדובג כלל.
תהנו.// ==UserScript== // @name new style of chat in mitmachim top // @namespace http://tampermonkey.net/ // @version 0.1 // @updateURL // @description new style of chat in mitmachim top // @author levi h // @match https://mitmachim.top/* // @icon https://www.google.com/s2/favicons?sz=64&domain=mitmachim.top // @grant none // ==/UserScript== (function () { 'use strict'; // צור אלמנט style להוספת כללי CSS let sy = document.createElement('style'); // הוסף את כל כללי ה-CSS לאלמנט ה-style sy.innerHTML = ` /* --- עיצוב בסיסי לצ'אט --- */ /* רקע כללי של הצ'אט */ [class="modal-content ui-resizable"], [component="chat/main-wrapper"] { background-image: url(https://mitmachim.top/assets/uploads/files/1689758993836-%D7%94%D7%95%D7%A8%D7%93%D7%94.png); position: relative; } /* כותרת עליונה של הצ'אט הראשי */ [component="chat/header"] { background-color: #075E54 !important; color: #ffffff !important; font-weight: bold; font-size: 16px; text-align: center; padding: 10px; } [component="chat/header"] *, [component="chat/header"] i, [component="chat/header"] svg, [component="chat/header"] button { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* כותרת צ'אט מוקטן בצד */ .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle { background-color: #075E54 !important; color: #ffffff !important; padding: 10px; font-weight: bold; font-size: 14px; } .modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* --- עיצוב הודעות (בועות צ'אט) --- */ /* הגדרות כלליות להודעה: מיקום, רוחב מקסימלי, מרווח תחתון */ [component="chat/message"] { position: relative; margin-top: 9px; margin-bottom: 30px !important; padding: 5px 17px; /* ריווח פנימי אנכי ואופקי בסיסי */ max-width: calc(100% - 70px); /* השארת מרווח כולל של 70px (10 בצד אחד, 60 בצד שני) */ width: fit-content; /* התאמת רוחב לתוכן */ clear: both; /* למנוע בעיות גלישה */ } /* הודעות של אחרים (בועה לבנה, יישור לימין ב-RTL) */ [data-self="0"][component="chat/message"] { background-color: #fff; border-radius: 20px 20px 0px 20px; /* פינה תחתונה-ימנית חדה */ margin-left: 10px !important; /* מרווח קבוע מהצד השמאלי */ margin-right: auto !important; /* דחיפה לימין */ /* padding-bottom: 5px; ריווח תחתון פנימי קטן - הועבר לכלל הראשי */ } /* ההודעות שלי (בועה ירוקה, יישור לשמאל ב-RTL) */ [data-self="1"][component="chat/message"] { background-color: #e7ffdb; border-radius: 20px 20px 20px 0px; /* פינה תחתונה-שמאלית חדה */ margin-left: auto !important; /* דחיפה לשמאל */ margin-right: 10px !important; /* מרווח קבוע מהצד הימני */ padding-left: 21px !important; /* ריווח פנימי שמאלי קצת יותר גדול אם צריך */ /* padding-bottom: 5px; ריווח תחתון פנימי קטן - הועבר לכלל הראשי */ } /* הודעות ללא הפרדה (רצופות) */ [component="chat/message"][data-break="false"] { margin-top: 2px; /* הקטנת מרווח עליון */ margin-bottom: 2px !important; /* הקטנת מרווח תחתון */ } /* עיצוב טקסט מצוטט בתיבת הקלט */ .w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end textarea::before { content: "> "; color: #007bff; /* צבע ציטוט */ font-weight: bold; } /* --- מיקום אימוג'ים (Reactions) מתחת להודעה --- */ [component="chat/message"] [component="message/reactions"] { position: absolute; bottom: -22px; /* מיקום מתחת לבועה (שחק עם הערך לפי הצורך) */ z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; max-width: 80%; background-color: rgba(240, 240, 240, 0.85); padding: 2px 5px; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } [data-self="0"][component="chat/message"] [component="message/reactions"] { left: 5px; right: auto; } [data-self="1"][component="chat/message"] [component="message/reactions"] { right: 5px; left: auto; justify-content: flex-end; } /* --- מיקום כלי ההודעה (Reply, React, More) בצד --- */ [component="chat/message"] .controls { position: absolute !important; top: -10px !important; bottom: auto !important; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out, transform 0.1s ease-in-out; transform: translateY(3px); background-color: rgba(250, 250, 250, 0.97) !important; border-radius: 15px !important; padding: 5px 8px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; border: none !important; z-index: 10; display: flex !important; gap: 5px; } [component="chat/message"]:hover .controls { opacity: 1; pointer-events: auto; transform: translateY(0); } [data-self="0"][component="chat/message"] .controls { right: -15px !important; /* מיקום מימין להודעה (שחק עם הערך) */ left: auto !important; } [data-self="1"][component="chat/message"] .controls { left: -15px !important; /* מיקום משמאל להודעה (שחק עם הערך) */ right: auto !important; } [component="chat/message"] .controls .btn { padding: 2px 4px !important; background: none !important; border: none !important; line-height: 1; box-shadow: none !important; border-radius: 5px; transition: background-color 0.15s ease; } [component="chat/message"] .controls .btn:hover { background-color: rgba(0, 0, 0, 0.1) !important; } [component="chat/message"] .controls i, [component="chat/message"] .controls svg { color: #444 !important; fill: #444 !important; stroke: none !important; width: 18px; height: 18px; vertical-align: middle; } `; // סוף ה-CSS // הוסף את אלמנט ה-style ל-body של הדף document.body.append(sy); // --- פונקציונליות JavaScript: ציטוט בלחיצה כפולה --- if (typeof $ !== 'undefined') { $(document).on('dblclick', '[component="chat/message/body"]', function () { const messageText = this.innerText; const lines = messageText.split('\n'); const inputElement = $('[component="chat/input"]')[0]; if (!inputElement) return; let quotePrefix = '> '; let textToInsert = quotePrefix + lines.join('\n' + quotePrefix.trim() + ' ') + '\n\n'; if (inputElement.value.length > 0 && !inputElement.value.endsWith('\n\n') && !inputElement.value.endsWith('\n')) { inputElement.value += '\n\n'; } else if (inputElement.value.length > 0 && inputElement.value.endsWith('\n') && !inputElement.value.endsWith('\n\n')) { inputElement.value += '\n'; } inputElement.value += textToInsert; inputElement.focus(); inputElement.setSelectionRange(inputElement.value.length, inputElement.value.length); inputElement.scrollTop = inputElement.scrollHeight; const event = new Event('input', { bubbles: true }); inputElement.dispatchEvent(event); }); } else { console.warn("Tampermonkey Script: jQuery not found, double-click to quote feature disabled."); } })(); // סוף המעטפת (IIFE)
עריכה: הפכתי את סדר ההצמדה.
-
@מים-אחרונים
עשיתי צילו"מ מה השינויים...