Merge branch 'redmine-issues/14462' into 'develop'

REDMINE_ISSUE-14462|Bouton filtres mal placé et flêche inconsistante

See merge request !452

src/components/Projects/ProjectsMenu.vue

 <template>
-  <div class="filters-container">
-    <div class="ui styled accordion">
+  <div id="filters-container">
+    <div
+      class="ui styled accordion"
+      @click="displayFilters = !displayFilters"
+    >
       <div
         id="filters"
         class="title collapsible-filters"
       >
         FILTRES
         <i
-          class="ui icon caret right down"
+          :class="['ui icon customcaret', { 'collapsed': !displayFilters }]"
           aria-hidden="true"
         />
       </div>
     </div>
-    <div class="ui menu filters hidden">
+    <div :class="['ui menu filters', { 'hidden': displayFilters }]">
       <div class="item">
         <label>
           Niveau d'autorisation requis
@@ -40,7 +43,7 @@
           v-on="$listeners"
         />
       </div>
-      <div class="right item">
+      <div class="item">
         <label>
           Recherche par nom
         </label>
@@ -69,6 +72,7 @@ export default {
 
   data() {
     return {
+      displayFilters: false,
       moderationOptions: [
         {
           label: 'Tous',
@@ -157,42 +161,10 @@ export default {
     }
   },
 
-  mounted() {
-    const el = document.getElementsByClassName('collapsible-filters');
-
-    el[0].addEventListener('click', function() {
-      const icon = document.getElementsByClassName('caret');
-      icon[0].classList.toggle('right');
-      const content = document.getElementsByClassName('filters');
-      content[0].classList.toggle('hidden');
-      if (content[0].style.maxHeight){
-        content[0].style.maxHeight = null;
-      } else {
-        content[0].style.maxHeight = content[0].scrollHeight + 5 + 'px';
-      }
-    });
-
-    window.addEventListener('resize', this.handleResize);
-  },
-
   methods: {
     ...mapActions('projects', [
       'SEARCH_PROJECTS'
     ]),
-
-    handleResize() {
-      if (window.innerWidth <= 700) {
-        const icon = document.getElementsByClassName('caret');
-        icon[0].classList.toggle('right');
-        const content = document.getElementsByClassName('filters');
-        content[0].classList.toggle('hidden');
-        if (content[0].style.maxHeight){
-          content[0].style.maxHeight = null;
-        } else {
-          content[0].style.maxHeight = content[0].scrollHeight + 5 + 'px';
-        }
-      }
-    }
   }
 };
 </script>
@@ -205,18 +177,34 @@ export default {
   transition: @arguments;
 }
 
-.filters-container {
+#filters-container {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
-	align-items: center;
-  margin-bottom: 1rem;
+	align-items: flex-end;
 	.accordion {
-		width: fit-content !important;
+		width: fit-content;
 		.collapsible-filters {
 			font-size: 1.25em;
 			padding-right: 0;
+      .customcaret{
+        transition: transform .2s ease;
+        &.collapsed {
+          transform: rotate(180deg);
+        }
+        &::before{
+          position: relative;
+          right: 0;
+          top: 65%;
+          color: #999;
+          margin-top: 4px;
+          border-color: #999 transparent transparent;
+          border-style: solid;
+          border-width: 5px 5px 0;
+          content: "";
+        }
+      }
 		}
 	}
 	.filters {
@@ -224,16 +212,16 @@ export default {
 		height:auto;
 		min-height: 0;
 		max-height:75px;
+    opacity: 1;
 		margin: 0 0 1em 0;
     border: none;
     box-shadow: none;
-		.transition-properties(max-height 0.2s ease-out;);
+		.transition-properties(all 0.2s ease-out;);
 		.item {
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start !important;
-
-			padding: 0.4em 0.6em 0.4em 0;
+			padding: 0.5em;
 
 			label {
 				margin-bottom: 0.2em;
@@ -247,33 +235,41 @@ export default {
     .item::before {
 			width: 0;
 		}
-    .right.item {
-      padding-right: 0;
-      #search-projects {
-        width: 100%;
-      }
+    #search-projects {
+      width: 100%;
     }
-		.right.item::before {
-			width: 0;
-		}
 	}
 	.filters.hidden {
-		max-height: 0;
 		overflow: hidden;
-		border: none;
+    opacity: 0;
+    max-height: 0;
 	}
 }
 
+@media screen and (min-width: 701px) {
+  .item {
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
 @media screen and (max-width: 700px) {
-  .filters-container {
+  #filters-container {
 
     .filters {
       display: flex;
       flex-direction: column;
-      .transition-properties(max-height 0.2s ease-out;);
+      max-height: 275px;
+      .transition-properties(all 0.2s ease-out;);
 
       .item {
         width: 100%;
+        padding-right: 0;
+        padding-left: 0;
       }
     }
   }