New Experimental Design View

I actually really like the idea of blocks, for me it’s a no-brainer that it should be implemented in Wapplers future versions. Looking especially forward to ecommerce and dashboard blocks.

1 Like

Have Users share Blocks to a ‘Wappler Blocks’ store and sell for a small price, then donate the funds to a worthy cause, voted once a month for by the Users and donated onward to the various causes we adopt…

:wink:

2 Likes

Hey guys, we improved the experimental design panel in the latest update.
It’s should be ready to work with already, please check it and let us know what do you think :slight_smile:

We also added a bunch of new blocks to insert on your page.

2 Likes

Yes, it is greatly improved. But still not quite fully usable. Still no way to add fontawesome icons and still no way to add content inside an element such as a card body or form. Haven’t had much chance to check out the assets panel as 95% of what I do is backend stuff so don’t really deal with assets much. But it looks like a great feature. Same with Blocks, don’t really fit in my workflow but will certainly be a good feature. Amazing how much work you guys do in a week.

2 Likes

Thanks Brad, it’s still an experimental feature (not final version), but editing specific elements will be possible really soon, as well as font awesome :slight_smile:

2 Likes

3 posts were split to a new topic: Automatic links conversion on save

Brad can you please explain a bit more detailed how to reproduce this? I just tested both of the mentioned elements and it seems to be working fine - I don’t see an issue.

Hmmm, on further testing the insert inside button disappears if you already have an element inside. So if you have a column of form with a paragraph in it the insert inside button goes away. I guess this is not a big deal as you can still select an item that is inside and add before or after that. So, I withdraw that. :wink:

I did notice on my further testing though that the only way to delete an element on the page is in the App Connect Panel. I’m sure that is to come yet?

Also the selected tag indicator on the selection in that font os very difficult to read.

I agree with @TomD when he says that some of the tools in the text editing bar are not really needed there. Looks good though. I think I may be able to leave the experimental features turned on. The work you guys do on Wappler amazes me.

That’s exactly how it is supposed to work. Maybe it’s a little smarter than the current workflow, but this is by design. Insert inside only appears for empty elements. If you need to add more elements inside indeed use the before/after buttons.

As for the formatting options in the toolbar and fonts @patrick will improve this further :slight_smile:

Yes, it makes more sense. My first testing was with an element already in the panel or form so I wasn’t seeing it. Makes sense, I’m more than good with it. Looks great. :wink:

1 Like

Ok, this time I found something I don’t like. :wink:

You can’t edit text in a card header.

I know it’s in the properties panel but if you have a bit more than a few letters or in my case some data bindings it is difficult to edit on such a small text box.

48%20PM

Is your card header directly containing the text or is it some p or h tag?

EDIT: I saw what you mean, good catch :slight_smile: we are going to improve that.

1 Like

We want to minimize the number of icons in design view, so we only have icons for some primary actions now. Duplicate (CTRL+D) and Delete (BACKSPACE/DELETE) still work with the keyboard or can be done in the App Structure toolbar. The insert inside is now only on containers that are still empty, when you insert an element you place the next element after or before that element. We removed the insert inside from containers with children since it was often unclear where it would be inserted. To edit text content you have to double click the text (or pressing F2), when there are some text areas that are not editable, then let us know. When in text edit mode, pressing ENTER will apply the changes, pressing ESC will cancel the changes. Also clicking outside the text editing area will apply the changes.

6 Likes

While you try to minimize icons, I really don’t see the benefit of having long strings of text/code in the selection tab. Unless I am missing a specific reason for it?

Just saying ‘Card Header’ would be enough. Again, unless I am missing a purpose for it.

1 Like

We are using the same titles as in the App Structure, didn’t notice there any long titles. Will shorten it for the next update.

Command clicking on elements does not work. For example command clicking on an accordion card header no longer toggles the card. Works fine without experimental features turned on.

Yes, the same issue is on Windows, with the control key. Another example: without this feature, it’s not possible to select other elements in design view if a modal is displayed (without clicking in code view or app structure first).

These issues have been fixed in Wappler 1.9.9

This has also been improved. Now the collapses/accordion cards open on single click (no ctrl is required).
Also we have a new shortcut, the key p which toggles preview mode on/off - could be useful for instant preview.

2 Likes

I think most of the issues have been dealt with and the new design view works very well. However, there is one feature which is still missing and was very useful.

With the previous design view, you could ctrl+click a button which was set to open a modal, and the modal would open. This was the quickest way to work on modals - particularly useful if you’re working on a page with several buttons/modals. Now it’s necessary to switch to App Structure and perhaps expand a couple of nested sections (a lot of my modals are in data details sections), and then click to open the modal - and then back to design view. One click was a lot easier.

It would be great if this functionality could be restored.