Ajuda com o componente Header-widget-override

Dev
1

Olá pessoal

Consegui um tempo para atualizar o aviso do seu componente

\u003e [Aviso do Admin] Um dos seus temas ou plugins precisa ser atualizado para compatibilidade com as próximas alterações principais do Discourse. (id:discourse.header-widget-overrides) Tema identificado: ‘Header Icons’.

Como novato que escreveu o componente original usando os documentos de ajuda, olhando exemplos e tentativa e erro. Estou um pouco perdido.

A postagem sobre as mudanças, Upcoming Header Changes - Preparing Themes and Plugins assume conhecimento e contexto que me faltam. E os documentos de ajuda Developing Discourse Themes & Theme Components não referenciam as novas APIs (e parecem um pouco desatualizados agora :frowning: )

Meu componente adiciona dois ícones ao cabeçalho - um é um link para a página do plugin de Documentos, e o outro é um ícone que muda de ícone com base em um valor em um campo personalizado nas configurações.

image
image416×118 12 KB

Atualmente, isso é feito através do abaixo em head_tag.html

Qualquer orientação seria valiosa, pois estou completamente perdido sobre para onde ir com isso

Obrigado

<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('div.d-header-icons.doc-header-set', [
            helper.h('a.icon.btn-flat.doc', {
                href:'/docs',
                title: 'Documents'
            }, [iconNode("book"), "Documents"]),
        ]);
    });


        api.decorateWidget('header-icons:before', (helper) => {
            //https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=times&s=regular,solid&m=free
            let icon = 'calendar';
            let title = 'Open status: unknown';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Open since '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Closed since '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

Você pode ver todo o github do meu componente aqui: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance, riam da minha terrível tentativa de codificação lol

2

Olá Martin,

Fiz um PR para te ajudar com base no código aqui. Pode não ser exatamente o que você quer. Ele te ajudará a entender como usar a nova API. :+1:

https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1

Me diga se tiver alguma dúvida.

1 curtida