wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-01-24 20:40:59 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Table footer left sticky (#2604)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2023-02-08 16:27:25 +06:00 committed by GitHub
parent 769c9bd341
commit da7ea2a734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -362,6 +362,7 @@
<style lang="scss">
.footer {
width: 100%;
background-color: var(--body-color);
display: flex;
align-items: flex-end;
@ -369,12 +370,14 @@
z-index: 2;
position: sticky;
bottom: 0;
box-shadow: inset 0 1px 0 0 var(--divider-color);
.content {
display: flex;
align-items: center;
width: 100%;
box-shadow: inset 0 1px 0 0 var(--divider-color);
width: max-content;
position: sticky;
left: 0;
height: 2.5rem;
&.padding {
padding-left: 2.5rem;

113
plugins/view-resources/src/components/ViewletSetting.svelte
View File

@ -21,6 +21,7 @@
Button,
getEventPositionElement,
getPlatformColorForText,
Loading,
SelectPopup,
showPopup,
ToggleButton
@ -45,6 +46,7 @@
(res) => {
preference = res[0]
attributes = getConfig(viewlet, preference)
loading = false
},
{ limit: 1 }
)
@ -55,7 +57,8 @@
const client = getClient()
const hierarchy = client.getHierarchy()
const dispatch = createEventDispatcher()
let attributes = getConfig(viewlet, preference)
let attributes: AttributeConfig[] = []
let loading = true
interface AttributeConfig {
enabled: boolean
@ -307,60 +310,64 @@
dispatch('close')
}}
>
<div class="flex-row-stretch flex-wrap">
{#each enabled as attribute, i}
<div
class="m-0-5 border-radius-1 overflow-label"
style={getStyle(attribute)}
bind:this={elements[i]}
draggable={true}
on:dragover|preventDefault={(ev) => {
dragover(ev, i)
}}
on:drop|preventDefault
on:dragstart={() => {
selected = i
}}
on:dragend={() => {
selected = undefined
}}
>
<ToggleButton
backgroundColor={getColor(attribute)}
icon={attribute.icon}
label={attribute.label}
bind:value={attribute.enabled}
/>
</div>
{/each}
</div>
<div class="flex-row-stretch flex-wrap">
{#each Array.from(classes.keys()) as _class}
<div class="m-0-5">
<Button
label={getClassLabel(_class)}
on:click={(e) => {
showPopup(
SelectPopup,
{
value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
},
getEventPositionElement(e),
(val) => {
if (val !== undefined) {
const value = classes.get(_class)?.find((it) => it.value === val)
if (value) {
value.enabled = true
attributes = attributes
{#if loading}
<Loading />
{:else}
<div class="flex-row-stretch flex-wrap">
{#each enabled as attribute, i}
<div
class="m-0-5 border-radius-1 overflow-label"
style={getStyle(attribute)}
bind:this={elements[i]}
draggable={true}
on:dragover|preventDefault={(ev) => {
dragover(ev, i)
}}
on:drop|preventDefault
on:dragstart={() => {
selected = i
}}
on:dragend={() => {
selected = undefined
}}
>
<ToggleButton
backgroundColor={getColor(attribute)}
icon={attribute.icon}
label={attribute.label}
bind:value={attribute.enabled}
/>
</div>
{/each}
</div>
<div class="flex-row-stretch flex-wrap">
{#each Array.from(classes.keys()) as _class}
<div class="m-0-5">
<Button
label={getClassLabel(_class)}
on:click={(e) => {
showPopup(
SelectPopup,
{
value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
},
getEventPositionElement(e),
(val) => {
if (val !== undefined) {
const value = classes.get(_class)?.find((it) => it.value === val)
if (value) {
value.enabled = true
attributes = attributes
}
}
}
}
)
}}
/>
</div>
{/each}
</div>
)
}}
/>
</div>
{/each}
</div>
{/if}
<svelte:fragment slot="footer">
<Button label={view.string.RestoreDefaults} on:click={restoreDefault} />
</svelte:fragment>