Why are Modals as Sections being deprecated? šŸ˜…

Ask us anything
1

Iā€™m relatively new to WeWeb, but Iā€™m loving the experience so far, since I had some previous experience with Nuxt3 and Vue3.

Right now Iā€™m here to question why are ā€œSectionā€ Modals being deprecated in favor of element ones.

image
image359Ɨ123 4.87 KB

I mean, I can see this being useful to turn modals into components, but Iā€™d really miss the ability to make a Section with a ā€œposition: fixedā€ behavior. Iā€™d like to put all modals in separate section on the editor tree.

Maybe remove the Modals, but add this feature to sections? Today itā€™s only possible to make their position ā€œNormalā€ or ā€œStickyā€.

2

Could you specify what you do with those sections?

3

I create Modals, simple as that. Iā€™m already exploring the new modal and getting used to it. Iā€™m seeing that it takes a different approach, letting WeWeb manage the visibility state of the modal instead of letting us manage it through variables.

Iā€™m not disliking it, I think itā€™s better in general.

Maybe my point is not even about Modals at all, but rather that it would be nice to have the option to make sections positions ā€œFixedā€ or ā€œAbsoluteā€, as we can do for other elements. Thatā€™s what I think Iā€™ll miss the most about the old Modals.

In summary: the new Modal itā€™s ok.

4

@luka Will the old ā€œsectionā€ version of the modal still be reverse compatible, or do we need to change all off our projects over to the new modal variants?

5

Yes, you always manage it with component actions. You can turn off the Trigger though to make it global.

6

Will be compatible, just removed from the Add panel in the coming weeks.

1 Like
7

Thatā€™s my main point. It would be nice to have a ā€œFixedā€ section option. There are some situations in which this might be useful, I believe.

1 Like
8

I like a lot of the functionality of the new one. I like ā€œToggleā€ especially! :slight_smile:

There are use cases that now become a bit more complicated, but I think the new functionality and settings are nicer for no-code workflow:

  • sharing modals across pages - now you have to put it in a section to share it
  • conditional rendering - you have to set variable in addition to triggering component action

I think there is a bug with ā€œprevent scrollingā€ , at least in editor, the scrolling seems to be enabled in any setting @luka

9

Could you share a scenario where itā€™s getting more complicated? Will check the prevent scroll.

10

itā€™s the 2 I mentioned:

  • sharing modals across pages - now you have to put it in a section to share it
  • conditional rendering - you have to set variable in addition to triggering component action
1 Like
11

To be honest, I feel like I need a tutorial as to how to use this new element. So many things have changed from before. I too wish we had both options, one to use as a section and one to use within a section. Lastly, why not have a built in option to add buttons at the bottom of the modal like the old version? Now you have to add those in yourself. A video tutorial would be welcomed!

12

I usually add 1 modal section to a page and create all modals as components in the modal section. I use a modal variable {visible (bool) / name(renders the component) / data(the data that i need to reference inside the modal)}

Just tested the new dialog element. I would want to stick to the modal section atm.

Is there a simple way to prevent page scroll when using the modal section?

13

You can still use the old one from the bottom of the Add panel. We will probably make some videos, stay tuned!

1 Like
14

You can still use one section to place your modals there, just turn off the ā€˜Triggerā€™ property. After this you donā€™t need a model visible variable anymore, only the data part.

We wonā€™t be updating the section anymore, but improving the new one is a priority, so keep coming up with suggestions

1 Like
15

Let me just come back here to emphasize that after using more of the new modal, I AM liking it and will probably use it a lot. It simplifies many of the behaviors we had to control with variables.

Buuuuuut, the only thing I feel like Iā€™ll miss if the ability to have ā€œfixedā€ position Sections. :memo:

So @luka , thanks for the responses here and let me take the moment to congratulate everyone there on WeWeb. You guys did a great job. :slightly_smiling_face:

16

You should be able to add position: fixed to custom CSS section of the edit

17

Suggestions:

  1. Remove any default styling from the Trigger and Content containers
  2. The Content container does not respect the Z axis in a few cases. Ex - I have a topbar with Z axis set to 10 and the Content (within dialog) has Z axis set to 50. As soon as I make the Z axis of topbar 9, only then does it not pop.
  3. Overlay color as a property of the dialog (similar to the sections)