MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixing some UI stuff after discussing with Andrew K - making sure auto-columns always appear at end of table.

This commit is contained in:
mike12345567 2021-02-16 16:22:25 +00:00
parent 1a9d16c8c7
commit cafb50bce6
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -100,6 +100,7 @@
}, },
headerName: value.displayFieldName || key, headerName: value.displayFieldName || key,
field: key, field: key,
autocolumn: !!value.autocolumn,
sortable: true, sortable: true,
cellRenderer: getRenderer({ cellRenderer: getRenderer({
schema: schema[key], schema: schema[key],
@ -114,8 +115,8 @@
minWidth: 200, minWidth: 200,
}) })
} }
// sort auto-columns to the end if they are present
columnDefs = result columnDefs = result.filter(col => !col.autocolumn).concat(result.filter(col => col.autocolumn))
} }
function selectRelationship(row, fieldName) { function selectRelationship(row, fieldName) {

32
packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
View File

@ -59,8 +59,13 @@
on:mouseover={() => (hovered = true)} on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}> on:mouseleave={() => (hovered = false)}>
<div> <div>
<span class="column-header-name">{displayName}</span> <div class="col-icon">
<i class={`${SORT_ICON_MAP[sortDirection]} sort-icon`} /> {#if field.autocolumn}
<i class="auto ri-magic-fill"></i>
{/if}
<span class="column-header-name">{displayName}</span>
</div>
<i class={`${SORT_ICON_MAP[sortDirection]} sort-icon icon`} />
</div> </div>
<Modal bind:this={modal}> <Modal bind:this={modal}>
<ModalContent <ModalContent
@ -73,11 +78,11 @@
<section class:show={hovered || filterActive}> <section class:show={hovered || filterActive}>
{#if editable && hovered} {#if editable && hovered}
<span on:click|stopPropagation={showModal}> <span on:click|stopPropagation={showModal}>
<i class="ri-pencil-line" /> <i class="ri-pencil-line icon" />
</span> </span>
{/if} {/if}
<span on:click|stopPropagation={toggleMenu} bind:this={menuButton}> <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
<i class="ri-filter-line" class:active={filterActive} /> <i class="ri-filter-line icon" class:active={filterActive} />
</span> </span>
</section> </section>
</header> </header>
@ -117,18 +122,29 @@
top: 2px; top: 2px;
} }
i { .icon {
transition: 0.2s all; transition: 0.2s all;
font-size: var(--font-size-m); font-size: var(--font-size-m);
font-weight: 500; font-weight: 500;
} }
i:hover { .col-icon {
display: flex;
}
.auto {
font-size: var(--font-size-xs);
transition: none;
margin-right: 6px;
margin-top: 2px;
}
.icon:hover {
color: var(--blue); color: var(--blue);
} }
i.active, .icon.active,
i:hover { .icon:hover {
color: var(--blue); color: var(--blue);
} }
</style> </style>

4
packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
View File

@ -14,10 +14,10 @@
<div bind:this={anchor}> <div bind:this={anchor}>
<TextButton text small on:click={hideOrUnhide}> <TextButton text small on:click={hideOrUnhide}>
{#if hideAutocolumns} {#if hideAutocolumns}
<i class="ri-magic-fill"></i> <i class="ri-magic-line"></i>
Show Auto Columns Show Auto Columns
{:else} {:else}
<i class="ri-magic-line"></i> <i class="ri-magic-fill"></i>
Hide Auto Columns Hide Auto Columns
{/if} {/if}
</TextButton> </TextButton>