Estoy implementando un diálogo para cerrar la session de usuario, usando las webix. Para ello, uso la siguiente función:
const app.login = {
showLogout: function( ) {
var win = webix.ui( {
view: 'window',
id: 'LOGIN.LOGOUT',
head: 'Close this session ?',
position: 'center',
move: true,
modal: true,
width: 450,
height: 200,
body: {
rows: [
{ template: 'Do you want to end the session ?' },
{ cols: [
{ view: 'button', type: 'danger', value: 'Yes, exit', id: 'LOGOUT.YES' },
{ view: 'button', type: 'form', value: 'No, continue' }
]
}
]
}
} ),
win.show( );
}
};
Lo anterior funciona bien, y genera la siguiente ventana flotante:
Quisiera cambiar el color de fondo del head
de la ventana (la zona del título). Es una ventana peligrosa, y me gustaría que la cabecera tuviera el mismo color de fondo que el botón Yes, exit. Como las webix
admiten pieles (configurables para cada usuario), no puedo generar un estilo fijo, porque podría no coincidir con el aspecto del botón para ese usuario/piel concreto.
He intentado obtener el backgroundColor
del botón, y asignarlo a mano a la cabecera, usando el inspector de elementos de las dev-tools para obtener los datos necesarios:
showLogout: function( ) {
var win = webix.ui( {
...
},
head = document.getElementsByClassName( 'webix_win_head' )[0],
button = document.querySelectorAll('[view_id="LOGOUT.YES"]')[0];
head.style.backgroundColor = button.style.backgroundColor;
}
Pero no he conseguido el resultado buscado. El encabezado de la ventana permanece testarudamente con el fondo blanco.
¿ Como aplico el color de fondo (y a ser posible, el del texto) del botón danger
a la cabecera ?
Edito
La jerarquía de elementos que me muestran las dev-tools para la ventana flotante es la siguiente:
<div class="webix_view webix_window" role="dialog" tabindex="0" aria-label="Close this session ?" view_id="LOGIN.LOGOUT" style="border-width: 1px; display: none; width: 450px; height: 200px;">
<div class="webix_win_content">
<div class="webix_win_head">
<div class="webix_view" view_id="$template2" style="width: 450px; height: 36px;">
<div class=" webix_template"></div>
</div>
</div>
<div class="webix_win_body">
<div class="webix_view webix_layout_line" view_id="$layout3" style="width: 450px; height: 164px;">
<div class="webix_view" view_id="$template1" style="border-width: 0px 0px 1px; margin-left: 0px; margin-top: 0px; width: 450px; height: 134px;">
<div class=" webix_template"></div></div><div class="webix_view webix_layout_line" view_id="$layout4" style="white-space: nowrap; border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; margin-left: 0px; margin-top: -1px; width: 450px; height: 30px;">
<div class="webix_view webix_control webix_el_button" view_id="LOGOUT.YES" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 226px; height: 30px;"></div>
<div class="webix_view webix_control webix_el_button" view_id="$button1" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: -1px; width: 225px; height: 30px;"></div>
</div>
</div>
</div>
</div>
</div>