mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 03:22:19 +03:00
Group viewlet settings fields (#2341)
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov
GitHub
parent
6ff12b512f
commit
47b28e9dfc
@ -16,25 +16,22 @@
|
||||
import type { Asset, IntlString } from '@hcengineering/platform'
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import { registerFocus } from '../focus'
|
||||
import type { AnySvelteComponent, ButtonKind, ButtonSize } from '../types'
|
||||
import type { AnySvelteComponent, ButtonSize } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
import Label from './Label.svelte'
|
||||
|
||||
export let value: boolean
|
||||
export let label: IntlString | undefined = undefined
|
||||
export let labelParams: Record<string, any> = {}
|
||||
export let kind: ButtonKind = 'secondary'
|
||||
export let size: ButtonSize = 'medium'
|
||||
export let icon: Asset | AnySvelteComponent | undefined = undefined
|
||||
export let justify: 'left' | 'center' = 'center'
|
||||
export let width: string | undefined = undefined
|
||||
export let resetIconSize: boolean = false
|
||||
export let highlight: boolean = false
|
||||
export let selected: boolean = false
|
||||
export let focus: boolean = false
|
||||
export let borderStyle: 'solid' | 'dashed' = 'solid'
|
||||
export let id: string | undefined = undefined
|
||||
export let input: HTMLButtonElement | undefined = undefined
|
||||
export let backgroundColor: string | undefined = undefined
|
||||
|
||||
$: iconOnly = label === undefined && $$slots.content === undefined
|
||||
|
||||
@ -66,19 +63,23 @@
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function getStyle (backgroundColor: string | undefined, width: string | undefined) {
|
||||
let style = width ? `width: ${width};` : ''
|
||||
if (backgroundColor) {
|
||||
style += ` background: ${backgroundColor};`
|
||||
}
|
||||
return style
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
bind:this={input}
|
||||
class="button {kind} {size} jf-{justify}"
|
||||
class="button {size} jf-{justify}"
|
||||
class:only-icon={iconOnly}
|
||||
class:border-solid={borderStyle === 'solid'}
|
||||
class:border-dashed={borderStyle === 'dashed'}
|
||||
class:highlight
|
||||
class:selected
|
||||
class:disabled={!value}
|
||||
style={width ? 'width: ' + width : ''}
|
||||
type={kind === 'primary' ? 'submit' : 'button'}
|
||||
style={getStyle(backgroundColor, width)}
|
||||
on:click={() => {
|
||||
value = !value
|
||||
dispatch('change', value)
|
||||
@ -90,12 +91,7 @@
|
||||
{id}
|
||||
>
|
||||
{#if icon}
|
||||
<div
|
||||
class="btn-icon pointer-events-none"
|
||||
class:mr-1={!iconOnly && kind === 'no-border'}
|
||||
class:mr-2={!iconOnly && kind !== 'no-border'}
|
||||
class:resetIconSize
|
||||
>
|
||||
<div class="btn-icon mr-2 pointer-events-none">
|
||||
<Icon bind:icon size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -150,26 +146,11 @@
|
||||
transition-property: border, background-color, color, box-shadow;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
color: var(--content-color);
|
||||
transition: color 0.15s;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.highlight {
|
||||
box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 1px 1px var(--primary-bg-hover);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
transition-duration: 0;
|
||||
@ -178,9 +159,6 @@
|
||||
color: var(--caption-color);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--primary-edit-border-color) !important;
|
||||
}
|
||||
&.disabled {
|
||||
color: rgb(var(--caption-color) / 40%);
|
||||
|
||||
@ -198,118 +176,5 @@
|
||||
&.only-icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--button-bg-color);
|
||||
border-color: var(--button-border-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-bg-hover);
|
||||
border-color: var(--button-border-hover);
|
||||
}
|
||||
&.disabled {
|
||||
background-color: var(--button-disabled-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--button-bg-hover);
|
||||
border-color: var(--button-border-hover);
|
||||
color: var(--caption-color);
|
||||
|
||||
.btn-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.no-border {
|
||||
font-weight: 400;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--noborder-bg-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
background-color: var(--noborder-bg-hover);
|
||||
|
||||
.btn-icon {
|
||||
color: var(--caption-color);
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
color: var(--content-color);
|
||||
background-color: var(--button-disabled-color);
|
||||
cursor: default;
|
||||
&:hover {
|
||||
color: var(--content-color);
|
||||
.btn-icon {
|
||||
color: var(--content-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.transparent:hover,
|
||||
&.transparent.selected {
|
||||
background-color: var(--button-bg-hover);
|
||||
}
|
||||
&.link {
|
||||
padding: 0 0.875rem;
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
background-color: var(--body-color);
|
||||
border-color: var(--divider-color);
|
||||
.btn-icon {
|
||||
color: var(--content-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.link-bordered {
|
||||
padding: 0 0.375rem;
|
||||
color: var(--accent-color);
|
||||
border-color: var(--button-border-color);
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
border-color: var(--button-border-hover);
|
||||
.btn-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
padding: 0 1rem;
|
||||
color: var(--white-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
border-color: var(--primary-bg-color);
|
||||
box-shadow: var(--primary-shadow);
|
||||
|
||||
.btn-icon {
|
||||
color: var(--white-color);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--primary-bg-hover);
|
||||
}
|
||||
&.disabled {
|
||||
background-color: #5e6ad255;
|
||||
border-color: #5e6ad255;
|
||||
}
|
||||
}
|
||||
|
||||
&.dangerous {
|
||||
color: var(--white-color);
|
||||
background-color: var(--dangerous-bg-color);
|
||||
border-color: var(--dangerous-bg-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dangerous-bg-hover);
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: var(--dangerous-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.resetIconSize {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,16 +13,16 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import presentation, { Card, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
|
||||
import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
|
||||
import core, { AnyAttribute, ArrOf, Class, Doc, Lookup, Ref, Type } from '@hcengineering/core'
|
||||
import { Button, ToggleButton } from '@hcengineering/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { IntlString } from '@hcengineering/platform'
|
||||
import { buildConfigLookup, getLookupClass, getLookupLabel, getLookupProperty } from '../utils'
|
||||
import { deepEqual } from 'fast-equals'
|
||||
import preferencePlugin from '@hcengineering/preference'
|
||||
import presentation, { Card, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
|
||||
import { Button, getPlatformColorForText, ToggleButton } from '@hcengineering/ui'
|
||||
import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
|
||||
import { deepEqual } from 'fast-equals'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import view from '../plugin'
|
||||
import { buildConfigLookup, getLookupClass, getLookupLabel, getLookupProperty } from '../utils'
|
||||
|
||||
export let viewlet: Viewlet
|
||||
|
||||
@ -237,6 +237,16 @@
|
||||
selected = i
|
||||
}
|
||||
}
|
||||
|
||||
function getColor (attribute: AttributeConfig): string {
|
||||
const color = getPlatformColorForText(attribute._class)
|
||||
return `${color + (attribute.enabled ? 'cc' : '33')};`
|
||||
}
|
||||
|
||||
function getStyle (attribute: AttributeConfig): string {
|
||||
const color = getPlatformColorForText(attribute._class)
|
||||
return `border: 1px solid ${color + (attribute.enabled ? 'ff' : 'cc')};`
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card
|
||||
@ -252,6 +262,7 @@
|
||||
{#each attributes as attribute, i}
|
||||
<div
|
||||
class="mr-2 mb-2"
|
||||
style={getStyle(attribute)}
|
||||
bind:this={elements[i]}
|
||||
draggable={true}
|
||||
on:dragover|preventDefault={(ev) => {
|
||||
@ -265,7 +276,7 @@
|
||||
selected = undefined
|
||||
}}
|
||||
>
|
||||
<ToggleButton label={attribute.label} bind:value={attribute.enabled} />
|
||||
<ToggleButton backgroundColor={getColor(attribute)} label={attribute.label} bind:value={attribute.enabled} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user