wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-14 12:25:17 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix table footer (#2619)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2023-02-11 23:17:17 +06:00 committed by GitHub
parent f7e495b609
commit 65aac9b44f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
plugins/view-resources/src/components/Table.svelte
View File

@ -26,6 +26,7 @@
IconUp, IconUp,
Label, Label,
Loading, Loading,
resizeObserver,
showPopup, showPopup,
Spinner Spinner
} from '@hcengineering/ui' } from '@hcengineering/ui'
@ -211,12 +212,22 @@
const key = attribute.castRequest ? attribute.key.substring(attribute.castRequest.length + 1) : attribute.key const key = attribute.castRequest ? attribute.key.substring(attribute.castRequest.length + 1) : attribute.key
return (value: any) => onChange(value, doc, key, attr) return (value: any) => onChange(value, doc, key, attr)
} }
let width: number
</script> </script>
{#await buildModel({ client, _class, keys: config, lookup })} {#await buildModel({ client, _class, keys: config, lookup })}
<Loading /> <Loading />
{:then model} {:then model}
<table id={tableId} class="antiTable" class:metaColumn={enableChecking || showNotification} class:highlightRows> <table
id={tableId}
use:resizeObserver={(element) => {
width = element.clientWidth
}}
class="antiTable"
class:metaColumn={enableChecking || showNotification}
class:highlightRows
>
{#if !hiddenHeader} {#if !hiddenHeader}
<thead class="scroller-thead"> <thead class="scroller-thead">
<tr class="scroller-thead__tr"> <tr class="scroller-thead__tr">
@ -350,7 +361,8 @@
{#if loading > 0}<Loading />{/if} {#if loading > 0}<Loading />{/if}
{/await} {/await}
{#if showFooter && total} {#if showFooter && total}
<div class="footer"> <div class="space" />
<div class="footer" style="width: {width}px;">
<div class="content" class:padding={showNotification || enableChecking}> <div class="content" class:padding={showNotification || enableChecking}>
<Label label={view.string.Total} />: {total} <Label label={view.string.Total} />: {total}
{#if objects.length > 0 && objects.length < total} {#if objects.length > 0 && objects.length < total}
@ -361,12 +373,17 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
.space {
flex-grow: 1;
height: 100%;
}
.footer { .footer {
width: 100%; width: 100%;
background-color: var(--body-color); background-color: var(--body-color);
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
height: 100%; height: 2.5rem;
z-index: 2; z-index: 2;
position: sticky; position: sticky;
bottom: 0; bottom: 0;