Rework decision table head

[barmac]

• Only one row for column labels.
• Input/output context menu extended with type ref.
• Moved "add column" button to the right edge of column group.
• Added input/output clauses.
• Moved drag'n'drop handle to top right corner.

Closes #498
Closes #499

[oguzeroglu]

One feedback about this PR: It'd be really nice if the PR is easily reviewable -> Separate commits for each step.

[philippfromme]

@oguzeroglu Since I'm more familiar with this project I can take over the review.

[philippfromme]

One thing I noticed is that adding inputs and outputs has become harder because you only have a tiny button you can click. It used to be an entire cell.

[philippfromme]

Also: There is no indication that the buttons that add columns are interactive other than a cursor: pointer which we don't want. We need another way of indicating that.

[philippfromme]

Have we made any conscious decision about where the watermark should be after changing the table head? Right now it sits quite awkwardly next to the table:

[barmac]

Also: There is no indication that the buttons that add columns are interactive other than a cursor: pointer which we don't want. We need another way of indicating that.

Can you suggest any solution to the problem?

[philippfromme]

Can you suggest any solution to the problem?

I'd probably color the buttons to begin with so they stand out more. I tried a blue background, a white outline and centering them a bit better:

The outline color could change on hover.

[barmac]

For comparison, this is the way we used to highlight the button:

[barmac]

Have we made any conscious decision about where the watermark should be after changing the table head? Right now it sits quite awkwardly next to the table:

Let's discuss it separately.

[philippfromme]

Let's discuss it separately.

In a separate issue you mean?

[barmac]

Exactly. I think it's outside of the scope of this pull request.

[barmac]

I think also that the rebranding stuff will touch the topic of logo position.

[philippfromme]

Alright, so we definitely need to have another hover indication instead of the pointer.

Also: I noticed that the Hit Policy label is the only text in the entire table that's bold. From a visual hierarchy point of view that makes little sense to me.

[philippfromme]

Did we decide to move the View DRD button and logo above the table? I know this wasn't considered in the prototype but we have to deal with it somehow. As I've already pointed out if you do not have the View DRD button the logo ends up right of the table which doesn't seem to be something that we want.

[barmac]

Did we decide to move the View DRD button and logo above the table? I know this wasn't considered in the prototype but we have to deal with it somehow. As I've already pointed out if you do not have the View DRD button the logo ends up right of the table which doesn't seem to be something that we want.

This one slipped as we already disabled the logo in Camunda Modeler. In my opinion the logo should not float to the right as with fixed-width of the columns it might land outside of the area we want it to be, as can be seen on your screenshot.

[philippfromme]

Another question: Have we thought about literal expressions? They also have a header. Have we deliberately decided to not apply the same changes?

[pinussilvestrus]

Have we thought about literal expressions

No, we have not discussed it right now. Maybe it makes sense to have the same changes there (remove id field etc.). But this have to go in another issue.

[nikku]

We should consider aligning both in the next dmn-js release.

[philippfromme]

Maybe we should have a separate issue for literal expressions then.

[pinussilvestrus]

Done: #515

Feel free to add additional work items on the list. Thanks for mentioning this one @philippfromme

[barmac]

I just pushed changed hover indicator. Shipped with increased padding for the button and cursor: pointer removal.

[barmac]

@philippfromme how does it feel now?

[nikku]

Looks much better.

[barmac]

@philippfromme Do I still need to change anything here?

[philippfromme]

Not for now. I'll have another look at this.

[philippfromme]

The clickable area is rectangular whereas the visible button is circular which I find unintuitive. It even partially obscures the text in the cell on the right.

My suggestion is something similar to what I already commented:

I changed a couple of things:

• moved the button 1px to the right so it's more in the center
• smaller padding of 4px so the clickable area doesn't obscure the text in the cell on the right
• made the clickable area circular

• added a box-shadow around the button so is stands out a bit more and doesn't clash with the table borders

[pinussilvestrus]

Looks good 👏 Let's merge this one and wait for feedback