É possível alterar os nomes dos dropdowns?

Dev
1

Olá comunidade :slight_smile:

Alguém sabe se existe uma opção para alterar os nomes dos dropdowns dentro de uma categoria específica?

Eu adoraria personalizar as partes ‘all’ e ‘all tags’:

image
image1210×442 45.9 KB

2

Praticamente todo o texto pode ser personalizado:

image
image1129×733 17.5 KB

Imagino que você precise editar, por exemplo:

image
image1099×333 7.88 KB

2 curtidas
3

Mas não vai mudar para categorias específicas apenas.

Comecei a trabalhar em uma solução CSS muito improvisada, não é perfeita… E reluto um pouco em compartilhar algo tão improvisado de qualquer maneira. :confounded:

5 curtidas
4

Entendido, obrigado pela ajuda! @merefield @Canapin

3 curtidas
5

Ah, desculpe, leitura rápida!

Sim, eles são globais.

1 curtida
6

Ah, vamos lá :wink: :wink:

7

Acho que é excessivamente complexo, especialmente quando as subcategorias não são definidas como tal no código HTML… Tenho algo que funciona pela metade, mas acho que deveria ser feito da maneira certa, e a API JavaScript do Discourse pode ajudar com isso. Infelizmente, não sei muito sobre isso.

5 curtidas
11

Olá :wave:

Criei um componente de tema para conseguir isso…

Ele contém duas configurações para facilitar.

nome da categoria
Primeiro Lugar: slug da categoria
Segundo Lugar: título do dropdown da categoria

nome da tag
Primeiro Lugar: slug da categoria
Segundo Lugar: título do dropdown da tag

Screenshot 2023-08-23 at 14.35.00
Screenshot 2023-08-23 at 14.35.00746×303 9.71 KB

Que ficará assim.

Screenshot 2023-08-23 at 14.35.31
Screenshot 2023-08-23 at 14.35.31707×190 6.9 KB

Adicionando o título da Tag da subcategoria

Screenshot 2023-08-23 at 14.37.50
Screenshot 2023-08-23 at 14.37.50727×174 5.45 KB

Screenshot 2023-08-23 at 14.38.40
Screenshot 2023-08-23 at 14.38.40679×138 5.45 KB

Espero que ajude :slightly_smiling_face:

Editar: Corrigi a largura do dropdown para alinhar corretamente com a largura do texto personalizado. UX: fix the dropdown width to keep the custom content width · VaperinaDEV/category-breadcrumb-dropdown-title@faca71c · GitHub

Screenshot 2023-08-23 at 17.38.21
Screenshot 2023-08-23 at 17.38.21453×148 5.03 KB

Screenshot 2023-08-23 at 17.38.53
Screenshot 2023-08-23 at 17.38.53454×150 4.67 KB

8 curtidas
12

Uau, ótimo trabalho @Don - você me surpreende :exploding_head: :star_struck:

2 curtidas
13

Ouçam!\n:man_mage:\n\nDas profundezas dos mistérios do SCSS e das complexidades da alquimia front-end, Sir Don emergiu. Conquistando funções, dominando loops e decifrando listas, concedemos orgulhosamente a ele a ilustre Medalha de Distinção Front-End :sports_medal::person_bowing:.\n\nE seu componente funciona sem uma única linha de JS…\n\nHappy James Corden GIF by The Late Late Show with James Corden

1 curtida
14

Por favor, diga-me que o GPT4bot o ajudou a escrever isso :laughing:

4 curtidas
15

100% sim, receio.

2 curtidas
16

Ok, então esta solução é impressionante, mas você pode fazer isso @Don:

api
  .modifySelectKit("category-drop")
  .replaceContent((component, content) => {
    let newContent = [];
    content.forEach((item) => {
      if (
        component.category?.slug === "general" &&
        item.id === "all-categories"
      ) {
        item.name = "jojo";
      }

      newContent.push(item);
    });
    return newContent;
  });

Screenshot 2023-08-23 at 18.47.33
Screenshot 2023-08-23 at 18.47.33237×240 6.85 KB

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/select-kit/addon/mixins/plugin-api.js lista todas as ações que você pode fazer:

  • appendContent
  • prependContent
  • replaceContent
  • onChange

Me avise se tiver problemas para usar isso. Provavelmente deveria ser melhor documentado, mas estou aqui se tiver alguma dúvida.

6 curtidas
17

@Don @j.jaffeux vocês são absolutamente incríveis, pessoal!! :fire:

3 curtidas