From 26a2e2e84a91c6389e6371c51df6988223ab0d71 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 21 Apr 2025 14:20:29 +0100 Subject: [PATCH 1/5] build: Release 21-04-2025 From 1baf2868675d0fbc72660a485e370f99f32ac205 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 21 Apr 2025 14:36:52 +0100 Subject: [PATCH 2/5] test From 0aac3da588d46662b43ac094dfd6704d99e2cf74 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 21 Apr 2025 15:14:37 +0100 Subject: [PATCH 3/5] fix: Fix video animation icon (#5155) ## Description 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file --- .../sdk-components-animation/src/video-animation.template.tsx | 3 --- packages/sdk-components-animation/src/video-animation.ws.ts | 1 - 2 files changed, 4 deletions(-) diff --git a/packages/sdk-components-animation/src/video-animation.template.tsx b/packages/sdk-components-animation/src/video-animation.template.tsx index 96005b00d479..6a4253df3253 100644 --- a/packages/sdk-components-animation/src/video-animation.template.tsx +++ b/packages/sdk-components-animation/src/video-animation.template.tsx @@ -1,13 +1,10 @@ import { $, type TemplateMeta } from "@webstudio-is/template"; -import { YoutubeIcon } from "@webstudio-is/icons/svg"; import { animation } from "./shared/proxy"; export const meta: TemplateMeta = { category: "animations", description: "Video Animation", order: 2, - icon: YoutubeIcon, - template: ( <$.Video diff --git a/packages/sdk-components-animation/src/video-animation.ws.ts b/packages/sdk-components-animation/src/video-animation.ws.ts index 3c7ac8dcfa2e..1ca790b118f0 100644 --- a/packages/sdk-components-animation/src/video-animation.ws.ts +++ b/packages/sdk-components-animation/src/video-animation.ws.ts @@ -5,7 +5,6 @@ import { props } from "./__generated__/video-animation.props"; export const meta: WsComponentMeta = { icon: PlayIcon, label: "Video Animation", - order: 3, contentModel: { category: "none", children: ["instance"], From abe271113baae3f87a51656d5a46cce34cdd6d44 Mon Sep 17 00:00:00 2001 From: Ivan Starkov Date: Mon, 21 Apr 2025 19:18:46 +0400 Subject: [PATCH 4/5] experimental: Fix Video Animation Styles (#5156) ## Description 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file --- packages/sdk-components-animation/src/video-animation.ws.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/sdk-components-animation/src/video-animation.ws.ts b/packages/sdk-components-animation/src/video-animation.ws.ts index 1ca790b118f0..1f2a94cf8306 100644 --- a/packages/sdk-components-animation/src/video-animation.ws.ts +++ b/packages/sdk-components-animation/src/video-animation.ws.ts @@ -1,6 +1,7 @@ import { PlayIcon } from "@webstudio-is/icons/svg"; import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk"; import { props } from "./__generated__/video-animation.props"; +import { div } from "@webstudio-is/sdk/normalize.css"; export const meta: WsComponentMeta = { icon: PlayIcon, @@ -9,6 +10,9 @@ export const meta: WsComponentMeta = { category: "none", children: ["instance"], }, + presetStyle: { + div, + }, }; export const propsMeta: WsComponentPropsMeta = { From 5cb62959b9cb077959414f4effd6498eaf370792 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Wed, 23 Apr 2025 01:17:55 +0700 Subject: [PATCH 5/5] fix: show initial properties in advanced panel (#5157) Opacity and others when defined are duplicated and not shown at all when not defined. Screenshot 2025-04-23 at 00 18 06 --- .../style-panel/sections/advanced/stores.ts | 38 +++++++------------ .../features/style-panel/shared/model.tsx | 9 +++++ 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts index 9e28553b265d..fecf729bdf67 100644 --- a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts +++ b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts @@ -7,19 +7,13 @@ import type { ComputedStyleDecl } from "~/shared/style-object-model"; import { $computedStyleDeclarations } from "../../shared/model"; import { sections } from "../sections"; -// @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871 -const initialProperties = new Set([ - "cursor", - "mix-blend-mode", - "opacity", - "pointer-events", - "user-select", -]); - export const $advancedStyleDeclarations = computed( [$computedStyleDeclarations, $settings, $selectedInstance], (computedStyleDeclarations, settings, selectedInstance) => { - const advancedStyles: Array = []; + const advancedStyles = new Map< + ComputedStyleDecl["property"], + ComputedStyleDecl + >(); // All properties used by the panels except the advanced panel const visualProperties = new Set([]); for (const { properties } of sections.values()) { @@ -37,6 +31,14 @@ export const $advancedStyleDeclarations = computed( ) { continue; } + // ignore predefined styles in advanced mode + // @todo will be deleted https://github.com/webstudio-is/webstudio/issues/4871 + if ( + styleDecl.source.name === "default" && + settings.stylePanelMode === "advanced" + ) { + continue; + } const { property, listed } = styleDecl; // When property is listed, it was added from advanced panel. // If we are in advanced mode, we show them all. @@ -45,22 +47,10 @@ export const $advancedStyleDeclarations = computed( listed || settings.stylePanelMode === "advanced" ) { - advancedStyles.push(styleDecl); - } - } - // In advanced mode we assume user knows the properties they need, so we don't need to show these. - // @todo https://github.com/webstudio-is/webstudio/issues/4871 - if (settings.stylePanelMode !== "advanced") { - for (const property of initialProperties) { - const styleDecl = computedStyleDeclarations.find( - (styleDecl) => styleDecl.property === property - ); - if (styleDecl) { - advancedStyles.push(styleDecl); - } + advancedStyles.set(styleDecl.property, styleDecl); } } - return advancedStyles; + return Array.from(advancedStyles.values()); } ); diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx index 9f846842e0f9..893259bfd7cc 100644 --- a/apps/builder/app/builder/features/style-panel/shared/model.tsx +++ b/apps/builder/app/builder/features/style-panel/shared/model.tsx @@ -268,6 +268,15 @@ export const $computedStyleDeclarations = computed( styleSourceSelections, styles, }); + // In advanced mode we assume user knows the properties they need, so we don't need to show these. + // @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871 + definedStyles.push( + { property: "cursor" }, + { property: "mix-blend-mode" }, + { property: "opacity" }, + { property: "pointer-events" }, + { property: "user-select" } + ); const computedStyles = new Map(); for (const { property, listed } of definedStyles) { // deduplicate by property name