Drawer "Indice de curso"

Ficha tecnica

• Impacto -- Tema: config.php ($THEME->usescourseindex), override templates/theme_boost/courseindexdrawercontrols.mustache, plantilla nueva templates/courseindex_header.mustache, metodo courseindex_drawer_header() en core_renderer, SCSS scss/courseindex.scss, iconos pix/Icon/{chevron-right,check-white,lock,left-arrow-circle,menu-alt-left}.svg
• Impacto -- Plugin: --
• Requisito: Logica Dashboard / Panel aprendizaje (xlsx) . Figma: drawer abierto 19723-2731, boton para abrirlo (drawer colapsado) 19670-14871 . Estado: Implementado

Proposito

Restyle del drawer nativo de Moodle "Indice de curso" (secciones y actividades del curso, panel lateral izquierdo) para que siga el lenguaje visual del campus: cabecera propia con boton "Ocultar menu" y nombre del curso, filas de seccion con icono de libro, e indicadores de completado circulares por actividad (completada, pendiente, actual).

Funcionalidades

• Boton flotante que abre el drawer cuando esta colapsado: circulo azul cobalto (radio 20px en las esquinas derechas) con icono de menu hamburguesa blanco y la misma sombra que el drawer.
• Cabecera propia sobre el drawer nativo: boton "Ocultar menu" (cierra el drawer), titulo "Navegacion del curso" y enlace al curso actual.
• Filas de seccion: caja de icono (libro), titulo en negrita y chevron que rota al expandir/contraer.
• Filas de actividad: indicador circular de 16px (verde con check si esta completada, anillo azul si esta pendiente, punto azul solido si es la actividad actual), nombre y candado cuando hay restricciones de acceso.
• El menu "..." (expandir todo / contraer todo), heredado de Boost, se conserva junto a la X.
• El restyle solo aplica fuera de modo edicion: en edicion se conserva el aspecto nativo de Boost para no interferir con el arrastrar-y-soltar del componente reactivo de Moodle.

Desviaciones respecto al Figma

El nodo de Figma es una maqueta estatica de un unico estado (drawer abierto, una seccion expandida, sin scroll). Las siguientes decisiones extienden ese diseno a los estados reales que Moodle necesita, y fueron acordadas explicitamente antes de implementar:

• Chevron rotatorio: el Figma dibuja chevron-right en todas las filas de seccion, incluida la expandida. En la implementacion el chevron rota 90 grados al expandir (afordance estandar de acordeon), reutilizando el mecanismo .icons-collapse-expand / .collapsed que ya trae el componente core_courseformat/local/courseindex/section.
• Menu "..." conservado: el Figma no lo dibuja; se mantiene visible junto al boton de cierre para no perder el atajo de expandir/contraer todas las secciones.
• $THEME->usescourseindex = true: theme_config no hereda esta propiedad de Boost, asi que sin esto Moodle seguia mostrando navegacion duplicada (enlaces anterior/siguiente de actividad, selector de seccion) ademas del drawer.
• Estados no dibujados en el Figma -- se extrapolaron a partir de los tokens del mismo nodo y de los colores semanticos ya cargados por Boost: actividad fallida (completion_fail, anillo con $danger), actividad sin seguimiento de finalizacion (completion_none, sin indicador), actividad oculta/restringida (dimmed, texto atenuado) y estados de foco/hover (fondo gris claro).
• Cabecera fija, lista con scroll: el Figma es una maqueta de altura completa sin scroll. En produccion, cursos con muchas secciones exceden el alto del viewport; la cabecera (cerrar/titulo/curso/menu) queda fija y solo la lista de secciones hace scroll.
• Icono del boton para abrirlo: el nodo Figma 19670-14871 usa un icono "menu-alt-left" (tres barras horizontales alineadas a la izquierda, anchos 100% / 75% / ~45%) en vez del t/index_drawer nativo de Moodle (icono de lista con vinetas). El MCP de Figma solo devuelve ese vector como referencia a imagen (<img src="http://localhost:3845/assets/...">), asi que el trazado exacto se extrajo pidiendole ese SVG en crudo al servidor local de assets del propio Figma Desktop, no reconstruyendolo a ojo desde una captura: pix/Icon/menu-alt-left.svg replica esas mismas coordenadas.

Arquitectura

El indice de curso lo genera el componente reactivo core core_courseformat/local/courseindex/* (course/format/templates/local/courseindex/*.mustache, course/format/amd/src/local/courseindex/*.js). Sus atributos id, data-for y data-action son contrato con ese JS (arrastrar-y-soltar, completado en vivo, resaltado de la pagina actual), asi que no se tocan: el restyle es practicamente todo SCSS sobre el markup existente. Solo la cabecera nueva ("Ocultar menu" + titulo + curso) requiere HTML propio, inyectado en el unico punto de extension que el drawer nativo de Boost ofrece sin clonar toda su plantilla: .drawerheadercontent.

Archivos del tema involucrados

Archivo	Funcion
config.php	$THEME->usescourseindex = true
templates/theme_boost/courseindexdrawercontrols.mustache	Override de la plantilla de Boost: antepone la cabecera propia ({{{ output.courseindex_drawer_header }}}) al menu "..." heredado
templates/courseindex_header.mustache	Markup del boton "Ocultar menu", el titulo y el enlace al curso
classes/output/core_renderer.php	Metodo courseindex_drawer_header(): construye el contexto (nombre y URL del curso) y renderiza courseindex_header.mustache
scss/courseindex.scss	Estilos del drawer completo (shell, cabecera, secciones, actividades, indicadores de completado) y del boton .drawer-toggler.drawer-left-toggle que lo abre, heredado sin cambios de markup desde theme_boost/templates/drawers.mustache
lib.php	Concatena scss/courseindex.scss al preset compilado
pix/Icon/chevron-right.svg, check-white.svg, lock.svg, left-arrow-circle.svg, menu-alt-left.svg	Iconos exportados o reconstruidos a partir del nodo Figma
lang/{en,es}/theme_cdigital.php	Cadenas courseindexheading, courseindexhide

Dependencias

• Componente reactivo core core_courseformat/local/courseindex/* (sin modificar).
• Tema boost (layout drawers.php, plantillas drawer.mustache / drawers.mustache), heredado sin overrides adicionales mas alla del listado arriba.

Historial de cambios

Ver CHANGELOG.md en la raiz del sitio de documentacion.