Suggerimenti per la barra dei pulsanti Composer

UX
1

Ciao,

Questo è un problema comune sul nostro forum. Il menu contestuale mobile nativo e la selezione rendono complicato l’uso della barra dei pulsanti dell’editor. Quindi ho apportato alcune modifiche di fortuna (richiedono più lavoro) ma penso che vadano bene, come idea… :slightly_smiling_face:
Mostro un esempio.

Il menu contestuale copre la barra dei pulsanti dell’editor.

Screenshot_20230108_041530_com.android.chrome
Screenshot_20230108_041530_com.android.chrome1080×2240 245 KB

La selezione e il menu contestuale coprono il menu popup delle opzioni

Screenshot_20230108_041646_com.android.chrome
Screenshot_20230108_041646_com.android.chrome1080×2240 229 KB

Ho spostato la sezione della barra dei pulsanti dell’editor in fondo all’editor su mobile e ho anche cambiato la posizione del menu popup delle opzioni.

Desktop

Screenshot 2023-01-08 at 16.07.47
Screenshot 2023-01-08 at 16.07.47743×404 16 KB

Mobile

Screenshot_20230108_160152_com.android.chrome
Screenshot_20230108_160152_com.android.chrome1080×2240 202 KB

In questo modo gli elementi nativi di selezione e menu contestuale non copriranno questa parte.

Comune > CSS

.d-editor-textarea-wrapper {
  .d-editor-button-bar {
    display: flex;
    overflow-x: auto;
    background: var(--primary-very-low);
    .btn,
    .select-kit {
      flex: 1;
      color: var(--primary-high);
    }
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

Mobile > CSS

#reply-control {
  .submit-panel {
    margin-top: 1em;
  }
}

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Bigger padding on bottom to prevent the last line selection covers the buttons bar
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      position: static;
      .select-kit-filter {
        display: none;
      }
      .select-kit-body {
        transform: none !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row;
        justify-content: flex-start;
        max-width: 100%;
        width: 100% !important;
        overflow-x: auto;
        background: var(--primary-very-low);
        border: none;
      }
      .select-kit-row {
        padding: 0.5em 0.65em;
        border: 1px solid transparent;
        border-top: none;
      }
      .select-kit-collection {
        display: contents;
      }
    }
  }
}
13 Mi Piace
2

Ottimo, grazie mille. È solo una piccola modifica, ma rende l’esperienza mobile davvero fantastica :smiling_face_with_three_hearts:

4 Mi Piace
3

Sì, ho avuto gli stessi problemi e questo sarebbe un eccellente miglioramento.

Sento che sta arrivando un componente a tema…

5 Mi Piace
4

Sembra meraviglioso. Testa anche sui dispositivi in cui hai solo tre righe nella finestra di input. Non circa 12 come nello screenshot iniziale. Such a tiny window to edit here on a cell phone

2 Mi Piace
5

Mi è piaciuta molto quella soluzione, ma non funziona più bene con l’aiuto dell’IA :cry:

2 Mi Piace
6

Ciao Don,

Mi chiedevo se avessi una soluzione per la tastiera mobile Android.

Su Google Pixel 8 e forse altri telefoni Android. Quando si utilizza l’editor di codice in Theme e Theme component, la tastiera copre l’area in cui si sta inserendo il testo se c’è molto codice e le aree inferiori. Questo accade anche nell’editor di codice per i nuovi Form-templates.

Se ho capito bene, questo problema può probabilmente essere risolto aggiungendo un padding in basso? In modo che la tastiera copra solo l’area vuota?

1 Mi Piace
7

Ciao :wave:

Ho posizionato l’[kbd]AI[/kbd] in alto a destra. Penso che non interferirà con nulla e le opzioni espanse sono a tutta larghezza in alto. Ho disabilitato le animazioni per evitare sfarfallii durante la selezione. Codice non testato a fondo ma qualcosa… Penso che dovrebbe funzionare anche su iPhone ma non l’ho testato, quindi per favore testa prima di andare in produzione. Il composer è sempre a tutta altezza.

Mobile / CSS

.fk-d-menu {
  &[data-identifier=ai-composer-helper-menu] {
    position: fixed;
    display: block;
    max-width: 730px !important;
    width: 100%;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    animation: none;
    .fk-d-menu__inner-content {
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
    
    .ai-composer-helper-menu {
      width: 100%;
      .ai-custom-prompt {
        &__input[type=text] {
          width: 100%;
        }
      }
      .ai-helper-loading {
        display: flex;
        justify-content: center;
      }
      .ai-helper-button-group {
        justify-content: center;
      }
      
      &:not(.is-expanded) {
        position: unset;
        background: none;
        width: 100%;
        right: 0;
        padding: 0;
        ul {
          position: absolute;
          right: 8px;
          button {
            background: var(--secondary);
            border: none;
            border-radius: var(--d-button-border-radius);
            box-shadow: 0 0 0 1px var(--primary-medium);
            width: 4.5em;
            height: 1.7em;
            margin-top: calc(var(--header-offset) + 8px);
            animation: none;
            .d-icon {
              margin-right: 0.45em;
            }
            .d-button-label {
              display: block;
              color: var(--primary-high);
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

#reply-control.open {
  height: 100%;
}

@Heliosurge, non sono sicuro ma se è un problema comune o un problema fondamentale, penso che valga la pena aprire un nuovo argomento UX con alcuni screenshot / video… :slightly_smiling_face:

1 Mi Piace
9

Funziona su iPhone, ma l’icona a forma di ingranaggio si apre in modo strano. Si apre all’interno della barra dei pulsanti.

1 Mi Piace
10

Farò grazie Don! :+1:

Aggiunto questo codice per aggiungere il supporto al componente conteggio caratteri.

CSS per dispositivi mobili

//* Sposta il conteggio dei caratteri sopra la barra inferiore del compositore
.character-counts {
    bottom: 2.5em !important;
}

Prima di aggiungere questo, il conteggio dei caratteri e la barra del compositore si sovrapponevano.

Risultato

Screenshot_20240822-214435
Screenshot_20240822-214435864×1817 142 KB

1 Mi Piace
11

E pensavi che avessi spostato la barra degli strumenti in alto. Ma dovrebbe essere ancora in basso? Beh, su iPhone è in alto, ma è scorrevole.

12

Penso che sia intenzionale. Guarda l’ultimo video nell’OP.

L’ultimo codice che ho condiviso è solo per il posizionamento del pulsante AI, è un’aggiunta ai codici dell’OP. Ma ovviamente, puoi usarlo anche separatamente. :slightly_smiling_face:

13

Aggiuntivo? Ok, ho sostituito completamente la sezione mobile :squinting_face_with_tongue:

modifica

Ho la barra dei pulsanti dove dovrebbe essere e funziona come dovrebbe dopo aver utilizzato tutti gli snippet, dall’OP e quello nuovo. Ma ora non ho più l’icona AI :man_facepalming:

modifica2

Quando tocco l’hamburger del compositore, ovvero nascondo la barra dei pulsanti, appare l’icona AI.

E il cog dell’iPad non fa nulla.

Suona meglio di quelle mie cose folli precedenti?

1 Mi Piace
14

Sì, sembra che non funzioni con la colonna inversa o altri ordinamenti. Quindi penso che se non funziona con questo, non possiamo fare molto per combinare queste due modifiche. :confused:

Cercherò una nuova soluzione alternativa per farlo funzionare e ridisegnerò un po’ le cose…

15

Peccato. Perché per me, da profano, sembra che il cambio di Discourse su come mostrare l’aiuto dell’IA abbia rotto diverse cose sui dispositivi Apple, dato che la tua soluzione funzionava prima :thinking:

16

Hai premuto l’icona a forma di ingranaggio nell’editor di composizione di recente? Abbiamo aggiunto un collegamento e una scorciatoia per la correzione di bozze, molto facile da usare su dispositivi mobili.

17

Non l’ho fatto. Abbastanza carino, dovrei usare di più la correzione di bozze perché altrimenti potrei violare l’inglese così gravemente.

L'immagine mostra un messaggio in un'applicazione digitale, forse un'email o una chat, con un suggerimento per la modifica. (Didascalia dell'IA)
L'immagine mostra un messaggio in un'applicazione digitale, forse un'email o una chat, con un suggerimento per la modifica. (Didascalia dell'IA)1190×522 108 KB

Eppure mi mancano altre opzioni che l’aiuto dell’IA offre. Ma certo, la soluzione con ingranaggio è facile da usare, in effetti.

1 Mi Piace
18

Ehi Don

Penso che il codice possa necessitare di un aggiornamento poiché la barra non scorre più per gli elementi non visibili sulla barra.