diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
index faec2e3..dbf5228 100755
--- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx
+++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
@@ -1,6 +1,6 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
-import { For } from "solid-js";
+import { For, createSignal } from "solid-js";
const e = StyleSheet.create({
celdaComun: {
@@ -31,7 +31,9 @@ const e = StyleSheet.create({
interface Props {
datos: { id: string, txt: string, esLab: boolean }[],
idHover: () => string,
- setIdHover: (v: string) => string
+ setIdHover: (v: string) => string,
+ fnResaltarFila: () => void,
+ fnDesresaltarFila: () => void
}
export function CeldaFila(props: Props) {
@@ -40,19 +42,30 @@ export function CeldaFila(props: Props) {
const idHover = props.idHover;
const setIdHover = props.setIdHover;
+ const fnOnMouseEnter = (id: string) => setIdHover(id);
+ const fnOnMouseLeave = () => setIdHover("");
+
return
{({id, txt, esLab}) => {
+ const [estabaResaltado, setEstabaResaltado] = createSignal(false);
const clases = () => {
const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
- if (id === idHover()) clases.push(e.celdaCursoActiva);
+ if (id === idHover()) {
+ props.fnResaltarFila();
+ clases.push(e.celdaCursoActiva);
+ setEstabaResaltado(true);
+ } else if (estabaResaltado()) {
+ props.fnDesresaltarFila();
+ setEstabaResaltado(false);
+ }
return css(...clases);
};
return setIdHover(id)}
- onMouseLeave={() => setIdHover("")}
+ onMouseEnter={() => fnOnMouseEnter(id)}
+ onMouseLeave={fnOnMouseLeave}
>
{txt}
;
diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
index a930e00..8f6e639 100755
--- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx
+++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
@@ -1,8 +1,8 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
-import { For } from "solid-js";
+import { For, createSignal } from "solid-js";
import { dias } from "../../Store";
-import {CeldaFila} from "./CeldaFila";
+import { CeldaFila } from "./CeldaFila";
import { DataProcesada } from "../../types/DatosHorario";
const e = StyleSheet.create({
@@ -16,11 +16,12 @@ const e = StyleSheet.create({
fila: {
position: "relative",
zIndex: 2,
- transition: "background-color 250ms",
+ transition: "background-color 250ms, border 100ms",
marginLeft: "4rem",
display: "flex",
alignItems: "center",
minHeight: "1.5rem",
+ borderLeft: "solid transparent",
":hover": {
// backgroundColor: "rgba(200, 200, 200, 0.25)"
}
@@ -33,6 +34,9 @@ const e = StyleSheet.create({
backgroundColor: "rgba(200, 200, 200, 0.25)",
zIndex: 1
},
+ filaResaltada: {
+ borderLeft: "solid"
+ }
});
interface Props {
@@ -43,15 +47,31 @@ interface Props {
}
export function FilaTabla(props: Props) {
+ const [filaResaltada, setFilaResaltada] = createSignal(false);
const hora = props.hora;
const data = props.data;
+ const claseFilaComun = css(e.fila);
+ const claseFilaResaltada = css(e.fila, e.filaResaltada);
+
+ const resaltarFila = () => {
+ if (!filaResaltada()) {
+ setFilaResaltada(true);
+ }
+ };
+
+ const desresaltarFila = () => {
+ if (filaResaltada()) {
+ setFilaResaltada(false);
+ }
+ }
+
return
{hora.substring(0, 5)}
-
+
{dia => {
const diaStr = dia.substring(0, 2);
@@ -59,7 +79,13 @@ export function FilaTabla(props: Props) {
const datos = data()?.[horaStr]?.[diaStr] ?? [];
- return
+ return
}}