Commutazione campo utente barra laterale

Componente del tema
1

|||
|-|-|-|
| :information_source: | Riepilogo | Aggiungi i toggle nella nuova barra laterale
| :hammer_and_wrench:|Repository| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| :question:|Guida all’installazione|Come installare un tema o un componente del tema|
| :open_book:|Nuovo ai temi di Discourse?| Guida per principianti all’uso dei temi di Discourse|

Installa questo componente del tema

Un ringraziamento speciale a @Kinetiksoft su Discourse Meta per avermi supportato nello sviluppo di questo componente del tema. Senza @Kinetiksoft, questo componente del tema non esisterebbe.

Questo componente del tema ti consente di aggiungere un set di pulsanti alla barra laterale per regolare i campi utente.

image

image
image1170Ă—447 22.2 KB

image
image2139Ă—738 51.9 KB

Istruzioni aggiuntive per gli sviluppatori

Il componente del tema invia un AppEvent quando il pulsante viene premuto e quando viene caricato per la prima volta.

Se devi eseguire un’azione quando il pulsante viene premuto, usa api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Usa `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // per gestire l'evento di attivazione/disattivazione del pulsante
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });
9 Mi Piace
2

Grazie, @Lhc_fl, per la soluzione rapida e di qualitĂ .

Il nostro caso d’uso si basa sulla descrizione della nostra richiesta di marketplace:
L’idea è stata ispirata da Our solution for blurring NSFW content, abbiamo semplicemente iniziato invertendo la logica e avevamo bisogno di un interruttore per la nostra community per sfocare e sfocare i media.

Basta aggiungere un Campo Utente Personalizzato come Casella di controllo e seguire il nostro approccio di seguito.

Utilizziamo Sidebar User Field Toggle con un componente personalizzato aggiuntivo come questo:

  1. Crea un nuovo componente del tema direttamente nella tua dashboard di amministrazione
    /admin/customize/ → Componenti → Installa → Crea nuovo (componente)
  2. Aggiungi CSS:
CSS 
/* mostra sfocatura nsfw e testo sovrapposto su qualsiasi media negli argomenti #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: 'đź‘€ Passa il mouse per mostrare';
        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. Aggiungi JS (Head):
Codice 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") { // O qualcos'altro
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>
  1. Imposta semplicemente i pulsanti del componente di commutazione nel modo desiderato. Utilizziamo l’ID del campo utente personalizzato come riferimento.

P.S. Potrebbe essere che potremmo inserire lo stesso codice nel componente Toggle stesso, ma non mi sono preoccupato di testarlo e perché toccare un codice che funziona perfettamente?

:plus: Il componente di @Lhc_fl funziona perfettamente anche all’interno del tipo di navigazione a discesa.

7 Mi Piace