Commit a93613bd authored by Athina Bekakou's avatar Athina Bekakou Committed by Giorgos Korfiatis

admin-ui: Add fade mechanism for auth provider info

In the details view, there are auth provider info in formated and in raw
form. The user by default sees the formated view but there is a button
that will fade out the formated view (list) and fade in the raw form
(plain json) of these data.
parent 6e6eab74
......@@ -322,9 +322,4 @@ $(document).ready(function(){
e.preventDefault();
}
});
$('.info-details .toggle-info').click(function(e) {
e.preventDefault();
$(this).siblings('.info-data').slideToggle();
});
});
$(document).ready(function(){
$(document).ready(function() {
var navsHeight = $('.main-nav').height() + $('.sub-nav').height();
$('.sub-nav .link-to-anchor').click(function(e) {
......@@ -40,7 +40,7 @@ $(document).ready(function(){
});
var $toggleAllBtn = $expandBtn.closest('.info-block.object-details').find('.js-show-hide-all');
if(allSameClass){
if($expandBtn.closest('h4').hasClass('expanded')){
if($expandBtn.closest('h4').hasClass('expanded')) {
$toggleAllBtn.addClass('open');
$toggleAllBtn.find('.txt').text(txt_all[1]);
}
......@@ -55,10 +55,20 @@ $(document).ready(function(){
}
});
// hide/show expand/collapse
// hide/show expand/collapse
$('.btn-toggle-info').click(function() {
$(this).toggleClass('open');
if($(this).hasClass('open')) {
$(this).parent().siblings('.js-slide-area').slideDown('slow');
}
else {
$(this).parent().siblings('.js-slide-area').slideUp('slow');
}
});
var txt_all = ['Expand all','Collapse all'];
var txt_format = ['Show raw data', 'Show formated data'];
$('.js-show-hide-all span.txt').text(txt_all[0]);
......@@ -88,7 +98,28 @@ $(document).ready(function(){
}
});
$('.main .object-details h4 .arrow').trigger('click')
$('.main .object-details h4 .arrow').trigger('click');
$('.toggle-fade.txt').text(txt_format[0]);
$('.toggle-fade').click(function(e) {
e.preventDefault();
var $areaToHide = $(this).siblings('.fade-area.vis');
var $areaToShow = $(this).siblings('.fade-area:not(.vis)');
$areaToHide.fadeOut('fast', function() {
$(this).removeClass('vis');
if($(this).hasClass('area-0')) {
$('.toggle-fade.txt').text(txt_format[1]);
}
else {
$('.toggle-fade.txt').text(txt_format[0]);
}
$areaToShow.fadeIn('slow', function() {
$(this).addClass('vis');
});
});
});
/* Modals */
......
......@@ -422,11 +422,11 @@ table.dataTable tbody tr:not(.selected) .snf-checkbox-checked {
display: none;
}
.instructions .line-btn.open .snf-angle-down {
.line-btn.open .snf-angle-down, {
display: none;
}
.instructions .line-btn:not(.open) .snf-angle-up {
.line-btn:not(.open) .snf-angle-up {
display: none;
}
......
......@@ -236,3 +236,23 @@
padding: 0;
}
}
.fade-area {
overflow: hidden;
&:not(.vis) {
display: none;
}
&.info-data {
padding: 0 20px;
}
}
.toggle-fade {
margin-left: 20px;
width: 116px;
}
.area-to-slide {
display: none;
}
\ No newline at end of file
......@@ -3,4 +3,4 @@
@import "bootstrap/variables";
@import "bootstrap";
@import "global";
@import "global";
\ No newline at end of file
......@@ -87,11 +87,15 @@
<span class="snf-font-arrow-down"></span>
</a>
</div>
<dl class="dl-horizontal well">
<div class="js-slide-area area-to-slide">
<!-- <div class="clearfix"> -->
<a href="" class="toggle-fade pull-right txt btn-toggle-info line-btn">Show raw data</a>
<!-- </div> -->
<dl class="dl-horizontal well fade-area vis area-0 clearfix">
{{ info|flatten_dict_to_dl }}
</dl>
<a href="" class="toggle-info">Toggle full info data</a>
<pre class="info-data" style="display: none">{{ info }}</pre>
<pre class="info-data fade-area area-1 clearfix">{{ info }}</pre>
</div>
{% endif %}
{% endwith %}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment