mirror of
https://github.com/webstudio-is/webstudio.git
synced 2025-03-14 09:57:02 +00:00
experimental: Head Slot Icons (#4770)
## Description <img width="255" alt="image" src="https://github.com/user-attachments/assets/85782344-e992-4f13-a26c-53970136b2ff" /> <img width="242" alt="image" src="https://github.com/user-attachments/assets/d2446c2d-011f-4363-ae35-0a79c66bbbad" /> - additionally replaced blockquote icon - changed the order of the components in general ## 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
This commit is contained in:
Oleg Isonen
GitHub
@ -6,15 +6,8 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.14178 8.5C6.08637 9.01613 5.93701 9.42807 5.67655 9.79273C5.32795 10.2807 4.74389 10.7357 3.77647 11.2195C3.52949 11.3429 3.42937 11.6433 3.55287 11.8903C3.67636 12.1373 3.9767 12.2374 4.22369 12.1139C5.25627 11.5976 6.00554 11.0526 6.49028 10.3739C6.98415 9.68253 7.16675 8.90473 7.16675 8V5C7.16675 4.35567 6.64441 3.83333 6.00008 3.83333H3.33341C2.68909 3.83333 2.16675 4.35567 2.16675 5V7.33333C2.16675 7.97767 2.68909 8.5 3.33341 8.5H6.14178Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.8083 8.5C12.7529 9.01613 12.6035 9.42807 12.3431 9.79273C11.9945 10.2807 11.4104 10.7357 10.443 11.2195C10.196 11.3429 10.0959 11.6433 10.2194 11.8903C10.3429 12.1373 10.6432 12.2374 10.8902 12.1139C11.9228 11.5976 12.6721 11.0526 13.1568 10.3739C13.6507 9.68253 13.8333 8.90473 13.8333 8V5C13.8333 4.35568 13.3109 3.83333 12.6666 3.83333H9.99992C9.35559 3.83333 8.83325 4.35568 8.83325 5V7.33333C8.83325 7.97767 9.35559 8.5 9.99992 8.5H12.8083Z"
|
||||
fill="currentColor"
|
||||
d="M6.66669 8H3.33335C3.15654 8 2.98697 7.92976 2.86195 7.80474C2.73693 7.67972 2.66669 7.51015 2.66669 7.33334V5C2.66669 4.82319 2.73693 4.65362 2.86195 4.5286C2.98697 4.40357 3.15654 4.33334 3.33335 4.33334H6.00002C6.17683 4.33334 6.3464 4.40357 6.47142 4.5286C6.59645 4.65362 6.66669 4.82319 6.66669 5V8ZM6.66669 8C6.66669 9.66667 6.00002 10.6667 4.00002 11.6667M13.3334 8H10C9.82321 8 9.65364 7.92976 9.52862 7.80474C9.40359 7.67972 9.33335 7.51015 9.33335 7.33334V5C9.33335 4.82319 9.40359 4.65362 9.52862 4.5286C9.65364 4.40357 9.82321 4.33334 10 4.33334H12.6667C12.8435 4.33334 13.0131 4.40357 13.1381 4.5286C13.2631 4.65362 13.3334 4.82319 13.3334 5V8ZM13.3334 8C13.3334 9.66667 12.6667 10.6667 10.6667 11.6667"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 904 B |
@ -24,19 +24,19 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.8171 13.6983L14 12.5154L12.8171 11.3326"
|
||||
d="M13.6857 14.2648L15.0857 12.8648L13.6857 11.4648"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.26856 11.3326L8.08569 12.5154L9.26856 13.6983"
|
||||
d="M9.48569 11.4648L8.08569 12.8648L9.48569 14.2648"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.6515 10.6121L10.4338 14.2631"
|
||||
d="M12.306 10.6121L10.8649 14.9333"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -24,7 +24,7 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11 14.3137L11 11.3137L12.5 12.837L14 11.3137L14 14.3137"
|
||||
d="M10 14.3137L10 10.3137L12 12.3448L14 10.3137L14 14.3137"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
||||
|
Before Width: | Height: | Size: 884 B After Width: | Height: | Size: 883 B |
44
packages/icons/icons/resource.svg
Normal file
44
packages/icons/icons/resource.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.6665 5.33334H8.6665"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.6665 8H9.99984"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 8.75V3.5C14 3.10218 13.842 2.72064 13.5607 2.43934C13.2794 2.15804 12.8978 2 12.5 2H3.5C3.10218 2 2.72064 2.15804 2.43934 2.43934C2.15804 2.72064 2 3.10218 2 3.5V8.75107V11.3766V12.6894V12.7521C2 13.4425 2.55964 14.0021 3.25 14.0021V14.0021H4.5H6"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.45 14.5H9.75002C9.28589 14.5 8.84076 14.3157 8.51257 13.9875C8.18438 13.6593 8 13.2142 8 12.75C8 12.2859 8.18438 11.8408 8.51257 11.5126C8.84076 11.1844 9.28589 11 9.75002 11H10.45"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5499 11H13.2499C13.7141 11 14.1592 11.1844 14.4874 11.5126C14.8156 11.8408 15 12.2859 15 12.75C15 13.2142 14.8156 13.6593 14.4874 13.9875C14.1592 14.3157 13.7141 14.5 13.2499 14.5H12.5499"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.1 12.75H12.9001"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
28
packages/icons/icons/window-info.svg
Normal file
28
packages/icons/icons/window-info.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 11.5161V7.85314"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<rect
|
||||
x="7.29999"
|
||||
y="4.48389"
|
||||
width="1.4"
|
||||
height="1.4"
|
||||
rx="0.7"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 618 B |
20
packages/icons/icons/window-title.svg
Normal file
20
packages/icons/icons/window-title.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.6667 4H3.33333C2.59695 4 2 4.49746 2 5.11111V12.8889C2 13.5025 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.5025 14 12.8889V5.11111C14 4.49746 13.403 4 12.6667 4Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4 2H12"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 494 B |
99
packages/icons/src/__generated__/components.tsx
generated
99
packages/icons/src/__generated__/components.tsx
generated
@ -957,10 +957,9 @@ export const BlockquoteIcon: IconComponent = forwardRef(
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M6.142 8.5c-.056.516-.205.928-.465 1.293-.349.488-.933.943-1.9 1.427a.5.5 0 1 0 .447.894c1.032-.516 1.782-1.061 2.266-1.74.494-.691.677-1.47.677-2.374V5c0-.644-.523-1.167-1.167-1.167H3.333c-.644 0-1.166.523-1.166 1.167v2.333c0 .645.522 1.167 1.166 1.167h2.809ZM12.808 8.5c-.055.516-.204.928-.465 1.293-.348.488-.933.943-1.9 1.427a.5.5 0 1 0 .447.894c1.033-.516 1.782-1.061 2.267-1.74.494-.691.676-1.47.676-2.374V5c0-.644-.522-1.167-1.166-1.167H10c-.644 0-1.167.523-1.167 1.167v2.333c0 .645.523 1.167 1.167 1.167h2.808Z"
|
||||
clipRule="evenodd"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
d="M6.667 8H3.333a.667.667 0 0 1-.666-.667V5a.667.667 0 0 1 .666-.667H6A.667.667 0 0 1 6.667 5v3Zm0 0C6.667 9.667 6 10.667 4 11.667M13.333 8H10a.667.667 0 0 1-.667-.667V5A.667.667 0 0 1 10 4.333h2.667a.667.667 0 0 1 .666.667v3Zm0 0c0 1.667-.666 2.667-2.666 3.667"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -1764,13 +1763,13 @@ export const ContentEmbedIcon: IconComponent = forwardRef(
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.252c0 .69.56 1.25 1.25 1.25v0H6M12.817 13.698 14 12.515l-1.183-1.182"
|
||||
d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.252c0 .69.56 1.25 1.25 1.25v0H6M13.686 14.265l1.4-1.4-1.4-1.4"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="m9.269 11.333-1.183 1.182 1.183 1.183M11.652 10.612l-1.218 3.651"
|
||||
d="m9.486 11.465-1.4 1.4 1.4 1.4M12.306 10.612l-1.441 4.321"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -3141,7 +3140,7 @@ export const MarkdownEmbedIcon: IconComponent = forwardRef(
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M11 14.314v-3l1.5 1.523 1.5-1.523v3"
|
||||
d="M10 14.314v-4l2 2.03 2-2.03v4"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -3970,6 +3969,36 @@ export const ResetIcon: IconComponent = forwardRef(
|
||||
);
|
||||
ResetIcon.displayName = "ResetIcon";
|
||||
|
||||
export const ResourceIcon: IconComponent = forwardRef(
|
||||
({ fill = "none", size = 16, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
height={size}
|
||||
fill={fill}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.252c0 .69.56 1.25 1.25 1.25v0H6"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.45 14.5h-.7a1.75 1.75 0 1 1 0-3.5h.7M12.55 11h.7a1.75 1.75 0 1 1 0 3.5h-.7M10.1 12.75h2.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
ResourceIcon.displayName = "ResourceIcon";
|
||||
|
||||
export const ScrollIcon: IconComponent = forwardRef(
|
||||
({ fill = "none", size = 16, ...props }, forwardedRef) => {
|
||||
return (
|
||||
@ -5414,6 +5443,62 @@ export const WebstudioIcon: IconComponent = forwardRef(
|
||||
);
|
||||
WebstudioIcon.displayName = "WebstudioIcon";
|
||||
|
||||
export const WindowInfoIcon: IconComponent = forwardRef(
|
||||
({ fill = "none", size = 16, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
height={size}
|
||||
fill={fill}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM8 11.516V7.853"
|
||||
/>
|
||||
<rect
|
||||
width="1.4"
|
||||
height="1.4"
|
||||
x="7.3"
|
||||
y="4.484"
|
||||
fill="currentColor"
|
||||
rx=".7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
WindowInfoIcon.displayName = "WindowInfoIcon";
|
||||
|
||||
export const WindowTitleIcon: IconComponent = forwardRef(
|
||||
({ fill = "none", size = 16, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
height={size}
|
||||
fill={fill}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12.667 4H3.333C2.597 4 2 4.497 2 5.111v7.778C2 13.503 2.597 14 3.333 14h9.334c.736 0 1.333-.498 1.333-1.111V5.11C14 4.497 13.403 4 12.667 4ZM4 2h8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
WindowTitleIcon.displayName = "WindowTitleIcon";
|
||||
|
||||
export const WrapIcon: IconComponent = forwardRef(
|
||||
({ fill = "none", size = 16, ...props }, forwardedRef) => {
|
||||
return (
|
||||
|
||||
12
packages/icons/src/__generated__/svg.ts
generated
12
packages/icons/src/__generated__/svg.ts
generated
File diff suppressed because one or more lines are too long
@ -51,7 +51,7 @@ export const meta: WsComponentMeta = {
|
||||
},
|
||||
states: defaultStates,
|
||||
presetStyle,
|
||||
order: 9,
|
||||
order: 5,
|
||||
};
|
||||
|
||||
export const propsMeta: WsComponentPropsMeta = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Link2Icon } from "@webstudio-is/icons/svg";
|
||||
import { ResourceIcon } from "@webstudio-is/icons/svg";
|
||||
import {
|
||||
type WsComponentMeta,
|
||||
type WsComponentPropsMeta,
|
||||
@ -8,7 +8,7 @@ import { props } from "./__generated__/head-link.props";
|
||||
|
||||
export const meta: WsComponentMeta = {
|
||||
category: "hidden",
|
||||
icon: Link2Icon,
|
||||
icon: ResourceIcon,
|
||||
type: "container",
|
||||
stylable: false,
|
||||
constraints: {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Link2Icon } from "@webstudio-is/icons/svg";
|
||||
import { WindowInfoIcon } from "@webstudio-is/icons/svg";
|
||||
import {
|
||||
type WsComponentMeta,
|
||||
type WsComponentPropsMeta,
|
||||
@ -8,7 +8,7 @@ import { props } from "./__generated__/head-meta.props";
|
||||
|
||||
export const meta: WsComponentMeta = {
|
||||
category: "hidden",
|
||||
icon: Link2Icon,
|
||||
icon: WindowInfoIcon,
|
||||
type: "container",
|
||||
stylable: false,
|
||||
constraints: {
|
||||
|
||||
@ -2,8 +2,9 @@ import { type TemplateMeta, $ } from "@webstudio-is/template";
|
||||
|
||||
export const meta: TemplateMeta = {
|
||||
category: "general",
|
||||
description: "Head",
|
||||
order: 4,
|
||||
description:
|
||||
"The Head Slot component lets you customize page-specific head elements (like canonical URLs), which merge with your site's global head settings, with Head Slot definitions taking priority over Page Settings. For site-wide head changes, use Project Settings instead.",
|
||||
order: 6,
|
||||
template: (
|
||||
<$.HeadSlot>
|
||||
<$.HeadTitle ws:label="Title">Title</$.HeadTitle>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Link2Icon } from "@webstudio-is/icons/svg";
|
||||
import { WindowTitleIcon } from "@webstudio-is/icons/svg";
|
||||
import {
|
||||
type WsComponentMeta,
|
||||
type WsComponentPropsMeta,
|
||||
@ -8,7 +8,7 @@ import { props } from "./__generated__/head-title.props";
|
||||
|
||||
export const meta: WsComponentMeta = {
|
||||
category: "hidden",
|
||||
icon: Link2Icon,
|
||||
icon: WindowTitleIcon,
|
||||
type: "container",
|
||||
stylable: false,
|
||||
constraints: {
|
||||
|
||||
@ -26,7 +26,7 @@ export const meta: WsComponentMeta = {
|
||||
description: "Used to add HTML code to the page, such as an SVG or script.",
|
||||
icon: EmbedIcon,
|
||||
presetStyle,
|
||||
order: 8,
|
||||
order: 2,
|
||||
};
|
||||
|
||||
export const propsMeta: WsComponentPropsMeta = {
|
||||
|
||||
@ -48,7 +48,7 @@ export const meta: WsComponentMeta = {
|
||||
icon: MinusIcon,
|
||||
states: defaultStates,
|
||||
presetStyle,
|
||||
order: 5,
|
||||
order: 3,
|
||||
};
|
||||
|
||||
export const propsMeta: WsComponentPropsMeta = {
|
||||
|
||||
@ -8,7 +8,7 @@ export const meta: WsComponentMeta = {
|
||||
"Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
|
||||
icon: SlotComponentIcon,
|
||||
stylable: false,
|
||||
order: 6,
|
||||
order: 5,
|
||||
};
|
||||
|
||||
export const propsMeta: WsComponentPropsMeta = {
|
||||
|
||||
Reference in New Issue
Block a user