PHRAS-3189 add accordeon style on admin expose

resources/www/admin/styles/main.scss

@@ -1044,38 +1044,29 @@ span.simplecolorpicker.picker {
     width: 100%;
     display: inline-block;
     box-sizing: border-box;
-    height: 248px;
+    /*height: 248px;
     max-height: 248px;
     transition: max-height .5s;
-    overflow: hidden;
+    overflow: hidden;*/
     position: relative;
-    &.open {
-      height: auto;
-      max-height: 100vh;
-    }
+    /* &.open {
+       height: auto;
+       max-height: 100vh;
+     }*/
   }
   .setting-block {
     position: absolute;
     bottom: 12px;
     right: 15px;
   }
+  .expose-title {
+    &.ui-accordion-header-active {
+      background: #3b99fc;
+      color: #fff;
+    }
+  }
   .toggle-setting {
     position: relative;
-  /*  &:before {
-      content: "\F054";
-      font-family: fontawesome;
-      font-size: 23px;
-      position: absolute;
-      left: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: all .3s;
-    }
-    &.open {
-      &:before {
-        transform: translateY(-50%) rotate(90deg);
-      }
-    }*/
   }
   .expose-delete-btn {
     float: right;

templates/web/admin/phraseanet-service/expose.html.twig

@@ -1,13 +1,10 @@
 {% macro widget_prototype(form) %}
-
-
+    <h3 class="expose-title">{{ 'admin:phrasea-service-setting:tab:expose:: New  expose interconnection name' | trans }}</h3>
     <div class="control-group well well-small action-block expose-block">
-        <div class="setting-block"><input id="toggle-setting" type="button" class="btn btn-primary toggle-setting"
-                  value="{{ 'admin:phrasea-service-setting:tab:expose:: more setting' | trans }}">
-        </div>
         <div class="expose-delete-btn">
-            <p> <input type="button" class="btn btn-primary btn-red delete-expose"
-                       value="{{ 'admin:phrasea-service-setting:tab:expose:: Delete' | trans }}"></p>
+            <p> <button type="button" class="btn btn-danger delete-expose pull-right"><i class="fa fa-trash-o icon-white" aria-hidden="true"></i>{{ 'admin:phrasea-service-setting:tab:expose:: Delete' | trans }}
+                </button>
+            </p>
         </div>
 
         <div class="expose-config-block">
@@ -113,16 +110,30 @@
             prototype = collectionHolder.attr('data-prototype');
             var newExpose = prototype.replace(/__name__/g, collectionHolder.children('.control-group').length);
             collectionHolder.append(newExpose);
+            $("#expose-list" ).accordion('refresh');
+            $( "h3:last" ).trigger( "click" );
         });
 
         $('#expose-list').on('click', '.delete-expose', function () {
+            $(this).closest('.expose-block').prev('h3').remove();
+            $("#expose-list" ).accordion('refresh');
             $(this).closest('.expose-block').remove();
         });
 
-         $(document).on('click','.toggle-setting', function () {
-            $(this).toggleClass('open');
-            $(this).closest('.expose-block').toggleClass('open');
-         });
+        $( function() {
+            $( ".expose-block" ).each(function( index ) {
+                $(this).prev('.expose-title').html( $(this).find('.expose-name').val() );
+            });
+            $("#expose-list" ).accordion(
+                { event: "click",
+                    active: false,
+                    collapsible: true
+                }
+            );
+        } );
+
+
+
     });
 
 </script>