La interfaz
Rama experimental del hacklab sobre el Oasis de epsylon. No es Oasis oficial. Ver aviso completo.
Oasis tiene casi cincuenta módulos. En un escritorio caben en dos columnas laterales; en un móvil, no. Esta rama los reorganiza en tres piezas: un panal de categorías, dos filtros arriba y una barra de accesos rápidos abajo.
Nada de esto usa JavaScript en el cliente: son enlaces, <details> y formularios,
igual que el resto de Oasis.
1. El panal de hexágonos
Diez categorías, cada una con sus módulos dentro:
| Personal | Avatar, CV, Agenda, Favorites, Modules, Settings |
| Governance | Votations, Parliament, Courts, Reports, Tribes |
| Economy | Market, Banking, Transfers, Wallet, Shops, Jobs |
| Office | Tasks, Projects, Calendars, Docs, Events |
| Tools | Cipher, Graphos, Maps, Torrents, Games, Dev |
| Community | Activity, Tags, Trending, Opinions, Pads, Forums, Chats, Karvan |
| Library | Images, Audios, Videos, Bookmarks, Documents |
| Creative | Pixelia, Melody, L.A.R.P., Timelines |
| Blogs | Blogs, Feed |
| Multiverse | Puente con el fediverso (apagado por defecto) |
El panal solo aparece en la pantalla de inicio. En el resto de páginas se usa el mismo menú, pero en forma de lista desplegable debajo del contenido.
2. Tocar un hexágono abre su rejilla
Al tocar Community el hexágono se rellena en amarillo y debajo aparecen sus módulos en una rejilla de dos columnas, con el icono y el nombre de cada uno.
Aquí están Chats y Karvan, que son las dos formas de hablar con alguien: Chats guarda la conversación en tu feed SSB; Karvan no guarda nada.
Volver a tocar el hexágono cierra la rejilla.
Lo mismo con Personal: Avatar, CV, Agenda, Favorites, Modules y Settings.
Por aquí se llega a la pantalla de módulos, que es donde se encienden y apagan las partes de la aplicación, incluido Karvan.
3. Los filtros Personal y Social
Los dos botones de arriba reducen el panal a la mitad, para no tener diez hexágonos delante cuando sabes lo que buscas.
Personal deja las categorías que son cosa tuya: Personal, Governance, Office, Economy y Tools.
Social deja las que son de la red: Community, Blogs, Creative, Library y Multiverse.
El botón activo se queda relleno en amarillo. Tocarlo otra vez vuelve al panal completo.
4. El menú desplegable
En las páginas que no son el inicio, el panal se sustituye por esta lista. Cada categoría es un desplegable; al abrirla salen sus módulos en fila, con el mismo icono que en la rejilla.
Es la navegación de repuesto: siempre está al final de cualquier página, así que nunca hace falta volver al inicio para cambiar de módulo.
5. La barra de accesos rápidos
Siempre visible, abajo del todo:
- Cuatro módulos a tu elección — en la captura: Search, Inbox, Write y Karvan. El contador amarillo sobre Inbox es el número de mensajes sin leer.
- Edit (el lápiz amarillo, en el centro y más grande) — abre la pantalla de personalización.
- Peers e Invites — en su propia cápsula a la derecha, fijos: son las dos cosas que hacen falta para que la red funcione y no se pueden quitar.
6. Personalizar la barra
El botón Edit lleva aquí.
Arriba, YOUR BAR (3/4): los módulos que tienes puestos, cada uno con una ✕ para quitarlo.
Debajo, ADD: todos los módulos que se pueden poner. En la captura la barra tiene tres, así que se pueden añadir más.
La lista completa de módulos disponibles, en rejilla de tres columnas con su icono.
Al tocar uno se añade al final de la barra y se vuelve a esta misma pantalla. Con cuatro puestos, la sección ADD dice Maximum reached y solo queda el botón Done.
La elección se guarda en el servidor, no en el navegador: sigue ahí después de cerrar la aplicación.
7. Tu perfil
Se llega tocando el avatar de arriba a la derecha.
Tiene tu nombre, tu identificador de feed completo, la versión de Oasis, el código QR de tu identidad para que otra persona te añada escaneándolo, y tres datos de estado: KARMA, ECO Tax y Device.
Device: MOBILE indica que la aplicación está corriendo en modo móvil, que es lo que activa la topbar, el panal y la barra inferior. En escritorio pone otra cosa y esas tres piezas no se dibujan.
8. En horizontal
El panal se reparte a lo ancho y la barra de abajo se estira. Girar el móvil no recarga la página ni pierde lo que estuvieras escribiendo: la aplicación se queda donde estaba.
Eso hubo que arreglarlo —antes girar dejaba un error de conexión en pantalla—, y está contado en Si algo va mal.
9. Los nombres son los de epsylon
Las categorías se llaman como en el Oasis oficial —Community, Library, Multiverse— y no como una invención de la rama. Esa fue una decisión: en algo tan visible no tiene sentido separarse de upstream, y así móvil y escritorio dicen lo mismo.
El único nombre propio es el del filtro de arriba, Social, y por un motivo concreto: se llamaba Community y ese nombre ya es el de una categoría, así que en la misma pantalla habría dos cosas distintas con la misma etiqueta.
La aplicación está traducida entera a los 11 idiomas que trae Oasis. En la captura, en castellano: las categorías, la barra de abajo y los textos de la rama. Ninguna clave cae al inglés.
Cómo está hecho
Todo lo de esta página vive en un solo fichero, src/views/hive_views.js, que
exporta las tres funciones de dibujo y la lista de módulos que se pueden anclar.
main_views.js lo llama en tres sitios.
Las tres empiezan igual:
if (process.env.OASIS_MOBILE !== '1') return "";
Así el mismo código sirve para las dos ramas: en escritorio no dibujan nada.
Está desarrollado, con el resto de decisiones, en Estructura del código.