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 = { ...@@ -192,8 +192,8 @@ snf = {
tables: { tables: {
html: { 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>', 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>', 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" data-karma="neutral"><span class="text">Show selected </span><span class="badge num selected-num">0</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>', 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>', 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: '', toggleNotifications: '',
......
...@@ -8,6 +8,7 @@ $(document).ready(function() { ...@@ -8,6 +8,7 @@ $(document).ready(function() {
scrollTop: pos scrollTop: pos
}, 500) }, 500)
}) })
// the arrow next to the name of the resource
$('.object-details h4 .arrow').click(function(){ $('.object-details h4 .arrow').click(function(){
var $expandBtn = $(this); var $expandBtn = $(this);
var hasNotClass = !$expandBtn.closest('h4').hasClass('expanded'); var hasNotClass = !$expandBtn.closest('h4').hasClass('expanded');
...@@ -42,45 +43,58 @@ $(document).ready(function() { ...@@ -42,45 +43,58 @@ $(document).ready(function() {
if(allSameClass){ if(allSameClass){
if($expandBtn.closest('h4').hasClass('expanded')) { if($expandBtn.closest('h4').hasClass('expanded')) {
$toggleAllBtn.addClass('open'); $toggleAllBtn.addClass('open');
$toggleAllBtn.find('.txt').text(txt_all[1]);
} }
else { else {
$toggleAllBtn.removeClass('open'); $toggleAllBtn.removeClass('open');
$toggleAllBtn.find('.txt').text(txt_all[0]);
} }
} }
else { else {
$toggleAllBtn.removeClass('open'); $toggleAllBtn.removeClass('open');
$toggleAllBtn.find('.txt').text(txt_all[0]);
} }
}); });
// hide/show expand/collapse // expand/collapse
$('.btn-toggle-info').click(function() { $('.btn-toggle-info').click(function(e) {
e.preventDefault();
$(this).toggleClass('open'); $(this).toggleClass('open');
if($(this).hasClass('open')) { if($(this).hasClass('open')) {
$(this).parent().siblings('.js-slide-area').slideDown('slow'); $(this).parent().siblings('.js-slide-area').stop().slideDown('slow');
} }
else { 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']; // hide/show
var txt_format = ['Show raw data', 'Show formated data']; $('.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){ $('.js-show-hide-all').click(function(e){
e.preventDefault(); e.preventDefault();
$(this).toggleClass('open'); $(this).toggleClass('open');
var tabs = $(this).parent('.info-block').find('.object-details-content'); var tabs = $(this).parent('.info-block').find('.object-details-content');
if ($(this).hasClass('open')){ if ($(this).hasClass('open')){
$(this).find('span.txt').text( txt_all[1]);
tabs.each(function() { tabs.each(function() {
$(this).stop().slideDown('slow'); $(this).stop().slideDown('slow');
$(this).siblings('h4').addClass('expanded'); $(this).siblings('h4').addClass('expanded');
...@@ -89,7 +103,7 @@ $(document).ready(function() { ...@@ -89,7 +103,7 @@ $(document).ready(function() {
} else { } else {
$(this).find('span.txt').text( txt_all[0]); // $(this).find('span.txt').text( txt_all[0]);
tabs.each(function() { tabs.each(function() {
$(this).stop().slideUp('slow'); $(this).stop().slideUp('slow');
$(this).siblings('h4').removeClass('expanded'); $(this).siblings('h4').removeClass('expanded');
...@@ -100,26 +114,7 @@ $(document).ready(function() { ...@@ -100,26 +114,7 @@ $(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 */ /* Modals */
......
...@@ -647,17 +647,14 @@ $(document).ready(function() { ...@@ -647,17 +647,14 @@ $(document).ready(function() {
return allSelected; return allSelected;
}); });
if($togglePageItems.hasClass('select') && allSelected) { if($togglePageItems.hasClass('select') && allSelected) {
$togglePageItems.addClass('deselect').removeClass('select'); $togglePageItems.addClass('deselect state-b').removeClass('select');
$label.text('Deselect Page')
} }
else if($togglePageItems.hasClass('deselect') && !allSelected) { else if($togglePageItems.hasClass('deselect') && !allSelected) {
$togglePageItems.addClass('select').removeClass('deselect'); $togglePageItems.addClass('select').removeClass('deselect state-b');
$label.text('Select Page')
} }
} }
else { else {
$togglePageItems.addClass('select').removeClass('deselect') $togglePageItems.addClass('select').removeClass('deselect state-b')
$label.text('Select Page')
} }
}; };
...@@ -847,19 +844,12 @@ $(document).ready(function() { ...@@ -847,19 +844,12 @@ $(document).ready(function() {
$('.toggle-selected').click(function (e) { $('.toggle-selected').click(function (e) {
e.preventDefault(); e.preventDefault();
var $label = $(this).find('.text');
var label1 = 'Show selected';
var label2 = 'Hide selected';
$(this).toggleClass('open'); $(this).toggleClass('open');
if($(this).hasClass('open')) { if($(this).hasClass('open')) {
$('#table-items-selected_wrapper').slideDown('slow', function() { $('#table-items-selected_wrapper').stop().slideDown('slow');
$label.text(label2);
});
} }
else { else {
$('#table-items-selected_wrapper').slideUp('slow', function() { $('#table-items-selected_wrapper').stop().slideUp('slow');
$label.text(label1);
});
} }
}); });
}); });
...@@ -167,7 +167,7 @@ and light gray font colors ...@@ -167,7 +167,7 @@ and light gray font colors
} }
} }
.instructions .line-btn { .line-btn {
padding: 8px 10px; padding: 8px 10px;
span { span {
padding: 0 4px; padding: 0 4px;
...@@ -270,7 +270,7 @@ body .custom-buttons .extra-btn { ...@@ -270,7 +270,7 @@ body .custom-buttons .extra-btn {
} }
} }
.btn-toggle-info { .btn-r {
float:right; float:right;
em { em {
font-style: normal; font-style: normal;
...@@ -415,22 +415,52 @@ table.dataTable tbody tr.selected .snf-checkbox-unchecked{ ...@@ -415,22 +415,52 @@ table.dataTable tbody tr.selected .snf-checkbox-unchecked{
table.dataTable tbody tr:not(.selected) .snf-checkbox-checked { table.dataTable tbody tr:not(.selected) .snf-checkbox-checked {
display: none; 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; 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; display: none;
} }
.wrap-btn-between-dls { .wrap-btn-between-dls {
width: $component-offset-horizontal - 20; width: $component-offset-horizontal - 20;
margin: 15px 0 10px; 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 @@ ...@@ -226,7 +226,7 @@
@extend .snf-user-full; @extend .snf-user-full;
} }
.btn-toggle-info { .line-btn {
span.snf-font-arrow-up { span.snf-font-arrow-up {
@extend .snf-arrow-up; @extend .snf-arrow-up;
padding: 0; padding: 0;
......
...@@ -3,10 +3,11 @@ ...@@ -3,10 +3,11 @@
<div class="object-anchor" id="{{ type }}-area"></div> <div class="object-anchor" id="{{ type }}-area"></div>
<div class="object-details info-block well {{ rowcls }}"> <div class="object-details info-block well {{ rowcls }}">
{% if association.items|length > 0 and type != 'ip_log' %} {% 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-up"></span>
<span class="snf-font-arrow-down"></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> <em>({{ association.items|length }})</em>
</a> </a>
......
...@@ -85,16 +85,18 @@ ...@@ -85,16 +85,18 @@
{% with info=auth.info %} {% with info=auth.info %}
{% if info %} {% if info %}
<div class="wrap-btn-between-dls clearfix"> <div class="wrap-btn-between-dls clearfix">
<a href="#" class="btn-toggle-info line-btn"> <a href="#" class="btn-toggle-info line-btn btn-r txt">
<span class="txt">More</span> <span class="txt-open">Less</span>
<span class="txt-close">More</span>
<span class="snf-font-arrow-up"></span> <span class="snf-font-arrow-up"></span>
<span class="snf-font-arrow-down"></span> <span class="snf-font-arrow-down"></span>
</a> </a>
</div> </div>
<div class="js-slide-area area-to-slide"> <div class="js-slide-area area-to-slide">
<!-- <div class="clearfix"> --> <a href="" class="toggle-fade pull-right txt line-btn btn-r">
<a href="" class="toggle-fade pull-right txt btn-toggle-info line-btn">Show raw data</a> <span class="txt-close">Show raw data!</span>
<!-- </div> --> <span class="txt-open">Show formatted data!</span>
</a>
<dl class="dl-horizontal well fade-area vis area-0 clearfix"> <dl class="dl-horizontal well fade-area vis area-0 clearfix">
{% flatten_dict_to_dl info %} {% flatten_dict_to_dl info %}
</dl> </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