בירור | עיצוב הצ'אט בפורום

מים אחרונים

זה כבר קוד קצר יותר, יהיה יותר נח לשפר אותו
למי שמבין בזה!

// ==UserScript==
// @name         עיצוב צ'אט במתמחים - סגנון ווטסאפ משודרג
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  עיצוב צ'אט במתמחים כמו בווטסאפ עם תכונות מתקדמות
// @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';

    // Add CSS styles
    const styleElement = document.createElement('style');
    styleElement.innerHTML = `
        /* Background and container styling */
        [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);
            background-attachment: fixed;
        }
        
        .chat-message.mx-2.pe-2.clear {
            padding: 15px 20px 5px 20px !important;
        }

        /* Message bubbles */
        [data-self="0"][component="chat/message"] {
            background-color: #f5f5f5;
            border-radius: 12px 12px 12px 0;
            margin-left: 50px !important;
            margin-bottom: 10px !important;
            padding: 10px 14px !important;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            max-width: 65%;
            word-wrap: break-word;
        }

        [data-self="1"][component="chat/message"] {
            background-color: #e7f0e4;
            border-radius: 12px 12px 0 12px;
            margin-right: 50px !important;
            margin-bottom: 10px !important;
            padding: 10px 14px !important;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            max-width: 65%;
            word-wrap: break-word;
        }

        /* Message spacing */
        [data-self]:not([data-self="0"]):not([data-self="1"]) + [data-self] {
            margin-top: 25px !important;
        }

        /* Text styling */
        [component="chat/message"] small {
            font-size: 0.7rem;
            color: #555;
            float: right;
            margin-left: 5px;
        }

        [component="chat/message"] strong {
            font-weight: 600;
            color: #2a5885;
        }

        /* Quote styling */
        blockquote {
            background-color: rgba(0, 0, 0, 0.04);
            border-left: 3px solid #6b9e6b;
            padding: 8px 12px;
            margin: 5px 0 10px 0;
            border-radius: 0 4px 4px 0;
            color: #444;
        }

        .selected-for-quote {
            background-color: rgba(107, 158, 107, 0.15);
            border-radius: 3px;
            padding: 0 2px;
        }

        /* Message status indicators */
        .message-status {
            font-size: 0.7rem;
            float: right;
            margin-left: 4px;
            color: #555;
        }

        /* Chat header styling */
        [component="chat/header"] {
            background-color: #1e6751 !important;
            color: white !important;
            padding: 10px 16px !important;
        }

        /* Input styling */
        [component="chat/input"] {
            border-radius: 20px !important;
            padding: 10px 15px !important;
            margin: 8px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }
    `;

    document.head.appendChild(styleElement);

    // Double-click to quote message or selection
    $(document).on('dblclick', '[component="chat/message/body"]', function(e) {
        // Check if text is selected
        if (window.getSelection().toString()) {
            const selection = window.getSelection();
            const selectedText = selection.toString();
            const input = document.querySelector('[component="chat/input"]');
            
            if (input && selectedText) {
                const quoteText = selectedText.split('\n').map(line => `> ${line}`).join('\n');
                input.value += `${quoteText}\n\n`;
                input.focus();
            }
        } else {
            // Quote entire message
            const message = this.innerText;
            const lines = message.split('\n');
            const input = document.querySelector('[component="chat/input"]');
            
            if (input) {
                input.value += `${lines.map(line => `> ${line}`).join('\n')}\n\n`;
                input.focus();
            }
        }
        e.stopPropagation();
    });

    // Add message status indicators
    function addMessageStatuses() {
        document.querySelectorAll('[data-self="1"][component="chat/message"]').forEach(message => {
            if (!message.querySelector('.message-status')) {
                const statusSpan = document.createElement('span');
                statusSpan.className = 'message-status';
                statusSpan.innerHTML = '✓✓';
                const timestamp = message.querySelector('small');
                if (timestamp) {
                    timestamp.parentNode.insertBefore(statusSpan, timestamp);
                }
            }
        });
    }

    // Initialize and observe for new messages
    window.addEventListener('load', function() {
        addMessageStatuses();
        
        const chatContainer = document.querySelector('[component="chat/messages"]');
        if (chatContainer) {
            new MutationObserver(addMessageStatuses).observe(chatContainer, { 
                childList: true, 
                subtree: true 
            });
        }
    });
})();

LEVI H

@עדלאידע אוקי,
מה שתרצו. דקה.

@עדלאידע הוספתי

מים אחרונים

@LEVI-H ברגע שאתה מעדכן את הקוד, זה משנה אצל כולם? או שצריך לעדכן כל פעם?

LEVI H

@מים-אחרונים בדיוק עכשיו עדכנו אותי שצריך להוסיף שורה בשביל שזה יעדכן את כולם, הוספתי,
תתקינו כרגע שוב.

מים אחרונים

@LEVI-H תודה
בווצאפ רגיל זה נראה ככה? במסך גדול? (נניח ווב)

מים אחרונים

זה נראה מוגזם הרוחב של ההודעות

LEVI H

@מים-אחרונים דקה אני ינסה משהו

מים אחרונים

@LEVI-H
אולי אני יכתוב כאן כמה הערות, כשיהיה לך זמן תנסה לשחק עם זה אולי..

רקע עליון בצבעי ירוק, וטקסט לבן
רוחב הודעה מותאם לטקסט
מקום הקלדה מעוגל פינות ושמתרחב עם הטקסט (מה שאין נראה לי גם בעיצוב הרגיל)
עיצוב ההודעות במסך מלא
מאמין שיש פיצ'רים נוספים שאפשר... לא ראיתי ווצאפ מלא זמן

LEVI H

@מים-אחרונים טיפלתי בקטנה ברוחב וכד',
כשיהיה לי זמן להיכנס לזה בע"ה אטפל.

https://bit.ly/addstylemitm

זה העיצוב שדומה לווצאפ + אופצייה לתגובה בצאט

מים אחרונים

@LEVI-H זה שינה רק לצד שלי לא לצד השני

LEVI H

@מים-אחרונים טופל

מים אחרונים

@LEVI-H באתי בדיוק לכתוב לך
width: fit-content;
גם ב data-self="0"

שאול 208

@מים-אחרונים תסמן את הפוסט הזה כתשובה

אליעזר פפר

מה עושים עם הקובץ הזה?

עדלאידע

@אליעזר-פפר כתב בבירור | עיצוב הצ'אט בפורום:

מה עושים עם הקובץ הזה?

אתה מעתיק אותו לתוסף טמפרמונקי,
יש לך כאן מדריך לזה

פרוזי

@LEVI-H ממש יפה
אתה יכול להוסיף שאם לוחצים לחיצה כפולה לייד הודעה זה מגיב עליה כמו בווב
תודה..

LEVI H

@פרוזי זה קיים כבר,
לא בלחיצה ליד, אלא בלחיצה פעמיים על ההודעה עצמה.

פרוזי

@LEVI-H כתב בבירור | עיצוב הצ'אט בפורום:

@פרוזי זה קיים כבר,
לא בלחיצה ליד, אלא בלחיצה פעמיים על ההודעה עצמה.

אני לא רואה...
זה לא עובד לי...

LEVI H

@פרוזי תתקין את הגירסה האחרונה

פרוזי

@LEVI-H כתב בבירור | עיצוב הצ'אט בפורום:

@פרוזי תתקין את הגירסה האחרונה

https://mitmachim.top/post/946812
זה מה שהתקנתי