Tracker: improve CheckBox (#1356)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
This commit is contained in:
Artyom Grigorovich 2022-04-13 00:12:53 +07:00 committed by GitHub
parent fd92ec7d8c
commit b3d6a11161
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 23 deletions

View File

@ -13,14 +13,26 @@
// limitations under the License.
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
export let checked: boolean = false
export let symbol: 'check' | 'minus' = 'check'
export let circle: boolean = false
export let primary: boolean = false
const dispatch = createEventDispatcher()
const handleValueChanged = (event: Event) => {
const eventTarget = event.target as HTMLInputElement
const isChecked = eventTarget.checked
dispatch('value', isChecked)
}
</script>
<label class="checkbox" class:circle class:primary class:checked>
<input class="chBox" type="checkbox" bind:checked on:change />
<input class="chBox" type="checkbox" bind:checked on:change={handleValueChanged} />
<svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
{#if !circle}
<path

View File

@ -75,11 +75,8 @@
})
}
const handleIssueSelected = (id: Ref<Doc>, event: Event) => {
const eventTarget = event.target as HTMLInputElement
const isChecked = eventTarget.checked
if (isChecked) {
const handleIssueSelected = (id: Ref<Doc>, event: CustomEvent<boolean>) => {
if (event.detail) {
selectedIssueIds.add(id)
} else {
selectedIssueIds.delete(id)
@ -116,7 +113,7 @@
<div class="eListGridCheckBox ml-2">
<CheckBox
checked={selectedIssueIds.has(docObject._id)}
on:change={(event) => {
on:value={(event) => {
handleIssueSelected(docObject._id, event)
}}
/>

View File

@ -48,7 +48,8 @@
const dispatch = createEventDispatcher()
$: sortingFunction = (config.find(it => (typeof it !== 'string') && it.sortingKey === sortKey) as BuildModelKey)?.sortingFunction
$: sortingFunction = (config.find((it) => typeof it !== 'string' && it.sortingKey === sortKey) as BuildModelKey)
?.sortingFunction
let qindex = 0
async function update (
@ -103,11 +104,9 @@
let checked: Set<Ref<Doc>> = new Set<Ref<Doc>>()
function check (id: Ref<Doc>, e: Event) {
function check (id: Ref<Doc>, event: CustomEvent<boolean>) {
if (!enableChecking) return
const target = e.target as HTMLInputElement
const value = target.checked
if (value) {
if (event.detail) {
checked.add(id)
} else {
checked.delete(id)
@ -138,8 +137,8 @@
<CheckBox
symbol={'minus'}
checked={objects?.length === checked.size && objects?.length > 0}
on:change={(e) => {
objects.map((o) => check(o._id, e))
on:value={(event) => {
objects.map((object) => check(object._id, event))
}}
/>
</div>
@ -182,20 +181,23 @@
<div class="antiTable-cells__checkCell">
<CheckBox
checked={checked.has(object._id)}
on:change={(e) => {
check(object._id, e)
on:value={(event) => {
check(object._id, event)
}}
/>
</div>
{/if}
<Component is={notification.component.NotificationPresenter} props={{ value: object, kind: enableChecking ? 'table' : 'block' }} />
<Component
is={notification.component.NotificationPresenter}
props={{ value: object, kind: enableChecking ? 'table' : 'block' }}
/>
</div>
{:else}
<div class="antiTable-cells__checkCell">
<CheckBox
checked={checked.has(object._id)}
on:change={(e) => {
check(object._id, e)
on:value={(event) => {
check(object._id, event)
}}
/>
</div>
@ -209,7 +211,11 @@
value={getObjectValue(attribute.key, object) ?? ''}
{...attribute.props}
/>
<div id='context-menu' class="antiTable-cells__firstCell-menuRow" on:click={(ev) => showMenu(ev, object, row)}>
<div
id="context-menu"
class="antiTable-cells__firstCell-menuRow"
on:click={(ev) => showMenu(ev, object, row)}
>
<MoreV size={'small'} />
</div>
</div>
@ -236,9 +242,7 @@
{#if enableChecking}
<td>
<div class="antiTable-cells__checkCell">
<CheckBox
checked={false}
/>
<CheckBox checked={false} />
</div>
</td>
{/if}