Subcategorías primero en el selector de categorías del Compositor

[martyn_thomas]

Nuestros usuarios seleccionan la categoría relevante en el Compositor de Temas basándose en la subcategoría, lo que significa que tienen que recordar la categoría a la que pertenece la subcategoría que quieren usar para poder encontrarla.

¿Es posible cambiar la forma en que se muestran las categorías en el selector de categorías para que la subcategoría y la categoría intercambien lugares (con la subcategoría primero)?

Por ejemplo, un usuario quiere publicar un tema sobre Gobernanza. Idealmente, el menú desplegable de Categoría muestra ‘Gobernanza - Admin’ (y la lista está ordenada por subcategoría).

Y cuando se selecciona, se muestra como ‘Gobernanza - Admin’ en el compositor.

Gracias.

[Arkshine]

Una solución rápida de CSS podría ser la siguiente. Colócala en tu tema o en el CSS de un componente.
Invierte la categoría → subcategoría a subcategoría → categoría:

// Invierte la posición de "categoría -> subcategoría" a "subcategoría -> categoría"
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
    flex-direction: row-reverse;
}

// Oculta la categoría principal cuando se selecciona una subcategoría
#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-category__wrapper:first-child {
        display: none;
    }

    & > .badge-category__wrapper:last-child {
        display: unset;
    }
}

[martyn_thomas]

¡Eres un mago, muchas gracias!

¿Hay alguna forma de que el compositor priorice mostrar el nombre de la subcategoría sobre la categoría en el menú desplegable una vez seleccionado, o, mejor aún, que solo muestre la subcategoría (que solo aparezca la categoría ‘trail’ en el menú desplegable)?

[martyn_thomas]

Después de algunas pruebas y errores, creo que estoy progresando con:

span.name .badge-wrapper:first-child {
    display: none;
}

Sin embargo, no funciona si la opción solo tiene una categoría y no una subcategoría (en cuyo caso la categoría debe mostrarse). Seguiré experimentando.

[Jagster (Jakke Lehtonen)]

¿Qué tiene de malo la sugerencia de Arkshine?

[Arkshine]

@martyn_thomas Actualicé mi publicación anterior. Vas por buen camino. Falta una regla para restaurar display cuando no hay subcategoría. (básicamente, la solución es ocultar siempre el primer elemento y eliminar el segundo)

[martyn_thomas]

Nada, funcionó perfectamente, no estoy intentando ocultar la categoría del menú desplegable seleccionado, básicamente estoy intentando que mi editor se vea bonito.

[martyn_thomas]

@Arkshine

// Invierte la posición de "categoría -> subcategoría" a "subcategoría -> categoría"
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
    flex-direction: row-reverse;
}

// Oculta la categoría principal cuando se selecciona una subcategoría
#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-category__wrapper:first-child {
        display: none;
    }

    & > .badge-category__wrapper:last-child {
        display: unset;
    }
}

La primera parte funciona (invirtiendo subcategoría y categoría), pero la segunda no

Jugaré durante el fin de semana para ver si puedo resolverlo. Gracias por tu ayuda, te debo una cerveza de Navidad.

[Arkshine]

No estoy seguro. Como ves en la captura de pantalla, funciona de mi lado.
Además, aquí tienes un vídeo de mi foro de prueba:

[Jagster (Jakke Lehtonen)]

A mí también me funciona (y hace que los lugares estén más ordenados y sean más lógicos, porque estamos interesados en una categoría, no en la ruta hacia ella; la categoría principal no es importante aquí)

Gracias a los dos.

[martyn_thomas]

Lo resolví:

En 3.1 es

#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-wrapper:first-child {
        display: none;
    }

    & > .badge-wrapper:last-child {
        display: unset;
    }
}

¡Gracias por la ayuda a todos!

[Heliosurge (Dan DeMontmorency)]

Hola, me imagino que si no tienes demasiadas categorías sin subcategorías, podrías usar una condición.

Por ejemplo, si la categoría no es cat1, Cat2, entonces tu código para ocultar la categoría principal del compositor.

Si lo contrario, cambia a si catX, Cat,Y entonces tu código.

¿En qué lugar necesitamos poner esto al crear el componente?