wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 03:40:48 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix Progress and Toggle components (#5401)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2024-04-18 23:47:18 +05:00 committed by GitHub
parent 83725fc541
commit e68837342b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/ui/src/components/Progress.svelte
View File

@ -24,8 +24,8 @@
export let editable = false
$: proc = (max - min) / 100
if (value > max) value = max
if (value < min) value = min
$: if (value > max) value = max
$: if (value < min) value = min
const dispatch = createEventDispatcher()
@ -38,10 +38,10 @@
function calcValue (e: MouseEvent): void {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
const x = e.clientX - rect.left
const pos = x / rect.width
value = (max - min) * pos
if (value > max) value = max
if (value < min) value = min
let pos = x / rect.width
if (pos > 100) pos = 100
if (pos < 0) pos = 0
value = (max - min) * pos + min
}
function save (): void {
@ -57,6 +57,8 @@
}
let drag: boolean = false
$: position = proc !== 0 ? Math.round((value - min) / proc) : 0
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
@ -66,9 +68,7 @@
class="bar"
style="background-color: {color !== undefined
? getPlatformColor(color, $themeStore.dark)
: 'var(--theme-toggle-on-bg-color)'}; width: calc(100% * {proc !== 0
? Math.round((value - min) / proc)
: 0} / 100);"
: 'var(--theme-toggle-on-bg-color)'}; width: calc(100% * {position} / 100 + 0.5rem);"
/>
{#if editable}
<div
@ -76,7 +76,7 @@
on:mousedown={() => {
drag = true
}}
style="left: calc(100% * {proc !== 0 ? Math.round((value - min) / proc) : 0} / 100 - 0.5rem);"
style="left: calc(100% * {position} / 100 - 0.5rem);"
/>
{/if}
</div>
@ -84,7 +84,6 @@
<style lang="scss">
.container {
position: relative;
width: 100%;
height: 0.25rem;
background-color: var(--trans-content-10);
border-radius: 0.125rem;

5
packages/ui/src/components/Toggle.svelte
View File

@ -14,14 +14,17 @@
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import { LabelAndProps } from '../types'
import { tooltip } from '../tooltips'
export let on: boolean = false
export let disabled: boolean = false
export let showTooltip: LabelAndProps | undefined = undefined
const dispatch = createEventDispatcher()
</script>
<label class="toggle">
<label class="toggle" use:tooltip={showTooltip}>
<input
class="chBox"
type="checkbox"