New Experimental Design View

[brad]

Hi Arnold,

Probably should have started a new topic for this so the team can track it.

Have you tried turning the experimental features off and see if it still persists? How about closing and re-opening the file?

[ASmyth]

Thanks Tom, yes please report all issues here.

Ya @brad - was wondering about that but read George’s comment above. I guess they can move it if they want.

With experimental features off it does not persist. Closing and re-reopening does not help. I also created a completely clean new file and content page and it still persisted.

[nshkrsh]

clicking the pencil icon does allow us to edit the text (in Para).

[swf]

These blocks are an awesome idea! Thanks to George and his crew, great work!

Maybe it would be useful to support user built blocks?

[mrbdrm]

i like the idea of experimental features
but there is no point for us to check it if its released in so early stage like this.
whats the point to report a bug or missing element when you already know that its missing by design since its not even ready to be tested?

you guys should release this as experimental when its at least 90% ready. so we can give you some feedback.

[Teodor]

@mrbdrm

Actually it’s better to collect feedback from you guys at early stages, so you can check and explain what you like and what you don’t like there and think should be changed. All of this is not (only) about the bugs.
There is no point to introduce something 90% ready if then the users won’t like it and then it has to completely re-done.

The idea of early preview is to get idea of the overall experience using these new options.

I.e. - you may not like the new hover icons, or you may not like how the new actions for selecting image/video source inline works … or you may not like the tabs switching the elements/blocks etc.

We already got some really nice ideas about the new options, shared by other users:

Separate View States for Element and Block Views

the view state for both elements and blocks are the same, if you change to tile view in blocks tabs, it will change in the element tab as well. [image] request to please allow for separate view states for both tabs. want to achieve something like this: tile view for blocks tab list view for elements tab without having to change the views again and again when we change the tab. thank you.

Option to Disable Wappler's In App Animations

the in app Animation of Wappler are a good touch from UX perspective. love the animation added to tthe elements popup in 1.9.7. however, request for an option to disable these animations completely. reason: lately, we’ve been working on an AWS windows instance remotely for a client. what happens with in app animations is that things appear too slow many times. an example: [image] you can see the load of the popup was so slow on the remote instance i could comfortably take a screenshot of…

Also you can already check many of the things like:

• new elements insert dialog / its animations / tabs
• add blocks to your page
• new insert image source / video source options
• new text edit options
• new hover colors/styles/icons

[mrbdrm]

i have test the new design view my thoughts

-cant see the margin and padding for the elements like i used to see before.(very bad)
-images and video source is not that important since we make dynamic pages to begin with most of the time.
-text edit options are also not important since we make dynamic pages most of the time.

the old highlighting of the selected elements are much more better and easy to understand

for the insert elements/blocks window
-like the new animations.
-like that we can change the elements display grid
-blocks are nice and will save a lot of time too. it will be better if users can create and share them too.

[Teodor]

Thanks for the feedback!
The margin/padding highlight coloring is getting improved for the next update.

[TomD]

Strangely, the first thing I noticed was the margin/padding - and it seems better in the new design view. It may be partly because the new UI is so much more responsive but I thought it was clearer. I hope you don’t change/improve it too much.

I’m using a Windows computer in case that’s the issue. (If highlighting is ever so clear in code view, I shall be very happy - but in this case, it’s better on the Mac.)

I agree that sharing or creating our own blocks would be very useful. Perhaps it could be combined with a ‘snippets’ feature.

[vdweyer]

Many things go wrong in the new design view. Too much to list them up now because too much work.
Even simpel editing in design runs badly. Changes made in Style panel are not accepted etc, etc…
I have to do much in codeview to let it work

[nevil]

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.

[Dave]

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…

[Teodor]

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

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

[brad]

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.

[Teodor]

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

[Teodor]

still no way to add content inside an element such as a card body or form.

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.

[brad]

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.

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.

[Teodor]

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

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

[brad]

That’s exactly how it is supposed to work

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.