-
Notifications
You must be signed in to change notification settings - Fork 83
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[view] 브랜치 변경 시 테마 초기화되는 문제 해결 및 코드 리팩토링 #767
Changes from 6 commits
819a9dc
031deaf
c8f0c62
ebb50c0
651ce0c
0f92f97
37e4c63
d7f115d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import type { ThemeInfo } from "./ThemeSelector.type"; | ||
|
||
export const THEME_INFO: ThemeInfo = { | ||
Comment on lines
+1
to
+3
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 분리 설계 좋습니다 👍 |
||
githru: { | ||
title: "Githru", | ||
value: "githru", | ||
colors: { | ||
primary: "#e06091", | ||
secondary: "#8840bb", | ||
tertiary: "#ffd08a", | ||
}, | ||
}, | ||
"hacker-blue": { | ||
title: "Hacker Blue", | ||
value: "hacker-blue", | ||
colors: { | ||
primary: "#456cf7", | ||
secondary: "#3f4c73", | ||
tertiary: "#6c60f0", | ||
}, | ||
}, | ||
aqua: { | ||
title: "Aqua", | ||
value: "aqua", | ||
colors: { | ||
primary: "#51decd", | ||
secondary: "#0687a3", | ||
tertiary: "#a7ffff", | ||
}, | ||
}, | ||
"cotton-candy": { | ||
title: "Cotton Candy", | ||
value: "cotton-candy", | ||
colors: { | ||
primary: "#ffcccb", | ||
secondary: "#feffd1", | ||
tertiary: "#a39aeb", | ||
}, | ||
}, | ||
mono: { | ||
title: "Mono", | ||
value: "mono", | ||
colors: { | ||
primary: "#68788f", | ||
secondary: "#3a4776", | ||
tertiary: "#9aaed1", | ||
}, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,82 +3,19 @@ import "./ThemeSelector.scss"; | |
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; | ||
import CloseIcon from "@mui/icons-material/Close"; | ||
|
||
import { setCustomTheme } from "services"; | ||
import { sendUpdateThemeCommand } from "services"; | ||
|
||
type ThemeInfo = { | ||
title: string; | ||
value: string; | ||
colors: { | ||
primary: string; | ||
secondary: string; | ||
tertiary: string; | ||
}; | ||
}; | ||
import { THEME_INFO } from "./ThemeSelector.const"; | ||
import type { ThemeInfo } from "./ThemeSelector.type"; | ||
|
||
type ThemeIconsProps = ThemeInfo & { | ||
type ThemeIconsProps = ThemeInfo[keyof ThemeInfo] & { | ||
onClick: () => void; | ||
}; | ||
|
||
const themeInfo: ThemeInfo[] = [ | ||
{ | ||
title: "Githru", | ||
value: "githru", | ||
colors: { | ||
primary: "#e06091", | ||
secondary: "#8840bb", | ||
tertiary: "#ffd08a", | ||
}, | ||
}, | ||
{ | ||
title: "Hacker Blue", | ||
value: "hacker-blue", | ||
colors: { | ||
primary: "#456cf7", | ||
secondary: "#3f4c73", | ||
tertiary: "#6c60f0", | ||
}, | ||
}, | ||
{ | ||
title: "Aqua", | ||
value: "aqua", | ||
colors: { | ||
primary: "#51decd", | ||
secondary: "#0687a3", | ||
tertiary: "#a7ffff", | ||
}, | ||
}, | ||
{ | ||
title: "Cotton Candy", | ||
value: "cotton-candy", | ||
colors: { | ||
primary: "#ffcccb", | ||
secondary: "#feffd1", | ||
tertiary: "#a39aeb", | ||
}, | ||
}, | ||
|
||
{ | ||
title: "Mono", | ||
value: "mono", | ||
colors: { | ||
primary: "#68788f", | ||
secondary: "#3a4776", | ||
tertiary: "#9aaed1", | ||
}, | ||
}, | ||
]; | ||
|
||
const ThemeIcons = ({ title, value, colors, onClick }: ThemeIconsProps) => { | ||
const [selectedItem, setSelectedItem] = useState<string>(""); | ||
|
||
useEffect(() => { | ||
const selectedTheme = document.documentElement.getAttribute("custom-type"); | ||
if (selectedTheme) setSelectedItem(selectedTheme); | ||
}, []); | ||
|
||
return ( | ||
<div | ||
className={`theme-icon${selectedItem === value ? "--selected" : ""}`} | ||
className={`theme-icon${window.theme === value ? "--selected" : ""}`} | ||
onClick={onClick} | ||
role="presentation" | ||
> | ||
|
@@ -101,8 +38,9 @@ const ThemeSelector = () => { | |
const themeSelectorRef = useRef<HTMLDivElement>(null); | ||
|
||
const handleTheme = (value: string) => { | ||
setCustomTheme(value); | ||
document.documentElement.setAttribute("custom-type", value); | ||
sendUpdateThemeCommand(value); | ||
window.theme = value; | ||
document.documentElement.setAttribute("theme", value); | ||
Comment on lines
+41
to
+43
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Discussion에 써주신대로 |
||
}; | ||
|
||
useEffect(() => { | ||
|
@@ -118,7 +56,7 @@ const ThemeSelector = () => { | |
}, []); | ||
|
||
useEffect(() => { | ||
document.documentElement.setAttribute("custom-type", window.theme); | ||
document.documentElement.setAttribute("theme", window.theme); | ||
}, []); | ||
|
||
return ( | ||
|
@@ -137,7 +75,7 @@ const ThemeSelector = () => { | |
/> | ||
</div> | ||
<div className="theme-selector__list"> | ||
{themeInfo.map((theme) => ( | ||
{Object.entries(THEME_INFO).map(([_, theme]) => ( | ||
<ThemeIcons | ||
key={theme.value} | ||
{...theme} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
export type ThemeInfo = { | ||
[key in "githru" | "hacker-blue" | "aqua" | "cotton-candy" | "mono"]: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 무결성을 위해 key의 literal type을 강제한 것 매우 좋아보입니다! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 넵 그럼 다음 이슈에서 상수로 관리하도록 빼두겠습니다 ! ! ! |
||
title: string; | ||
value: key; | ||
colors: { | ||
primary: string; | ||
secondary: string; | ||
tertiary: string; | ||
}; | ||
}; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -54,10 +54,10 @@ export default class FakeIDEAdapter implements IDEPort { | |
this.sendMessageToMe(message); | ||
} | ||
|
||
public setCustomTheme(color: string) { | ||
sessionStorage.setItem("PRIMARY_COLOR", color); | ||
public sendUpdateThemeMessage(theme: string) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 함수명이 훨씬 직관적이네요 😮 |
||
sessionStorage.setItem("THEME", theme); | ||
const message: IDEMessage = { | ||
command: "updateCustomTheme", | ||
command: "updateTheme", | ||
}; | ||
this.sendMessageToMe(message); | ||
} | ||
|
@@ -76,7 +76,7 @@ export default class FakeIDEAdapter implements IDEPort { | |
command, | ||
payload: JSON.stringify(fakeBranchList), | ||
}; | ||
case "updateCustomTheme": | ||
case "updateTheme": | ||
return { | ||
command, | ||
payload: sessionStorage.getItem("CUSTOM_THEME") as string, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,9 +49,9 @@ export default class VSCodeIDEAdapter implements IDEPort { | |
this.sendMessageToIDE(message); | ||
} | ||
|
||
public setCustomTheme(theme: string) { | ||
public sendUpdateThemeMessage(theme: string) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 함수명 적절하게 잘 바꿔주신 것 같아요!!!🥰🥰 |
||
const message: IDEMessage = { | ||
command: "updateCustomTheme", | ||
command: "updateTheme", | ||
payload: JSON.stringify({ theme }), | ||
}; | ||
this.sendMessageToIDE(message); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,13 +31,13 @@ | |
|
||
const icon_path = vscode.Uri.file(path.join(this.extensionPath, "images", "logo.png")); | ||
this._panel.iconPath = icon_path; | ||
let analyzedData; | ||
this._panel.webview.onDidReceiveMessage(async (message: { command: string; payload?: string }) => { | ||
try { | ||
const { command, payload } = message; | ||
|
||
if (command === "fetchAnalyzedData" || command === "refresh") { | ||
const baseBranchName = (payload && JSON.parse(payload)) ?? (await fetchCurrentBranch()); | ||
try { | ||
const baseBranchName = (payload && JSON.parse(payload)) ?? (await fetchCurrentBranch()); | ||
const storedAnalyzedData = context.workspaceState.get<ClusterNode[]>( | ||
|
@@ -77,10 +77,10 @@ | |
}); | ||
} | ||
|
||
if (command === "updateCustomTheme") { | ||
const colorCode = payload && JSON.parse(payload); | ||
if (colorCode.theme) { | ||
setTheme(colorCode.theme); | ||
if (command === "updateTheme") { | ||
const themeInfo = payload && JSON.parse(payload); | ||
if (themeInfo.theme) { | ||
setTheme(themeInfo.theme); | ||
} | ||
} | ||
} catch (e) { | ||
|
@@ -92,7 +92,7 @@ | |
// this.dispose(); | ||
// throw new Error("Project not connected to Git."); | ||
// } | ||
this.setWebviewContent(); | ||
this._panel.webview.html = this.getWebviewContent(this._panel.webview); | ||
} | ||
|
||
dispose() { | ||
|
@@ -111,12 +111,12 @@ | |
}); | ||
} | ||
|
||
private async getWebviewContent(webview: vscode.Webview): Promise<string> { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. (궁금) return type은 왜 삭제하게 되셨는지 궁금합니다.!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 기존 함수를 async로 변경하고, Promise Type을 씌웠는데, 다시 동기 함수로 변경하는 과정에서 삭제가 되어버렸습니다 🥲 |
||
private getWebviewContent(webview: vscode.Webview) { | ||
const reactAppPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, "dist", "webviewApp.js")); | ||
const reactAppUri = webview.asWebviewUri(reactAppPathOnDisk); | ||
// const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" }); | ||
|
||
const theme = await getTheme(); | ||
const theme = getTheme(); | ||
const returnString = ` | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
@@ -141,12 +141,6 @@ | |
return returnString; | ||
} | ||
|
||
private async setWebviewContent() { | ||
if (this._panel) { | ||
this._panel.webview.html = await this.getWebviewContent(this._panel.webview); | ||
} | ||
} | ||
|
||
public setGlobalOwnerAndRepo(owner: string, repo: string) { | ||
if (this._panel) { | ||
this._panel.webview.postMessage({ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
로딩 컴포넌트에도 선택한 theme 컬러가 적용되니 좋네요 👍👍