From 0a535c165d66f7eafd52e307d5cb5920f7bcdd7c Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 12 Apr 2020 08:37:16 +0200
Subject: [PATCH] toggle box

---
 deploy.sh                                   |  2 +-
 resources/js/views/User/UserAdmin.vue       | 42 ++++++++++++++-------
 resources/sass/app.scss                     |  1 +
 resources/sass/components/_transitions.scss |  6 +++
 resources/sass/setup/_containers.scss       | 31 +++++++++++++++
 resources/sass/setup/_reset.scss            | 10 +++++
 6 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 resources/sass/components/_transitions.scss

diff --git a/deploy.sh b/deploy.sh
index de890f3..5fb1636 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -38,6 +38,6 @@ then
     php artisan migrate --force
     php artisan optimize
 
-    npm install
+    npm install --no-progress
     npm run prod
 fi
diff --git a/resources/js/views/User/UserAdmin.vue b/resources/js/views/User/UserAdmin.vue
index 196361c..f7ace2d 100644
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -10,23 +10,35 @@
       </div>
     </div>
     <div v-if="authUser.data.attributes.is_admin">
-      <h2 class="mb-1">Ajouter un membre</h2>
-      <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-      <form @submit.prevent="addMember" class="mb-2">
-          <div class="flex">
-              <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
-              <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-              <div class="flex-middle mt-4">
-                  <button class="btn-primary">Ajouter</button>
-              </div>
-          </div>
-      </form>
-        <div class="mb-2">
-            <h2>Liste des utilisateurs</h2>
-            <ul>
+        <div class="box-toggle">
+            <div class="box-toggle-header"  @click="userAddToggle = !userAddToggle">
+            <h2 class="mb-1">Ajouter un membre</h2>
+            <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
+        </div>
+            <transition name="fade">
+              <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
+                  <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
+                  <div class="flex mb-1">
+                      <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
+                      <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
+                      <div class="flex-middle mt-4">
+                          <button class="btn-primary">Ajouter</button>
+                      </div>
+                  </div>
+              </form>
+            </transition>
+        </div>
+        <div class="mb-2 box-toggle">
+            <div class="box-toggle-header"  @click="userListToggle = !userListToggle">
+                <h2>Liste des utilisateurs</h2>
+                <svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
+            </div>
+            <transition name="fade">
+            <ul v-if="userListToggle"  class="box-toggle-content">
                 <Loader v-if="loading" />
                 <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
             </ul>
+            </transition>
         </div>
         <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
     </div>
@@ -56,6 +68,8 @@
                 errors: null,
                 loading: true,
                 users: null,
+                userListToggle: false,
+                userAddToggle: false,
             }
         },
         computed: {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index b44ba02..e3cb039 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -6,6 +6,7 @@
 @import "setup/containers";
 @import "setup/effects";
 
+@import "components/transitions";
 @import "components/btn";
 @import "components/elements";
 @import "components/loader";
diff --git a/resources/sass/components/_transitions.scss b/resources/sass/components/_transitions.scss
new file mode 100644
index 0000000..824567d
--- /dev/null
+++ b/resources/sass/components/_transitions.scss
@@ -0,0 +1,6 @@
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+}
diff --git a/resources/sass/setup/_containers.scss b/resources/sass/setup/_containers.scss
index 709f93c..7735c30 100644
--- a/resources/sass/setup/_containers.scss
+++ b/resources/sass/setup/_containers.scss
@@ -46,3 +46,34 @@
 
     }
 }
+
+
+.box-toggle {
+    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: $light;
+        padding: 0.5rem 1rem;
+        border-radius: 0.2rem;
+
+        svg {
+            width: 2rem;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}
diff --git a/resources/sass/setup/_reset.scss b/resources/sass/setup/_reset.scss
index baf4224..f34b16b 100644
--- a/resources/sass/setup/_reset.scss
+++ b/resources/sass/setup/_reset.scss
@@ -13,3 +13,13 @@ body {
         margin: 0;
     }
 }
+
+ul {
+    margin-top:0;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    li {
+        list-style: none;
+    }
+}