Skip to content

Commit 7680ae1

Browse files
matifalimatifali
committed
Add arrow and fix icon
1 parent 8159639 commit 7680ae1

File tree

2 files changed

+87
-85
lines changed

2 files changed

+87
-85
lines changed

‎site/src/components/Icons/VSCodeInsidersIcon.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
22

33
export const VSCodeInsidersIcon = (props: SvgIconProps) => (
4-
<SvgIcon {...props} viewBox="0 0 100 100">
5-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
6-
<mask
7-
id="mask0"
8-
mask-type="alpha"
9-
maskUnits="userSpaceOnUse"
10-
x="0"
11-
y="0"
12-
width="100"
13-
height="100"
14-
>
4+
<SvgIcon {...props} viewBox="0 0 256 256">
5+
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
157
<path
168
d="M176.049 250.669C180.838 255.459 188.13 256.7 194.234 253.764L246.94 228.419C252.478 225.755 256 220.154 256 214.008V42.1479C256 36.0025 252.478 30.4008 246.94 27.7374L194.234 2.39089C188.13 -0.544416 180.838 0.696607 176.049 5.48572C181.95 -0.41506 192.039 3.76413 192.039 12.1091V244.046C192.039 252.391 181.95 256.57 176.049 250.669Z"
179
fill="white"

‎site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx

Lines changed: 84 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import React, { FC, PropsWithChildren, useState, useEffect } from "react"
2-
import { getApiKey } from "api/api"
3-
import { VSCodeIcon } from "components/Icons/VSCodeIcon"
4-
import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"
5-
import { PrimaryAgentButton } from "components/Resources/AgentButton"
1+
import React, { FC, PropsWithChildren, useState, useEffect } from "react";
2+
import { getApiKey } from "api/api";
3+
import { VSCodeIcon } from "components/Icons/VSCodeIcon";
4+
import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
5+
import { PrimaryAgentButton } from "components/Resources/AgentButton";
6+
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
67

78
export interface VSCodeDesktopButtonProps {
8-
userName: string
9-
workspaceName: string
10-
agentName?: string
11-
folderPath?: string
9+
userName: string;
10+
workspaceName: string;
11+
agentName?: string;
12+
folderPath?: string;
1213
}
1314

1415
enum VSCodeVariant {
@@ -17,112 +18,121 @@ enum VSCodeVariant {
1718
}
1819

1920
const getSelectedVariantFromLocalStorage = (): VSCodeVariant | null => {
20-
const storedVariant = localStorage.getItem("selectedVariant")
21+
const storedVariant = localStorage.getItem("selectedVariant");
2122
if (
2223
storedVariant &&
2324
Object.values(VSCodeVariant).includes(storedVariant as VSCodeVariant)
2425
) {
25-
return storedVariant as VSCodeVariant
26+
return storedVariant as VSCodeVariant;
2627
}
27-
return null
28-
}
28+
return null;
29+
};
2930

3031
export const VSCodeDesktopButton: FC<
3132
PropsWithChildren<VSCodeDesktopButtonProps>
3233
> = ({ userName, workspaceName, agentName, folderPath }) => {
33-
const [loading, setLoading] = useState(false)
34+
const [loading, setLoading] = useState(false);
3435
const [selectedVariant, setSelectedVariant] = useState<VSCodeVariant | null>(
35-
getSelectedVariantFromLocalStorage(),
36-
)
37-
const [dropdownOpen, setDropdownOpen] = useState(false)
36+
getSelectedVariantFromLocalStorage()
37+
);
38+
const [dropdownOpen, setDropdownOpen] = useState(false);
3839

3940
useEffect(() => {
4041
if (selectedVariant) {
41-
localStorage.setItem("selectedVariant", selectedVariant)
42+
localStorage.setItem("selectedVariant", selectedVariant);
4243
} else {
43-
localStorage.removeItem("selectedVariant")
44+
localStorage.removeItem("selectedVariant");
4445
}
45-
}, [selectedVariant])
46+
}, [selectedVariant]);
4647

4748
const handleButtonClick = () => {
48-
setLoading(true)
49+
setLoading(true);
4950
getApiKey()
5051
.then(({ key }) => {
5152
const query = new URLSearchParams({
5253
owner: userName,
5354
workspace: workspaceName,
5455
url: location.origin,
5556
token: key,
56-
})
57+
});
5758
if (agentName) {
58-
query.set("agent", agentName)
59+
query.set("agent", agentName);
5960
}
6061
if (folderPath) {
61-
query.set("folder", folderPath)
62+
query.set("folder", folderPath);
6263
}
6364

6465
const vscodeCommand =
6566
selectedVariant === VSCodeVariant.VSCode
6667
? "vscode://"
67-
: "vscode-insiders://"
68+
: "vscode-insiders://";
6869

69-
location.href = `${vscodeCommand}coder.coder-remote/open?${query.toString()}`
70+
location.href = `${vscodeCommand}coder.coder-remote/open?${query.toString()}`;
7071
})
7172
.catch((ex) => {
72-
console.error(ex)
73+
console.error(ex);
7374
})
7475
.finally(() => {
75-
setLoading(false)
76-
})
77-
}
76+
setLoading(false);
77+
});
78+
};
7879

7980
const handleVariantChange = (variant: VSCodeVariant) => {
80-
setSelectedVariant(variant)
81-
setDropdownOpen(false)
82-
}
81+
setSelectedVariant(variant);
82+
setDropdownOpen(false);
83+
};
8384

8485
return (
85-
<div>
86-
<div style={{ position: "relative" }}>
87-
<PrimaryAgentButton
88-
startIcon={
89-
selectedVariant === VSCodeVariant.VSCode ? (
90-
<VSCodeIcon />
91-
) : (
92-
<VSCodeInsidersIcon />
93-
)
94-
}
95-
disabled={loading || dropdownOpen}
96-
onClick={() => setDropdownOpen(!dropdownOpen)}
86+
<div style={{ position: "relative", display: "inline-flex" }}>
87+
<PrimaryAgentButton
88+
startIcon={
89+
selectedVariant === VSCodeVariant.VSCode ? (
90+
<VSCodeIcon />
91+
) : (
92+
<VSCodeInsidersIcon />
93+
)
94+
}
95+
disabled={loading || dropdownOpen}
96+
onClick={handleButtonClick}
97+
>
98+
{selectedVariant === VSCodeVariant.VSCode
99+
? "VS Code Desktop"
100+
: "VS Code Insiders"}
101+
</PrimaryAgentButton>
102+
<PrimaryAgentButton
103+
onClick={() => setDropdownOpen(!dropdownOpen)}
104+
>
105+
<KeyboardArrowDownIcon
106+
style={{
107+
transition: "transform 0.3s ease-in-out",
108+
transform: dropdownOpen ? "rotate(180deg)" : "rotate(0)",
109+
cursor: "pointer",
110+
}}
111+
/>
112+
</PrimaryAgentButton>
113+
{dropdownOpen && (
114+
<div
115+
style={{
116+
position: "absolute",
117+
top: "100%",
118+
left: 0,
119+
marginTop: "4px",
120+
}}
97121
>
98-
{selectedVariant === VSCodeVariant.VSCode
99-
? "VS Code Desktop"
100-
: "VS Code Insiders"}
101-
</PrimaryAgentButton>
102-
{dropdownOpen && (
103-
<div
104-
style={{
105-
position: "absolute",
106-
top: "100%",
107-
left: 0,
108-
marginTop: "4px",
109-
}}
122+
<PrimaryAgentButton
123+
onClick={() => handleVariantChange(VSCodeVariant.VSCode)}
124+
startIcon={<VSCodeIcon />}
125+
>
126+
VS Code Desktop
127+
</PrimaryAgentButton>
128+
<PrimaryAgentButton
129+
onClick={() => handleVariantChange(VSCodeVariant.VSCodeInsiders)}
130+
startIcon={<VSCodeInsidersIcon />}
110131
>
111-
<PrimaryAgentButton
112-
onClick={() => handleVariantChange(VSCodeVariant.VSCode)}
113-
startIcon={<VSCodeIcon />}
114-
>
115-
VS Code Desktop
116-
</PrimaryAgentButton>
117-
<PrimaryAgentButton
118-
onClick={() => handleVariantChange(VSCodeVariant.VSCodeInsiders)}
119-
startIcon={<VSCodeInsidersIcon />}
120-
>
121-
VS Code Insiders
122-
</PrimaryAgentButton>
123-
</div>
124-
)}
125-
</div>
132+
VS Code Insiders
133+
</PrimaryAgentButton>
134+
</div>
135+
)}
126136
</div>
127-
)
128-
}
137+
);
138+
};

0 commit comments

Comments
 (0)