minor ui improvements

ui/src/components/base/InitialsAvatar.svelte

@@ -0,0 +1,29 @@
+<script>
+    import CommonHelper from "@/utils/CommonHelper";
+
+    export let value;
+
+    let classes = undefined;
+    export { classes as class }; // export reserved keyword
+</script>
+
+<figure class="thumb thumb-circle {classes}">
+    <span class="txt initials">{CommonHelper.getInitials(value)}</span>
+    <slot />
+</figure>
+
+<style>
+    .initials {
+        font-weight: bold;
+        font-size: 0.9em;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 1;
+        margin-right: -1px;
+        color: var(--bodyColor);
+    }
+    .thumb {
+        background: var(--primaryColor);
+    }
+</style>

ui/src/components/collections/CollectionQueryTab.svelte

@@ -61,7 +61,9 @@
 </script>
 
 <Field class="form-field required {schemaErrors.length ? 'error' : ''}" name="options.query" let:uniqueId>
-    <label for={uniqueId}>Select query</label>
+    <label for={uniqueId}>
+        <span class="txt">Select query</span>
+    </label>
 
     {#if isCodeEditorComponentLoading}
         <textarea disabled rows="7" placeholder="Loading..." />
@@ -83,11 +85,11 @@
 
     <div class="help-block">
         <ul>
-            <li>Wildcard (<code>*</code>) columns are not supported.</li>
+            <li>Wildcard columns (<code>*</code>) are not supported.</li>
             <li>
                 The query must have a unique <code>id</code> column.
                 <br />
-                If your query doesn't have a suitable one, you can use
+                If your query doesn't have a suitable one, you can use the universal
                 <code>(ROW_NUMBER() OVER()) as id</code>.
             </li>
         </ul>

ui/src/components/collections/CollectionRulesTab.svelte

@@ -11,7 +11,7 @@
     let showFiltersInfo = false;
 </script>
 
-<div class="block m-b-base">
+<div class="block m-b-base handle" class:fade={!showFiltersInfo}>
     <div class="flex txt-sm txt-hint m-b-5">
         <p>
             All rules follow the
@@ -75,26 +75,26 @@
     {/if}
 </div>
 
-<RuleField label="List/Search action" formKey="listRule" {collection} bind:rule={collection.listRule} />
+<RuleField label="List/Search rule" formKey="listRule" {collection} bind:rule={collection.listRule} />
 
 <hr class="m-t-sm m-b-sm" />
-<RuleField label="View action" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
+<RuleField label="View rule" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
 
 {#if !collection?.isView}
     <hr class="m-t-sm m-b-sm" />
-    <RuleField label="Create action" formKey="createRule" {collection} bind:rule={collection.createRule} />
+    <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
 
     <hr class="m-t-sm m-b-sm" />
-    <RuleField label="Update action" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
+    <RuleField label="Update rule" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
 
     <hr class="m-t-sm m-b-sm" />
-    <RuleField label="Delete action" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
+    <RuleField label="Delete rule" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
 {/if}
 
 {#if collection?.isAuth}
     <hr class="m-t-sm m-b-sm" />
     <RuleField
-        label="Manage action"
+        label="Manage rule"
         formKey="options.manageRule"
         {collection}
         bind:rule={collection.options.manageRule}

ui/src/components/collections/RuleField.svelte

@@ -58,8 +58,11 @@
         let:uniqueId
     >
         <label for={uniqueId}>
-            <span class="txt">
-                {label} - {isAdminOnly ? "Admins only" : "Custom rule"}
+            <span class="txt" class:txt-hint={isAdminOnly}>
+                {label}
+            </span>
+            <span class="label label-sm" class:label-danger={!isAdminOnly}>
+                {isAdminOnly ? "Admins only" : "Custom rule"}
             </span>
 
             {#if isAdminOnly}
@@ -69,7 +72,7 @@
                     on:click={unlock}
                 >
                     <i class="ri-lock-unlock-line" />
-                    <span class="txt">Set custom rule</span>
+                    <span class="txt">Enable custom rule</span>
                 </button>
             {:else}
                 <button
@@ -97,7 +100,7 @@
                 <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>
+                        <button type="button" class="link-primary" on:click={unlock}>unlock to change</button>
                         ).
                     {:else}
                         Leave empty to grant everyone access.
@@ -109,6 +112,9 @@
 {/if}
 
 <style>
+    label .label {
+        margin: -5px 0;
+    }
     .lock-toggle {
         position: absolute;
         right: 0px;

ui/src/components/collections/docs/ListApiDocs.svelte

@@ -81,7 +81,7 @@
         });
 
         // you can also fetch all records at once via getFullList
-        const records = await pb.collection('${collection?.name}').getFullList(200 /* batch size */, {
+        const records = await pb.collection('${collection?.name}').getFullList({
             sort: '-created',
         });
 
@@ -106,7 +106,6 @@
 
         // you can also fetch all records at once via getFullList
         final records = await pb.collection('${collection?.name}').getFullList(
-          batch: 200,
           sort: '-created',
         );
 

ui/src/components/records/fields/FileField.svelte

@@ -128,7 +128,7 @@
                 <figure class="thumb">
                     <UploadedFilePreview {file} />
                 </figure>
-                <div class="filename" title={file.name}>
+                <div class="filename m-r-auto" title={file.name}>
                     <small class="label label-success m-r-5">New</small>
                     <span class="txt">{file.name}</span>
                 </div>
@@ -143,30 +143,29 @@
             </div>
         {/each}
 
-        {#if !maxReached}
-            <div class="list-item list-item-btn">
-                <input
-                    bind:this={fileInput}
-                    type="file"
-                    class="hidden"
-                    multiple={isMultiple}
-                    on:change={() => {
-                        for (let file of fileInput.files) {
-                            uploadedFiles.push(file);
-                        }
-                        uploadedFiles = uploadedFiles;
-                        fileInput.value = null; // reset
-                    }}
-                />
-                <button
-                    type="button"
-                    class="btn btn-transparent btn-sm btn-block"
-                    on:click={() => fileInput?.click()}
-                >
-                    <i class="ri-upload-cloud-line" />
-                    <span class="txt">Upload new file</span>
-                </button>
-            </div>
-        {/if}
+        <div class="list-item list-item-btn">
+            <input
+                bind:this={fileInput}
+                type="file"
+                class="hidden"
+                multiple={isMultiple}
+                on:change={() => {
+                    for (let file of fileInput.files) {
+                        uploadedFiles.push(file);
+                    }
+                    uploadedFiles = uploadedFiles;
+                    fileInput.value = null; // reset
+                }}
+            />
+            <button
+                type="button"
+                class="btn btn-transparent btn-sm btn-block"
+                disabled={maxReached}
+                on:click={() => fileInput?.click()}
+            >
+                <i class="ri-upload-cloud-line" />
+                <span class="txt">Upload new file</span>
+            </button>
+        </div>
     </div>
 </Field>