minor ui improvements

2023-02-21 22:24:49 +02:00
parent 4fdc8feafc
commit 0db6c783cd
40 changed files with 358 additions and 295 deletions
@@ -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>
@@ -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>
@@ -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}
@@ -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;
@@ -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',
        );

@@ -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>
@@ -511,7 +511,6 @@ a,
    background: var(--baseAlt2Color);
    border-radius: var(--baseRadius);
    color: var(--txtPrimaryColor);
-    font-size: 1.16rem;
    @include shadowize();
    i {
        font-size: inherit;
@@ -565,6 +565,9 @@ select {
        }
    }
    &.disabled {
+        label, %input {
+            box-shadow: inset 0 0 0 var(--btnHeight) rgba(#fff, 0.45);
+        }
        > label {
            color: var(--txtDisabledColor);
        }
@@ -629,6 +629,29 @@ export default class CommonHelper {
        return result.join(separator);
    }

+    /**
+     * Extract the user initials from the provided username or email address
+     * (eg. converts "john.doe@example.com" to "JD").
+     *
+     * @param  {String} str
+     * @return {String}
+     */
+    static getInitials(str) {
+        str = (str || '').split('@')[0].trim();
+
+        if (str.length <= 2) {
+            return str.toUpperCase();
+        }
+
+        const parts = str.split(/[\.\_\-\ ]/);
+
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+
+        return str[0].toUpperCase();
+    }
+
    /**
     * Returns a DateTime instance from a date object/string.
     *
@@ -872,8 +895,6 @@ export default class CommonHelper {
            "id": "RECORD_ID",
            "collectionId": collection?.id,
            "collectionName": collection?.name,
-            "created": "2022-01-01 01:00:00.123Z",
-            "updated": "2022-01-01 23:59:59.456Z",
        };

        if (collection?.isAuth) {
@@ -883,6 +904,16 @@ export default class CommonHelper {
            dummy["email"] = "test@example.com";
        }

+        const hasCreated = !collection?.isView || CommonHelper.extractColumnsFromQuery(collection?.options?.query).includes("created");
+        if (hasCreated) {
+            dummy["created"] = "2022-01-01 01:00:00.123Z";
+        }
+
+        const hasUpdated = !collection?.isView || CommonHelper.extractColumnsFromQuery(collection?.options?.query).includes("updated");
+        if (hasUpdated) {
+            dummy["updated"] = "2022-01-01 23:59:59.456Z";
+        }
+
        for (const field of fields) {
            let val = null;
            if (field.type === "number") {