cWebModalDialog x Tela de Login x Fundo com Imagem

[Fabiano]

Boa tarde pessoal...

Estou dando um revigorada na tela de login no meu sistema trocando para cWebModalDialog. Ficou bem interessante pelo fato de poder deslocar a tela para onde quiser. Ai coloquei um background no CSS na WebWindow_Mask, com no exemplo abaixo:

.WebWindow_Mask{
background-image: url('fundoSGE.jpg');
}


Até ai tudo certo.... ficou um efeito bom. Mas o problema é que todo o local que usa cWebModalDialog vai mostrar a mesma imagem pois é o comportamento padrão agora. E isto eu não queria...Analisando a situação...verifiquei que o JS WebWindow é que gera a DIV:

this._eMask = df.dom.create('<div class="WebWindow_Mask">&nbsp;</div>');

Mas não queria modificar o JS por causa disto...

Vi que no forum em EN (https://support.dataaccess.com/Forums/showthread.php?54122-Resizing-cWebModalDialog&highlight=WebWindow_Mask), teve um cara que passou pela mesma dificuldade mas não postou se teve ou não a solução...

Alguém já precisou ou sabe como contornar isto ?

Grato,

[Samuel Pizarro]

Qual versao do DF fabiano ?

Acredito que vc precisará criar uma classe sua... e configurar essa classe na sua dialog de login.

Problema todo eh o selector que vc deve usar nessa sua classe para que o atributo background seja aplicado no div interno corretamente.

meus conhecimentos de CSS sao bem baixos. mas eu iria por ai..

Eu tentei achar aqui nas dialogs esse objeto com essa classe webwindow_mask, mas na 19.1 nao encontrei... por isso estou perguntando qual a versao.

[Samuel Pizarro]

hum...

achei aqui.. esse container eh um objeto antes da dialog, um pai..

CSS padrao nao tem como configurar atributos do pai, via filho. nao tem selector pro elemento pai. ai complicou.

[Samuel Pizarro]

Opa

Acho que consegui o efeito que vc quer... da um trabalhinho... mas nao precisa apelar pra js..

1ro. crie uma classe nova CSS em seu application.css, essa classe vc usará pra aplicar no oWebApp . em meu exemplo essa classe CSS chama-se WebappLoginBackImg


#OWEBAPP > div > div.WebappLoginBackImg{
background-color: green;
}


em meu teste eu apenas alterei a cor do fundo, mas vc claro, vai usar o atributo que vc ha tem, background-image ...
Repare no selector, ele vai atingir o painel de fundo geral do webapp.

2o
Altere a classe WebWindow_Mask em seu application.css (nao altere o theme.css) para desligar a cor de fundo que ele aplica.. e diminuir o efeito de opacidade..


.WebWindow_Mask {
filter: alpha(opacity=30);
opacity: 0.3;
}


Esse eh uma div que fica sobreposta ao fundo global, mas antes da dialog, apenas pra dar um efeito... ]

3ro.
Reprograme sua dialog de login para configurar a classe css ao objeto oWebApp, na entrada e para remover a classe na saida. Desse modo a imagem ira aparecer, e desaparecer como vc quer.
Na sua dialog de login


Object oLoginDialog is a cWebModalDialog
...
Set pbServerOnHide to True
Set pbServerOnShow to True
...
Procedure OnShow
Forward Send OnShow
WebSet psCSSClass of ghoWebApp to "WebappLoginBackImg"
End_Procedure

Procedure OnHide
WebSet psCSSClass of ghoWebApp to ""
Forward Send OnHide
End_Procedure


Aqui funcionou com a cor.. deve funcionar com a imagem pra vc tb..
meu fundo ficou verde no login e voltou a cor normal ao fechar a dialog.

[Fabiano]

Bom Dia Samuel,

Desculpe a demora na resposta...é 19.1 mesmo....Vou tentar aqui da forma que vc passou e fazer um teste...Eu também não tenho um conhecimento amplo de CSS...a gente aprende na "unha"...

Assim que tiver aqui a resposta, posto aqui.

Muito Obrigado,

Fabiano

[Fabiano]

Bom....vamos ver se fiz exatamente como vc fez ai:

Dentro do application.css coloquei desta forma:

@import url("WebappLoginBackImg.css");


.WebWindow_Mask {
filter: alpha(opacity=30);
opacity: 0.3;
}

No arquivo WebappLoginBackImg.css defini o seguinte:

#OWEBAPP > div > div.WebappLoginBackImg{
background-color: red;
}

Ai...dentro da minha dialog de login coloquei os comandos:

Set pbServerOnHide to True
Set pbServerOnShow to True

Procedure OnShow
Forward Send OnShow
WebSet psCSSClass of ghoWebApp to "WebappLoginBackImg"
End_Procedure

Procedure OnHide
WebSet psCSSClass of ghoWebApp to ""
Forward Send OnHide
End_Procedure

Confere ?

Grato,

Fabiano

[Samuel Pizarro]

Sim. Confere

so nao fiz o import de css q cc fez. Eu coloquei direto no application.css

funcionou?

[Fabiano]

Na verdade não deu....no WEBAPP.SRC estou setando o tema...ele aplica o o vermelho e depois aplica o tema, ficando por último este do tema.

Agora se "mato" o tema dentro do login:


Procedure OnShow
String sUsuario
String sPrevStateHash sView

Forward Send OnShow


WebSet psCSSClass of ghoWebApp to "WebappLoginBackImg"
WebSet psTheme of ghoWebApp to ""
End_Procedure





Procedure OnHide
WebSet psCSSClass of ghoWebApp to ""
WebSet psTheme of ghoWebApp to "Df_Material"
Forward Send OnHide
End_Procedure



Ele mostra corretamente, mas claro que retira toda a parte característica do tema da tela de login.

No teu exemplo, vc chegou a usar o tema ?

Grato,

Fabiano

[Samuel Pizarro]

Vc ta falando disso ?



Object oWebApp is a cWebApp
Set psTheme to "Df_Flat_Desktop"
...


O meu esta assim, e inferi que vc estava usando o web estilo desktop. já que vc esta usando um dialog pra login,, pois no modo mobile, o login eh uma view e nao uma dialog.

O meu estava o thema padrao "DF_Flat_Desktop", mudei para o "DF_Modern_sky" pra testar, e continuou funcionando..
Veja.


Object oWebApp is a cWebApp
//Set psTheme to "Df_Flat_Desktop"
Set psTheme to "Df_Modern_Sky"


13369

[Fabiano]

Isto...dentro do webapp



Object oWebApp is a scWebApp
Set psTheme to "Df_Material"
Set peLoginMode to lmLoginSupported


No meu desenvolvimento aqui, temos módulos que são mobile e outros que são desktop...mas a tela de login é única para os dois e conforme é a montagem de menu do usuário sabemos qual é o módulo mobile e qual tema aplicar e as tratativas para chamar um submenu de rotinas em treeview para desktop ou dashboard para o mobile.

Agora com o DF_MATERIAL, também estou unificando e usando um tema para os dois ambientes.

Vi que vc esta usando o weborder...Vou fazer a mesma alteração no weborder para ver se o comportamento fica igual ao seu ou se tem algo no meu projeto que esta causando isto.

Já posto aqui o resultado...

Grato,

Fabiano

[Fabiano]

Isto...lá funcionou...no meu projeto deve ter algum tratamento para "matar" este comportamento, pois o meu login não é forçado é suportado pois tenho rotinas que podem ser chamadas diretamente via browser sem passar pelo login e ai faço alguns tratamentos diferentes....eu carrego somente o login antes, sem mostrar o menu já, diferente do weborder, justamente pq não sei ainda se o cara irá ter mobile ou desktop...

Mas vou tentar descobrir...

Obrigado,

Fabiano

[Samuel Pizarro]

entendi...

complicado hein misturar os 2 modelos num unico webapp... ja me perco no simples...

boa sorte!