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');
|
||||
$('#header_table').toggleClass('header_table_classic header_table_collapsed');
|
||||
$('li.menu_icon').toggleClass("no_hidden_menu menu_icon_collapsed");
|
||||
menuActionButtonResizing();
|
||||
});
|
||||
|
||||
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 {
|
||||
padding-left: 315px;
|
||||
padding-left: 300px;
|
||||
/* 280 + 35 */
|
||||
}
|
||||
|
||||
.header_table_collapsed {
|
||||
padding-left: 115px;
|
||||
padding-left: 100px;
|
||||
/* 80 + 35 */
|
||||
}
|
||||
|
||||
|
|
|
@ -160,6 +160,8 @@ body {
|
|||
min-height: 100%;
|
||||
font-weight: 400;
|
||||
font-family: "Pandora-Regular";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body.body-report {
|
||||
|
@ -10073,8 +10075,8 @@ button.submitButton.onlyIcon {
|
|||
|
||||
button.buttonButton.onlyIcon.pending,
|
||||
button.submitButton.onlyIcon.pending {
|
||||
mask: url(../../images/arrow.svg) no-repeat right / contain;
|
||||
-webkit-mask: url(../../images/arrow.svg) no-repeat right / contain;
|
||||
mask: url(../../images/validate.svg) no-repeat right / contain;
|
||||
-webkit-mask: url(../../images/validate.svg) no-repeat right / contain;
|
||||
}
|
||||
|
||||
button.buttonButton.onlyIcon.completed,
|
||||
|
@ -10292,8 +10294,8 @@ button div.ok {
|
|||
|
||||
button div.pending,
|
||||
button div.next {
|
||||
mask: url(../../images/arrow.svg) no-repeat center / contain;
|
||||
-webkit-mask: url(../../images/arrow.svg) no-repeat center / contain;
|
||||
mask: url(../../images/validate.svg) no-repeat center / contain;
|
||||
-webkit-mask: url(../../images/validate.svg) no-repeat center / contain;
|
||||
}
|
||||
|
||||
button div.search {
|
||||
|
@ -10602,12 +10604,12 @@ tr.bring_next_field {
|
|||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 17px !important;
|
||||
margin-left: -4px !important;
|
||||
margin-top: 12px !important;
|
||||
height: 20px !important;
|
||||
margin-left: -8px !important;
|
||||
margin-top: 10px !important;
|
||||
position: absolute !important;
|
||||
width: 17px !important;
|
||||
background: url(../../images/down.svg) no-repeat content-box !important;
|
||||
width: 20px !important;
|
||||
background: url(../../images/dropdown-down.svg) no-repeat content-box !important;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
|
@ -10762,6 +10764,8 @@ tr.bring_next_field {
|
|||
padding: 0px;
|
||||
bottom: 8px;
|
||||
z-index: 1;
|
||||
width: -webkit-fill-available;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.action_buttons_right_content {
|
||||
|
@ -10779,13 +10783,13 @@ tr.bring_next_field {
|
|||
.fixed_action_buttons_size {
|
||||
width: -webkit-fill-available;
|
||||
width: -moz-fill-available;
|
||||
margin-right: 20px;
|
||||
/*margin-right: 20px;*/
|
||||
}
|
||||
|
||||
.action_buttons_background_mask {
|
||||
width: 3000px;
|
||||
width: -webkit-fill-available;
|
||||
position: absolute;
|
||||
right: -45px;
|
||||
left: 0;
|
||||
height: 58px;
|
||||
top: -8px;
|
||||
border: 1px solid #e5e9ed;
|
||||
|
|
|
@ -1513,7 +1513,7 @@ require 'include/php_to_js_values.php';
|
|||
<script type="text/javascript" language="javascript">
|
||||
// Handle the scroll.
|
||||
$(document).ready(scrollFunction());
|
||||
$(document).ready(menuResizing());
|
||||
$(document).ready(menuActionButtonResizing());
|
||||
// When there are less than 5 rows, all rows must be white
|
||||
var theme = "<?php echo $config['style']; ?>";
|
||||
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.
|
||||
/*
|
||||
|
@ -1543,8 +1543,8 @@ require 'include/php_to_js_values.php';
|
|||
scrollFunction()
|
||||
};
|
||||
|
||||
function menuResizing() {
|
||||
$('.action_buttons_right_content').attr('style', 'left: '+($('#menu_full').width() + 36)+'px;');
|
||||
function menuActionButtonResizing() {
|
||||
$('.action_buttons_right_content').attr('style', 'left: '+($('#menu_full').width())+'px;');
|
||||
}
|
||||
|
||||
function scrollFunction() {
|
||||
|
@ -1557,36 +1557,6 @@ require 'include/php_to_js_values.php';
|
|||
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.
|
||||
|
|
Loading…
Reference in New Issue