From 8d70ef64765a93a5e8a0f734ed861e74a72383ef Mon Sep 17 00:00:00 2001
From: Araozu <tbyuyfcjjll@gmail.com>
Date: Sun, 8 Mar 2020 11:13:35 -0500
Subject: [PATCH] =?UTF-8?q?Agregada=20opcion=20para=20ocultar=20cualquier?=
 =?UTF-8?q?=20a=C3=B1o.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Inicio/anio.vue |  24 +++++---
 src/components/v-checkbox.vue  | 101 +++++++++++++++++++++++++++++++++
 src/views/Inicio.vue           |  20 ++++++-
 3 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 src/components/v-checkbox.vue

diff --git a/src/components/Inicio/anio.vue b/src/components/Inicio/anio.vue
index 2a1b875..48b694a 100644
--- a/src/components/Inicio/anio.vue
+++ b/src/components/Inicio/anio.vue
@@ -1,13 +1,15 @@
 <template lang="pug">
     div
-        h3 {{ nombreAño }}
+        v-checkbox(:txt="''" v-model="abierto")
+        h3.titulo_anio {{ nombreAño }}
             div.reiniciar(@click="reiniciarTablaVue") Reiniciar
 
-        tabla-horarios(:nombreAño="nombreAño")
-        curso(v-for="(curso, nombre) in año" :key="nombre"
-            :curso="curso"
-            :nombreAño="nombreAño"
-            :nombreCurso="nombre")
+        div(v-show="abierto")
+            tabla-horarios(:nombreAño="nombreAño")
+            curso(v-for="(curso, nombre) in año" :key="nombre"
+                :curso="curso"
+                :nombreAño="nombreAño"
+                :nombreCurso="nombre")
 
     //
 </template>
@@ -15,11 +17,14 @@
 <script lang="coffee">
     import curso from "./curso.vue"
     import tablaHorarios from "./tabla-horarios.vue"
+    import vCheckbox from "../v-checkbox.vue"
     import { reiniciarTabla } from "./tablaHorarios/funcionesResaltado.coffee"
 
     export default
         name: "Anio"
-        components: { curso, tablaHorarios }
+        components: { curso, tablaHorarios, vCheckbox }
+        data: ->
+            abierto: true
         props:
             año:
                 type: Object
@@ -37,6 +42,11 @@
 
 <style scoped lang="sass">
 
+    .titulo_anio
+        position: relative
+        left: 35px
+
+
     .reiniciar
         margin-left: 1rem
         padding: 0.25rem
diff --git a/src/components/v-checkbox.vue b/src/components/v-checkbox.vue
new file mode 100644
index 0000000..c10058e
--- /dev/null
+++ b/src/components/v-checkbox.vue
@@ -0,0 +1,101 @@
+<template lang="pug">
+    label.container {{ txt }}
+        input(type="checkbox" :checked="checked" @input="$emit('change', $event.target.checked)")
+        span.checkmark
+    
+    //
+</template>
+
+<script lang="coffee">
+
+    export default
+        name: "v-checkbox"
+        model:
+            prop: "checked"
+            event: "change"
+        props:
+            txt:
+                type: String
+                required: true
+            checked:
+                type: Boolean
+                required: true
+    
+#
+</script>
+
+<style scoped lang="sass">
+
+
+    /* Customize the label (the container) */
+    .container
+        display: block
+        position: relative
+        padding-left: 35px
+        cursor: pointer
+        font-size: 22px
+        -webkit-user-select: none
+        -moz-user-select: none
+        -ms-user-select: none
+        user-select: none
+
+
+    /* Hide the browser's default checkbox */
+    .container input
+        position: absolute
+        opacity: 0
+        cursor: pointer
+        height: 0
+        width: 0
+
+
+    /* Create a custom checkbox */
+    .checkmark
+        position: absolute
+        top: 0
+        left: 0
+        height: 25px
+        width: 25px
+        background-color: #eee
+        transition: background-color 150ms
+        border-radius: 50%
+
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark
+        background-color: #ccc
+
+
+    /* When the checkbox is checked, add a blue background */
+    .container input:checked ~ .checkmark
+        background-color: #64001d
+
+
+    /* Create the checkmark/indicator (hidden when not checked) */
+    .checkmark:after
+        content: ""
+        position: absolute
+        display: none
+
+
+    /* Show the checkmark when checked */
+    .container input:checked ~ .checkmark:after
+        display: block
+
+
+    /* Style the checkmark/indicator */
+    .container .checkmark:after
+        left: 9px
+        top: 5px
+        width: 5px
+        height: 10px
+        border: solid white
+        border-width: 0 3px 3px 0
+        -webkit-transform: rotate(45deg)
+        -ms-transform: rotate(45deg)
+        transform: rotate(45deg)
+
+
+
+    //
+</style>
\ No newline at end of file
diff --git a/src/views/Inicio.vue b/src/views/Inicio.vue
index b522043..f005073 100644
--- a/src/views/Inicio.vue
+++ b/src/views/Inicio.vue
@@ -2,8 +2,16 @@
     div.home
         h2.titulo {{ datos.titulo }}
         p Puedes agregar cursos de diferentes años a tu horario.
-        input(type="checkbox" v-model="$store.state.mostrarDescansos")
-        label Mostrar descansos de 10m
+
+        v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
+
+        // label.container Mostrar descansos de 10m
+            input(type="checkbox" v-model="$store.state.mostrarDescansos")
+            span.checkmark
+
+        // div.input-descanso
+            input#descansos(type="checkbox" v-model="$store.state.mostrarDescansos")
+            label(for="descansos") Mostrar descansos de 10m
         br
         br
 
@@ -17,15 +25,21 @@
 
 <script lang="coffee">
     import anio from "../components/Inicio/anio.vue"
+    import vCheckBox from "../components/v-checkbox.vue"
     import YAML from "yaml"
 
     export default
         name: 'home'
-        components: { anio }
+        components: { anio, vCheckBox }
         computed:
             horarioUsuario: -> @$store.state.horarioUsuario
             datos: -> @$store.state.datos
+            mostrarDescansos:
+                get: -> @$store.state.mostrarDescansos
+                set: (value) -> @$store.commit "cambiarMostrarDescansos", value
+
 
 
 #
 </script>
+