Suggestions de barre d'outils du compositeur

Don · Janvier 8, 2023, 3:51

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…
Je montre un exemple.

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

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

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

Mobile

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;
      }
    }
  }
}

hoangphuctran93 · Janvier 14, 2023, 2:23

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

nathank · Janvier 14, 2023, 3:21

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…

jidanni · Février 25, 2023, 10:06

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

Jagster · Août 22, 2024, 5:28

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

Heliosurge · Août 22, 2024, 6:39

Salut Don,

Je me demandais si tu avais une solution pour le clavier mobile Android.

Sur un Google Pixel 8 et possiblement d’autres téléphones Android. Lorsque j’utilise l’éditeur de code dans Customization > Theme & Customization > Theme component, le clavier couvre la zone de saisie s’il y a beaucoup de code et des zones en bas. Cela se produit également dans l’éditeur de code pour les nouveaux Form-templates.

Si je comprends bien, cela pourrait probablement être corrigé en ajoutant un padding en bas ? Ainsi, le clavier ne couvrirait que la zone vide ?

Don · Août 22, 2024, 11:02

Hello

J’ai placé le IA en haut à droite. Je pense que cela n’interférera avec rien et que les options développées occuperont toute la largeur en haut. J’ai désactivé les animations pour éviter les clignotements lors de la sélection. Le code n’est pas très testé, mais c’est un début… Je pense que cela devrait aussi fonctionner sur iPhone, mais je ne l’ai pas testé, donc veuillez tester avant la mise en production. Le composeur est toujours en hauteur complète.

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 de cela, mais s’il s’agit d’un problème courant ou d’un problème noyau, je pense qu’il vaut la peine d’ouvrir un nouveau sujet Contribute > UX avec quelques captures d’écran / vidéo…

Jagster · Août 22, 2024, 11:32

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

Heliosurge · Août 23, 2024, 12:52

Je le ferai, merci Don !

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

Jagster · Août 23, 2024, 5:51

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.

Don · Août 23, 2024, 6:09

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.

Jagster · Août 23, 2024, 6:11

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

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

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 ?

Don · Août 23, 2024, 7:39

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.

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

Jagster · Août 23, 2024, 7:46

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

sam · Août 27, 2024, 8:28

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.

Jagster · Août 27, 2024, 8:38

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.

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.

Heliosurge · Janvier 21, 2025, 10:53

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.

Sujet		Réponses	Vues
Android context menu covers up the composer AI helper Bug composer , mobile , ai , ai-helper , fixed	30	435	Août 22, 2024
Help us test the restyled composer UX feedback	29	5868	Novembre 10, 2017
Can't get to the bold, italic buttons if too close to the top UX composer	3	714	Février 25, 2023
Expand composer button on mobile UX mobile	2	381	Février 23, 2024
Composer menu: on narrow pages, items disappear off the right side including all important OPTIONS item UX composer	35	3570	Août 29, 2025

Suggestions de barre d'outils du compositeur

Sujets connexes