auto-show-hide (header) and custom theme : header is transparent

[CouinCouin]

Hi,

Last version in date (v4.16.1).

    theme: {
        bgContent: '#222',
        bgPanel: '#8B008B',
        colorHeader: '#fff',
        colorContent: '#fff'
    },
    header: 'auto-show-hide',

The header bar is trasnparent.

If I use preset theme

    theme: 'red',
    header: 'auto-show-hide',

The header bar is red.

Is there something I did wrong ?

Thanks :) Couin

[Flyer53]

@CouinCouin Hi Couin and sorry for the late answer. You didn't do anything wrong. There seems to be a bug concerning this combination of options. I'm currently out of town and won't be home until the end of the month. So I won't be able to check this out soon. Meanwhile this workaround could do it for you:

jsPanel.create({
  header: 'auto-show-hide',
  theme: '#8B008B',
  callback: function () {
        this.content.style.backgroundColor = '#222';
        this.content.style.color = '#fff';
  },
  content: 'bla ...'
});

Regards, Stefan

[CouinCouin]

Hi Stefan,

Thanks for the tip :)

In fact, it is not the cotntnt background but well the header bar background.

I managed the workaround to get wanted result with this callback 👍 panel.headerbar.style.backgroundColor = 'rgba(139,0,139,1)';

[CouinCouin]

A small question: is it possible to set 'auto-show-hide' in callback block ? I would set autohide after some seconds, with setTimeout.

Thanks :)

[Flyer53]

@CouinCouin Try this, it's the code from the main script adjusted for use in the callback.

jsPanel.create({
  callback: (panel) => {
    let boxShadow = 'jsPanel-depth-' + panel.options.boxShadow;
    panel.header.style.opacity = 0;
    panel.style.backgroundColor = 'transparent';
    jsPanel.remClass(panel, boxShadow);
    jsPanel.setClass(panel.content, boxShadow);
    panel.header.addEventListener('mouseenter', () => {
      panel.header.style.opacity = 1;
      jsPanel.setClass(panel, boxShadow);
      jsPanel.remClass(panel.content, boxShadow);
    });
    panel.header.addEventListener('mouseleave', () => {
      panel.header.style.opacity = 0;
      jsPanel.remClass(panel, boxShadow);
      jsPanel.setClass(panel.content, boxShadow);
    });
  }
});

Worked in a quick test ... but I didn't try it with a complete set of options and so on.

[CouinCouin]

Hi Stefan,

Sorry, I was pretty sure to answered you, but I probably checked the preview without sending the comment ...

Thanks for tip, I managed some code based on yours 👍

In this way, I can close the thread :)

Couin