not easy to use in dark theme about boarding.js HOT 9 CLOSED

The issues with driver's solution is that it will force z-index on the elements, which will very quickly break any slightly more complex layouts that rely on z-index (that can also include positioning, opacity, etc. of elements).

Yes, that's why I turn to use boarding.

But stage is useful for hiding popup、modal and notifications without making any changes to the highlighted element itself. Hope to see it soon. @josias-r

from boarding.js.

@Usey95 Could you share a screenshot to illustrate the problem?

The popover element can be styled any way you want. So I assume you are talking about the color of the cutout element (darkening of the screen)?

from boarding.js.

@Usey95 Could you share a screenshot to illustrate the problem?

The popover element can be styled any way you want. So I assume you are talking about the color of the cutout element (darkening of the screen)?

Yes！If the whole UI is in dark color, it's hard to distinguish the cutout element.

from boarding.js.

@Usey95 I see.

I think you can already force overwrite the styling with css. The element you are looking for is the .boarding-coutout-svg path element. You can try to overwrite the fill styling using a stylesheet like this:

.boarding-coutout-svg path {
   fill: white !important;
}

Note that you can also already configure the opacity of the darkening, which might also help with your problem, without needing to change the color:

const boarding = new Boarding({
    opacity: 0.8, // try numbers ranging from 0 to 1
});

If the first option is desired, I will consider adding it to the available options so it can be configured without the need for a !important stylesheet. Then it would look something like this:

const boarding = new Boarding({
    cutoutColor: "white", // or `rgb(255,255,255)` or #FFFFFF, ...
});

from boarding.js.

@josias-r Appreciate for your detailed reply!
Maybe I didn't make myself clear. What I want is to highlight the focused item directly instead of dealing with the background.
There are two way to do this, either add a border or add a background with inverted color.
For background way, the lib don't have a standalone element for now and zindex should be added to the focused item.
For border way, now the path leaves a border for the whole page. You can see what I say when you stoke it.

Maybe an option like this would help:

const boarding = new Boarding({
    highlightedBorderColor: "white", // or `rgb(255,255,255)` or #FFFFFF, ...
    ...other attr for stoke
});

from boarding.js.

@Usey95 If you want to add styling to the highlighted element itself, you can also do this, simply by adding styles to the boarding-highlighted-element class. This class will always get applied to the currently highlighted DOM element.

Here's an example:

If this is still not what you are trying to achieve, please provide a screenshot illustrating the problem 😄

from boarding.js.

I think a stage like driver would help, but I solved my situation anyway.

from boarding.js.

@Usey95 There is already a ticket for that #5.

But I still have to experiment with the concept of a stage, because there are a lot of issues the way driver approaches the idea, and I'm not sure of the advantages of a stage, which cannot be done with the methods I meantioned above.

The issues with driver's solution is that it will force z-index on the elements, which will very quickly break any slightly more complex layouts that rely on z-index (that can also include positioning, opacity, etc. of elements).

Boarding aims to be a general solution that works for simple websites but also compelx web applications with modals, dialogs, dropdowns, etc.

I will close this, and keep the other ticket open.

from boarding.js.

@Usey95 Interesting feedback, thank you :D

Can you give concrete and full examples for hiding popup, modal and notifications? I will note them down in the main ticket. I'm holding out on working on that stage feature, since I am not sure on what results are desired. So any concrete examples of what you would like to have as a built-in functionallity will be a next step for the concept

from boarding.js.