admin/webstudio
1
0 Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-08 21:15:18 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix upload button and cog icon

Browse Source
This commit is contained in:
Sara Vieira committed 2022-08-31 17:38:00 +03:00
1 parent 6559a25700
commit aaea4867fe
8 files changed
+99 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
+9 -1
View File
@@ -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
<Flex align="center" gap={1}>
<UploadIcon />
<Text>Upload</Text>
</Flex>
</Button>
</Form>
);
apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
+5 -1
View File
@@ -56,7 +56,11 @@ export const TabContent = ({
onSetActiveTab("none");
}}
/>
<Flex gap="3" direction="column" css={{ padding: "$1" }}>
<Flex
gap="3"
direction="column"
css={{ padding: "$1", paddingTop: "$2" }}
>
<Flex justify="end">
<AddAnAssetForm onSubmit={onUploadAsset} />
</Flex>
apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
+3
View File
@@ -70,6 +70,9 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => {
"&:hover button": {
opacity: 1,
"path, circle": {
stroke: "$slate11",
},
},
}}
>
apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx
+10 -1
View File
@@ -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",
},
},
}}
>
<GearIcon />
packages/design-system/src/components/button.tsx
+10 -9
View File
@@ -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: {
packages/icons/src/gear.tsx
+35
View File
@@ -0,0 +1,35 @@
import * as React from "react";
import { IconProps } from "./types";
export const GearIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M9.117 2.878c-.284-1.17-1.95-1.17-2.234 0a1.149 1.149 0 01-1.714.71c-1.03-.627-2.207.551-1.58 1.58a1.15 1.15 0 01-.711 1.715c-1.17.284-1.17 1.95 0 2.234a1.15 1.15 0 01.71 1.714c-.627 1.03.551 2.207 1.58 1.58a1.148 1.148 0 011.715.711c.284 1.17 1.95 1.17 2.234 0a1.15 1.15 0 011.714-.71c1.03.627 2.207-.551 1.58-1.58a1.148 1.148 0 01.711-1.715c1.17-.284 1.17-1.95 0-2.234a1.15 1.15 0 01-.71-1.714c.627-1.03-.551-2.207-1.58-1.58a1.15 1.15 0 01-1.715-.711z"
stroke={color}
strokeWidth={1.25}
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle
cx={8}
cy={7.99988}
r={1.875}
stroke={color}
strokeWidth={1.25}
/>
</svg>
);
}
);
GearIcon.displayName = "GearIcon";
packages/icons/src/index.ts
+2
View File
@@ -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";
packages/icons/src/upload.tsx
+25
View File
@@ -0,0 +1,25 @@
import * as React from "react";
import { IconProps } from "./types";
export const UploadIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M9.758 8.442a.625.625 0 10.884-.884l-.884.884zM8 5.8l.442-.442a.625.625 0 00-.884 0L8 5.8zM5.358 7.558a.625.625 0 10.884.884l-.884-.884zM7.375 10.2a.625.625 0 101.25 0h-1.25zm5.5-2.2A4.875 4.875 0 018 12.875v1.25A6.125 6.125 0 0014.125 8h-1.25zM8 12.875A4.875 4.875 0 013.125 8h-1.25A6.125 6.125 0 008 14.125v-1.25zM3.125 8A4.875 4.875 0 018 3.125v-1.25A6.125 6.125 0 001.875 8h1.25zM8 3.125A4.875 4.875 0 0112.875 8h1.25A6.125 6.125 0 008 1.875v1.25zm2.642 4.433l-2.2-2.2-.884.884 2.2 2.2.884-.884zm-3.084-2.2l-2.2 2.2.884.884 2.2-2.2-.884-.884zM8.625 10.2V5.8h-1.25v4.4h1.25z"
fill={color}
/>
</svg>
);
}
);
UploadIcon.displayName = "UploadIcon";