Suggestions de barre d'outils du compositeur

UX
1

Bonjour,

C’est un problème courant sur notre forum. Le menu contextuel natif mobile et la sélection rendent difficile l’utilisation de la barre d’outils de l’éditeur. J’ai donc apporté quelques modifications bricolées (nécessite plus de travail), mais je pense que c’est une bonne idée… :slightly_smiling_face:
Je montre un exemple.

Le menu contextuel couvre la barre d’outils de l’éditeur.

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

La sélection et le menu contextuel couvrent le menu d’options contextuel

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

J’ai déplacé la section de la barre d’outils de l’éditeur en bas de l’éditeur sur mobile et j’ai également modifié la position du menu d’options contextuel.

Bureau

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

De cette façon, les éléments natifs de sélection et de menu contextuel ne couvriront pas cette partie.

Commun > 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);
    }
    // Menu contextuel
    .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 {
    // Plus de rembourrage en bas pour éviter que la dernière ligne de sélection ne couvre la barre d'outils
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Menu contextuel
    .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 « J'aime »
2

C’est super, merci beaucoup. Ce n’est qu’un petit changement, mais il rend l’expérience mobile vraiment géniale :smiling_face_with_three_hearts:

4 « J'aime »
3

Oui, j’ai eu les mêmes problèmes et ce serait une excellente amélioration.

Je sens qu’un composant de thème arrive…

5 « J'aime »
4

Cela semble merveilleux. Veuillez également tester sur des appareils où vous n’avez que trois lignes dans la fenêtre de saisie. Pas environ 12 comme dans votre première capture d’écran. Such a tiny window to edit here on a cell phone

2 « J'aime »
5

J’ai vraiment aimé cette solution, mais elle ne fonctionne plus bien avec l’assistant IA :cry:

2 « J'aime »
6

Salut Don,

Je me demandais si vous aviez une solution pour le clavier mobile Android.

Sur Google Pixel 8 et potentiellement d’autres téléphones Android. Lorsque vous utilisez l’éditeur de code dans Theme et Theme component, le clavier couvre la zone en cours de saisie s’il y a beaucoup de code et des zones inférieures. Cela se produit également dans l’éditeur de code pour les nouveaux modèles de formulaires.

Si je comprends bien, cela peut probablement être résolu en ajoutant un rembourrage en bas ? Ainsi, le clavier ne couvre que la zone vide ?

1 « J'aime »
7

Bonjour :wave:

J’ai placé l’[kbd]IA[/kbd] en haut à droite. Je pense que cela n’interférera avec rien et que les options développées sont en pleine largeur en haut. J’ai désactivé les animations pour éviter les clignotements lors de la sélection. Code peu testé mais bon… Je pense que cela devrait aussi fonctionner sur iPhone, mais je ne l’ai pas testé, alors veuillez tester avant la mise en ligne. Le compositeur est toujours en pleine hauteur.

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, je ne suis pas sûr, mais si c’est un problème courant ou un problème de base, je pense que cela vaut la peine d’ouvrir un nouveau sujet UX avec quelques captures d’écran / vidéos… :slightly_smiling_face:

1 « J'aime »
9

Ça fonctionne sur iPhone, mais le rouage s’ouvre bizarrement. Il s’ouvre à l’intérieur de la barre de boutons.

1 « J'aime »
10

Je le ferai, merci Don ! :+1:

J’ai ajouté ce code pour prendre en charge le composant de comptage de caractères.

CSS mobile

//* Déplace le compteur de caractères au-dessus de la barre de composition inférieure
.character-counts {
    bottom: 2.5em !important;
}

Avant d’ajouter cela, le compteur de caractères et la barre de composition se chevauchaient.

Résultat

Screenshot_20240822-214435
Screenshot_20240822-214435864×1817 142 KB

1 « J'aime »
11

Et vous pensiez que la barre d’outils était remontée. Mais elle devrait toujours être en bas ? Eh bien, sur iPhone, elle est en haut, mais elle est déroulable.

12

Je pense que c’est voulu. Regarde la dernière vidéo dans le message initial.

Le dernier code que j’ai partagé concerne uniquement le positionnement du bouton IA, c’est un ajout aux codes du message initial. Mais bien sûr, tu peux aussi l’utiliser séparément. :slightly_smiling_face:

13

En plus ? Ok, j’ai remplacé la section totalement mobile :squinting_face_with_tongue:

edit

J’ai la barre de boutons là où elle devrait être et elle fonctionne comme elle le devrait après avoir utilisé tous les extraits, de l’OP et le nouveau. Mais maintenant, je n’ai plus l’icône IA :man_facepalming:

edit2

Quand j’appuie sur le hamburger du compositeur, c’est-à-dire que je cache la barre de boutons, l’icône IA apparaît.

Et le rouage de l’iPad ne fait rien.

Est-ce que cela semble mieux que mes trucs fous précédents ?

1 « J'aime »
14

Ouais, il semble que ça ne fonctionne pas avec l’ordre inversé des colonnes ou d’autres ordonnancements. Je pense donc que si ça ne fonctionne pas avec ça, nous ne pourrons pas faire grand-chose pour combiner ces deux modifications. :confused:

Je vais chercher une nouvelle solution pour que ça fonctionne et je vais repenser un peu les choses…

15

Dommage. Parce que pour moi, en tant que profane, cela ressemble à un changement de Discourse sur la façon de montrer que l’assistant IA a cassé plusieurs choses sur les appareils Apple, car votre solution fonctionnait auparavant :thinking:

16

Avez-vous récemment cliqué sur l’icône en forme de roue dentée dans l’éditeur ? Nous y avons ajouté un raccourci et un lien vers la relecture, très faciles à utiliser sur mobile.

17

Je ne l’ai pas fait. C’est assez bien, je devrais utiliser la relecture plus souvent car alors je ne violerais pas l’anglais aussi gravement.

L'image affiche un message dans une application numérique, potentiellement un e-mail ou un chat, avec une suggestion d'édition. (Légendé par l'IA)
L'image affiche un message dans une application numérique, potentiellement un e-mail ou un chat, avec une suggestion d'édition. (Légendé par l'IA)1190×522 108 KB

Et pourtant, il me manque d’autres options que les assistants IA offrent. Mais bien sûr, la solution du rouage est en effet facile à utiliser.

1 « J'aime »
18

Salut Don

Je pense que le code pourrait avoir besoin d’une mise à jour car la barre ne défile plus pour les éléments qui ne sont pas visibles sur la barre.