fixed design of reference checkbox in new column view

digitallyinduced · May 11, 2022 · 9b3e2c1 · 9b3e2c1
1 parent d54575e
commit 9b3e2c1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/IHP/IDE/SchemaDesigner/View/Columns/New.hs b/IHP/IDE/SchemaDesigner/View/Columns/New.hs
@@ -97,12 +97,15 @@ instance View NewColumnView where
                 </form>
             |]
                 where
-                    generateReferenceCheckboxes = [hsx|<span id="checkboxes">{forEach tableNames checkbox}</span>|]
+                    generateReferenceCheckboxes = [hsx|{forEach tableNames checkbox}|]
                         where checkbox tableName = [hsx|
-                                    <label class="mx-2 ref" style="font-size: 12px; display: none;" data-attribute={(singularize tableName) <> "_id"} data-table={tableName}>
-                                        <input id="reference" type="checkbox" name="isReference" class="mr-1"/>
-                                        <a id="refText">References {tableName}</a>
-                                    </label>|]
+                                <div class="custom-control custom-checkbox" style="display: none;" data-attribute={(singularize tableName) <> "_id"} data-table={tableName} >
+                                    <input id="reference" type="checkbox" name="isReference" class="mr-1 custom-control-input"/>
+                                    <label class="mx-2 ref custom-control-label" id="refText">
+                                        References {tableName}
+                                    </label>
+                                </div>
+                                |]
                     defaultSelector = [hsx|
                         <select id="defaultSelector" name="defaultValue" class="form-control select2">
                             <option value="" selected={True}>no default</option>

diff --git a/lib/IHP/static/IDE/ihp-schemadesigner.js b/lib/IHP/static/IDE/ihp-schemadesigner.js
@@ -54,7 +54,7 @@ function initSchemaDesigner() {
     $('#typeSelector').change(function () {
         switch (this.value) {
             case "UUID":
-                if ($('label[data-attribute="' + $("#colName").val() +'"]').length == 0) {
+                if ($('div[data-attribute="' + $("#colName").val() +'"]').length == 0) {
                     $('#defaultSelector').empty()
                     .append(new Option("uuid_generate_v4()", 'uuid_generate_v4()', true, true))
                     .append(new Option("no default", "", false, false))
@@ -122,9 +122,9 @@ function initSchemaDesigner() {
     $("#colName").on('input', function () {
         $('.ref').hide();
         $('.ref > input').prop('checked', false);
-        $('label[data-attribute="' + $("#colName").val() +'"]').show();
-        $('label[data-attribute="' + $("#colName").val() +'"] > input').prop('checked', true);
-        $('input[name="referenceTable"]').val($('label[style="font-size: 12px;"]').data("table"));
+        $('div[data-attribute="' + $("#colName").val() +'"]').show();
+        $('div[data-attribute="' + $("#colName").val() +'"] > input').prop('checked', true);
+        $('input[name="referenceTable"]').val($('div[data-attribute="' + $("#colName").val() +'"]').data("table"));
     });
 
     initEnumValueNameSnakeCaseCheck();