New Experimental Design View

Overall I am excited about the visibility that the new Design Mode view will bring.

I am not sure if my issue classifies as a bug so wanted to ask here first. I am building a Single Page App and after I updated to the new 1.9.7 I no longer see the styles applied to the content pages. So even though bootstrap is applied the content page shows without the CSS applied.

This is what the rendered page looks like:

And since the update to 1.9.7 this is what the content page looks like:

Am I just missing something or should this be a bug report? (I know I can turn off experimental features)

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?

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.

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

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

Maybe it would be useful to support user built blocks?

4 Likes

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.

@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:

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

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.

1 Like

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

1 Like

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.

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 :zipper_mouth_face:

1 Like

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: