Fully integrated principal action-buttons

This commit is contained in:
Jose Gonzalez 2023-02-15 13:43:42 +01:00
parent 2d52327285
commit 4a535b14a2
7 changed files with 58 additions and 48 deletions

View File

@ -214,6 +214,7 @@ echo '</div>';
$('div#page').toggleClass('page_classic page_collapsed'); $('div#page').toggleClass('page_classic page_collapsed');
$('#header_table').toggleClass('header_table_classic header_table_collapsed'); $('#header_table').toggleClass('header_table_classic header_table_collapsed');
$('li.menu_icon').toggleClass("no_hidden_menu menu_icon_collapsed"); $('li.menu_icon').toggleClass("no_hidden_menu menu_icon_collapsed");
menuActionButtonResizing();
}); });
const id_selected = '<?php echo $menu1_selected; ?>'; const id_selected = '<?php echo $menu1_selected; ?>';

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Dark / 20 / radial-disable@svg</title>
<desc>Created with Sketch.</desc>
<g id="Dark-/-20-/-radial-disable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#C0CCDC">
<rect id="Rectangle-2" x="0" y="0" width="20" height="20" rx="4"></rect>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 565 B

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Dark / 20 / radial-off@svg</title>
<desc>Created with Sketch.</desc>
<g id="Dark-/-20-/-radial-off" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Group" transform="translate(1.000000, 1.000000)" stroke="#95A3BF" stroke-width="2">
<rect id="Rectangle" x="0" y="0" width="18" height="18" rx="4"></rect>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 663 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Dark / 20 / radial-on@svg</title>
<desc>Created with Sketch.</desc>
<g id="Dark-/-20-/-radial-on" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#1D7873">
<g id="Rectangle-2">
<path d="M16,0 C18.209139,-4.05812251e-16 20,1.790861 20,4 L20,16 C20,18.209139 18.209139,20 16,20 L4,20 C1.790861,20 2.705415e-16,18.209139 0,16 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L16,0 Z M15.7777439,6.37135141 C15.4305323,5.94186038 14.8008905,5.87515972 14.3713994,6.22237132 L14.3713994,6.22237132 L7.77861597,11.5510307 L5.81650513,8.77747883 L5.73770948,8.67956758 C5.40260169,8.31264068 4.83884178,8.24412234 4.42262802,8.53850895 C3.97172977,8.85742777 3.86473931,9.48148781 4.18365814,9.93238606 L4.18365814,9.93238606 L6.76182606,13.5774872 L6.83812914,13.672688 C7.18888164,14.0598005 7.78987666,14.114854 8.20693177,13.7776959 L8.20693177,13.7776959 L15.6287639,7.77769594 L15.7214138,7.69277628 C16.0660673,7.33480068 16.098247,6.76780467 15.7777439,6.37135141 Z"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -533,12 +533,12 @@ ul li {
} }
.header_table_classic { .header_table_classic {
padding-left: 315px; padding-left: 300px;
/* 280 + 35 */ /* 280 + 35 */
} }
.header_table_collapsed { .header_table_collapsed {
padding-left: 115px; padding-left: 100px;
/* 80 + 35 */ /* 80 + 35 */
} }

View File

@ -160,6 +160,8 @@ body {
min-height: 100%; min-height: 100%;
font-weight: 400; font-weight: 400;
font-family: "Pandora-Regular"; font-family: "Pandora-Regular";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
} }
body.body-report { body.body-report {
@ -10073,8 +10075,8 @@ button.submitButton.onlyIcon {
button.buttonButton.onlyIcon.pending, button.buttonButton.onlyIcon.pending,
button.submitButton.onlyIcon.pending { button.submitButton.onlyIcon.pending {
mask: url(../../images/arrow.svg) no-repeat right / contain; mask: url(../../images/validate.svg) no-repeat right / contain;
-webkit-mask: url(../../images/arrow.svg) no-repeat right / contain; -webkit-mask: url(../../images/validate.svg) no-repeat right / contain;
} }
button.buttonButton.onlyIcon.completed, button.buttonButton.onlyIcon.completed,
@ -10292,8 +10294,8 @@ button div.ok {
button div.pending, button div.pending,
button div.next { button div.next {
mask: url(../../images/arrow.svg) no-repeat center / contain; mask: url(../../images/validate.svg) no-repeat center / contain;
-webkit-mask: url(../../images/arrow.svg) no-repeat center / contain; -webkit-mask: url(../../images/validate.svg) no-repeat center / contain;
} }
button div.search { button div.search {
@ -10602,12 +10604,12 @@ tr.bring_next_field {
top: 0 !important; top: 0 !important;
left: 0 !important; left: 0 !important;
border: 0 !important; border: 0 !important;
height: 17px !important; height: 20px !important;
margin-left: -4px !important; margin-left: -8px !important;
margin-top: 12px !important; margin-top: 10px !important;
position: absolute !important; position: absolute !important;
width: 17px !important; width: 20px !important;
background: url(../../images/down.svg) no-repeat content-box !important; background: url(../../images/dropdown-down.svg) no-repeat content-box !important;
} }
.select2-container--default .select2-container--default
@ -10762,6 +10764,8 @@ tr.bring_next_field {
padding: 0px; padding: 0px;
bottom: 8px; bottom: 8px;
z-index: 1; z-index: 1;
width: -webkit-fill-available;
padding-right: 10px;
} }
.action_buttons_right_content { .action_buttons_right_content {
@ -10779,13 +10783,13 @@ tr.bring_next_field {
.fixed_action_buttons_size { .fixed_action_buttons_size {
width: -webkit-fill-available; width: -webkit-fill-available;
width: -moz-fill-available; width: -moz-fill-available;
margin-right: 20px; /*margin-right: 20px;*/
} }
.action_buttons_background_mask { .action_buttons_background_mask {
width: 3000px; width: -webkit-fill-available;
position: absolute; position: absolute;
right: -45px; left: 0;
height: 58px; height: 58px;
top: -8px; top: -8px;
border: 1px solid #e5e9ed; border: 1px solid #e5e9ed;

View File

@ -1513,7 +1513,7 @@ require 'include/php_to_js_values.php';
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
// Handle the scroll. // Handle the scroll.
$(document).ready(scrollFunction()); $(document).ready(scrollFunction());
$(document).ready(menuResizing()); $(document).ready(menuActionButtonResizing());
// When there are less than 5 rows, all rows must be white // When there are less than 5 rows, all rows must be white
var theme = "<?php echo $config['style']; ?>"; var theme = "<?php echo $config['style']; ?>";
if (theme === 'pandora') { if (theme === 'pandora') {
@ -1522,7 +1522,7 @@ require 'include/php_to_js_values.php';
} }
} }
//$('.button_collapse').on('click', menuResizing()); //$('.button_collapse').on('click', menuActionButtonResizing());
// Cursor change for show a spinner. Experimental. // Cursor change for show a spinner. Experimental.
/* /*
@ -1543,8 +1543,8 @@ require 'include/php_to_js_values.php';
scrollFunction() scrollFunction()
}; };
function menuResizing() { function menuActionButtonResizing() {
$('.action_buttons_right_content').attr('style', 'left: '+($('#menu_full').width() + 36)+'px;'); $('.action_buttons_right_content').attr('style', 'left: '+($('#menu_full').width())+'px;');
} }
function scrollFunction() { function scrollFunction() {
@ -1557,36 +1557,6 @@ require 'include/php_to_js_values.php';
document.getElementById("top_btn").style.display = "none"; document.getElementById("top_btn").style.display = "none";
} }
} }
/*
var separationHeight = 10;
// Position of the visible part of document.
var scrollTop = document.documentElement.scrollTop;
// Height of all document.
var scrollHeight = document.documentElement.scrollHeight;
// Height of visible window (browser).
var clientHeight = document.documentElement.clientHeight;
// Height of footer (Plus 10px).
var footerHeight = document.getElementById('foot').offsetHeight + separationHeight;*/
// Fixed action buttons element.
var actionButtons = document.getElementById('principal_action_buttons');
// Handle the position of principal_action_buttons.
if (actionButtons) {
var $bottom = '', $left = '';
/*
if ((scrollHeight - clientHeight - scrollTop) < footerHeight) {
$bottom = 'bottom:'+(footerHeight - (scrollHeight - clientHeight - window.scrollY))+'px;';
} else {
$bottom = 'bottom:'+separationHeight+'px;';
}
*/
if (actionButtons.classList.contains('fixed_action_buttons_size') === false) {
$left = 'left:'+(document.documentElement.offsetWidth - document.getElementById('principal_action_buttons').offsetWidth - 20)+'px;';
actionButtons.setAttribute('style', $left);
}
// Set the position of principal action buttons.
//actionButtons.setAttribute('style', $left+$bottom);
}
} }
// When the user clicks on the button, scroll to the top of the document. // When the user clicks on the button, scroll to the top of the document.