Discourse-Tab-Leiste für Mobilgeräte

GitHub repository:

Screenshots


Installation

Follow the instructions in this howto topic:

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


Update 24/12/2018:

You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.

77 „Gefällt mir“

Hey, I love this plugin. But I need to make the bar visible for logged out users too.

Is there a way to do this? Maybe something like

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
1 „Gefällt mir“

Hi Ben

The component’s JS code expects in several places that there is a logged in user, so CSS wouldn’t be enough to show the bar for anonymous users. My recommendation here is to fork the component and modify it to make it show up to anonymous users.

4 „Gefällt mir“

How to add a + new post button to the bar?

Hi Peter,

Discourse core has this neat route /new-topic that exists to make it possible to open the composer via a URL. So, all you need to do is use that route as the URL for the tab that should open the composer.

13 „Gefällt mir“

Diese Komponente ist sehr nützlich, und unsere Foren-Nutzer mögen sie wirklich.

Eine der am häufigsten gewünschten Funktionen ist die Anzeige von Badges für ungelesene Benachrichtigungen und ungelesene Privatnachrichten auf den Tasten am unteren Bildschirmrand.

Ermöglicht uns die Discourse-JavaScript-API dies?

7 „Gefällt mir“

Hallo Nildarar,

ich freue mich, dass deine Community diese Komponente schätzt und sie nützlich findet – danke! Ich unterstütze die Idee, diese Funktion zur Komponente hinzuzufügen, kann sie aber im Moment nicht selbst umsetzen (vielleicht in ein paar Monaten). Falls sich jedoch jemand anderes in der Zwischenzeit bereit findet, an dieser Funktion zu arbeiten, würde ich mich sehr freuen, einen Pull-Request mit dieser Funktion zu mergen.

Ja, die benötigten Daten werden im currentUser-Objekt bereitgestellt, das leicht zugänglich ist. Der Großteil der Arbeit für diese Funktion würde darin bestehen, 1) herauszufinden, auf welchem/denen Registerkarten die Abzeichen angezeigt werden sollen, und 2) die Abzeichen mit CSS korrekt zu positionieren.

8 „Gefällt mir“

Danke @Osama
Basierend auf deinen Anweisungen habe ich diese Objekte gefunden.

<script type="text/discourse-plugin" version="0.8">
    let currentUser = api.getCurrentUser();
    console.log(currentUser);
</script>

// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2

Gibt es eine Möglichkeit, eine Funktion in einem Event zu registrieren, oder sollten wir das über den folgenden Trick herausfinden?

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('geändert');
});
5 „Gefällt mir“

Ja, das sind die richtigen Eigenschaften, die wir verwenden müssen. Da Discourse jedoch eine Ember-Anwendung ist, abonnieren wir normalerweise keine DOM-Ereignisse, um die Benutzeroberfläche zu aktualisieren. Stattdessen sollten wir das verwenden, was Ember als ‘berechnete’ Eigenschaften bezeichnet [Computed Properties - The Object Model - Ember Guides].

Die Komponente definiert bereits eine berechnete Eigenschaft hier, sodass du dies als Beispiel verwenden kannst. Sobald du deine berechnete Eigenschaft definiert hast, die bestimmt, ob das Benachrichtigungsabzeichen angezeigt werden soll (basierend auf Eigenschaften wie currentUser.unread_high_priority_notifications), musst du deine berechnete Eigenschaft in der Handlebars-Vorlage im selben Link unten verwenden.

Hinweis: Die Implementierung dieser Funktion in einer separaten Komponente ist schwierig. Daher gehe ich hier davon aus, dass du dies in der Komponente selbst implementierst und nicht in einer separaten Komponente.

8 „Gefällt mir“

Danke, ich versuche es mal :wink::+1:

6 „Gefällt mir“

Die Tab-Leiste zeigt auch im Dark-Theme einen weißen Hintergrund an. Ich habe gerade von 2.7.0 beta 1 auf 2.7.0 beta 3 aktualisiert, und seitdem erscheint der weiße Hintergrund. Davor hat alles einwandfrei funktioniert. Ich habe zudem versucht, alle anderen Theme-Komponenten zu entfernen und alle Anpassungen zurückzusetzen, um zu prüfen, ob etwas die Tab-Leiste beeinträchtigt. Aber selbst bei einer minimalen Discourse-Installation hat die Tab-Leiste im Dark-Theme einen weißen Hintergrund. Kann sich bitte jemand das ansehen?

5 „Gefällt mir“

Ich habe eine Korrektur für dieses Problem vorgenommen. Danke, dass du mich informiert hast!

9 „Gefällt mir“

Es sieht so aus, als würde dieser Tab in einigen Fällen den Fortschrittsbalken über den Antwort-Button legen (z. B. kann ich dies reproduzieren, indem ich Chrome verwende, um ein iPhone SE zu simulieren).

Wie Sie sehen können, wird der Antwort-Button vom Fortschrittsbalken verdeckt. Wenn ich den Balken jedoch deaktiviere, funktioniert es. Ich vermute, das liegt daran, dass die Position des Fortschrittsbalkens relativ ist, aber ich weiß nicht, wie ich das beheben soll.

4 „Gefällt mir“

Ich habe ein ähnliches Problem. Der Button „Inhaltsverzeichnis

1 „Gefällt mir“

@haroldfy Ich kann dieses Problem hier auf Meta oder im Theme-Editor nicht reproduzieren. Vielleicht gibt es andere Themes oder Anpassungen, die stören? Wenn deine Seite öffentlich ist, kann ich gerne einen Blick darauf werfen.

@littleviolette Ich versuche, so weit wie möglich darauf zu verzichten, Code hinzuzufügen, der Elemente anderer Komponenten anspricht. In diesem Fall kannst du eine separate Komponente mit folgendem CSS erstellen, um den ToC-Button über die Leiste zu schieben:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 „Gefällt mir“

Danke, dass du dir das ansiehst. Es ist eine private Seite. Ich werde versuchen, andere Anpassungen zu deaktivieren und von dort aus zu debuggen.

4 „Gefällt mir“

Ich glaube, ich habe einen Fehler gefunden, den ich nur in der PWA-Version meiner Website auf iOS reproduzieren kann (auf Android und auf iOS Safari scheint alles in Ordnung zu sein).

Die Tab-Leiste sollte doch immer gesperrt sein, oder? So sieht es korrekt aus:

Dann entsperre ich meinen Bildschirm, drehe das Gerät in den Quermodus, schalte zurück in den Hochformatmodus, scroll ein wenig nach oben, und dann passiert Folgendes:

1 „Gefällt mir“

Ich hatte das gleiche Problem, @haroldfy @littleviolette. Du kannst es mit folgendem Code beheben:

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7 „Gefällt mir“

Die Tab-Leiste steht zudem im Konflikt mit der Kernfunktion ‘Beiträge filtern’, die beim Filtern eine feststehende Fußzeile (posts-filtered-notice) anzeigt.

Wie auch immer, danke für diesen tollen TC :slight_smile:

5 „Gefällt mir“

Tolle Theme-Komponente, danke!

Ich habe eine Anfrage und möchte prüfen, ob Interesse an einer Funktion „Beim Scrollen ausblenden

9 „Gefällt mir“