Fully integrated principal action-buttons
This commit is contained in:
parent
2d52327285
commit
4a535b14a2
|
@ -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; ?>';
|
||||||
|
|
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue