wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-07 00:09:34 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Remove checking from Table (#285)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-10-24 22:38:56 +03:00 committed by GitHub
parent 0d2949a415
commit 441bf232aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,6 @@
} }
const client = getClient() const client = getClient()
let checking: boolean = false
const showMenu = (ev: MouseEvent, object: Doc, row: number): void => { const showMenu = (ev: MouseEvent, object: Doc, row: number): void => {
selectRow = row selectRow = row
@ -72,19 +71,12 @@
</script> </script>
{#await buildModel(client, _class, config, options)} {#await buildModel(client, _class, config, options)}
<Loading/> <Loading/>
{:then model} {:then model}
<table class="table-body"> <table class="table-body">
<thead> <thead>
<tr class="tr-head"> <tr class="tr-head">
{#each model as attribute, cellHead} {#each model as attribute}
{#if !cellHead}
<th>
<div class="checkCell" class:checkall={checking}>
<CheckBox symbol={'minus'} />
</div>
</th>
{/if}
<th class="sortable" class:sorted={attribute.key === sortKey} on:click={() => changeSorting(attribute.key)}> <th class="sortable" class:sorted={attribute.key === sortKey} on:click={() => changeSorting(attribute.key)}>
<div class="flex-row-center"> <div class="flex-row-center">
<Label label = {attribute.label}/> <Label label = {attribute.label}/>
@ -105,10 +97,9 @@
{#if objects} {#if objects}
<tbody> <tbody>
{#each objects as object, row (object._id)} {#each objects as object, row (object._id)}
<tr class="tr-body" class:checking class:fixed={row === selectRow}> <tr class="tr-body" class:fixed={row === selectRow}>
{#each model as attribute, cell} {#each model as attribute, cell}
{#if !cell} {#if !cell}
<td><div class="checkCell"><CheckBox bind:checked={checking} /></div></td>
<td><div class="firstCell"> <td><div class="firstCell">
<svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/> <svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/>
<div class="menuRow" on:click={(ev) => showMenu(ev, object, row)}><MoreV size={'small'} /></div> <div class="menuRow" on:click={(ev) => showMenu(ev, object, row)}><MoreV size={'small'} /></div>
@ -139,23 +130,11 @@
&:hover { opacity: 1; } &:hover { opacity: 1; }
} }
} }
.checkCell {
visibility: hidden;
display: flex;
align-items: center;
}
th, td { th, td {
padding: .5rem 1.5rem; padding: .5rem 1.5rem;
text-align: left; text-align: left;
&:first-child { &:first-child { padding-left: 2.5rem; }
padding: 0 .75rem;
width: 2.5rem;
}
&:nth-child(2) {
padding-left: 0;
// padding-right: 0;
}
} }
th { th {
@ -171,23 +150,18 @@
margin-left: .25rem; margin-left: .25rem;
opacity: .6; opacity: .6;
} }
.checkall { visibility: visible; }
} }
.tr-body { .tr-body {
height: 3.25rem; height: 3.25rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
border-bottom: 1px solid var(--theme-button-border-hovered); border-bottom: 1px solid var(--theme-button-border-hovered);
&:hover, &.checking { &:hover { background-color: var(--theme-table-bg-hover); }
background-color: var(--theme-table-bg-hover);
.checkCell { visibility: visible; }
}
&:hover .firstCell .menuRow { visibility: visible; } &:hover .firstCell .menuRow { visibility: visible; }
} }
.fixed { .fixed {
background-color: var(--theme-table-bg-hover); background-color: var(--theme-table-bg-hover);
.checkCell { visibility: visible; }
.menuRow { visibility: visible; } .menuRow { visibility: visible; }
} }
</style> </style>