RFC: new Design panel - now as Experimental feature

So we have being working hard on this one and now it is available for preview!

So enable first the “experimental” features in the options / system

image

And then you will see the new Design panel:

With some “Advanced” options:

So check it out @psweb, @ben, @brad, @t11, @Hyperbytes, @drymetal and everybody who wants to provide feedback.

It is work in progress, but based on your feedback we will finalize it soon.

1 Like

Definitely trying it out as soon as it installs. Looks interesting

1 Like

This is really great. Messing with it now. Very fast and productive! I’m going to be playing with it today and will share my thoughts. Major step in the right direction.

3 Likes

Tools disappear when chosen flex or inline … have to close and open page to get them back.

disappearingtools.mov (1.3 MB)

1 Like

Thank you @patrick , @George , @Teodor
for new realese wappler 1.2.5 goood job :+1:

To follow up your question about the “advanced” option not sticking on different selection - this is actually by design.

The idea is that we have only advanced and rarely used options under the “ advanced” toggle per group. So you toggle them when you need them. You son’t want all those options to be visible all the time for every element - it will make the UI too complicated

I agree, sort of. I feel that if you select an element that has advanced properties applied to it already it should also toggle to advanced properties on.

1 Like

It’s nice and easy to use, but as it is, you’ll end up with a page full of inline styles - a bit of a mess and difficult to maintain. Will there be an option to transfer these styles to a .css file like in DW? (Or perhaps I’ve missed the point.)

Also, the old styles panel seems to have stopped working, even when I disable the expermental feature. I hadn’t quite got the hang of the existing styles panel but in principal it seemed very good. Hopefully both will be available.

Yes - currently it generates inline styles only. Which are good for individual settings, even better than css classes if only applied to a single element. We will also be making a class selector on top for if you want to make changes to a certain css class and not current element.

Please file a bug about this - the Styles panel is independent and it should work fine.
Also it is not “old” - it is more about css styling - so it will serve as detailed css styling - and the design panel as base design.

1 Like

Also there are some nice UI improvements like, draggable sizing icons on some entries:

image

try dragging those left or right :slight_smile:

2 Likes

2 posts were split to a new topic: Styles panel is empty

The draggable items are great. However, it would be best if the design view actually updated in real time as you dragged. As it is you have to drag, release to see the effects, drag again to adjust, etc. So if the design view actually showed the effects live as it’s being dragged it would be more useful. As it is it is quicker to type a value.

1 Like

Yes this is coming up together with some real-time size indicators in design view and highlighting of the area being edited.

1 Like

Only been playing with the new Design panel for maybe an hour but so far I think you guys have done a great job on it aside from a couple little things. It is going to make a lot of ‘designer oriented’ users very happy. Well done. I’m excited to see where you take this panel.

It’s yet another reason to switch from Dreamweaver.

2 Likes

Very Nice Work! I like it a lot. Looking forward to see you further extend this. I opt in for more advanced border options (top-bottom-left-right) and shadow features!

1 Like

Actually also note how we handled margin and padding options:

image

You can choose first which side or all you want to change - and then enter the value (or drag icon)

This is how we will also do border size and rounded corners

4 Likes

@George, I wonder if it would be better to have a text box to the left, top, right, and bottom of the margin and padding so that you can see all settings at once? And if doing all equally - all 4 just update.

3 Likes

The margin and padding is wonderful. I like that you can adjust the padding/margin on all four sides individually. Very nice.

Small Bug: If you have a paragraph and you adjust the line height you can change it as much as you want as long as you don’t deselect the paragraph. Once you deselect the paragraph and reselect it the line height is no longer editable.

1 Like

Thank You, Thank You & Thank You :smile:
The new Design View is brilliant, I’ve been really swaying over whether or not to stay with Wappler or go back to Pinegrow. The new version of Wappler now gives me the visual feedback straight away that Pinegrow gives.

I’m finding a couple of wee bugs/issues here and there but not enough to stop me from using it with design work :):grin:

Once I have a good play over the weekend I’ll post where I’m finding problems

2 Likes