[WIP] form layout is error prone and intimidating (dnd fields)

[djay]

User problem

Currently layout is done with markup and character styles. Less has the following downsides

• it's error prone. Hitting enter after a field will continue the style when the user doesn't intend it.
• you have to know to enter the id name, select it then push the button
• it makes plomino look harder to use than it is
• It's harder to get a feel for the layout of the form
• Styles are only differentiated by colour, which is not accessible

  Options

Use tinymce's noneditable mode and inset representative html for fields, actions and subforms. html doesn't have to be perfect but should try to show what the final result will look like. Labels, displayfields, hidewhens and caches can also use noneditable to take up less space and be less error prone.

Here is an example of WIP for fields

TODO:

• [x] work out html to display for a datagrid
• [x] test inserting subforms
• [x] test inserting action buttons and links
• [x] use noneditible for labels and hidewhens
• [x] handle computed fields
• [x] handle labels
• [ ] make work with IDE
• [x] show hidden fields
• [x] show differences between number and text fields
• [ ] click to edit
• [ ] disable table edit controls for datagrid inserted table
• [ ] replace richtext field with an image
• [ ] handle tabs and outlines being offscreen.

[djay]

@ebrehault hi. Is there any progress of the IDE work? One thing thats unintuitive currently is that you have to type the id first and select it before adding a new field. This is obviously something that will change with the IDE, but if its going to take some time I can probably do a quick fix here.

[ebrehault]

I fixed few bugs in the ide branch before I left to vacations, I guess I need to review it one more time, and then I will release it.

[djay]

This will also fix - https://github.com/plomino/Plomino/issues/626

[djay]

@displacedaussie @ebrehault The current inserting into tinymce is here https://github.com/plomino/Plomino/blob/master/ide/app/editors/tiny-mce.component.ts#L82.

It currently has a bug that it doesn't insert at the cursor. Something like this might fix it - http://blog.squadedit.com/tinymce-and-cursor-position.

Since angular is in typescript we either need to rewrite the code that inserts field etc, or turn it into a function that can be called from TS, or, since we have to do an ajax call to get the widget anyway, we could do it all serverside.