RFC: new Design panel - now as Experimental feature

[Charlie_Riley]

Okay the first problem I have is when clicking on Design, then selecting “Advanced” it doesn’t remember the setting, so for example I select another element on the page and then click on Design - “Advanced” settings is off , I have to then select “Advance” again to access all the parameters…would be great if once you click “Advanced” it remembers that setting until you shut down the program or change a project

[Charlie_Riley]

Borders - It would be great if you could select each side individually, going by the current UI you can only have a border all around the element

[Teodor]

Thanks for the feedback Charlie!
Note, that this is an experimental feature (work in progress) and it will be improved and polished in the next updates, so things like borders styling will also be greatly improved

[Hyperbytes]

Brilliant feature and effectively adding it as a beta feature is a great idea, this will allow it to be developed to a tool that everyone has helped craft. An unexpected and welcome surprise!

[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.

Good idea @drymetal - will see if that looks good visually - didn’t want to clutter the box too much with a lot of input controls around. Or do you mean just the numbers?

Maybe a small drawing will help?

Ideally we want to merge the margins and padding controls in one - but with too much visual clutter it will be a challenge. But ideas and proposals are always welcome!

[drymetal]

Kind of like this. Very unobtrusive.

[George]

Yes we were looking at that as example but wanted an even better solution

[TomD]

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.

This would be good but I still think it’s going to be a problem if this tool is going to be used as the main means of applying styles. Eg if I create a default Wappler table and apply a few styles randomly:

The beginning of the resulting code will be:

    <table class="table">
        <thead style="border-style: solid; border-color: rgb(190, 21, 21); border-width: 2px;">
          <tr style="font-size: 17px; color: rgb(216, 19, 19); font-weight: bold; background-color: rgb(200, 202, 190); border-color: rgba(0, 0, 0, 0.84); border-width: 1px; border-radius: 5px; border-style: none;">
            <th scope="col" style="text-align: center;">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col" style="font-style: italic;">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr style="padding: 8px; margin: 11px; height: 12px; font-size: 16px; color: rgba(0, 0, 0, 0.79); background-color: rgb(232, 233, 218);">

A whole page styled in this way would be something to avoid - and Wappler will make it too easy to produce. Of course it’s up to the user, but something like the feature in DW to move inline styles would be very useful - if not in the next version, at least at some point.

[TomD]

Dragging is good, but being able to use arrow keys would also be a good option - probably easier and more precise (and an option in some other programs).

[drymetal]

Will draw a better idea when we get to hotel. On the road today.

[updates]

Hi everybody…
only today I can try for few minutes the new feature and it is fantastic! thank you very much.
tomorrow will have time to sit down on the desk and use it. It was what I was feeling missing in Wappler. Great Job!

[oscreative]

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.

Hi George,
Do you know when this will be available? It would be great to have a choice:

1. to use the design panel to style an element with no class yet attached, and once you’re satisfied to have an input field where you can add a new class name and choose the .css file where you want to transfer the class with css rules to.
2. Have Smart Wappler notice the class element (s) you have selected in code/design view and show the options automatically in the Design panel. All changes you make then in the design panel are saved in the existing class rules.

Right now it is quit cumbersome to add a background image in css. In the style panel there is no browse option, working straight in the css file there is only some smart suggestions, but no options to choose color or browse.
So the (really nice!) design panel is the only option left (beside handcoding, but I always forget the right URL syntax for background images in css and beside that it is really handy to browse for a file) to apply a background image the easy way. But then I need to transfer the css styles from the codeview to my .css file.

Inline CSS is sometimes preferable, but often not. Especially when you work a lot with media queries it is not good to have inline css styles.
I hope you understand my suggestions.