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

Added ModernToggle component (#5375)

Browse Source 
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2024-04-16 23:20:51 +03:00 committed by GitHub
parent 11599a51bf
commit 82e1b734de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 174 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/theme/styles/_lumia-colors.scss
View File

@ -25,6 +25,10 @@
--button-negative-hover-BackgroundColor: #e34748;
--button-negative-active-BackgroundColor: #c42a32;
--selector-active-BackgroundColor: #3364e2;
--selector-IconColor: #ffffff;
--selector-disabled-IconColor: #8b97ad;
--tag-on-accent-PorpoiseText: #FFFFFF;
--tag-accent-SunshineBackground: #FFBD2E;
}
@ -105,6 +109,14 @@
--input-error-BorderColor: #fb6863;
--input-search-IconColor: #ffffff;
/** Checkboxes **/
--selector-BackgroundColor: #a5bdff0d;
--selector-BorderColor: #d9dee6;
--selector-off-BackgroundColor: #556178;
--selector-hover-overlay-BackgroundColor: #a5bdff1a;
--selector-disabled-BackgroundColor: #a5bdff1a;
--selector-disabled-BorderColor: #a5bdff0d;
--love-active-call-color-1: #5190EC;
--love-active-call-color-2: #F47758;
--love-active-call-transform: scaleY(0.25) scaleX(0.4);
@ -187,6 +199,14 @@
--input-error-BorderColor: #e34748;
--input-search-IconColor: #0f121a;
/** Checkboxes **/
--selector-BackgroundColor: #1530720d;
--selector-BorderColor: #0f121a;
--selector-off-BackgroundColor: #cbd2dd;
--selector-hover-overlay-BackgroundColor: #1530721a;
--selector-disabled-BackgroundColor: #1530721a;
--selector-disabled-BorderColor: #1530720d;
--love-active-call-color-1: #205DC2;
--love-active-call-color-2: #e34748;
--love-active-call-filter: blur(10px);

153
packages/ui/src/components/ModernToggle.svelte Normal file
View File

@ -0,0 +1,153 @@
<script lang="ts">
//
// © 2023 Hardcore Engineering, Inc. All Rights Reserved.
// Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
//
import type { Asset, IntlString } from '@hcengineering/platform'
import Label from './Label.svelte'
export let title: string | undefined = undefined
export let label: IntlString | undefined = undefined
export let labelParams: Record<string, any> = {}
export let size: 'small' | 'large' = 'large'
export let checked: boolean = false
export let disabled: boolean = false
export let background: boolean = false
</script>
<label
class="toggle-container {size}"
class:background
class:disabled
class:woLabel={label === undefined && title === undefined}
>
<input type="checkbox" class="toggle" bind:checked {disabled} on:change />
<div class="toggle-element {size}" class:disabled />
{#if label || title}
<div class="toggle-label">
{#if label}<Label {label} params={labelParams} />{/if}
{#if title}{title}{/if}
</div>
{/if}
</label>
<style lang="scss">
.toggle-element {
position: relative;
flex-shrink: 0;
background-color: var(--selector-off-BackgroundColor);
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--spacing-1);
height: var(--spacing-1);
background-color: var(--selector-IconColor);
border-radius: 50%;
transform: translateY(-50%);
transition: left 0.2s;
}
&.small {
width: var(--spacing-4);
height: var(--spacing-2);
border-radius: var(--medium-BorderRadius);
&::after {
left: var(--spacing-0_5);
width: var(--spacing-1);
height: var(--spacing-1);
}
}
&.large {
width: var(--spacing-6);
height: var(--spacing-3);
border-radius: var(--large-BorderRadius);
&::after {
left: var(--spacing-0_75);
width: var(--spacing-1_75);
height: var(--spacing-1_75);
}
}
}
.toggle-label {
color: var(--global-primary-TextColor);
user-select: none;
}
.toggle {
overflow: hidden;
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0;
clip: rect(0 0 0 0);
&:checked + .toggle-element {
background-color: var(--selector-active-BackgroundColor);
&.small::after {
left: var(--spacing-2_5);
}
&.large::after {
left: var(--spacing-3_5);
}
}
&:disabled + .toggle-element {
box-shadow: none;
background-color: var(--selector-disabled-BackgroundColor);
&::after {
background-color: var(--selector-disabled-IconColor);
}
& + .toggle-label {
color: var(--global-disabled-TextColor);
}
}
&:focus + .toggle-element {
outline: 2px solid var(--global-focus-BorderColor);
outline-offset: 2px;
}
}
.toggle-container {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
min-width: var(--spacing-2);
min-height: var(--spacing-2);
&.background {
border-radius: 3rem;
&.woLabel {
padding: var(--spacing-1);
}
&.small:not(.woLabel) {
padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
}
&.large:not(.woLabel) {
padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-1);
}
}
&.disabled.background {
box-shadow: 0 0 0 1px var(--selector-disabled-BorderColor);
}
&:not(.disabled) {
cursor: pointer;
&.background {
background-color: var(--selector-BackgroundColor);
}
&:active .toggle-element {
outline: 2px solid var(--global-focus-BorderColor);
outline-offset: 2px;
}
&:hover .toggle-element {
box-shadow: 0 0 0 4px var(--selector-hover-overlay-BackgroundColor);
}
}
}
</style>

1
packages/ui/src/index.ts
View File

@ -62,6 +62,7 @@ export { default as Toggle } from './components/Toggle.svelte'
export { default as RadioButton } from './components/RadioButton.svelte'
export { default as RadioGroup } from './components/RadioGroup.svelte'
export { default as Dialog } from './components/Dialog.svelte'
export { default as ModernToggle } from './components/ModernToggle.svelte'
export { default as ToggleWithLabel } from './components/ToggleWithLabel.svelte'
export { default as MiniToggle } from './components/MiniToggle.svelte'
export { default as TooltipInstance } from './components/TooltipInstance.svelte'