diff --git a/src/ContenedorHorarios/BotonMaxMin.tsx b/src/ContenedorHorarios/BotonMaxMin.tsx new file mode 100644 index 0000000..5d9313a --- /dev/null +++ b/src/ContenedorHorarios/BotonMaxMin.tsx @@ -0,0 +1,39 @@ +import { css } from "aphrodite"; +import { estilosGlobales } from "../Estilos"; +import { EstadoLayout } from "./ContenedorHorarios"; + +interface BotonMaxMinProps { + fnMaximizar: () => void, + fnMinimizar: () => void, + estadoActualLayout: () => EstadoLayout, // El nombre del estado actual del layout + estadoLayoutMax: EstadoLayout // El nombre del estado en el cual el componente esta maximizado +} + +export function BotonMaxMin(props: BotonMaxMinProps) { + const horariosMax = () => props.estadoActualLayout() === props.estadoLayoutMax; + + const tituloBoton = () => horariosMax() ? "Minimizar" : "Maximizar"; + const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out"; + + const funcionBoton = () => { + const estaMaximizado = horariosMax(); + if (estaMaximizado) { + props.fnMinimizar(); + } else { + props.fnMaximizar(); + } + }; + + return
+ +
+} diff --git a/src/ContenedorHorarios/ContenedorHorarios.tsx b/src/ContenedorHorarios/ContenedorHorarios.tsx index f85b1f1..dca92d2 100755 --- a/src/ContenedorHorarios/ContenedorHorarios.tsx +++ b/src/ContenedorHorarios/ContenedorHorarios.tsx @@ -32,7 +32,7 @@ export function ContenedorHorarios() { break; } case "MaxPersonal": { - templateColumns = "40% 60%"; + templateColumns = "auto 4rem"; break; } case "Normal": { @@ -58,11 +58,11 @@ export function ContenedorHorarios() { return
- +
- +
; diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx index 74b19df..52244a4 100755 --- a/src/ContenedorHorarios/Horarios.tsx +++ b/src/ContenedorHorarios/Horarios.tsx @@ -5,46 +5,16 @@ import { estilosGlobales } from "../Estilos"; import { Tabla } from "./Tabla"; import { Cursos } from "./Cursos"; import { EstadoLayout } from "./ContenedorHorarios"; +import { BotonMaxMin } from "./BotonMaxMin"; +import { Switch, Match } from "solid-js"; -const maximizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => { - setEstadoLayout("MaxHorarios"); -}; - -const minimizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => { - setEstadoLayout("Normal"); -}; - -function BotonExpandirOcultar(props: { setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) { - const [horariosMax, setHorariosMax] = createSignal(false); - - const tituloBoton = () => horariosMax() ? "Minimizar horario" : "Maximizar horario"; - const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out"; - - const funcionBoton = () => { - const estaMaximizado = horariosMax(); - setHorariosMax(!estaMaximizado); - if (estaMaximizado) { - minimizarHorario(props.setEstadoLayout); - } else { - maximizarHorario(props.setEstadoLayout); - } - }; - - return
- -
+interface HorariosProps { + data: DatosHorario, + estadoLayout: EstadoLayout, + setEstadoLayout: (v: EstadoLayout) => EstadoLayout } -export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) { +export function Horarios(props: HorariosProps) { const [anioActual, setAnioActual] = createSignal("1er año"); @@ -71,16 +41,38 @@ export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: Estad return props.data.años[anioActual()]; }); + const fnMaximizar = () => props.setEstadoLayout("MaxHorarios"); + const fnMinimizar = () => props.setEstadoLayout("Normal"); + const estadoActualLayout = () => props.estadoLayout; + return
- {elAnios} - | - -
-
- -
-
- -
+ + + {elAnios} + | + +
+
+ +
+
+ +
+
+ + + +
+
; } diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx index b95dc59..12646d3 100755 --- a/src/ContenedorHorarios/MiHorario.tsx +++ b/src/ContenedorHorarios/MiHorario.tsx @@ -1,11 +1,17 @@ import { estilosGlobales } from "../Estilos"; import { StyleSheet, css } from "aphrodite"; import { Tabla } from "./Tabla"; -import { mostrarDescansos, setMostrarDescansos } from "../Store"; +import { mostrarDescansos } from "../Store"; import { EstadoLayout } from "./ContenedorHorarios"; import { Switch, Match } from "solid-js"; +import { BotonMaxMin } from "./BotonMaxMin"; -export function MiHorario(props: { estadoLayout: EstadoLayout }) { +interface MiHorarioProps { + estadoLayout: EstadoLayout, + setEstadoLayout: (v: EstadoLayout) => EstadoLayout +} + +export function MiHorario(props: MiHorarioProps) { const e = StyleSheet.create({ horario: {}, boton: { @@ -19,17 +25,18 @@ export function MiHorario(props: { estadoLayout: EstadoLayout }) { } }); - const iconoBoton = () => props.estadoLayout === "Normal" ? "ph-arrows-in" : "ph-arrows-out"; - const claseBotonMostrarDescansos = () => mostrarDescansos() ? "ph-check " + css(e.boton) : "ph-circle " + css(e.boton); - return
+ const fnMaximizar = () => props.setEstadoLayout("MaxPersonal"); + const fnMinimizar = () => props.setEstadoLayout("Normal"); + const estadoActualLayout = () => props.estadoLayout; + return
- +
Mi horario
+ | + {/*
-
- -
+
- -
; }