[#2318] updated schema fields ui

ui/src/components/collections/CollectionFieldsTab.svelte

@@ -143,7 +143,7 @@
     </p>
 </div>
 
-<div class="accordions schema-fields">
+<div class="schema-fields">
     {#each collection.schema as field, i (field)}
         <svelte:component
             this={fieldComponents[field.type]}

ui/src/components/collections/schema/NewField.svelte

@@ -71,7 +71,7 @@
     }
 </script>
 
-<button type="button" class={classes} on:click={dispatch}>
+<button type="button" class="field-types-btn {classes}" on:click={dispatch}>
     <i class="ri-add-line" />
     <div class="txt">New field</div>
     <Toggler class="dropdown field-types-dropdown">
@@ -96,13 +96,17 @@
 </button>
 
 <style lang="scss">
+    .field-types-btn.active {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
     :global(.field-types-dropdown) {
         display: flex;
         flex-wrap: wrap;
         width: 100%;
         max-width: none;
         padding: 10px;
-        margin: 0;
+        margin-top: 2px;
         border: 0;
         box-shadow: 0px 0px 0px 2px var(--primaryColor);
         border-top-left-radius: 0;

ui/src/components/collections/schema/SchemaField.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+    let siblings = [];
+</script>
+
 <script>
     import { createEventDispatcher, onMount } from "svelte";
     import { slide } from "svelte/transition";
@@ -12,10 +16,13 @@
     export let field = new SchemaField();
 
     let nameInput;
-    let optionsTrigger;
     let isDragOver = false;
+    let showOptions = false;
+
+    const componentId = "f_" + CommonHelper.randomString(8);
 
     const dispatch = createEventDispatcher();
+
     const customRequiredLabels = {
         // type => label
         bool: "Nonfalsey",
@@ -66,17 +73,54 @@
         return CommonHelper.slugify(name);
     }
 
+    function expand() {
+        showOptions = true;
+        collapseSiblings();
+    }
+
+    function collapse() {
+        showOptions = false;
+    }
+
+    function toggle() {
+        if (showOptions) {
+            collapse();
+        } else {
+            expand();
+        }
+    }
+
+    function collapseSiblings() {
+        for (let f of siblings) {
+            if (f.id == componentId) {
+                continue;
+            }
+            f.collapse();
+        }
+    }
+
     onMount(() => {
+        siblings.push({
+            id: componentId,
+            collapse: collapse,
+        });
+
         if (field.onMountSelect) {
             field.onMountSelect = false;
             nameInput?.select();
         }
+
+        return () => {
+            CommonHelper.removeByKey(siblings, "id", componentId);
+        };
     });
 </script>
 
 <div
     draggable={true}
     class="schema-field"
+    class:required={field.required}
+    class:expanded={showOptions}
     class:drag-over={isDragOver}
     transition:slide|local={{ duration: 150 }}
     on:dragstart={(e) => {
@@ -154,7 +198,9 @@
             />
         </Field>
 
-        <slot {interactive} {hasErrors} />
+        <slot {interactive} {hasErrors}>
+            <span class="separator" />
+        </slot>
 
         {#if field.toDelete}
             <button
@@ -168,20 +214,22 @@
             </button>
         {:else if interactive}
             <button
-                bind:this={optionsTrigger}
                 type="button"
-                aria-label="Field options"
-                class="btn btn-sm btn-circle btn-transparent options-trigger {hasErrors
-                    ? 'btn-danger'
-                    : 'btn-hint'}"
+                aria-label="Toggle field options"
+                class="btn btn-sm btn-circle options-trigger {showOptions
+                    ? 'btn-secondary'
+                    : 'btn-transparent'}"
+                class:btn-hint={!showOptions && !hasErrors}
+                class:btn-danger={hasErrors}
+                on:click={toggle}
             >
                 <i class="ri-settings-3-line" />
             </button>
         {/if}
     </div>
 
-    {#if interactive}
-        <Toggler class="dropdown dropdown-block schema-field-dropdown" trigger={optionsTrigger}>
+    {#if interactive && showOptions}
+        <div class="schema-field-options" transition:slide|local={{ duration: 150 }}>
             <div class="grid grid-sm">
                 <div class="col-sm-12 hidden-empty">
                     <slot name="options" {interactive} {hasErrors} />
@@ -231,6 +279,6 @@
                     </div>
                 {/if}
             </div>
-        </Toggler>
+        </div>
     {/if}
 </div>

ui/src/components/collections/schema/SchemaFieldFile.svelte

@@ -82,6 +82,8 @@
     {...$$restProps}
 >
     <svelte:fragment let:interactive>
+        <div class="separator" />
+
         <Field
             class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
             inlineError
@@ -94,6 +96,8 @@
                 bind:keyOfSelected={isSingle}
             />
         </Field>
+
+        <div class="separator" />
     </svelte:fragment>
 
     <svelte:fragment slot="options">

ui/src/components/collections/schema/SchemaFieldRelation.svelte

@@ -101,8 +101,10 @@
     {...$$restProps}
 >
     <svelte:fragment let:interactive>
+        <div class="separator" />
+
         <Field
-            class="form-field required {!interactive ? 'disabled' : ''}"
+            class="form-field required {!interactive ? 'readonly' : ''}"
             inlineError
             name="schema.{key}.options.collectionId"
             let:uniqueId
@@ -131,6 +133,8 @@
             </ObjectSelect>
         </Field>
 
+        <div class="separator" />
+
         <Field
             class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
             inlineError
@@ -143,6 +147,8 @@
                 bind:keyOfSelected={isSingle}
             />
         </Field>
+
+        <div class="separator" />
     </svelte:fragment>
 
     <svelte:fragment slot="options">

ui/src/components/collections/schema/SchemaFieldSelect.svelte

@@ -52,6 +52,8 @@
     {...$$restProps}
 >
     <svelte:fragment let:interactive>
+        <div class="separator" />
+
         <Field
             class="form-field required {!interactive ? 'disabled' : ''}"
             inlineError
@@ -68,6 +70,9 @@
                 />
             </div>
         </Field>
+
+        <div class="separator" />
+
         <Field
             class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
             inlineError
@@ -80,6 +85,8 @@
                 bind:keyOfSelected={isSingle}
             />
         </Field>
+
+        <div class="separator" />
     </svelte:fragment>
 
     <svelte:fragment slot="options">