PHRAS-3189 add accordeon style on admin expose

This commit is contained in:
Harrys
2020-09-14 18:23:32 +04:00
parent 367641f010
commit aa71bb7119
2 changed files with 34 additions and 32 deletions

View File

@@ -1044,38 +1044,29 @@ span.simplecolorpicker.picker {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
height: 248px; /*height: 248px;
max-height: 248px; max-height: 248px;
transition: max-height .5s; transition: max-height .5s;
overflow: hidden; overflow: hidden;*/
position: relative; position: relative;
&.open { /* &.open {
height: auto; height: auto;
max-height: 100vh; max-height: 100vh;
} }*/
} }
.setting-block { .setting-block {
position: absolute; position: absolute;
bottom: 12px; bottom: 12px;
right: 15px; right: 15px;
} }
.expose-title {
&.ui-accordion-header-active {
background: #3b99fc;
color: #fff;
}
}
.toggle-setting { .toggle-setting {
position: relative; 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 { .expose-delete-btn {
float: right; float: right;

View File

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