GitHub/divkit
1
0
Fork 0
mirror of https://github.com/divkit/divkit.git synced 2026-06-06 20:07:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shadow and clip

Browse Source 
commit_hash:bfd361a610c63161ce51f1659caf74b99ec67761
This commit is contained in:
4eb0da
2026-03-17 10:17:02 +03:00
parent 9354b0ead1
commit fb742d5727
4 changed files with 118 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
visual-editor/src/auto/lang.json
+14
View File
@@ -149,6 +149,13 @@
"props.track_active_style": "Стиль активной части шкалы",
"props.track_inactive_style": "Стиль неактивной части шкалы",
"props.thumb_text_style": "Текст указателя",
"props.shadow": "Тень",
"props.shadow_color": "Цвет тени",
"props.shadow_alpha": "Дополнительная прозрачность",
"props.shadow_blur": "Сила размытия",
"props.shadow_offset_x": "Смещение по X",
"props.shadow_offset_y": "Смещение по Y",
"props.clip_to_bounds": "Обрезка по границе",
"actions_count": [
"%s действие",
"%s действия",
@@ -520,6 +527,13 @@
"props.track_active_style": "Track active style",
"props.track_inactive_style": "Track inactive style",
"props.thumb_text_style": "Thumb text style",
"props.shadow": "Shadow",
"props.shadow_color": "Shadow color",
"props.shadow_alpha": "Extra alpha",
"props.shadow_blur": "Shadow blur",
"props.shadow_offset_x": "X offset",
"props.shadow_offset_y": "Y offset",
"props.clip_to_bounds": "Clip to bounds",
"actions_count": [
"%s action",
"%s actions",
visual-editor/src/lib/components/controls/ColorInput.svelte
+20 -17
View File
@@ -9,6 +9,7 @@
export let value: string;
export let hasDialog = false;
export let readOnly = false;
export let showAlpha = true;
// todo validate input
@@ -140,24 +141,26 @@
<div class="color-input__separator"></div>
<input
class="color-input__second-input"
type="number"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
min="0"
{max}
disabled={readOnly}
bind:value={secondVal}
on:input={rebuildVal}
title={$l10nString('background.solid_second_title')}
>
{#if showAlpha}
<input
class="color-input__second-input"
type="number"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
min="0"
{max}
disabled={readOnly}
bind:value={secondVal}
on:input={rebuildVal}
title={$l10nString('background.solid_second_title')}
>
<div class="color-input__symbol">
%
</div>
<div class="color-input__symbol">
%
</div>
{/if}
{/if}
</div>
visual-editor/src/lib/components/simple-props/ColorProp.svelte
+3 -2
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import type { ComponentProperty } from '../../data/componentProps';
import type { ColorProperty } from '../../data/componentProps';
import ColorInput from '../controls/ColorInput.svelte';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
export let value: string;
export let item: ComponentProperty;
export let item: ColorProperty;
const { state } = getContext<AppContext>(APP_CTX);
const { readOnly } = state;
@@ -25,4 +25,5 @@
on:change={onChange}
hasDialog={true}
readOnly={$readOnly}
showAlpha={item.showAlpha}
/>
visual-editor/src/lib/data/componentProps.ts
+81 -6
View File
@@ -38,6 +38,21 @@ export const containerComponents = new Set([
'custom'
]);
const SHADOW_EDIT_ENABLED: ConditionObject = {
not: {
or: [{
prop: 'border.has_shadow',
isEmpty: true
}, {
prop: 'border.has_shadow',
equal: false
}, {
prop: 'border.has_shadow',
equal: 0
}]
}
};
export interface BaseProperty {
name?: string;
rawName?: string;
@@ -51,6 +66,10 @@ export interface BaseProperty {
enableSources?: boolean;
enablePerTheme?: boolean;
required?: boolean;
related?: {
prop: string;
value: string | number;
}[];
}
export interface RadioProperty extends BaseProperty {
@@ -113,6 +132,7 @@ export interface StringProperty extends BaseProperty {
export interface ColorProperty extends BaseProperty {
type: 'color';
showAlpha?: boolean;
}
export interface Actions2Property extends BaseProperty {
@@ -201,12 +221,7 @@ export type ComponentProperty = RadioProperty | IntegerProperty | BooleanPropert
SelectOptionsProperty | SelectFontFamily | ItemsProperty | StateDefaultIdProperty |
TabsSelectedTabProperty;
export type SiblingComponentProperty = ComponentProperty & {
related?: {
prop: string;
value: string;
}[];
}
export type SiblingComponentProperty = ComponentProperty;
export const BASE_COMPONENT_PROPS: ComponentProperty[] = [{
type: 'group',
@@ -402,6 +417,60 @@ export const BASE_COMPONENT_PROPS: ComponentProperty[] = [{
name: 'props.background',
prop: 'background',
type: 'background2'
}, {
name: 'props.shadow',
prop: 'border.has_shadow',
type: 'boolean',
enableSources: true,
related: [{
prop: 'border.shadow.offset.x',
value: 0
}, {
prop: 'border.shadow.offset.y',
value: 0
}]
}, {
type: 'split',
list: [{
name: 'props.shadow_color',
prop: 'border.shadow.color',
type: 'color',
default: '#000000',
showAlpha: false,
enableSources: true,
enabled: SHADOW_EDIT_ENABLED
}, {
name: 'props.shadow_alpha',
prop: 'border.shadow.alpha',
type: 'percent',
default: 0.19,
enableSources: true,
enabled: SHADOW_EDIT_ENABLED
}]
}, {
name: 'props.shadow_blur',
prop: 'border.shadow.blur',
type: 'integer',
min: 0,
max: 1000,
default: 2,
enableSources: true,
enabled: SHADOW_EDIT_ENABLED
}, {
type: 'split',
list: [{
name: 'props.shadow_offset_x',
prop: 'border.shadow.offset.x.value',
type: 'number',
enableSources: true,
enabled: SHADOW_EDIT_ENABLED
}, {
name: 'props.shadow_offset_y',
prop: 'border.shadow.offset.y.value',
type: 'number',
enableSources: true,
enabled: SHADOW_EDIT_ENABLED
}]
}]
}];
@@ -657,6 +726,12 @@ export const COMPONENT_PROPS: Record<string, ComponentProperty[]> = {
verticalProp: 'content_alignment_vertical',
orientationProp: 'orientation',
isContent: true
}, {
name: 'props.clip_to_bounds',
prop: 'clip_to_bounds',
type: 'boolean',
default: true,
enableSources: true
}]
}],
grid: [...BASE_COMPONENT_PROPS, {