Barra de pestañas de Discourse para móvil

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 Me gusta

¡Hola! Me encanta este plugin. Pero necesito que la barra sea visible también para los usuarios no iniciados.

¿Hay alguna forma de hacerlo? Tal vez algo como

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
1 me gusta

Hola Ben

El código JS del componente asume en varios lugares que hay un usuario conectado, por lo que el CSS no sería suficiente para mostrar la barra a usuarios anónimos. Mi recomendación es hacer un fork del componente y modificarlo para que se muestre a usuarios anónimos.

4 Me gusta

¿Cómo agregar un botón de + nueva publicación a la barra?

Hola Peter,

El núcleo de Discourse tiene esta útil ruta /new-topic que existe para permitir abrir el compositor mediante una URL. Así que, todo lo que necesitas hacer es usar esa ruta como la URL de la pestaña que debe abrir el compositor.

13 Me gusta

Este componente es muy útil y a los usuarios de nuestro foro realmente les gusta.

Una de las funciones más solicitadas es mostrar el distintivo de notificaciones no leídas y el distintivo de mensajes privados no leídos en las teclas en la parte inferior de la pantalla.

¿Permite la API de JavaScript de Discourse que hagamos esto?

7 Me gusta

Hola Nildarar,

Me alegra saber que tu comunidad disfruta de este componente y lo encuentra útil, ¡gracias! Apoyo la idea de agregar esta función al componente, pero no puedo implementarla en este momento (quizás en unos meses). Sin embargo, si alguien más se anima a trabajar en esta función mientras tanto, estaré encantado de fusionar un pull request con esta característica.

Sí, los datos necesarios están expuestos en el objeto currentUser, al que se puede acceder fácilmente. La mayor parte del trabajo para esta función consistiría en 1) determinar en qué pestaña(s) mostrar las insignias y 2) posicionar las insignias correctamente con CSS.

8 Me gusta

Gracias @Osama
Basándome en tus indicaciones, encontré estos objetos.

<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

¿Existe alguna forma de registrar una función en un evento o debemos averiguarlo mediante el siguiente truco?

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('changed');
});
5 Me gusta

Sí, estas son las propiedades correctas que necesitamos consumir, pero dado que Discourse es una aplicación Ember, normalmente no nos suscribimos a eventos del DOM para actualizar la interfaz de usuario. En su lugar, deberíamos utilizar lo que Ember llama ‘propiedades computadas’.

El componente ya define una propiedad computada aquí, por lo que puedes usarla como ejemplo. Una vez que hayas definido tu propiedad computada que determine si se debe mostrar o no el distintivo de notificaciones (basado en propiedades como currentUser.unread_high_priority_notifications, etc.), deberás utilizar tu propiedad computada en la plantilla Handlebars en el mismo enlace, al final.

Nota: implementar esta función en un componente separado es complicado, por lo que todo lo que he dicho aquí asume que la estás implementando en el componente mismo, no en un componente separado.

8 Me gusta

¡Gracias, déjame probar :wink::+1:

6 Me gusta

La barra de pestañas muestra un fondo blanco incluso en el tema oscuro. Acabo de actualizar de la versión beta 1 de 2.7.0 a la beta 3 de 2.7.0 y, después de eso, comenzó a aparecer el fondo blanco. Antes de eso, todo funcionaba perfectamente. También intenté eliminar todos los demás componentes del tema y quitar todas las personalizaciones para confirmar si algo estaba interfiriendo con la barra de pestañas. Pero incluso en Discourse sin modificaciones, la barra de pestañas tiene un fondo blanco en un tema oscuro. ¿Podría alguien, por favor, echar un vistazo a esto?

5 Me gusta

He aplicado una solución para este problema. ¡Gracias por avisarme!

9 Me gusta

Parece que esta pestaña hará que el indicador de progreso del tema cubra el botón de respuesta en algunos casos (por ejemplo, puedo reproducir esto usando Chrome para simular un iPhone SE)

Como puedes ver, el botón de respuesta está cubierto por la barra de progreso. Pero si desactivo la barra, funciona. Supongo que es porque la posición del botón de progreso es relativa, pero no sé cómo solucionarlo.

4 Me gusta

Tengo un problema similar. El botón de “tabla de contenido” no aparece cuando activo la barra de pestañas móvil. Sería genial que no tuviéramos que elegir una función sobre otra, ¡porque nos encantan ambas!

1 me gusta

@haroldfy No puedo reproducir este problema aquí en Meta ni en el creador de temas. ¿Quizás tienes otros temas o personalizaciones que interfieren? Puedo echar un vistazo si tu sitio es público.

@littleviolette Intento evitar tanto como sea posible agregar código que apunte a elementos de otro componente. En este caso, puedes crear un componente separado con este CSS para empujar el botón del ToC por encima de la barra:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 Me gusta

Gracias por investigar esto. Es un sitio privado; intentaré desactivar otras personalizaciones y depurar desde allí.

4 Me gusta

Creo que he encontrado un error, y solo puedo reproducirlo en la versión PWA de mi sitio en iOS (parece funcionar bien en Android y en Safari de iOS).

La barra de pestañas debería estar siempre bloqueada, ¿verdad? Así es como se ve cuando está correcto:

Luego desbloqueo la pantalla, paso al modo horizontal, vuelvo al modo vertical, hago un poco de desplazamiento hacia arriba y ocurre esto:

1 me gusta

Tuve el mismo problema @haroldfy @littleviolette. Puedes solucionarlo con:

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7 Me gusta

La barra de pestañas también entra en conflicto con la función principal de filtrado de publicaciones, que muestra un pie de página fijo (posts-filtered-notice) al filtrar.

De todos modos, gracias por este gran TC :slight_smile:

5 Me gusta

Componente de tema increíble, gracias.

Tengo una solicitud y me gustaría consultar si hay interés en una función de “ocultar al hacer scroll”.

Básicamente, la barra inferior se oculta automáticamente cuando el usuario hace scroll hacia abajo y vuelve a aparecer cuando hace scroll hacia arriba.

Un ejemplo que encontré está aquí:

Esto liberaría de manera inteligente valioso espacio en pantalla en dispositivos móviles y mejoraría la experiencia de consumo de contenido al ofrecer más espacio.

9 Me gusta