Alternância de Campo de Usuário na Barra Lateral

Componente de tema
1

|||
|-|-|-|
| :information_source: | Resumo | Adicionar alternâncias na nova barra lateral
| :hammer_and_wrench:|Repositório| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| :question:|Guia de Instalação|Como instalar um tema ou componente de tema|
| :open_book:|Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Agradecimentos especiais a @Kinetiksoft no Discourse Meta por me apoiar no desenvolvimento deste componente de tema. Sem @Kinetiksoft, este componente de tema não existiria.

Este componente de tema permite adicionar um conjunto de botões à barra lateral para ajustar os campos do usuário.

image

image
image1170×447 22.2 KB

image
image2139×738 51.9 KB

Instruções adicionais para desenvolvedores

O componente de tema envia um AppEvent quando o botão é pressionado e quando é carregado pela primeira vez.

Se você precisar executar uma ação quando o botão for pressionado, use api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Use `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // para lidar com o evento de alternância do botão
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });
9 curtidas
2

Obrigado, @Lhc_fl, pela solução rápida e de qualidade.

Nosso caso de uso é baseado na descrição da nossa solicitação de marketplace:

A ideia foi inspirada em https://meta.discourse.org/t/our-solution-for-blurring-nsfw-content/124584, apenas começamos invertendo a lógica e precisávamos de um alternador para nossa comunidade borrar e desborrar mídias.

Basta adicionar um Campo de Usuário Personalizado como uma Caixa de Seleção e seguir nossa abordagem abaixo.

Usamos o Alternador de Campo de Usuário da Barra Lateral com um componente personalizado adicional da seguinte forma:

  1. Crie um novo componente de tema diretamente no seu painel de administração
    /admin/customize/ → Components → Install → Create new (component)
  2. Adicione CSS:
CSS 
/* exibe o desfoque nsfw e o texto de sobreposição em qualquer mídia em tópicos #nswf */
.nsfw-hide { 
	.topic-body .cooked img:not(.emoji):not(.avatar), 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container,
	.topic-body .cooked .video-container,
	.topic-thumbnail img:not(.emoji) {
        filter: blur(10px);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body:hover .cooked img:not(.emoji), 
	.topic-body:hover .cooked iframe,
	.topic-body:hover .cooked .lazyYT-container,
	.topic-body:hover .cooked .video-container,
	.topic-thumbnail:hover img:not(.emoji) {
        filter: blur(0);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
        padding: 5px;
        font-size:1em;
        position:absolute;

        color:#fff;
        content: '👀 Hover to show';
        background: #e86800;
	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before {
        top: 15px;
        left: 10px;
	}

	.topic-thumbnail a:before {
        top: 65px;
        left: 20px;
	}
	
	.topic-body .cooked a.lightbox:hover:before, 
	.topic-body .cooked iframe:hover:before,
	.topic-thumbnail a:hover:before,
	.topic-body .cooked .video-container:hover:before {		
	    display:none;
	}
}
  1. Adicione JS (Head):
Código JS 
<script type="text/discourse-plugin" version="0.8.7">
const { userPath } = require("discourse/lib/url");
const { ajax } = require("discourse/lib/ajax");

const you = api.getCurrentUser();

if (you) {
  ajax(userPath(`${you.username_lower}.json`)).then((res) => {
    api
      ._lookupContainer("model:site")
      .appEvents.trigger("sidebar_user_fields_toggled", {
        user_fields: res.user.user_fields,
      });
  });
}
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2

api.onAppEvent("sidebar_user_fields_toggled", (status) => {
    if (window.jQuery) {
        window.jQuery(function ($) {
            if (status.user_fields[2] === "true") { // Ou algum outro
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>
  1. Basta configurar os botões do componente de alternância da maneira que desejar. Usamos o ID do Campo de Usuário Personalizado como referência.

P.S. Pode ser que pudéssemos inserir o mesmo código no próprio componente de Alternância, mas não me incomodei em testar e por que mexer em código que funciona perfeitamente?

:plus: O componente do @Lhc_fl funciona perfeitamente dentro do tipo de navegação Dropdown também.

7 curtidas