serenitytypescript

How To Create A Slider Dialog In Serenity (Part 2)

serenity, serenity-dialog, slider

Back to the future :D

In we implemented a simple way to create a slider dialog when you click on a button on Serenity’s grid toolbar.

It works pretty well right? No, it doesn’t. LOL :D

If you open slider dialog on a button that is placed on generic/panel dialog it will cause problem.
If you have a button on your slider dialog and the button also show a new generic/panel dialog or even a slider dialog then you also get problem too.

It can make your grid/panel dialog goes away or dialog/child dialog has z-index issue,
your normal dialogs will be place under of your slider dialog so you can not interact with it.

The reason is Slider Dialog basically is a Serenity panel dialog, if it is a panel dialog, Serenity will hide the parent of dialog.

Check more here:

Serenity FrameworkTemplatedDialog.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if (container.length) {
    container = container.last();
    container.children()
        .not(element)
        .not('.panel-hidden')
        .addClass('panel-hidden panel-hidden-' + uniqueName);

    if (element[0].parentElement !== container[0])
         element.appendTo(container);
}

$('.ui-dialog:visible, .ui-widget-overlay:visible')
    .not(element)
    .addClass('panel-hidden panel-hidden-' + uniqueName);

element
    .removeClass('hidden')
    .removeClass('panel-hidden')
    .addClass('s-Panel')
    .trigger('panelopen');

You should try to implement my previous post and open slider dialog on generic dialog/panel dialog or inside a slider dialog you will see what I am saying.

In a nutshell, this post will try to fix those issues!

I’m very lazy (actually my English is not good) so I just show my code, the rest is your work ^^

Demo

Copy/paste

/Content/site/site.less

1
2
3
4
5
6
7
.slider-container .s-Panel {
    box-shadow: none !important
}

.slider-dialog-force-show-target{
    display: block !important;
}

/Modules/Common/Helpers/MySlilerReveal.ts

Modules/Product/Product/ProductDialog.ts

Done! Let me know if you have any issue. I will try to check if I have time.

And don’t forget to correct my English mistakes.

Share