Quando si modifica il testo di aiuto in qualcosa di più concreto (ad esempio, “Segna come soluzione” invece di “Soluzione”), ho recentemente scoperto che sia le risposte non accettate che quelle accettate utilizzano lo stesso testo di aiuto e, di conseguenza, la stessa icona. Mi chiedevo se fosse possibile avere stati separati per quando una risposta non è stata accettata e quando una risposta è contrassegnata come soluzione, come segue:
Stato del pulsante quando una risposta non è stata selezionata:
Penso che gli utenti potrebbero beneficiare della visualizzazione di un testo di aiuto che suggerisce un’azione rispetto al testo predefinito “Soluzione”. Quando una risposta viene selezionata, sarebbe utile vedere un feedback evidente come risultato della loro selezione.
Inoltre, anche gli stati contestuali del puntatore potrebbero essere utili per capire cosa farà il pulsante, piuttosto che fare affidamento sull’attributo alt del browser, vedere gli esempi seguenti.
Accettare una soluzione:
Rimuovere una risposta precedentemente selezionata:
Ci sono piani per implementare interazioni come queste?
Sto aggiungendo una soluzione CSS nel caso fosse utile.
Con gli pseudo-elementi, almeno il comportamento della porzione di testo può essere imitato:
Questo codice è un po’ semanticamente annidato, ma funziona. L’allineamento del testo dovrebbe essere modificato o la larghezza del pulsante fissata in modo che il target non salti durante il passaggio del mouse.
È anche possibile fare questo, che risulterebbe nel testo “Select if this reply solves the problem”, che è troppo lungo ma dovrebbe rispettare le traduzioni linguistiche.
&::after {
content: attr(title);
}
Idealmente, cambierei l’HTML effettivo per supportare le traduzioni, invece di usare pseudo-elementi;
Ad eccezione dell’attributo title (se fosse più corto), potrebbe essere meglio che avere un listener hover JS.
Sto testando questa soluzione e ho una domanda. Quando si è l’autore originale, viene inviata al DOM un’etichetta di pulsante aggiuntiva <span>Mark as solution</span> che crea una duplicazione con questa soluzione. Hai qualche suggerimento su come affrontare questo problema? Dovrei semplicemente nascondere l’etichetta del pulsante nel CSS?
Ho anche notato che non c’è un modo semplice per allineare a sinistra i pulsanti in modo che non saltino al passaggio del mouse. L’unica soluzione che ho trovato è aggiungere una larghezza al pulsante, il che è probabilmente meno che ideale dato che non è un elemento a larghezza fissa. Hai per caso altri suggerimenti per questo?
È meglio combinare entrambe le misure, perché il pulsante salterà indefinitamente se il cursore rimane alla fine di un elemento non fisso quando il testo cambia.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // regola il pulsante a sinistra
.widget-button {
width: 200px; // impostato su un valore che copre il testo massimo
}
}
}
}
Potresti nascondere il colore di sfondo al passaggio del mouse e utilizzare un approccio diverso per indicare il passaggio del mouse, se lo desideri.
Il testo DOM può essere impostato su font-size: 0;.
E gli pseudo-elementi (e la classe .d-icon) avrebbero bisogno delle loro dimensioni dei font specificate poiché sono figli che erediteranno tale proprietà.
Ehi @tynaut, grazie per il tuo aiuto e il tuo contributo.
C’è un modo per modificare la proprietà <use href> per cambiare l’icona per i diversi stati (risposta selezionata, al passaggio del mouse, ecc.)?
