Pulsante per rimuovere immagini nell'anteprima del composer

Ciao,

Sto solo pensando a una nuova funzionalità per eliminare facilmente le immagini dall’editor. Molte volte succede che l’utente carichi più immagini e voglia eliminarne solo una, ma è davvero complicato se l’utente non ha familiarità con markdown. Ovviamente ci provano, ma il risultato di solito sono alcuni collegamenti interrotti, ecc.

C’è stata una modifica con il testo alternativo dell’immagine che funziona abbastanza bene e in modo intuitivo. Aggiunge la possibilità di modificare il testo alternativo sul lato di anteprima.


Sarebbe fantastico posizionare un pulsante di eliminazione sull’immagine nel lato di anteprima. Forse un’icona :wastebasket: o una X sull’angolo dell’immagine e cliccando su quel pulsante potrebbe individuare e rimuovere il codice markdown effettivo dell’immagine. :slightly_smiling_face:

Grazie :slightly_smiling_face:

8 Mi Piace

Grazie Don, sembra un pulsante utile e probabilmente non è troppo difficile da aggiungere. Segnerò questo come pr-welcome, saremo lieti di vederlo aggiunto.

3 Mi Piace

Sto lavorando per risolvere questo problema; ho quasi una prova di concetto funzionante.
Ho solo una confusione tra questi due componenti d-editor.js e composer-editor,js. La mia soluzione finora si basa sull’ascolto del contenuto di anteprima/html quando viene aggiornato all’interno del componente d-editor.js… ecc.
Sono nella giusta direzione?

1 Mi Piace

Il posto più appropriato per eliminare un’immagine sarebbe accanto ai pulsanti che mostriamo al passaggio del mouse per ridimensionare le immagini e aggiungere testo alternativo nell’anteprima del composer.

image

L’hook per eliminare il markup dell’immagine dovrebbe essere molto simile ai pulsanti 100%/75%/50%. Puoi vedere qui come viene eseguito il ridimensionamento dell’immagine.

2 Mi Piace

Sono un po’ indeciso sull’aggiungerlo lì, perché sembra così raro averne bisogno e aggiungerà rumore visivo.

Immagino un’icona a forma di “cestino” allineata a destra di quella riga, in modo che non sia troppo vicina al pulsante di modifica?

@awesomerobot pensieri?

Inoltre, mi chiedo se l’ordine delle operazioni qui sia corretto, la rotazione e il ritaglio sono più importanti?

3 Mi Piace

Per aggiungere semplicemente un pulsante di eliminazione potremmo fare:

Sposta il pulsante di modifica a sinistra (bonus: minore distanza del mouse dall’input del compositore), e poi metti il pulsante di eliminazione a destra… così abbiamo una certa distanza tra azioni innocue e pericolose.

Altre cose utili:

  • rendi l’icona di modifica blu come il 50%, 75%
  • mantieni il testo nero, ma rendilo cliccabile anche sull’input
  • quando l’editor del titolo è aperto, possiamo posizionarlo in modo che corrisponda alla linea di base del testo di anteprima (quindi uno strato z sopra)? Questo rende le cose meno scattanti al clic:

Questo è un ambito più ampio, ma con rotazione e ritaglio potremmo volere un tipo di menu completamente diverso?

http://notion.so ha un bell’esempio:

Quindi hanno il loro pulsante con una serie di opzioni, il ridimensionamento è clicca e trascina sulle maniglie…

Un bel piccolo dettaglio è che se aggiungi un’immagine troppo piccola per l’overlay del pulsante, forzano l’immagine a una scala che contiene il pulsante una volta che provi a interagire con essa. Ciò evita di avere un pulsante al passaggio del mouse che sovrappone qualsiasi contenuto circostante.

7 Mi Piace

@awesomerobot Grazie per il tuo feedback. Ho un’altra domanda per assicurarci di essere sulla stessa lunghezza d’onda. Riguardo a questo punto:

Poiché ci sono due scenari in cui il contenitore dei “pulsanti di ridimensionamento” appare insieme al “pulsante di modifica alternativo”

Normalmente questi appaiono sulla stessa linea; tuttavia, quando il testo alternativo è lungo, il contenitore alternativo traboccherà sulla riga successiva:

Stessa linea

Overflow

Ora tornando ai tuoi punti sopra; avrebbe senso presumendo che tu voglia che il comportamento di overflow sia quello predefinito. Altrimenti, per un alt breve, il pulsante di eliminazione sarebbe solo un pulsante di chiusura per modificare l’alt.

Un’altra alternativa è mostrare semplicemente il contenitore alt prima dei pulsanti di ridimensionamento, ad esempio:

Stessa linea:

Overflow:

Quindi è chiaro che il pulsante di eliminazione viene dopo il 50%, ma non è chiaro come funzionerebbe nei due scenari sopra.

2 Mi Piace

[Aggiornamento]

Ho seguito il secondo approccio sopra:
Ecco un video su come appare

Se tutto sembra a posto; rifattorizzerò il codice e creerò/pubblicherò una PR.

8 Mi Piace

Grazie per aver spiegato i dettagli aggiuntivi! Penso che vada bene!

6 Mi Piace

Grazie; ho già inviato una PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 Mi Piace

Questo è stato unito a partire da oggi

6 Mi Piace