filter enhancements

ui/src/components/collections/RuleField.svelte

@@ -4,7 +4,6 @@
 
 <script>
     import { tick } from "svelte";
-    import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
 
     export let collection = null;
@@ -20,6 +19,8 @@
 
     $: isAdminOnly = rule === null;
 
+    loadEditorComponent();
+
     async function loadEditorComponent() {
         if (ruleInputComponent || isRuleComponentLoading) {
             return; // already loaded or in the process
@@ -34,7 +35,16 @@
         isRuleComponentLoading = false;
     }
 
-    loadEditorComponent();
+    async function unlock() {
+        rule = tempValue || "";
+        await tick();
+        editorRef?.focus();
+    }
+
+    async function lock() {
+        tempValue = rule;
+        rule = null;
+    }
 </script>
 
 {#if isRuleComponentLoading}
@@ -42,80 +52,60 @@
         <span class="loader" />
     </div>
 {:else}
-    <div class="rule-block">
-        {#if isAdminOnly}
-            <button
-                type="button"
-                class="rule-toggle-btn btn btn-circle btn-outline btn-success"
-                use:tooltip={{
-                    text: "Unlock and set custom rule",
-                    position: "left",
-                }}
-                on:click={async () => {
-                    rule = tempValue || "";
-                    await tick();
-                    editorRef?.focus();
-                }}
-            >
-                <i class="ri-lock-unlock-line" />
-            </button>
-        {:else}
-            <button
-                type="button"
-                class="rule-toggle-btn btn btn-circle btn-outline"
-                use:tooltip={{
-                    text: "Lock and set to Admins only",
-                    position: "left",
-                }}
-                on:click={() => {
-                    tempValue = rule;
-                    rule = null;
-                }}
-            >
-                <i class="ri-lock-line" />
-            </button>
-        {/if}
-
-        <Field
-            class="form-field rule-field m-0 {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
-            name={formKey}
-            let:uniqueId
-        >
-            <label for={uniqueId}>
+    <Field
+        class="form-field rule-field m-0 {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
+        name={formKey}
+        let:uniqueId
+    >
+        <label for={uniqueId}>
+            <span class="txt">
                 {label} - {isAdminOnly ? "Admins only" : "Custom rule"}
-            </label>
+            </span>
 
-            <svelte:component
-                this={ruleInputComponent}
-                id={uniqueId}
-                bind:this={editorRef}
-                bind:value={rule}
-                baseCollection={collection}
-                disabled={isAdminOnly}
-            />
+            {#if isAdminOnly}
+                <button type="button" class="lock-toggle link-success" on:click={unlock}>
+                    <i class="ri-lock-unlock-line" />
+                    <span class="txt">Set custom rule</span>
+                </button>
+            {:else}
+                <button type="button" class="lock-toggle link-hint" on:click={lock}>
+                    <i class="ri-lock-line" />
+                    <span class="txt">Set Admins only</span>
+                </button>
+            {/if}
+        </label>
 
-            <div class="help-block">
-                <slot {isAdminOnly}>
-                    <p>
-                        {#if isAdminOnly}
-                            Only admins will be able to perform this action (unlock to change)
-                        {:else}
-                            Leave empty to grant everyone access
-                        {/if}
-                    </p>
-                </slot>
-            </div>
-        </Field>
-    </div>
+        <svelte:component
+            this={ruleInputComponent}
+            id={uniqueId}
+            bind:this={editorRef}
+            bind:value={rule}
+            baseCollection={collection}
+            disabled={isAdminOnly}
+        />
+
+        <div class="help-block">
+            <slot {isAdminOnly}>
+                <p>
+                    {#if isAdminOnly}
+                        Only admins will be able to perform this action (
+                        <button type="button" class="link-hint" on:click={unlock}>unlock to change</button>
+                        ).
+                    {:else}
+                        Leave empty to grant everyone access.
+                    {/if}
+                </p>
+            </slot>
+        </div>
+    </Field>
 {/if}
 
 <style>
-    .rule-block {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--xsSpacing);
-    }
-    .rule-toggle-btn {
-        margin-top: 15px;
+    .lock-toggle {
+        margin-left: auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        font-size: var(--smFontSize);
     }
 </style>