¿Por qué tantas opciones en el menú del editor de equipo?

UX
1

En el escritorio, donde hay mucho espacio en la barra de menú principal, ¿por qué tantas opciones están ocultas detrás de la opción de menú del engranaje? ¿No estaban Texto preformateado, Lista con viñetas y Lista numerada en la barra de menú principal anteriormente?

image
image938×417 33.2 KB

4 Me gusta
2

Supongo que esto debe ser de Meta, a juzgar por la captura de pantalla. :slight_smile:

En mi portátil (Windows/Firefox), esta es mi barra de formato:

image
image767×166 6.13 KB

¿Hay algo en el dispositivo que estés usando que pueda explicar la diferencia?

3

Yo también veo lo mismo que @JammyDodger, incluso cuando reduzco la ventana del navegador:

image
image676×420 7.77 KB

4

Hola,

¿Es este un dispositivo con pantalla táctil?

4 Me gusta
5

Es una laptop con pantalla táctil, sí. Espero que esto se pueda revertir, encontrando otra solución solo para iPad / tabletas, porque la experiencia en mi laptop de 13 pulgadas (no particularmente grande) ha empeorado mucho con este cambio.

6

Tengo el mismo problema.

Hasta/cuándo/si hay una interfaz de usuario que proporcione más opciones para la disposición de los botones del compositor/editor, @awesomerobot proporcionó algunos ejemplos de CSS para reorganizarlos, y funciona.

¡¡¡Gracias Kris!!!

Kris también sugiere que podría ser mejor añadir esto como un componente de tema, para que esté separado de tu tema actual.

Cómo hacerlo:

  1. Ve a admin\u003ecustomize\u003ethemes y haz clic en new
  2. Nómbralo algo como “Orden de botones de mosaico”, selecciona “component” en el menú desplegable, haz clic en crear
  3. Luego puedes hacer clic en Edit CSS/HTML, copiar y pegar el CSS de arriba en common \u003e css

Ahora el componente está creado y necesitas añadirlo a tu tema actual.

  1. Vuelve a la página anterior, luego cambia de la pestaña de componentes a la pestaña de temas.
  2. Selecciona tu tema activo actualmente (tendrá una marca verde).
  3. Dentro de la configuración del tema, aquí hay una sección de Theme Components, busca tu nuevo componente en el menú desplegable y luego haz clic en “add”.
  4. :tada: Ahora, cuando vuelvas a la página de inicio de tu foro y actualices, debería estar activo.

De Tiles Image Gallery - #66 by awesomerobot
y Tiles Image Gallery - #68 by awesomerobot

7

También veo menos opciones en mi iPhone 8. No estoy seguro si está relacionado con este cambio, pero claramente hay mucho espacio adicional en la barra del menú principal.

image
image750×1283 98.6 KB

8

Hemos estado evitando observar el ancho de la barra de herramientas y su contenido y ajustarlo según el espacio disponible porque sería un cambio algo complicado que probablemente introduciría cierta fragilidad.

Por lo tanto, el desafío es que necesitamos que todos los iconos quepan sin desbordar el editor de una manera que funcione para la mayoría de los dispositivos (algunos dispositivos con pantalla táctil más estrechos no podían acceder al menú de configuración en absoluto antes de este cambio). Desafortunadamente, esto significa que más iconos terminan en el menú de configuración de lo necesario en algunos casos.

Hemos discutido vagamente la posibilidad de agregar algunas configuraciones del sitio que permitan a un administrador decidir qué se oculta dentro del menú desplegable de configuración, por lo que esto podría ser configurable en el futuro.

13 Me gusta
9

Un gran +1 para esto.

5 Me gusta
10

Una configuración de usuario sería mejor. :slight_smile:

Principalmente porque no soy un administrador, jaja. Tal como está, uso el menú principalmente para texto de spoiler y detalles ocultos. Sería bueno poder mostrarlos en el menú principal. Pero parece muy específico del usuario, por lo que una configuración del sitio ayudará hasta cierto punto.

3 Me gusta
11

Nuestro sitio tiene muchos fragmentos de código, scripts y salidas de registro publicados por nuestros usuarios. Mover el botón de código preformateado al menú de configuración cuando se tiene una pantalla táctil, desde nuestro punto de vista, no fue la mejor idea. ¿Hay alguna manera (sin tener que parchear javascript) de mover este botón de regreso a la barra de botones o intercambiarlo con otro botón que no consideramos tan importante?

2 Me gusta
12

Hola,

De esta manera puedes añadir un nuevo botón de texto preformateado a los dispositivos táctiles.

Añade lo siguiente a la sección Common/Header de un nuevo componente.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Añade esto a la sección Common/CSS. Esto ocultará el botón de texto preformateado del menú emergente.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

Screenshot_20221204_145422
Screenshot_20221204_1454221080×1389 164 KB

4 Me gusta
13

@Don - muchísimas gracias. Funciona a la perfección.

1 me gusta
14

Esto sería muy útil. He notado que la mayoría de los usuarios en mi sitio no tienen idea de que hay opciones debajo del menú de la rueda/engranaje.

1 me gusta
15

Y he notado que la gran mayoría de los usuarios no usan la barra de herramientas en absoluto. Incluyendo aquí en Meta.

Así que la Gran Pregunta ™ no es qué tenemos o no tenemos bajo el menú del engranaje, sino si deberíamos poner todo bajo el engranaje y ofrecer una experiencia de escritura más limpia :smirking_face:

1 me gusta
16

Tras la última actualización de Discourse, parece que la solución proporcionada por @Don ya no funciona, y el botón de formato de código también ha desaparecido del menú de configuración. Edición: Al eliminar el componente personalizado, el botón reaparece en el menú de configuración. Ahora necesitamos una solución alternativa para que el botón vuelva a aparecer en el menú de encabezado en dispositivos móviles.

Como moderador de un foro de aprendizaje de programación, es muy importante que nuestros usuarios puedan formatear correctamente su código, incluso en dispositivos móviles. Este problema nos está haciendo las cosas más difíciles. :confused:

1 me gusta
17

Hola @sableraph :wave:

Gracias, he creado un componente de tema funcional para esto. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

2 Me gusta
18

¡Gracias por tu respuesta!

No estoy seguro de cómo instalar el tema, pero logré parchear tu componente original de la siguiente manera:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

El CSS sigue siendo el mismo.

19

Esto parece estar roto en la última actualización de Discourse (v3.3.0-beta2). El botón está en la barra de herramientas, pero al seleccionarlo se produce un error sobre que ‘formatCode’ no es una función. El botón que permanece en el engranaje funciona bien. ¿Qué cambió?

20

Reemplazar
action: "formatCode",
por
action: () => toolbar.context.send("formatCode")

Eso debería solucionar el problema :+1:

1 me gusta