Selector de idioma en el encabezado

Componente temático
1

|||
| — | — | — |
| :information_source: |Resumen|Selector de idioma de encabezado añade un selector de idioma para los usuarios al encabezado del sitio.|
|:eyeglasses:|Vista previa|Vista previa en theme-creator.discourse.org |
|:hammer_and_wrench:|Enlace del repositorio|https://github.com/Ahmedgagan/header-locale-selector|
|:open_book:|¿Nuevo en los temas de Discourse?|Guía para principiantes sobre el uso de temas de Discourse |

Instalar este componente temático

Este componente temático añade un menú desplegable de idiomas disponibles al encabezado del sitio. Será muy útil para los usuarios que no están familiarizados con el idioma predeterminado del sitio.

Nota: Esta función solo está disponible para usuarios registrados.

Patrocinador

Un agradecimiento especial a @Richard_Millington por patrocinar este componente.

13 Me gusta
2

Hacer que esto sea más prominente y la inclusión de banderas podría ayudar mucho a las personas en foros multilingües.

Una adición increíble al ecosistema. :+1:

5 Me gusta
6

¡Esta es una característica increíble y fantástica! Es mi recomendación que el equipo considere agregar este componente como mínimo como un componente temático preinstalado en el núcleo.

¡Muchas gracias por lanzar esto!
:vulcan_salute::star_struck::+1:

2 Me gusta
7

Tengo una pequeña solicitud de funcionalidad.

¿Sería posible que el enlace desplegable se pudiera ajustar en dispositivos móviles?

Screenshots_2023-01-22-15-28-34
Screenshots_2023-01-22-15-28-34794×387 89.9 KB

Si habilito el complemento de chat, estará muy abarrotado. ¿Quizás incluso hacerlo configurable para usar banderas en el escritorio y que el móvil use las 2 letras, similar a como era antes en Windows? Ha pasado un tiempo. lol

Aunque el escalado podría funcionar para ser similar en tamaño al de la lupa de búsqueda.

8

Solo algunos comentarios de uno de nuestros miembros.

Gran componente

La selección de idiomas con las banderas es genial, desafortunadamente contiene algunos errores. Croacia no ha recibido una bandera.
Cataluña es parte de España.

¿También puedes compartir algo de código para reducir el tamaño de la bandera en el móvil?

9

¿Sería posible tener una opción para usar el código de país en lugar de las banderas? Similar al idioma del teclado en Windows.\n\nie es en etc..\n\nLa bandera es enorme en el móvil. O una opción para reducir el tamaño de la bandera.\n\nIncluso una anulación de CSS sería útil. Gracias.

1 me gusta
10

Sí, este interruptor necesita ser modificado para que coincida con el estilo general del discurso. Ahora es terrible.

1 me gusta
11

Capturas de pantalla de la apariencia actual como referencia:

Escritorio:

image
image1372×506 32.5 KB

image
image1371×478 36.2 KB

Móvil:

image
image393×383 27 KB

image
image393×474 24.5 KB

12

Este componente no me funciona. ¿Hay algo más que hacer aparte de encenderlo y seleccionar una plantilla?

image
image1053×551 29 KB

13

Necesita al menos un rediseño parcial. Si alguien quiere contribuir y enviar PRs para solucionar varios problemas, es bienvenido :slight_smile:

1 me gusta
14

Etiquetado como #roto por ahora

15

El componente está roto, pero marcado como compatible con la última versión

16

@volanar Ese no es el mismo componente.

1 me gusta
17

Estoy eliminando la etiqueta broken.

¡Para empezar, el componente nunca estuvo roto!
Hubo un malentendido sobre otro componente de tema de Discourse que Volanar informó como roto.

Probé el componente, que todavía funciona en la última versión de Discourse.
Sin embargo, todavía requiere algunas actualizaciones para modernizarlo, resolver una depreciación y solucionar problemas menores para que funcione bien en la última versión de Discourse.

Fui adelante e hice una PR (patrocinada por @Richard_Millington) :+1:

6 Me gusta
20

Se ha fusionado la PR; gracias, Ahmed. :+1:

4 Me gusta
21

¿cómo usar 2 o 3 idiomas y eliminar otros idiomas?
por cierto, optimicé el código para locale-selector.js:

import Component from "@ember/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { ajax } from "discourse/lib/ajax";
import { userPath } from "discourse/lib/url";
import { isTesting } from "discourse-common/config/environment";

export default class LocaleSelector extends Component {
  @service currentUser;

  get availableLocales() {
    // Cache filtered locales for performance optimization
    if (!this._filteredLocales) {
      const allLocales = JSON.parse(this.siteSettings.available_locales);
      this._filteredLocales = allLocales.filter(locale => ['en', 'ar'].includes(locale));
    }
    return this._filteredLocales;
  }

  @action
  onChangeLocale(value) {
    this.set("currentUser.locale", value);
    ajax(userPath(`${this.currentUser.username_lower}.json`), {
      data: { locale: this.currentUser.locale },
      type: "PUT",
    }).then(() => {
      if (!isTesting()) {
        location.reload();
      }
    });
  }

  defaultItem() {
    const currentUserLocale = document.documentElement
      .getAttribute("lang")
      ?.replaceAll("-", "_");

    return (
      this.content.find(val => val.value === currentUserLocale) ||
      this.content.find(val => val.value === this.siteSettings.default_locale)
    );
  }
}

después de probarlo, Discourse se queda congelado
¿alguna idea?

22

available_locales tiene esta estructura:

[
  {
    name: "English (US)",
    value: "en"
  },
  ...
]

Así que en tu código necesitarás usar locale.value. :+1:

23

@Ahmed_Gagan Parece que hay un nuevo problema con este componente de tema:

24

Solo una nota aquí que este componente de tema ya no es necesario y está respaldado por el núcleo en la configuración del sitio mencionada anteriormente. (Documentación)