mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-03 00:33:49 +03:00
refactor: lint
This commit is contained in:
parent
5a19e9fd12
commit
b56fc4d888
@ -315,7 +315,8 @@
|
||||
"delete_all_themes": "Delete all themes",
|
||||
"delete_all_themes_description": "This will delete all your custom themes",
|
||||
"delete_theme_description": "This will delete the theme {{theme}}",
|
||||
"cancel": "Cancel"
|
||||
"cancel": "Cancel",
|
||||
"appearance": "Appearance"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "Download complete",
|
||||
|
@ -2,11 +2,11 @@ import { registerEvent } from "../register-event";
|
||||
import { WindowManager } from "@main/services";
|
||||
|
||||
const injectCSS = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
cssString: string
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
cssString: string
|
||||
) => {
|
||||
WindowManager.mainWindow?.webContents.send("css-injected", cssString);
|
||||
return;
|
||||
WindowManager.mainWindow?.webContents.send("css-injected", cssString);
|
||||
return;
|
||||
};
|
||||
|
||||
registerEvent("injectCSS", injectCSS);
|
@ -3,8 +3,8 @@ import { themes } from "@main/level/sublevels/themes";
|
||||
import { Theme } from "@types";
|
||||
|
||||
const getActiveCustomTheme = async () => {
|
||||
const allThemes = await themes.values().all();
|
||||
return allThemes.find((theme: Theme) => theme.isActive);
|
||||
const allThemes = await themes.values().all();
|
||||
return allThemes.find((theme: Theme) => theme.isActive);
|
||||
};
|
||||
|
||||
registerEvent("getActiveCustomTheme", getActiveCustomTheme);
|
||||
|
@ -1,8 +1,11 @@
|
||||
import { themes } from "@main/level/sublevels/themes";
|
||||
import { registerEvent } from "../register-event";
|
||||
|
||||
const getCustomThemeById = async (_event: Electron.IpcMainInvokeEvent, themeId: string) => {
|
||||
return await themes.get(themeId);
|
||||
const getCustomThemeById = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string
|
||||
) => {
|
||||
return await themes.get(themeId);
|
||||
};
|
||||
|
||||
registerEvent("getCustomThemeById", getCustomThemeById);
|
||||
|
@ -1,7 +1,10 @@
|
||||
import { WindowManager } from "@main/services";
|
||||
import { registerEvent } from "../register-event";
|
||||
|
||||
const openEditorWindow = async (_event: Electron.IpcMainInvokeEvent, themeId: string) => {
|
||||
const openEditorWindow = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string
|
||||
) => {
|
||||
WindowManager.openEditorWindow(themeId);
|
||||
};
|
||||
|
||||
|
@ -230,16 +230,11 @@ export class WindowManager {
|
||||
`${process.env["ELECTRON_RENDERER_URL"]}#/editor?themeId=${themeId}`
|
||||
);
|
||||
} else {
|
||||
editorWindow.loadFile(
|
||||
path.join(__dirname, "../renderer/index.html"),
|
||||
{
|
||||
hash: "editor",
|
||||
}
|
||||
);
|
||||
editorWindow.loadFile(path.join(__dirname, "../renderer/index.html"), {
|
||||
hash: "editor",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
editorWindow.once("ready-to-show", () => {
|
||||
editorWindow.show();
|
||||
});
|
||||
|
@ -349,11 +349,12 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
|
||||
|
||||
/* Editor */
|
||||
openEditorWindow: (themeId: string) => ipcRenderer.invoke("openEditorWindow", themeId),
|
||||
injectCSS: (cssString: string) =>
|
||||
ipcRenderer.invoke("injectCSS", cssString),
|
||||
openEditorWindow: (themeId: string) =>
|
||||
ipcRenderer.invoke("openEditorWindow", themeId),
|
||||
injectCSS: (cssString: string) => ipcRenderer.invoke("injectCSS", cssString),
|
||||
onCssInjected: (cb: (cssString: string) => void) => {
|
||||
const listener = (_event: Electron.IpcRendererEvent, cssString: string) => cb(cssString);
|
||||
const listener = (_event: Electron.IpcRendererEvent, cssString: string) =>
|
||||
cb(cssString);
|
||||
ipcRenderer.on("css-injected", listener);
|
||||
return () => ipcRenderer.removeListener("css-injected", listener);
|
||||
},
|
||||
|
4
src/renderer/src/declaration.d.ts
vendored
4
src/renderer/src/declaration.d.ts
vendored
@ -282,7 +282,9 @@ declare global {
|
||||
/* Editor */
|
||||
openEditorWindow: (themeId: string) => Promise<void>;
|
||||
injectCSS: (cssString: string) => Promise<void>;
|
||||
onCssInjected: (cb: (cssString: string) => void) => () => Electron.IpcRenderer;
|
||||
onCssInjected: (
|
||||
cb: (cssString: string) => void
|
||||
) => () => Electron.IpcRenderer;
|
||||
}
|
||||
|
||||
interface Window {
|
||||
|
@ -1,22 +1,26 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from "react";
|
||||
import "./editor.scss";
|
||||
import Editor from '@monaco-editor/react';
|
||||
import { Theme } from '@types';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { Button } from '@renderer/components';
|
||||
import { CheckIcon, CodeIcon, ProjectRoadmapIcon } from '@primer/octicons-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Editor from "@monaco-editor/react";
|
||||
import { Theme } from "@types";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { Button } from "@renderer/components";
|
||||
import {
|
||||
CheckIcon,
|
||||
CodeIcon,
|
||||
ProjectRoadmapIcon,
|
||||
} from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const EditorPage = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [theme, setTheme] = useState<Theme | null>(null);
|
||||
const [code, setCode] = useState('');
|
||||
const [activeTab, setActiveTab] = useState('code');
|
||||
const [code, setCode] = useState("");
|
||||
const [activeTab, setActiveTab] = useState("code");
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
|
||||
const themeId = searchParams.get('themeId');
|
||||
const themeId = searchParams.get("themeId");
|
||||
|
||||
const { t } = useTranslation('settings');
|
||||
const { t } = useTranslation("settings");
|
||||
|
||||
const handleTabChange = (tab: string) => {
|
||||
setActiveTab(tab);
|
||||
@ -24,7 +28,7 @@ const EditorPage = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (themeId) {
|
||||
window.electron.getCustomThemeById(themeId).then(loadedTheme => {
|
||||
window.electron.getCustomThemeById(themeId).then((loadedTheme) => {
|
||||
if (loadedTheme) {
|
||||
setTheme(loadedTheme);
|
||||
setCode(loadedTheme.code);
|
||||
@ -35,16 +39,16 @@ const EditorPage = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === "s") {
|
||||
event.preventDefault();
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [code, theme]);
|
||||
|
||||
@ -60,7 +64,7 @@ const EditorPage = () => {
|
||||
const updatedTheme = {
|
||||
...theme,
|
||||
code: code,
|
||||
updatedAt: new Date()
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
||||
await window.electron.updateCustomTheme(theme.id, updatedTheme);
|
||||
@ -76,13 +80,10 @@ const EditorPage = () => {
|
||||
<div className="editor">
|
||||
<div className="editor__header">
|
||||
<h1>{theme?.name}</h1>
|
||||
{hasUnsavedChanges && (
|
||||
<div className="editor__header__status">
|
||||
</div>
|
||||
)}
|
||||
{hasUnsavedChanges && <div className="editor__header__status"></div>}
|
||||
</div>
|
||||
|
||||
{activeTab === 'code' && (
|
||||
{activeTab === "code" && (
|
||||
<Editor
|
||||
theme="vs-dark"
|
||||
defaultLanguage="css"
|
||||
@ -91,37 +92,45 @@ const EditorPage = () => {
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
wordWrap: 'on',
|
||||
lineNumbers: "on",
|
||||
wordWrap: "on",
|
||||
automaticLayout: true,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'info' && (
|
||||
{activeTab === "info" && (
|
||||
<div className="editor__info">
|
||||
entao mano eu ate fiz isso aqui mas tava feio dms ai deu vergonha e removi kkkk
|
||||
entao mano eu ate fiz isso aqui mas tava feio dms ai deu vergonha e
|
||||
removi kkkk
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="editor__footer">
|
||||
<div className="editor__footer-actions">
|
||||
<div className="editor__footer-actions__tabs">
|
||||
<Button onClick={() => handleTabChange('code')} theme='dark' className={activeTab === 'code' ? 'active' : ''}>
|
||||
<Button
|
||||
onClick={() => handleTabChange("code")}
|
||||
theme="dark"
|
||||
className={activeTab === "code" ? "active" : ""}
|
||||
>
|
||||
<CodeIcon />
|
||||
{t('editor_tab_code')}
|
||||
{t("editor_tab_code")}
|
||||
</Button>
|
||||
<Button onClick={() => handleTabChange('info')} theme='dark' className={activeTab === 'info' ? 'active' : ''}>
|
||||
<Button
|
||||
onClick={() => handleTabChange("info")}
|
||||
theme="dark"
|
||||
className={activeTab === "info" ? "active" : ""}
|
||||
>
|
||||
<ProjectRoadmapIcon />
|
||||
{t('editor_tab_info')}
|
||||
{t("editor_tab_info")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave}>
|
||||
<CheckIcon />
|
||||
{t('editor_tab_save')}
|
||||
{t("editor_tab_save")}
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -11,7 +11,7 @@ interface ThemeActionsProps {
|
||||
}
|
||||
|
||||
export const ThemeActions = ({ onListUpdated }: ThemeActionsProps) => {
|
||||
const { t } = useTranslation('settings');
|
||||
const { t } = useTranslation("settings");
|
||||
|
||||
const [addThemeModalVisible, setAddThemeModalVisible] = useState(false);
|
||||
const [deleteAllThemesModalVisible, setDeleteAllThemesModalVisible] =
|
||||
|
@ -14,7 +14,7 @@ interface ThemeCardProps {
|
||||
}
|
||||
|
||||
export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
|
||||
const { t } = useTranslation('settings');
|
||||
const { t } = useTranslation("settings");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [deleteThemeModalVisible, setDeleteThemeModalVisible] = useState(false);
|
||||
@ -31,14 +31,14 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
|
||||
removeCustomCss();
|
||||
await window.electron.updateCustomTheme(activeTheme.id, {
|
||||
...activeTheme,
|
||||
isActive: false
|
||||
isActive: false,
|
||||
});
|
||||
}
|
||||
|
||||
injectCustomCss(currentTheme.code);
|
||||
await window.electron.updateCustomTheme(currentTheme.id, {
|
||||
...currentTheme,
|
||||
isActive: true
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
onListUpdated();
|
||||
@ -52,7 +52,7 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
|
||||
removeCustomCss();
|
||||
await window.electron.updateCustomTheme(theme.id, {
|
||||
...theme,
|
||||
isActive: false
|
||||
isActive: false,
|
||||
});
|
||||
|
||||
onListUpdated();
|
||||
|
@ -26,7 +26,11 @@ export const SettingsAppearance = () => {
|
||||
<ThemePlaceholder onListUpdated={loadThemes} />
|
||||
) : (
|
||||
[...themes]
|
||||
.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.updatedAt).getTime() -
|
||||
new Date(a.updatedAt).getTime()
|
||||
)
|
||||
.map((theme) => (
|
||||
<ThemeCard
|
||||
key={theme.id}
|
||||
|
Loading…
Reference in New Issue
Block a user