Commit 151e42da authored by Athina Bekakou's avatar Athina Bekakou Committed by Giorgos Korfiatis

admin-ui: Refactor buttons with label that changes

These buttons are mostly used to show/hide areas in the UI.
parent bbf36937
......@@ -192,8 +192,8 @@ snf = {
tables: {
html: {
selectAllBtn: '<a href="" class="select select-all line-btn" data-karma="neutral" data-caution="warning" data-toggle="modal" data-target="#massive-actions-warning"><span>Select All</span></a>',
selectPageBtn: '<a href="" id="select-page" class="select line-btn" data-karma="neutral" data-caution="none"><span>Select Page</span></a>',
toggleSelected: '<a href="" class="toggle-selected extra-btn line-btn" data-karma="neutral"><span class="text">Show selected </span><span class="badge num selected-num">0</span></a>',
selectPageBtn: '<a href="" id="select-page" class="select line-btn txt" data-karma="neutral" data-caution="none"><span class="txt-state-a">Select Page</span><span class="txt-state-b">Deselect Page</span></a>',
toggleSelected: '<a href="" class="toggle-selected extra-btn line-btn txt" data-karma="neutral txt"><span class="txt-close">Show selected</span><span class="txt-open">Hide selected</span><span class="badge num selected-num">0</span></a>',
reloadTable: '<a href="" class="line-btn reload-table" data-karma="neutral" data-caution="none" title="Reload table"><span class="snf-font-reload"></span></a>',
clearSelected: '<a href="" id="clear-all" class="disabled deselect line-btn" data-karma="neutral" data-caution="warning" data-toggle="modal" data-target="#clear-all-warning"><span class="snf-font-remove"></span><span>Clear All</span></a>',
toggleNotifications: '',
......
......@@ -8,6 +8,7 @@ $(document).ready(function() {
scrollTop: pos
}, 500)
})
// the arrow next to the name of the resource
$('.object-details h4 .arrow').click(function(){
var $expandBtn = $(this);
var hasNotClass = !$expandBtn.closest('h4').hasClass('expanded');
......@@ -42,45 +43,58 @@ $(document).ready(function() {
if(allSameClass){
if($expandBtn.closest('h4').hasClass('expanded')) {
$toggleAllBtn.addClass('open');
$toggleAllBtn.find('.txt').text(txt_all[1]);
}
else {
$toggleAllBtn.removeClass('open');
$toggleAllBtn.find('.txt').text(txt_all[0]);
}
}
else {
$toggleAllBtn.removeClass('open');
$toggleAllBtn.find('.txt').text(txt_all[0]);
}
});
// hide/show expand/collapse
$('.btn-toggle-info').click(function() {
// expand/collapse
$('.btn-toggle-info').click(function(e) {
e.preventDefault();
$(this).toggleClass('open');
if($(this).hasClass('open')) {
$(this).parent().siblings('.js-slide-area').slideDown('slow');
$(this).parent().siblings('.js-slide-area').stop().slideDown('slow');
}
else {
$(this).parent().siblings('.js-slide-area').slideUp('slow');
$(this).parent().siblings('.js-slide-area').stop().slideUp('slow');
}
});
var txt_all = ['Expand all','Collapse all'];
var txt_format = ['Show raw data', 'Show formated data'];
// hide/show
$('.toggle-fade').click(function(e) {
e.preventDefault();
var $areaToHide = $(this).siblings('.fade-area.vis');
var $areaToShow = $(this).siblings('.fade-area:not(.vis)');
var $btn = $(this);
$areaToHide.fadeOut('fast', function() {
$(this).removeClass('vis');
if($(this).hasClass('area-0')) {
$btn.addClass('open');
}
else {
$btn.removeClass('open');
}
$areaToShow.fadeIn('slow', function() {
$(this).addClass('vis');
});
});
});
var txt_format = ['Show raw data', 'Show formated data'];
$('.js-show-hide-all span.txt').text(txt_all[0]);
$('.js-show-hide-all').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
var tabs = $(this).parent('.info-block').find('.object-details-content');
if ($(this).hasClass('open')){
$(this).find('span.txt').text( txt_all[1]);
tabs.each(function() {
$(this).stop().slideDown('slow');
$(this).siblings('h4').addClass('expanded');
......@@ -89,7 +103,7 @@ $(document).ready(function() {
} else {
$(this).find('span.txt').text( txt_all[0]);
// $(this).find('span.txt').text( txt_all[0]);
tabs.each(function() {
$(this).stop().slideUp('slow');
$(this).siblings('h4').removeClass('expanded');
......@@ -100,26 +114,7 @@ $(document).ready(function() {
$('.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 */
......
......@@ -647,17 +647,14 @@ $(document).ready(function() {
return allSelected;
});
if($togglePageItems.hasClass('select') && allSelected) {
$togglePageItems.addClass('deselect').removeClass('select');
$label.text('Deselect Page')
$togglePageItems.addClass('deselect state-b').removeClass('select');
}
else if($togglePageItems.hasClass('deselect') && !allSelected) {
$togglePageItems.addClass('select').removeClass('deselect');
$label.text('Select Page')
$togglePageItems.addClass('select').removeClass('deselect state-b');
}
}
else {
$togglePageItems.addClass('select').removeClass('deselect')
$label.text('Select Page')
$togglePageItems.addClass('select').removeClass('deselect state-b')
}
};
......@@ -847,19 +844,12 @@ $(document).ready(function() {
$('.toggle-selected').click(function (e) {
e.preventDefault();
var $label = $(this).find('.text');
var label1 = 'Show selected';
var label2 = 'Hide selected';
$(this).toggleClass('open');
if($(this).hasClass('open')) {
$('#table-items-selected_wrapper').slideDown('slow', function() {
$label.text(label2);
});
$('#table-items-selected_wrapper').stop().slideDown('slow');
}
else {
$('#table-items-selected_wrapper').slideUp('slow', function() {
$label.text(label1);
});
$('#table-items-selected_wrapper').stop().slideUp('slow');
}
});
});
......@@ -167,7 +167,7 @@ and light gray font colors
}
}
.instructions .line-btn {
.line-btn {
padding: 8px 10px;
span {
padding: 0 4px;
......@@ -270,7 +270,7 @@ body .custom-buttons .extra-btn {
}
}
.btn-toggle-info {
.btn-r {
float:right;
em {
font-style: normal;
......@@ -415,22 +415,52 @@ table.dataTable tbody tr.selected .snf-checkbox-unchecked{
table.dataTable tbody tr:not(.selected) .snf-checkbox-checked {
display: none;
}
.btn-toggle-info.open .snf-font-arrow-down {
display: none;
}
.btn-toggle-info:not(.open) .snf-font-arrow-up {
display: none;
}
.line-btn.open .snf-angle-down, {
.line-btn.open .snf-angle-down, .line-btn.open .snf-font-arrow-down, {
display: none;
}
.line-btn:not(.open) .snf-angle-up {
.line-btn:not(.open) .snf-angle-up, .line-btn:not(.open) .snf-font-arrow-up {
display: none;
}
.wrap-btn-between-dls {
width: $component-offset-horizontal - 20;
margin: 15px 0 10px;
}
/*
* The classes below are used in buttons that their text changes when the state
* of another html change. Fox example, if the button toggles the visibility of
* an area, its text is different when the area is visible ("Hide") n when the
* area is hidden ("Show").
* HTML examples:
* <a class="txt">
* <span class="txt-close">Show</span>
* <span class="txt-open">Hide</span>
* </a>
* <a class="txt">
* <span class="txt-state-a">Do!</span>
* <span class="txt-state-b">Undo!</span>
* </a>
* When the .txt element has the class open or state-b, the text in the element
* with the class .txt-open or with the .txt-state-b is visible.
* The names of the classes show the state of the element that the button effects.
*/
html body .txt {
.txt-close, .txt-state-a {
display: initial;
}
.txt-open, .txt-state-b {
display: none;
}
&.open, &.state-b {
.txt-close, .txt-state-a {
display: none;
}
.txt-open, .txt-state-b {
display: initial;
}
}
}
\ No newline at end of file
......@@ -226,7 +226,7 @@
@extend .snf-user-full;
}
.btn-toggle-info {
.line-btn {
span.snf-font-arrow-up {
@extend .snf-arrow-up;
padding: 0;
......
......@@ -3,10 +3,11 @@
<div class="object-anchor" id="{{ type }}-area"></div>
<div class="object-details info-block well {{ rowcls }}">
{% if association.items|length > 0 and type != 'ip_log' %}
<a href="#" class="js-show-hide-all line-btn btn-toggle-info">
<a href="#" class="js-show-hide-all line-btn btn-r txt">
<span class="snf-font-arrow-up"></span>
<span class="snf-font-arrow-down"></span>
<span class="txt">Collapse All </span>
<span class="txt-open">Collapse all </span>
<span class="txt-close">Expand all </span>
<em>({{ association.items|length }})</em>
</a>
......
......@@ -85,16 +85,18 @@
{% with info=auth.info %}
{% if info %}
<div class="wrap-btn-between-dls clearfix">
<a href="#" class="btn-toggle-info line-btn">
<span class="txt">More</span>
<a href="#" class="btn-toggle-info line-btn btn-r txt">
<span class="txt-open">Less</span>
<span class="txt-close">More</span>
<span class="snf-font-arrow-up"></span>
<span class="snf-font-arrow-down"></span>
</a>
</div>
<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> -->
<a href="" class="toggle-fade pull-right txt line-btn btn-r">
<span class="txt-close">Show raw data!</span>
<span class="txt-open">Show formatted data!</span>
</a>
<dl class="dl-horizontal well fade-area vis area-0 clearfix">
{% flatten_dict_to_dl info %}
</dl>
......
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