Sugerencias para la barra de botones del compositor

UX
1

Hola,

Este es un problema común en nuestro foro. El menú contextual y la selección nativos del móvil complican el uso de la barra de botones del editor. Así que hice algunos cambios hacks (necesitan más trabajo) pero creo que esto es bueno, como idea… :slightly_smiling_face:
Muestro un ejemplo.

El menú contextual cubre la barra de botones del editor.

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

La selección y el menú contextual cubren el menú emergente de opciones

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

Moví la sección de la barra de botones del editor a la parte inferior del editor en el móvil y también cambié la posición del menú emergente de opciones.

Escritorio

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

Móvil

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

De esta manera, los elementos nativos de selección y menú contextual no cubrirán esta parte.

Común > 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);
    }
    // Menú emergente
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

Móvil > CSS

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

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Mayor relleno en la parte inferior para evitar que la última línea de selección cubra la barra de botones
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Menú emergente
    .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 Me gusta
2

genial, muchas gracias. Es solo un pequeño cambio, pero hace que la experiencia móvil sea realmente genial :smiling_face_with_three_hearts:

4 Me gusta
3

Sí, he tenido los mismos problemas y esta sería una excelente mejora.

Siento que se avecina un componente temático…

5 Me gusta
4

Suena maravilloso. Por favor, también prueba en dispositivos donde solo tengas tres líneas en la ventana de entrada. No unas 12 como en tu primera captura de pantalla. Such a tiny window to edit here on a cell phone

2 Me gusta
5

Me gustó mucho esa solución, pero ya no funciona bien con el asistente de IA :cry:

2 Me gusta
6

Hola Don:

Me preguntaba si tendrías alguna solución para el teclado de Android móvil.

En Google Pixel 8 y posiblemente en otros teléfonos Android. Al usar el editor de código en Theme y Theme component, el teclado cubre el área que se está introduciendo si hay mucho código y áreas inferiores. Esto también sucede en el editor de código para las nuevas plantillas de formularios.

Si entiendo bien, ¿esto se puede solucionar añadiendo relleno en la parte inferior? ¿Para que el teclado solo cubra el área vacía?

1 me gusta
7

Hola :wave:

He colocado el AI en la esquina superior derecha. Creo que no interferirá con nada y las opciones expandidas ocupan todo el ancho superior. Desactivé las animaciones para evitar parpadeos al seleccionar. Código no muy probado pero algo… Creo que también debería funcionar en iPhone, pero no lo he probado, así que pruébalo antes de publicarlo. El editor siempre está en altura completa.

Móvil / 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, no estoy seguro de esto, pero si es un problema común o un problema central, creo que vale la pena abrir un nuevo tema de UX con algunas capturas de pantalla / video… :slightly_smiling_face:

1 me gusta
9

Funciona en el iPhone, pero el engranaje se abre de forma extraña. Se abre dentro de la barra de botones.

1 me gusta
10

Lo haré, ¡gracias Don! :+1:

Agregué este código para agregar soporte para el componente de recuento de caracteres.

CSS móvil

//* Mueve el recuento de caracteres por encima de la barra inferior del compositor
.character-counts {
    bottom: 2.5em !important;
}

Antes de agregar esto, el recuento de caracteres y la barra del compositor se superponían.

Resultado

Screenshot_20240822-214435
Screenshot_20240822-214435864×1817 142 KB

1 me gusta
11

Y pensé que habías movido la barra de herramientas hacia arriba. ¿Pero todavía debería estar abajo? Bueno, en iPhone está arriba, pero se puede desplazar.

12

Creo que eso es por diseño. Mira el último vídeo en el OP.

El último código que comparto es solo para el posicionamiento del botón de IA, es un complemento para los códigos del OP. Pero, por supuesto, también puedes usarlo por separado. :slightly_smiling_face:

13

¿Adicional? Ok, reemplacé la sección totalmente móvil :squinting_face_with_tongue:

editar

Tengo la barra de botones donde debería estar y funciona como debería después de usar todos los fragmentos, del OP y el nuevo. Pero ahora ya no tengo el icono de IA :man_facepalming:

editar2

Cuando toco la hamburguesa del compositor, es decir, oculto la barra de botones, aparece el icono de IA.

Y el engranaje del iPad no hace nada.

¿Suena eso mejor que mis locuras anteriores?

1 me gusta
14

Sí, parece que no funciona con la columna inversa u otro orden. Así que creo que si no funciona con esto, no podemos hacer mucho para combinar estas dos modificaciones. :confused:

Buscaré una nueva solución para que funcione y rediseñaré las cosas un poco…

15

Vaya. Porque para mí, como lego, eso suena a que el cambio de Discourse sobre cómo mostrar el asistente de IA rompió varias cosas en los dispositivos Apple, porque tu solución funcionaba antes :thinking:

16

¿Has pulsado el icono del engranaje en el editor recientemente? Añadimos un acceso directo y un enlace a la corrección de pruebas allí, que es muy fácil de usar en el móvil.

17

No lo he hecho. Bastante bien, debería usar la corrección ortográfica más a menudo porque entonces quizás no infrinja tanto el inglés.

La imagen muestra un mensaje en una aplicación digital, posiblemente un correo electrónico o un chat, con una sugerencia para editar. (Subtitulado por IA)
La imagen muestra un mensaje en una aplicación digital, posiblemente un correo electrónico o un chat, con una sugerencia para editar. (Subtitulado por IA)1190×522 108 KB

Y sin embargo, me faltan otras opciones que ofrecen los asistentes de IA. Pero claro, la solución de engranaje es fácil de usar, de hecho.

1 me gusta
18

Hola Don

Creo que el código puede necesitar una actualización, ya que la barra ya no se desplaza para los elementos que no son visibles en la barra.