Cabeçalho Fixo - grid

Sugestões
#1

Aproveitando o gancho da nova versão, onde permite deixa a barra de ferramenta fixa, poderiam criar a opção de deixa o cabeçalho fixo também.

1 Curtida
#2

O cabeçalho e também o rodapé! Ai ficaria muito bom porque hoje eu já faço isso (fixo barra de ferramentas/cabeçalhos/rodapés) com injeção de css nos códigos do scriptcase! Scripcase fazendo isso nativamente seria ótimo.

#3

Olá, Ronaldo!

Poderia compartilhar esse css com a gente?

#4 
function mensagem_smart($msgTitulo = 'Erro#9999!<br>Procure o suporte técnico!', $msgBotao = '', $fecharCom = 'scriptcase') {

$metodoFechamento = $fecharCom;	
if ($fecharCom == 'scriptcase') {
	$metodoFechamento = 'parent.tb_remove()';	
}
if ($fecharCom == 'self')	 {
	$metodoFechamento = 'scBtnFn_sys_format_sai()';
}
if ($fecharCom == 'naomodal')	 {
	$metodoFechamento = 'nm_saida_glo()';
}
if ($fecharCom == 'swall')	 {
	$metodoFechamento = 'parent.swal.close()';	
}
	
if (empty($msgBotao)) {
	$msgBotao = 'escondebotao';
}

$botaoSaida = <<<HTML
<a id='id_button_smart' onclick='$metodoFechamento; return false;' class='scButton_smart' style='vertical-align: middle; display:inline-block;'><i class='icon_fa fas fa-arrow-left'></i>$msgBotao</a>
HTML;
	
$parte1 = "
<style>
form[name^='F1'] {
    visibility: hidden;
}
.swal2-title {
  font-size: 16px;
}
.swal-button {
  font-size: 10px;
}
.scButton_smart {
    font-family: 'Nunito', sans-serif;
    color: #8592A6;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    border-width: 1px;
    border-color: #e3eaef;
    border-style: solid;
    border-radius: 4px;
    background-color: #e3eaef;
    background-image: none;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 9px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.scButton_smart:hover {
    font-family: 'Nunito', sans-serif;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    border-width: 1px;
    border-color: #727cf4;
    border-style: solid;
    border-radius: 4px;
    background-color: #727cf4;
    background-image: none;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 9px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.css_mensagem_smart {
 	display: flex;
    flex-direction: column;
    align-items: center;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.css_titulo_smart {
    font-size: 20px;
    background-color: red;
	color: #FFF;
	border: 1px solid red;
    border-radius: 4px;
	padding: 5px;
	margin: 5px;	
}

.cm_loader { opacity: 0; }

</style>
	
<div class='css_mensagem_smart'>
<span class='css_titulo_smart'>$msgTitulo</span>";

$parte2 = "
$botaoSaida
</div>";
if ($fecharCom == 'escondebotao' || $msgBotao == 'escondebotao') {	
	$parte2 = "</div>";
}

echo $parte1.$parte2;
exit;
}
	
function css_grid($valores = array()) {
$displayMobile = $_SESSION['scriptcase']['display_mobile'];
$deviceMobile = $_SESSION['scriptcase']['device_mobile'];
// --- CSS para ajustar a grid no mobile
$css = "
<style>
td#sc_grid_toobar_top, .scFilterToolbar { 
	background: #fff !important; 
} 
td#sc_grid_toobar_bot { 
	background: #fff !important; 
}
.modal-pane-container > .modal-pane-wrapper > .modal-pane-topbar {
	display: none !important;
}
</style>
";
$forcaCss = false;
if (isset($valores['forca_css'])) {
	$forcaCss = strtolower($valores['forca_css']);
}
if ($displayMobile && $deviceMobile && !$forcaCss) {
	echo $css;
	return;
}
// --- Padrão do tema: Sc9_Light_2020
$tema = 'light_padrao';
$altCab = 34;
$altToolBar = 42;
$altLabel = 28;
$paddingSearch = 0;
$fontFize = 20;
$cssSearch = $cssTitulo = $cssLivre = '';
// --- Se foi passado parâmetros então recebe os mesmos
if (isset($valores['tema'])) {
	$tema = strtolower($valores['tema']);
}
if (isset($valores['alt_cab'])) {
	$altCab = $valores['alt_cab'];
}
if (isset($valores['alt_toolbar'])) {
	$altToolBar = $valores['alt_toolbar'];
}
if (isset($valores['alt_label'])) {
	$altLabel = $valores['alt_label'];
}
if (isset($valores['padding_search'])) {
	$paddingSearch = $valores['padding_search'];
}
if (isset($valores['font_size'])) {
	$fontSize = $valores['font_size'];
}
if (isset($valores['css_livre'])) {
	$cssLivre = $valores['css_livre'];
}
// --- Ajusta as posições dos componentes na tela
$topToolBar = $altCab + 0.1;
$topLabel1 = ($topToolBar + $altToolBar) - 7;
$topLabel2 = $topLabel1 + 7;
$topSearch = $topLabel2 + 13;	

// --- Ajusta o top das labels se definidos manual
if (isset($valores['top_label1'])) {
	$topLabel1 = $valores['top_label1'];
}
if (isset($valores['top_label2'])) {
	$topLabel2 = $valores['top_label2'];
}
if (isset($valores['top_search'])) {
	$topSearch = $valores['top_search'];
}
if (isset($valores['top_toolbar'])) {
	$topToolBar = $valores['top_toolbar'];
}

// --- Ajusta tamanho da fonte
if (!empty($fontSize)) {
	$cssTitulo = "
	#id_cab_grid_smart {
    	font-size: {$fontSize}px !important;
	}";
}

if (!empty($paddingSearch)) {
	$cssSearch = "
	#quicksearchph_top {
		display: unset !important;
	    padding: {$paddingSearch}px;		
	}";
}
//$cssMini = '';

// --- Se for montar grid para impressão
$idApp = $this->Ini->nm_cod_apl;
$opcao = $_SESSION["sc_session"][$this->Ini->sc_page][$idApp]["opcao"];
if ($opcao == 'pdf' || $opcao == 'print') {
	$css = "<style>
	.css_cab_smart {
    	border-top: 1px solid #000 !important;
    	border-right: 1px solid #000 !important;
    	border-left: 1px solid #000 !important;
		border-bottom: 1px solid #000;
 		background-color: #FFF !important;
	}
	
	{$cssTitulo}
	
	</style>";
	echo $css;
	return;
}	

$javaScript = "
<script>
function scSetFixedHeaders() {
   var divScroll, gridHeaders, headerPlaceholder
   gridHeaders = scGetHeaderRow();
   headerPlaceholder = $('#sc-id-fixedheaders-placeholder');
   if (!gridHeaders) {
     headerPlaceholder.hide();
   }
   else {
    scSetFixedHeadersContents(gridHeaders, headerPlaceholder);
    scSetFixedHeadersSize(gridHeaders);
    scSetFixedHeadersPosition(gridHeaders, headerPlaceholder);
    if (scIsHeaderVisible(gridHeaders)) {
     headerPlaceholder.show();
    }
    else {
     headerPlaceholder.show();
    }
   }
}
</script>
";	

$cssModal = "
#TB_window {
    border-radius: 5px; 
	border-color: #E0E6ED;
	border-style: solid;
	border-width: 1px;
}
#TB_iframeContent {
    border-radius: 5px;  
}";
	
$css = "
<style>
.css_cab_smart {
    position: fixed;
    top: 0px;
	z-index: 2;
	left: 2px !important;
    border-top: 6px solid #fff !important;
    border-right: 8px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    border-left: 4px solid #fff !important;
    width: 100% !important;
    padding: 0px 5px 0px 5px !important;
}
.scGridToolbarPadding {
	padding: 5px 0px 5px 5px !important;
}
.scGridToolbar {
	padding-right: 5px !important;
}
.scGridFieldOddFont {
	vertical-align: middle;
}
.scGridLabelFont {
	z-index: 0 !important;
}
#sc_grid_toobar_top {
	position: fixed;
	width: 100% !important;
	z-index: 1;
	top: {$topToolBar}px;
	left: 0px;
	background-color: #fff;
	border-top: 0px solid #fff;
}
#sc_grid_toobar_bot {
	position: fixed;
	width: 100% !important;
	bottom: 0px;
	left: 0px;
	background-color: #fff;
}
#sc-id-fixed-headers {
	position: fixed !important;
	top: {$topLabel2}px !important;
}
.scGridTabela {
	border-width: 3px !important;
}
#main_table_grid {
	padding-top: {$topLabel1}px !important;
	padding-bottom: 36px !important;
}

.scGridQuickSearchDivMoldura {
	top: {$topSearch}px;
}
.scGridPage {
	margin: 8px 2px 3px 2px !important;
}
.{$tema}_grid_css_scGridTotalFont {
	text-align: right;
}

{$cssSearch}

{$cssTitulo}

{$cssModal}

{$cssLivre}

</style>
";

echo $javaScript;

echo $css;

return;	
}

function css_form($valores = array()) {
$displayMobile = $_SESSION['scriptcase']['display_mobile'];
$deviceMobile = $_SESSION['scriptcase']['device_mobile'];
$alturaSelect = $cssAdd = '';
if (isset($valores['css_add'])) {
	$cssAdd = $valores['css_add'];
}
// --- CSS para ajustar a form no mobile
$cssMobile = "
<style>
td#sc_grid_toobar_top, .scFilterToolbar { 
	background: #fff !important; 
} 
td#sc_grid_toobar_bot { 
	background: #fff !important; 
}
.modal-pane-container > .modal-pane-wrapper > .modal-pane-topbar {
	display: none !important;
}
$cssAdd
</style>
";
$forcaCss = false;
if (isset($valores['forca_css'])) {
	$forcaCss = strtolower($valores['forca_css']);
}
if ($displayMobile && $deviceMobile && !$forcaCss) {
	echo $cssMobile;
	return;
}
	
// --- Altera altura do select2 se definido	
if (isset($valores['altura_select'])) {
	$altura = $valores['altura_select'];
	$alturaSelect = ".select2-container--default .select2-results>.select2-results__options { max-height: $altura; }";
}
// --- Configura padding-top do form 
$topFormPadding = '78px';
$bottomFormPadding = '35px';
$topToolBar = '32px';
$topCab = '0px';	
if (isset($valores['css_add'])) {
	$cssAdd = $valores['css_add'];
}
if (isset($valores['sem_cabecalho'])) {
	$topFormPadding = '40px';
	$topToolBar = '0px';
}
if (isset($valores['alt_toolbar'])) {
	$topToolBar = $valores['alt_toolbar'];
}
if (isset($valores['alt_cab'])) {
	$topToolBar = 'top: '.$valores['alt_cab'];
}
if (isset($valores['top_form_padding'])) {
	$topFormPadding = $valores['top_form_padding'];
}
if (isset($valores['bottom_form_padding'])) {
	$bottomFormPadding = $valores['bottom_form_padding'];
}
$posicaoToolBar = 'top: '.$topToolBar;	
if (isset($valores['posicao_tool_bar'])) {
	$posicaoToolBar = $valores['posicao_tool_bar'];
}

$cssAdd .= $cssMobile;

echo <<<HTML

<script>
$(document).ready(function() {
	var elements = document.getElementsByClassName('scFormToolbar');
	if (typeof elements[1] !== 'undefined') {
		elements[1].remove();
	}
	
	
});
</script>

<style type='text/css'>

.css_cab_smart {
    position: fixed;
    top: 0px;
    border-top: 6px solid #fff !important;
    border-right: 8px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    border-left: 4px solid #fff !important;
    width: 99% !important;
    padding: 0px 5px 0px 5px !important;
}

.css_rodape_smart {
	position: fixed; 
	bottom:0px; 
	border-right: 5px solid #fff;
	border-bottom: 2px solid #fff;
	border-left: 5px solid #fff;
	width: 99% !important;
	height: 13px; 
	left: 0px !important;
	background-color: #F2F2F2;
	padding: 3px 7px 3px 7px;
}

.swal2-styled.swal2-confirm {
	font-size: 12px !important;
}
.scButton_check:hover .scButton_check:focus .scButton_check {
	padding: .625em 2em !important;
}

.scFormToolbar {
    position: fixed;
	z-index: 2;
    width: 98%;
    $posicaoToolBar !important;
	background-color: #fff;
	border-top: 0px;
}

.scFormToolbarPadding {
    padding: 5px 10px 5px 5px !important;
}

form[name^='F1'] {
    padding-top: $topFormPadding !important;
    padding-bottom: $bottomFormPadding !important;
}

.scSweetAlertHeader {
    display: none !important;
}

#TB_window {
    border-radius: 5px;  
}

$cssAdd

$alturaSelect

</style>

HTML;
	
return;
}

function css_menu() {

echo <<<HTML
.ui-layout-pane {
	width: 100% !important;
}
</style>
HTML;
	
return;
}
1 Curtida
#5

Estou disponibilizando os códigos para os amigos do grupo!
Sendo que para fixar as barras de ferramenta nessa ultima versão já tem esse recurso talvez!
Fazendo alguns pequenos ajustes nos códigos pode adaptar os mesmos para essa nova versão!
Também tem um função que criamos aqui que é a mensagem_smart que utilizamos quando nos eventos onScriptInit e OnLoad podemos fazer validações para nem entrar na grid/form/controle dando a mensagem personalizada e retornando para o módulo chamado.

Cole essas funções em uma biblioteca interna e depois faz as chamadas nos eventos onScriptInit e OnLoad nos formulários.

Estudem as funções e adaptem conforme as necessidade e se fizerem melhorias atualize a mesmo aqui no forum.

Esperemos em novas versões do scriptcase que vem com todos esses recursos.

1 Curtida
#6

Ronaldo, muito obrigado!!!

#7

Estava esquecendo desse detalhe aqui que tem que ajustar o cabeçalho e rodapé com os códigos abaixo:

CABEÇALHO

<style type='text/css'>
.css_cab_smart {
    /* top: 0px; */
    /* border-top: 5px solid #fff; */
    border-right: 5px solid #F2F2F2;
    z-index: 2;
    /*border-left: 5px solid #F2F2F2;*/
    width: 100%;
    left: 2px !important;
    background-color: #F2F2F2;
    /* padding: 0px 3px 0px 3px; */
}
#id_cab_grid_smart {
    width: 100%;
    text-align: left;
    vertical-align: middle;
    font-size: 20px !important;
    height: 25px;
    /* margin-top: 5px; */
    padding: 0px;
}
</style>

<table class="css_cab_smart">
    <tr>
      <td id="id_cab_grid_smart">{LIN1_COL1}</td>
	</tr>	
</table>

RODAPÉ

<style type='text/css'>
.css_rodape_smart {
    /* top: 0px; */
    /* border-top: 5px solid #fff; */
    border-right: 5px solid #F2F2F2;
    z-index: 2;
    /*border-left: 5px solid #F2F2F2;*/
    width: 100%;
    left: 2px !important;
    background-color: #F2F2F2;
    /* padding: 0px 3px 0px 3px; */
}
#id_rodape_smart {
    width: 100%;
    text-align: left;
    vertical-align: middle;
    font-size: 20px !important;
    height: 25px;
    /* margin-top: 5px; */
    padding: 0px;
}
</style>

<table class="css_rodape_smart">
    <tr>
      <td id="id_rodape_smart">{LIN1_COL1}</td>
	</tr>	
</table>

A maneira que fizemos os cabeçalhos e rodapés é que nos mesmos pode colocar qualquer html mas pode estar ajustando os mesmos de acordo com a necessidade.

1 Curtida