حالات مختلفة (نص وأيقونة) للردود غير المقبولة والمقبولة

[DorisHo]

عند تغيير النص المساعد إلى شيء أكثر قابلية للتنفيذ (على سبيل المثال، “وضع علامة كحل” بدلاً من “حل”)، اكتشفت مؤخرًا أن كلًا من الإجابات غير المقبولة والمقبولة تستخدم نفس النص المساعد، وبالتالي نفس الأيقونة. كنت أتساءل عما إذا كان من الممكن وجود حالات منفصلة عندما لم يتم قبول إجابة ومتى تم تمييز استجابة كحل، على النحو التالي:

حالة الزر عندما لم يتم تحديد إجابة:

حالة الزر على إجابة مقبولة بعد تحديدها.

أعتقد أن المستخدمين قد يستفيدون من رؤية نص مساعد يقترح إجراءً بدلاً من النص الافتراضي “حل”. عندما يتم تحديد إجابة، سيكون من المفيد رؤية بعض التغذية الراجعة الواضحة كنتيجة لاختيارهم.

بالإضافة إلى ذلك، قد تكون حالات التمرير السياقية مفيدة أيضًا في فهم ما سيفعله الزر، بدلاً من الاعتماد على سمة alt من المتصفح، انظر الأمثلة أدناه.

قبول حل:

إزالة إجابة محددة سابقًا:

هل هناك أي خطط لتنفيذ تفاعلات مثل هذه؟

[tynaut (Ty Correll)]

أنا أضيف حلاً لـ CSS في حال كان ذلك مفيدًا.

باستخدام العناصر الزائفة، يمكن على الأقل محاكاة السلوك الخاص بجزء النص:

هذا الكود متداخل دلاليًا بعض الشيء، ولكنه يعمل. ستحتاج محاذاة النص إلى التغيير أو عرض الزر إلى تثبيته حتى لا يقفز الهدف أثناء التحويم.

css

nav.post-controls .actions button {
    :after {
        margin-left: 0.5em;
    }
    
    :not(.unaccepted) {
        :after {
            content: "Mark as solution";
        }
        :hover {
            :after {
                content: "Select solution";
            }
        }
        
    }
    
    :not(.accepted) {
        :not(.d-icon) {
            color: var(--tertiary);
        }
        :after {
            content: "Selected Solution"; 
        }
        :hover {
            :not(.d-icon) {
                color: var(--primary);
            }
            :after {
                content: "Deselect Solution";
            }
        }
    }
}

من الممكن أيضًا القيام بذلك، مما سينتج عنه النص “Select if this reply solves the problem”، وهو طويل جدًا ولكنه يجب أن يحترم ترجمات اللغات.

:after {
    content: attr(title);
}

---

من الناحية المثالية، سأقوم بتغيير HTML الفعلي لدعم الترجمات، بدلاً من استخدام العناصر الزائفة؛
باستثناء سمة العنوان (إذا كانت أقصر)، يمكن أن تكون أفضل من وجود مستمع تحويم JavaScript.

[Karen_Kitchens]

مرحباً @tynaut،

أنا أختبر هذا الحل ولدي سؤال. عندما يكون المرء هو الناشر الأصلي، هناك تسمية زر إضافية يتم إرسالها إلى DOM
<span class="d-button-label">Mark as solution</span> مما يؤدي إلى تكرار مع هذا الحل. هل لديك أي اقتراحات حول كيفية التعامل مع هذا؟ هل يجب عليّ فقط إخفاء تسمية الزر في CSS؟

شكراً لك!

[Karen_Kitchens]

مرحباً @tynaut،

لاحظت أيضًا أنه لا توجد طريقة سهلة لمحاذاة الأزرار إلى اليسار بحيث لا تقفز عند التحويم. الحل الوحيد الذي وجدته هو إضافة عرض إلى الزر، وهو على الأرجح أقل من المثالي نظرًا لأنه ليس عنصرًا ذا عرض ثابت. هل لديك أي اقتراحات أخرى لهذا عن طريق الصدفة؟

[tynaut (Ty Correll)]

@Karen_Kitchens

لاحظت أيضًا أنه لا توجد طريقة سهلة لمحاذاة الأزرار إلى اليسار حتى لا تقفز عند التحويم.

من الأفضل الجمع بين الإجراءين، لأن الزر سيقفز إلى أجل غير مسمى إذا بقي المؤشر في نهاية عنصر غير ثابت عند تغير النص.

nav.post-controls {
    .actions {
        width: 100%;
        .extra-buttons {
            margin-right: auto; // يضبط الزر إلى اليسار
            .widget-button {
                width: 200px; // تم التعيين إلى قيمة تغطي الحد الأقصى للنص
            }
        }
    }
}

يمكنك إخفاء لون الخلفية عند التحويم واستخدام نهج مختلف للإشارة إلى التحويم إذا أردت.

[tynaut (Ty Correll)]

يمكن تعيين نص DOM إلى font-size: 0;.

وستحتاج العناصر الزائفة (وفئة .d-icon) إلى تحديد أحجام خطوطها نظرًا لأنها عناصر فرعية سترث هذه الخاصية.

[DorisHo]

مرحباً @tynaut، شكراً لمساعدتك ومدخلاتك.
هل هناك طريقة يمكننا من خلالها تغيير خاصية <use href> لتغيير الأيقونة للحالات المختلفة (الإجابة المختارة، عند التحويم، إلخ)؟