Support django-jsonform

[globophobe]

Previously, I hacked https://github.com/wagtail-deprecated/wagtail-react-streamfield to work in the django admin. It seemed good because I could have foreign keys, and m2m relationships. But it didn't integrate so well with the admin visually, and it has completely merged with wagtail, so development has stopped.

It seems that django-jsonform can do the same thing now. So, I think I would like to consider supporting it

[captain828]

As someone actively using it with semantic-admin, it's just styling that would have to be overwritten for it.
Functionality-wise, everything is working fine out of the box.

Here is how I got it to look with just some style overrides:

where config is a django-jsonform

Error handling outside a django-jsonform needs to be changed:

generic message is shown below the field

Error handling inside the form is handled by django-jsonform correctly so nothing to fix there besides styling:

If you're interested I can send you the style overrides I'm currently using.
They are quick and dirty but they work and could be a good foundation to start from.

One cool functionality that could be added with this is the ability to toggle the JSON view.

[globophobe]

Oh, that would be really useful!

One thing I'm unsure about is a complete Semantic UI theme seems like it might require forking https://github.com/bhch/react-json-form 🤔

I want to change these to Semantic UI autocompletes https://bhch.github.io/react-json-form/playground/#11-autocomplete

[captain828]

Here is the base_site.html template I'm using with the overrides:

{% extends "admin/base_site.html" %}
{% block extrastyle %}
    <style>
        fieldset.module.aligned {
            border: 0 !important;
            padding: 0 !important;
        }
        .rjf-form-group {
            max-width: 100% !important;
            margin-bottom: 0 !important;
            margin-top: 10px !important;
        }
        .rjf-form-row input, .rjf-form-row select {
            max-width: 100% !important;
        }
        .rjf-form-row-controls + .rjf-form-row-inner {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .rjf-form-row label + .rjf-input-group, .rjf-oneof-selector label + .rjf-input-group > .rjf-oneof-selector-input {
            width: 100% !important;
        }
        .rjf-form-group-wrapper {
            max-width: 100% !important;
        }
        .rjf-help-text {
            font-size: 1em !important;
            color: #777 !important;
        }
        .rjf-collapsed-indicator span {
            background-color: #fff !important;
        }
        .rjf-add-button{
            cursor: pointer;
            display: inline-block;
            min-height: 1em;
            outline: 0;
            border: none !important;
            vertical-align: baseline;
            color: rgba(0,0,0,.6);
            font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
            margin: 0 0.25em 0 0 !important;
            padding: 0.78571429em 1.5em 0.78571429em !important;
            text-transform: none;
            text-shadow: none;
            font-weight: 700;
            line-height: 1em;
            font-style: normal;
            text-align: center;
            text-decoration: none;
            border-radius: 0.28571429rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease !important;
            transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease !important;
            transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease !important;
            transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease !important;
            will-change: auto !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset !important;
            box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;
            background-color: #2185d0 !important;
            color: #fff !important;
            background-image: none !important;
            font-size: 1rem !important;
            margin-top: 10px !important;
        }
        .rjf-add-button:hover {
            background-color: #1678c2 !important;
        }
        .rjf-form-group-wrapper .rjf-form-row-controls {
            top: 0 !important;
        }
        .rjf-form-row-controls button {
            border: 1px solid #ddd !important;
        }
        .rjf-form-row-controls:has(.rjf-remove-button:hover) + .rjf-form-row-inner,
        .rjf-form-row-controls:has(.rjf-remove-button:hover) + .rjf-form-group {
            background-color: #ffe5e5 !important;
        }
        .rjf-form-group-wrapper:nth-child(odd) {
            background-color: #fff !important;
        }
        .rjf-form-group-wrapper:nth-child(even) {
            background-color: #f5f5f5 !important;
        }
        .rjf-form-group-wrapper:nth-child(even) * {
            border-color: #c7c7c7 !important;
        }
        .ui.form input[type=checkbox] {
            vertical-align: middle !important;
        }
    </style>
{% endblock %}

Very ugly but it gets the job done for what I need.

Since there is bhch/react-json-form#89, the author also wants to add UI customization.
I think that would be the ideal approach for adding proper semantic UI compatibility.

[globophobe]

After trying to update https://github.com/bhch/react-json-form it seems a lot of customization is required, so closing this for now