Selección y acciones en bloque

Actuar sobre varias filas a la vez: la barra flotante de nuestros plugins y la barra dentro de la tabla donde una flotante no cabe.

Cuando hace falta la misma acción sobre muchas filas (ocultar veinte cursos, quitar quince participantes), hacerlo una a una es un castigo. El patrón de selección deja elegir filas y actuar sobre todas desde una barra. En nuestros plugins esa barra es flotante: sigue a la persona al fondo de la ventana, así que está siempre a mano por larga que sea la lista.

Cuándo usarlo

• La lista tiene acciones que tienen sentido sobre varias filas (ocultar, mover, eliminar, exportar).
• La gente de verdad las hace en cantidad. Si actúa sobre una fila cada vez, bastan las acciones de fila.

Anatomía

1. Columna de casillas (table-select): una casilla por fila y una en la cabecera que selecciona las filas de la página.
2. Las filas seleccionadas conservan un tinte (table-active) para que la selección se vea de un vistazo. El tinte es el único cambio: una fila seleccionada no reacciona al puntero de otra manera que las demás.
3. Barra flotante (dd-floatbar): centrada al fondo de la ventana, una tarjeta con la cuenta en negrita, las acciones como botones tonales y un botón de quitar al final.

Copiar

El ejemplo dibuja la barra en el flujo de la página (dd-floatbar-static); en una página real va fija a 1,5 rem del borde inferior.

Comportamiento

1. La barra aparece con la primera fila seleccionada y se va cuando se desmarca la última o la persona quita la selección. Entra deslizándose; nunca mueve la tabla.
2. La casilla de la cabecera selecciona las filas de la página actual y muestra un estado mixto cuando solo algunas están seleccionadas. Cuando la página está seleccionada y la lista tiene más, la barra ofrece “Seleccionar las 48” junto a la cuenta.
3. Las acciones son las mismas que las acciones de fila, en el mismo orden, con su etiqueta: en una barra hay sitio para palabras. La destructiva va la última, en el tono de peligro.
4. Una acción destructiva confirma con la cantidad (“¿Eliminar 3 cursos?”) y, donde se puede deshacer, ofrece “Deshacer” después (mira “Confirmar, hacer y deshacer”).
5. Tras una acción se quita la selección y se anuncia el resultado.
6. Cambiar el filtro, la búsqueda o la página quita la selección, salvo que se haya elegido “todas” a propósito.
7. La barra nunca tapa el paginador: la página deja sitio al pie mientras la barra se muestra.

La barra dentro de la tabla

Donde una barra flotante no cabe (un diálogo, un panel lateral, una tarjeta pequeña), la barra ocupa el lugar de la barra de herramientas de la tabla mientras hay selección (table-toolbar-selection), con la misma cuenta y las mismas acciones.

Copiar

En Moodle 4.5 y 4.1 la barra flotante se dibuja igual; donde el tema del sitio le da una sombra más pesada u otro radio es aceptable, mientras mantenga su posición y su contenido.

Disposición y espacios

Estados

• Cargando tras una acción: las filas afectadas se atenúan y los botones de la barra se desactivan.
• Fallo parcial: una alerta sobre la tabla lista lo que falló (“2 de 3 cursos no se pudieron ocultar”) y las filas fallidas siguen seleccionadas para reintentar.

Pantallas estrechas

La barra se reparte en líneas y se centra: cuenta y quitar en la primera, las acciones debajo, con un radio como el de una tarjeta. Las acciones que no caben van a un desplegable “Más”, con la destructiva siempre la última.

Accesibilidad

• La barra es una region con una etiqueta que dice sobre qué actúa; la cuenta es un role="status" para que cada cambio se anuncie (“3 seleccionados”).
• La casilla de cada fila tiene una etiqueta que nombra la fila; la de la cabecera nombra el alcance (“Seleccionar todas las de esta página”).
• La barra va después de la tabla en el orden del tabulador y aparece sin mover el foco.

Antes de publicar

• Cada acción de la barra existe también para una sola fila.
• “Seleccionar las N” dice el número real.
• La acción destructiva confirma con la cantidad.
• Un fallo parcial se informa y se puede reintentar.
• La barra no tapa el paginador ni la última fila.