-
-
-
-
+ return
;
}
diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index ccd3d38..74b19df 100755
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/src/ContenedorHorarios/Horarios.tsx
@@ -4,8 +4,47 @@ import { css } from "aphrodite";
import { estilosGlobales } from "../Estilos";
import { Tabla } from "./Tabla";
import { Cursos } from "./Cursos";
+import { EstadoLayout } from "./ContenedorHorarios";
-export function Horarios(props: { data: DatosHorario }) {
+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
+
+
+}
+
+export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) {
const [anioActual, setAnioActual] = createSignal("1er año");
@@ -34,6 +73,8 @@ export function Horarios(props: { data: DatosHorario }) {
return
{elAnios}
+ |
+
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index 6ee5e6d..b95dc59 100755
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -2,8 +2,10 @@ import { estilosGlobales } from "../Estilos";
import { StyleSheet, css } from "aphrodite";
import { Tabla } from "./Tabla";
import { mostrarDescansos, setMostrarDescansos } from "../Store";
+import { EstadoLayout } from "./ContenedorHorarios";
+import { Switch, Match } from "solid-js";
-export function MiHorario() {
+export function MiHorario(props: { estadoLayout: EstadoLayout }) {
const e = StyleSheet.create({
horario: {},
boton: {
@@ -17,42 +19,62 @@ export function MiHorario() {
}
});
+ 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
-
-
- Mi horario
-
- {/*
-
setMostrarDescansos(!mostrarDescansos())}
- >
-
- Mostrar descansos
-
- */}
-
+
+
+
+
+
+ Mi horario
+
+ {/*
+
setMostrarDescansos(!mostrarDescansos())}
+ >
+
+ Mostrar descansos
+
+ */}
+
-
-
-
+
+
+
+
+
+
+
+
+
+
;
diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
index f8aa3ab..faec2e3 100755
--- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx
+++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
@@ -6,7 +6,7 @@ const e = StyleSheet.create({
celdaComun: {
width: "20%",
textAlign: "center",
- padding: "0 0.5rem",
+ padding: "0 0.7rem",
boxSizing: "border-box"
},
celdaCurso: {
@@ -14,18 +14,22 @@ const e = StyleSheet.create({
padding: "0.25rem 0.35rem",
cursor: "pointer",
borderRadius: "5px",
- transition: "background-color 100ms"
+ transition: "background-color 100ms, color 100ms"
},
celdaCursoActiva: {
- backgroundColor: "rgba(200, 200, 200, 0.25)"
+ backgroundColor: "rgba(200, 200, 200, 0.5)",
+ color: "#151515"
},
celdaCursoTeoria: {
fontWeight: "bold"
+ },
+ celdaCursoLab: {
+ fontStyle: "italic"
}
});
interface Props {
- datos: {id: string, txt: string, esLab: boolean}[],
+ datos: { id: string, txt: string, esLab: boolean }[],
idHover: () => string,
setIdHover: (v: string) => string
}
@@ -41,7 +45,7 @@ export function CeldaFila(props: Props) {
{({id, txt, esLab}) => {
const clases = () => {
- const clases = [e.celdaCurso, !esLab && e.celdaCursoTeoria];
+ const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
if (id === idHover()) clases.push(e.celdaCursoActiva);
return css(...clases);
};
diff --git a/src/Estilos.ts b/src/Estilos.ts
index 1bf5717..d7daf57 100755
--- a/src/Estilos.ts
+++ b/src/Estilos.ts
@@ -24,7 +24,18 @@ export const estilosGlobales = StyleSheet.create({
contenedorCursorActivo: {
backgroundColor: "rgba(200, 200, 200, 0.3)"
},
+ contenedorPhospor: {
+ padding: "0.5rem 0.65rem",
+ transform: "translateY(0.2rem)"
+ },
inlineBlock: {
display: "inline-block"
- }
+ },
+ botonPhospor: {
+ "::before": {
+ fontSize: "1.25rem",
+ // transform: "translateY(0.2rem)",
+ textDecoration: "underline rgba(255, 255, 255, 0.4)",
+ }
+ },
});