Umschalten des Benutzerfelds in der Seitenleiste

Themenkomponente
1

|||
|-|-|-|
| :information_source: | Zusammenfassung | Schalter in die neue Seitenleiste einfügen
| :hammer_and_wrench:|Repository| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| :question:|Installationsanleitung|So installieren Sie ein Theme oder eine Theme-Komponente|
| :open_book:|Neu bei Discourse Themes?| Anfängerleitfaden zur Verwendung von Discourse Themes|

<!- Füllen Sie “repoName” und “repoURL” für die automatische Installationsschaltfläche aus →

Diese Theme-Komponente installieren

<!- Beschreiben Sie dieses Theme/diese Komponente in ein oder zwei Sätzen →

Vielen Dank an @Kinetiksoft auf Discourse Meta für die Unterstützung bei der Entwicklung dieser Theme-Komponente. Ohne @Kinetiksoft gäbe es diese Theme-Komponente nicht.

Diese Theme-Komponente ermöglicht es Ihnen, eine Reihe von Schaltflächen in der Seitenleiste hinzuzufügen, um Benutzerfelder anzupassen.

<!- Fügen Sie Screenshots hinzu (falls zutreffend) →
image

image
image1170×447 22.2 KB

image
image2139×738 51.9 KB

<!- Fügen Sie weitere Details hinzu und erklären Sie die Einstellungen (falls zutreffend) →

Zusätzliche Anweisungen für Entwickler

Die Theme-Komponente sendet ein AppEvent, wenn die Schaltfläche gedrückt wird und wenn sie zum ersten Mal geladen wird.

Wenn Sie eine Aktion ausführen müssen, wenn die Schaltfläche gedrückt wird, verwenden Sie api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Verwenden Sie `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // um das Schaltflächen-Umschalt-Ereignis zu behandeln
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });
9 „Gefällt mir“
2

Vielen Dank, @Lhc_fl, für die schnelle und qualitativ hochwertige Lösung.

Unser Anwendungsfall basiert auf der Beschreibung unserer Marktplatzanfrage:
Die Idee wurde von Our solution for blurring NSFW content inspiriert. Wir haben einfach die Logik umgekehrt und benötigten einen Schalter für unsere Community, um Medien zu unscharf zu machen und wieder scharf zu schalten.

Fügen Sie einfach ein Benutzerdefiniertes Feld als Kontrollkästchen hinzu und folgen Sie unserem Ansatz unten.

Wir verwenden Sidebar User Field Toggle mit einer zusätzlichen benutzerdefinierten Komponente wie folgt:

  1. Erstellen Sie eine neue Themenkomponente direkt in Ihrem Admin-Dashboard
    /admin/customize/ → Komponenten → Installieren → Neu erstellen (Komponente)
  2. CSS hinzufügen:
CSS 
/* Zeigt NSFW-Unschärfe und Overlay-Text für alle Medien in #nswf-Themen an */
.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: '👀 Zum Anzeigen darüberfahren';
        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. JS (Head) hinzufügen:
JS-Code 
<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") { // Oder etwas anderes
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>
  1. Richten Sie einfach die Schaltflächen der Toggle-Komponente nach Ihren Wünschen ein. Wir verwenden dort die benutzerdefinierte Feld-ID als Referenz.

PS: Es könnte sein, dass wir denselben Code in die Toggle-Komponente selbst einfügen könnten, aber ich habe mir nicht die Mühe gemacht, es zu testen, und warum sollte man an perfekt funktionierendem Code etwas ändern?

:plus: Die Komponente von @Lhc_fl funktioniert auch perfekt innerhalb des Dropdown-Navigationstyps.

7 „Gefällt mir“