From aaea4867fe06ca2c739f73588e749dea4dff22fa Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 31 Aug 2022 17:38:00 +0300 Subject: [PATCH 01/12] fix upload button and cog icon --- .../asset-manager/add-an-asset-form.tsx | 10 +++++- .../panels/asset-manager/asset-manager.tsx | 6 +++- .../panels/asset-manager/asset-thumbnail.tsx | 3 ++ .../panels/asset-manager/asset-tooltip.tsx | 11 +++++- .../design-system/src/components/button.tsx | 19 +++++----- packages/icons/src/gear.tsx | 35 +++++++++++++++++++ packages/icons/src/index.ts | 2 ++ packages/icons/src/upload.tsx | 25 +++++++++++++ 8 files changed, 99 insertions(+), 12 deletions(-) create mode 100644 packages/icons/src/gear.tsx create mode 100644 packages/icons/src/upload.tsx diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx index e0bdfb30b8..5d6650e7b2 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx @@ -3,6 +3,10 @@ import ObjectID from "bson-objectid"; import { ChangeEvent, useRef } from "react"; import { Button } from "@webstudio-is/design-system"; import { Asset, UploadingAsset } from "@webstudio-is/asset-uploader"; +import { UploadIcon } from "@webstudio-is/icons"; +import { Box } from "@webstudio-is/design-system"; +import { Flex } from "@webstudio-is/design-system"; +import { Text } from "@webstudio-is/design-system"; const readImages = async (fileList: FileList) => { const images = []; @@ -61,8 +65,12 @@ export const AddAnAssetForm = ({ variant="blue" type="button" onClick={() => inputRef?.current?.click()} + size={2} > - Upload Image + + + Upload + ); diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx index d8b05875e5..e57c7603ba 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx @@ -56,7 +56,11 @@ export const TabContent = ({ onSetActiveTab("none"); }} /> - + diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index c3666c31a5..7fee61ba3d 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -70,6 +70,9 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { "&:hover button": { opacity: 1, + "path, circle": { + stroke: "$slate11", + }, }, }} > diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx index de28640353..6adb521185 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx @@ -46,8 +46,17 @@ export const AssetTooltip = ({ top: "$1", right: "$1", cursor: "pointer", - color: "$hiContrast", transition: "opacity 100ms ease", + + "svg path": { + fill: "$loContrast", + }, + + "&:hover": { + "svg path, svg circle": { + stroke: "$hiContrast", + }, + }, }} > diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx index 01bed7974d..eb0394f82d 100644 --- a/packages/design-system/src/components/button.tsx +++ b/packages/design-system/src/components/button.tsx @@ -7,6 +7,7 @@ export const Button = styled("button", { boxSizing: "border-box", border: "none", userSelect: "none", + transition: "all 200ms ease-out", "&::before": { boxSizing: "border-box", }, @@ -83,24 +84,24 @@ export const Button = styled("button", { }, }, blue: { - backgroundColor: "$blue2", - boxShadow: "inset 0 0 0 1px $colors$blue7", - color: "$blue11", + backgroundColor: "$blue10", + color: "$loContrast", "@hover": { "&:hover": { - boxShadow: "inset 0 0 0 1px $colors$blue8", + backgroundColor: "$loContrast", + color: "$blue10", + boxShadow: "inset 0 0 0 1.5px $colors$blue10", }, }, "&:active": { - backgroundColor: "$blue3", - boxShadow: "inset 0 0 0 1px $colors$blue8", + boxShadow: "inset 0 0 0 1.5px $colors$blue8", }, "&:focus": { - boxShadow: "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8", + boxShadow: + "inset 0 0 0 1.5px $colors$blue8, 0 0 0 1.5px $colors$blue8", }, '&[data-state="open"]': { - backgroundColor: "$blue4", - boxShadow: "inset 0 0 0 1px $colors$blue8", + boxShadow: "inset 0 0 0 1.5px $colors$blue8", }, }, green: { diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx new file mode 100644 index 0000000000..2891dc56d7 --- /dev/null +++ b/packages/icons/src/gear.tsx @@ -0,0 +1,35 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const GearIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); + +GearIcon.displayName = "GearIcon"; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index cab70530d6..de149e8eda 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -14,3 +14,5 @@ export { AspectRatioIcon } from "./aspect-ratio"; export * from "./cloud"; export { TrashIcon } from "./trash"; export { SizeIcon } from "./size"; +export { UploadIcon } from "./upload"; +export { GearIcon } from "./gear"; diff --git a/packages/icons/src/upload.tsx b/packages/icons/src/upload.tsx new file mode 100644 index 0000000000..ed7eb93d64 --- /dev/null +++ b/packages/icons/src/upload.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const UploadIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); + +UploadIcon.displayName = "UploadIcon"; From 8570a5d1ebe18e2e51a7e71e8aab82c7a4bb3d54 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 31 Aug 2022 17:40:43 +0300 Subject: [PATCH 02/12] fix weird imports --- .../sidebar-left/panels/asset-manager/add-an-asset-form.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx index 5d6650e7b2..b276b14f74 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx @@ -1,12 +1,9 @@ import { Form, useSubmit } from "@remix-run/react"; import ObjectID from "bson-objectid"; import { ChangeEvent, useRef } from "react"; -import { Button } from "@webstudio-is/design-system"; +import { Button, Flex, Text } from "@webstudio-is/design-system"; import { Asset, UploadingAsset } from "@webstudio-is/asset-uploader"; import { UploadIcon } from "@webstudio-is/icons"; -import { Box } from "@webstudio-is/design-system"; -import { Flex } from "@webstudio-is/design-system"; -import { Text } from "@webstudio-is/design-system"; const readImages = async (fileList: FileList) => { const images = []; From ad4286782ccb726e11ab1e426f53975b2dd15db7 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 2 Sep 2022 16:17:33 +0300 Subject: [PATCH 03/12] small fixes --- .../sidebar-left/panels/asset-manager/asset-thumbnail.tsx | 4 +--- .../sidebar-left/panels/asset-manager/asset-tooltip.tsx | 6 ++---- packages/icons/src/upload.tsx | 1 - 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index 7fee61ba3d..4f31316028 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -70,9 +70,7 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { "&:hover button": { opacity: 1, - "path, circle": { - stroke: "$slate11", - }, + color: "$slate11", }, }} > diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx index 6adb521185..2ee96ba7dc 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx @@ -52,10 +52,8 @@ export const AssetTooltip = ({ fill: "$loContrast", }, - "&:hover": { - "svg path, svg circle": { - stroke: "$hiContrast", - }, + "&:hover svg": { + color: "$hiContrast", }, }} > diff --git a/packages/icons/src/upload.tsx b/packages/icons/src/upload.tsx index ed7eb93d64..09afec0db2 100644 --- a/packages/icons/src/upload.tsx +++ b/packages/icons/src/upload.tsx @@ -8,7 +8,6 @@ export const UploadIcon = React.forwardRef( width="16" height="16" viewBox="0 0 16 16" - fill="none" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef} From 38d98fe038a6da7e10fd55dadcd5b4e02b116437 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 2 Sep 2022 19:19:53 +0300 Subject: [PATCH 04/12] clean up selectors --- .../panels/asset-manager/asset-thumbnail.tsx | 14 ++++++++------ .../panels/asset-manager/asset-tooltip.tsx | 13 ++++++++----- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index 4f31316028..c77f4bb62e 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -54,6 +54,7 @@ export const Thumbnail = ({ path, status }: ThumbnailProps) => { export const AssetThumbnail = (asset: Asset | UploadingAsset) => { const { path, alt, status, name } = asset; const [isDeleting, setIsDeleting] = useState(false); + const [isBeingHovered, setIsBeingHovered] = useState(false); const isUploading = status === "uploading"; const isUploadedAsset = isUploading === false && "size" in asset; @@ -67,16 +68,17 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { alignItems: "center", padding: "0 $2", position: "relative", - - "&:hover button": { - opacity: 1, - color: "$slate11", - }, }} + onMouseEnter={() => setIsBeingHovered(true)} + onMouseLeave={() => setIsBeingHovered(false)} > {isUploadedAsset && ( - setIsDeleting(true)} /> + setIsDeleting(true)} + /> )} {(isUploading || isDeleting) && } diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx index 2ee96ba7dc..ac23417c69 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx @@ -9,9 +9,11 @@ import { Asset } from "@webstudio-is/asset-uploader"; export const AssetTooltip = ({ asset, onDelete, + isParentHovered, }: { asset: Asset; onDelete: () => void; + isParentHovered: boolean; }) => { const [isTooltipOpen, setTooltipOpen] = useState(false); const closeTooltip = () => setTooltipOpen(false); @@ -41,19 +43,20 @@ export const AssetTooltip = ({ title="Options" onClick={() => setTooltipOpen(true)} css={{ - opacity: 0, + opacity: isParentHovered ? 1 : 0, position: "absolute", + color: "$slate11", top: "$1", right: "$1", cursor: "pointer", transition: "opacity 100ms ease", - "svg path": { - fill: "$loContrast", + "&:hover": { + color: "$hiContrast", }, - "&:hover svg": { - color: "$hiContrast", + "svg path": { + fill: "$loContrast", }, }} > From 387bea6d73d8a687261fa39571ccad84e5fe015c Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Fri, 2 Sep 2022 23:54:24 +0200 Subject: [PATCH 05/12] use css variable to show/hide info trigger --- .../{asset-tooltip.tsx => asset-info-tigger.tsx} | 8 +++----- .../panels/asset-manager/asset-thumbnail.tsx | 15 ++++++--------- 2 files changed, 9 insertions(+), 14 deletions(-) rename apps/designer/app/designer/features/sidebar-left/panels/asset-manager/{asset-tooltip.tsx => asset-info-tigger.tsx} (92%) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx similarity index 92% rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx rename to apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index ac23417c69..f5ae35c742 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -6,18 +6,15 @@ import { AssetInfo } from "./asset-info"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { Asset } from "@webstudio-is/asset-uploader"; -export const AssetTooltip = ({ +export const AssetInfoTrigger = ({ asset, onDelete, - isParentHovered, }: { asset: Asset; onDelete: () => void; - isParentHovered: boolean; }) => { const [isTooltipOpen, setTooltipOpen] = useState(false); const closeTooltip = () => setTooltipOpen(false); - return ( setTooltipOpen(true)} + data-info-trigger="true" css={{ - opacity: isParentHovered ? 1 : 0, + display: "var(--display-info-trigger)", position: "absolute", color: "$slate11", top: "$1", diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index c77f4bb62e..4512921b61 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -3,7 +3,7 @@ import { Box } from "@webstudio-is/design-system"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { UploadingAnimation } from "./uploading-animation"; -import { AssetTooltip } from "./asset-tooltip"; +import { AssetInfoTrigger } from "./asset-info-tigger"; import { Asset, UploadingAsset } from "@webstudio-is/asset-uploader"; const useImageWithFallback = ({ @@ -54,7 +54,6 @@ export const Thumbnail = ({ path, status }: ThumbnailProps) => { export const AssetThumbnail = (asset: Asset | UploadingAsset) => { const { path, alt, status, name } = asset; const [isDeleting, setIsDeleting] = useState(false); - const [isBeingHovered, setIsBeingHovered] = useState(false); const isUploading = status === "uploading"; const isUploadedAsset = isUploading === false && "size" in asset; @@ -68,17 +67,15 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { alignItems: "center", padding: "0 $2", position: "relative", + "--display-info-trigger": "none", + "&:hover": { + "--display-info-trigger": "block", + }, }} - onMouseEnter={() => setIsBeingHovered(true)} - onMouseLeave={() => setIsBeingHovered(false)} > {isUploadedAsset && ( - setIsDeleting(true)} - /> + setIsDeleting(true)} /> )} {(isUploading || isDeleting) && } From 2d77430080976f29d5b9d31c8d468e4d65ccdef9 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 00:21:31 +0200 Subject: [PATCH 06/12] pass fill to the GearIcon as a prop --- .../asset-manager/asset-info-tigger.tsx | 10 +--- packages/icons/src/gear.tsx | 56 +++++++++---------- 2 files changed, 28 insertions(+), 38 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index f5ae35c742..b9d9b3a947 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { Button, Tooltip } from "@webstudio-is/design-system"; +import { Button, theme, Tooltip } from "@webstudio-is/design-system"; import { GearIcon } from "@webstudio-is/icons"; import { AssetInfo } from "./asset-info"; @@ -39,7 +39,6 @@ export const AssetInfoTrigger = ({ variant="raw" title="Options" onClick={() => setTooltipOpen(true)} - data-info-trigger="true" css={{ display: "var(--display-info-trigger)", position: "absolute", @@ -48,17 +47,12 @@ export const AssetInfoTrigger = ({ right: "$1", cursor: "pointer", transition: "opacity 100ms ease", - "&:hover": { color: "$hiContrast", }, - - "svg path": { - fill: "$loContrast", - }, }} > - + ); diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx index 2891dc56d7..5fae841fad 100644 --- a/packages/icons/src/gear.tsx +++ b/packages/icons/src/gear.tsx @@ -1,35 +1,31 @@ import * as React from "react"; import { IconProps } from "./types"; -export const GearIcon = React.forwardRef( - ({ color = "currentColor", ...props }, forwardedRef) => { - return ( - - - - - ); - } -); +export const GearIcon = React.forwardRef< + SVGSVGElement, + IconProps & { fill?: string } +>(({ color = "currentColor", fill = "none", ...props }, forwardedRef) => { + return ( + + + + + ); +}); GearIcon.displayName = "GearIcon"; From 6ce08816dfd1729e085aa1034814f243d6b12e98 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 00:57:47 +0200 Subject: [PATCH 07/12] use visibility instead of display to fix tooltip pos, pass fill over props to the gear icon explicitely --- .../sidebar-left/panels/asset-manager/asset-info-tigger.tsx | 4 ++-- .../sidebar-left/panels/asset-manager/asset-thumbnail.tsx | 4 ++-- packages/icons/src/gear.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index b9d9b3a947..1fe10a496f 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -40,7 +40,7 @@ export const AssetInfoTrigger = ({ title="Options" onClick={() => setTooltipOpen(true)} css={{ - display: "var(--display-info-trigger)", + visibility: "var(--info-trigger-visibility)", position: "absolute", color: "$slate11", top: "$1", @@ -52,7 +52,7 @@ export const AssetInfoTrigger = ({ }, }} > - + ); diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index 4512921b61..ab7a6c99a2 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -67,9 +67,9 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { alignItems: "center", padding: "0 $2", position: "relative", - "--display-info-trigger": "none", + "--info-trigger-visibility": "hidden", "&:hover": { - "--display-info-trigger": "block", + "--info-trigger-visibility": "visible", }, }} > diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx index 5fae841fad..2d8ff07702 100644 --- a/packages/icons/src/gear.tsx +++ b/packages/icons/src/gear.tsx @@ -18,10 +18,10 @@ export const GearIcon = React.forwardRef< From 63121ab98738749a884990c0b08cfb824f6b719e Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 19:20:36 +0200 Subject: [PATCH 08/12] define css vars using exported util --- .../asset-manager/asset-info-tigger.tsx | 13 ++-- .../panels/asset-manager/asset-thumbnail.tsx | 7 +-- .../app/designer/features/topbar/topbar.tsx | 1 - packages/icons/src/gear.tsx | 59 +++++++++++-------- packages/icons/src/index.ts | 2 +- 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index 1fe10a496f..b28ee96555 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -1,11 +1,15 @@ import { useState } from "react"; -import { Button, theme, Tooltip } from "@webstudio-is/design-system"; -import { GearIcon } from "@webstudio-is/icons"; +import { Button, Tooltip } from "@webstudio-is/design-system"; +import { GearIcon, gearIconCssVars } from "@webstudio-is/icons"; import { AssetInfo } from "./asset-info"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { Asset } from "@webstudio-is/asset-uploader"; +export const assetInfoTriggerCssVars = ({ show }: { show: boolean }) => ({ + "--asset-info-trigger-visibility": show ? "visible" : "hidden", +}); + export const AssetInfoTrigger = ({ asset, onDelete, @@ -40,7 +44,7 @@ export const AssetInfoTrigger = ({ title="Options" onClick={() => setTooltipOpen(true)} css={{ - visibility: "var(--info-trigger-visibility)", + visibility: "var(--asset-info-trigger-visibility, hidden)", position: "absolute", color: "$slate11", top: "$1", @@ -50,9 +54,10 @@ export const AssetInfoTrigger = ({ "&:hover": { color: "$hiContrast", }, + ...gearIconCssVars({ fill: "$colors$loContrast" }), }} > - + ); diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx index ab7a6c99a2..451cda46fb 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx @@ -3,7 +3,7 @@ import { Box } from "@webstudio-is/design-system"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { UploadingAnimation } from "./uploading-animation"; -import { AssetInfoTrigger } from "./asset-info-tigger"; +import { AssetInfoTrigger, assetInfoTriggerCssVars } from "./asset-info-tigger"; import { Asset, UploadingAsset } from "@webstudio-is/asset-uploader"; const useImageWithFallback = ({ @@ -67,10 +67,7 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => { alignItems: "center", padding: "0 $2", position: "relative", - "--info-trigger-visibility": "hidden", - "&:hover": { - "--info-trigger-visibility": "visible", - }, + "&:hover": assetInfoTriggerCssVars({ show: true }), }} > diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 86bc0c2915..f7125f59aa 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -1,5 +1,4 @@ import type { Publish } from "~/shared/pubsub"; -import type { Project } from "@webstudio-is/prisma-client"; import { darkTheme, Flex, type CSS } from "@webstudio-is/design-system"; import type { Config } from "~/config"; import { PreviewButton } from "./preview"; diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx index 2d8ff07702..3609638bbe 100644 --- a/packages/icons/src/gear.tsx +++ b/packages/icons/src/gear.tsx @@ -1,31 +1,40 @@ import * as React from "react"; import { IconProps } from "./types"; -export const GearIcon = React.forwardRef< - SVGSVGElement, - IconProps & { fill?: string } ->(({ color = "currentColor", fill = "none", ...props }, forwardedRef) => { - return ( - - - - - ); +export const gearIconCssVars = ({ fill }: { fill: string }) => ({ + "--gear-icon-fill": fill, }); +export const GearIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); + GearIcon.displayName = "GearIcon"; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index de149e8eda..9cceef89b6 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -15,4 +15,4 @@ export * from "./cloud"; export { TrashIcon } from "./trash"; export { SizeIcon } from "./size"; export { UploadIcon } from "./upload"; -export { GearIcon } from "./gear"; +export { GearIcon, gearIconCssVars } from "./gear"; From 089f9da520dbec4ee4e5a09d50c2d9a8f10cdfea Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 20:07:41 +0200 Subject: [PATCH 09/12] create css-vars package and use it --- .../asset-manager/asset-info-tigger.tsx | 7 +++-- apps/designer/package.json | 1 + packages/css-vars/LICENSE | 21 ++++++++++++++ packages/css-vars/README.md | 13 +++++++++ packages/css-vars/package.json | 29 +++++++++++++++++++ packages/css-vars/src/index.ts | 11 +++++++ packages/css-vars/tsconfig.json | 12 ++++++++ packages/icons/package.json | 3 +- packages/icons/src/gear.tsx | 7 +++-- 9 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 packages/css-vars/LICENSE create mode 100644 packages/css-vars/README.md create mode 100644 packages/css-vars/package.json create mode 100644 packages/css-vars/src/index.ts create mode 100644 packages/css-vars/tsconfig.json diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index b28ee96555..24b9f2be69 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -5,9 +5,12 @@ import { GearIcon, gearIconCssVars } from "@webstudio-is/icons"; import { AssetInfo } from "./asset-info"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { Asset } from "@webstudio-is/asset-uploader"; +import { cssVars } from "@webstudio-is/css-vars"; + +const triggerVisibilityVar = cssVars.define("trigger-visibility"); export const assetInfoTriggerCssVars = ({ show }: { show: boolean }) => ({ - "--asset-info-trigger-visibility": show ? "visible" : "hidden", + [triggerVisibilityVar]: show ? "visible" : "hidden", }); export const AssetInfoTrigger = ({ @@ -44,7 +47,7 @@ export const AssetInfoTrigger = ({ title="Options" onClick={() => setTooltipOpen(true)} css={{ - visibility: "var(--asset-info-trigger-visibility, hidden)", + visibility: cssVars.use(triggerVisibilityVar, "hidden"), position: "absolute", color: "$slate11", top: "$1", diff --git a/apps/designer/package.json b/apps/designer/package.json index 678b46e61d..c457ea1a8d 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -29,6 +29,7 @@ "@webstudio-is/icons": "*", "@webstudio-is/prisma-client": "*", "@webstudio-is/react-sdk": "*", + "@webstudio-is/css-vars": "*", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "debug": "^4.3.4", diff --git a/packages/css-vars/LICENSE b/packages/css-vars/LICENSE new file mode 100644 index 0000000000..1f6edad9a7 --- /dev/null +++ b/packages/css-vars/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Webstudio + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/css-vars/README.md b/packages/css-vars/README.md new file mode 100644 index 0000000000..a38dc09433 --- /dev/null +++ b/packages/css-vars/README.md @@ -0,0 +1,13 @@ +# CSS Vars utils + +This package helps you create uniquely named css variables as well as use them. + +## Example + +```ts +import { cssVars } from "css-vars"; + +const myVariable = cssVars.define("my-variable"); // --my-variable-0 + +cssVars.use(myVariable, "fallback"); // var(--my-variable-0, fallback) +``` diff --git a/packages/css-vars/package.json b/packages/css-vars/package.json new file mode 100644 index 0000000000..04de169738 --- /dev/null +++ b/packages/css-vars/package.json @@ -0,0 +1,29 @@ +{ + "name": "@webstudio-is/css-vars", + "version": "0.1.0", + "description": "CSS vars utility", + "author": "Webstudio ", + "homepage": "https://webstudio.is", + "scripts": { + "typecheck": "tsc --noEmit", + "checks": "yarn typecheck && yarn lint", + "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib", + "build": "rm -fr lib && tsc", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0" + }, + "dependencies": {}, + "devDependencies": { + "@webstudio-is/jest-config": "*", + "tsup": "^6.1.3", + "typescript": "^4.6.2" + }, + "main": "lib/index.js", + "types": "lib/index.d.ts", + "files": [ + "lib/*", + "README.md", + "!*.test.*" + ], + "license": "MIT", + "private": false +} diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts new file mode 100644 index 0000000000..3244a60f2a --- /dev/null +++ b/packages/css-vars/src/index.ts @@ -0,0 +1,11 @@ +let counter = -1; + +const define = (name: string) => { + return `--${name}-${++counter}`; +}; + +const use = (variable: string, ...fallbacks: Array) => { + return `var(${variable}, ${fallbacks})`; +}; + +export const cssVars = { define, use }; diff --git a/packages/css-vars/tsconfig.json b/packages/css-vars/tsconfig.json new file mode 100644 index 0000000000..6b67ca9bbf --- /dev/null +++ b/packages/css-vars/tsconfig.json @@ -0,0 +1,12 @@ +// Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 +{ + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", + "include": ["./src/**/*.ts"], + "compilerOptions": { + "module": "commonjs", + "target": "ES2020", + "strict": true, + "baseUrl": ".", + "outDir": "./lib" + } +} diff --git a/packages/icons/package.json b/packages/icons/package.json index e500e09f13..9ef9df0d2c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -20,7 +20,8 @@ "react-dom": "^17.0.2" }, "dependencies": { - "@radix-ui/react-icons": "^1.1.0" + "@radix-ui/react-icons": "^1.1.0", + "@webstudio-is/css-vars": "*" }, "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx index 3609638bbe..f5f677fd5e 100644 --- a/packages/icons/src/gear.tsx +++ b/packages/icons/src/gear.tsx @@ -1,8 +1,11 @@ +import { cssVars } from "@webstudio-is/css-vars"; import * as React from "react"; import { IconProps } from "./types"; +const fillVar = cssVars.define("fill"); + export const gearIconCssVars = ({ fill }: { fill: string }) => ({ - "--gear-icon-fill": fill, + [fillVar]: fill, }); export const GearIcon = React.forwardRef( @@ -23,7 +26,7 @@ export const GearIcon = React.forwardRef( strokeWidth={1.25} strokeLinecap="round" strokeLinejoin="round" - style={{ fill: "var(--gear-icon-fill, none)" }} + style={{ fill: cssVars.use(fillVar, "none") }} /> Date: Sat, 3 Sep 2022 20:45:15 +0200 Subject: [PATCH 10/12] use as const --- packages/css-vars/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts index 3244a60f2a..167e31a717 100644 --- a/packages/css-vars/src/index.ts +++ b/packages/css-vars/src/index.ts @@ -1,11 +1,11 @@ let counter = -1; const define = (name: string) => { - return `--${name}-${++counter}`; + return `--${name}-${++counter}` as const; }; const use = (variable: string, ...fallbacks: Array) => { - return `var(${variable}, ${fallbacks})`; + return `var(${variable}, ${fallbacks})` as const; }; export const cssVars = { define, use }; From 1d5540e3f54198eca8a00d132505d7676781ba43 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 22:01:04 +0200 Subject: [PATCH 11/12] type the return values so that typescript tells the user how the var string and variable looks like --- packages/css-vars/src/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts index 167e31a717..c6a967dc81 100644 --- a/packages/css-vars/src/index.ts +++ b/packages/css-vars/src/index.ts @@ -1,11 +1,12 @@ let counter = -1; -const define = (name: string) => { +const define = (name: Name) => { return `--${name}-${++counter}` as const; }; -const use = (variable: string, ...fallbacks: Array) => { - return `var(${variable}, ${fallbacks})` as const; +const use = (...args: Args) => { + type JoinedArgs = `${typeof args[0]}, ${typeof args[1]}, ${typeof args[2]}`; + return `var(${args.join(", ") as JoinedArgs})` as const; }; export const cssVars = { define, use }; From cb09f3ef104c341e2f9cce4bdfde78417ae6aa24 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 4 Sep 2022 10:48:23 +0200 Subject: [PATCH 12/12] I have no idea how this works because @andarist wrote it --- packages/css-vars/src/index.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts index c6a967dc81..3085c36290 100644 --- a/packages/css-vars/src/index.ts +++ b/packages/css-vars/src/index.ts @@ -4,9 +4,18 @@ const define = (name: Name) => { return `--${name}-${++counter}` as const; }; +type Cast = T1 extends T2 ? T1 : T2; + +type Join = T extends [] + ? "" + : T extends [string] + ? T[0] + : T extends [string, ...infer Rest] + ? `${T[0]}${D}${Join, D>}` + : never; + const use = (...args: Args) => { - type JoinedArgs = `${typeof args[0]}, ${typeof args[1]}, ${typeof args[2]}`; - return `var(${args.join(", ") as JoinedArgs})` as const; + return `var(${args.join(", ") as Join})` as const; }; export const cssVars = { define, use };