antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[enhancement]: custom css

Browse source
This commit is contained in:
Kendall Garner 2024-08-27 08:26:34 -07:00
parent 004c9a8d06
commit 6125901023
No known key found for this signature in database
GPG key ID: 18D2767419676C87
10 changed files with 332 additions and 325 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/renderer/features/settings/components/advanced/advanced-tab.tsx Normal file
View file

@ -0,0 +1,10 @@
import { Stack } from '@mantine/core';
import { StylesSettings } from '/@/renderer/features/settings/components/advanced/styles-settings';
export const AdvancedTab = () => {
return (
<Stack spacing="md">
<StylesSettings />
</Stack>
);
};

126
src/renderer/features/settings/components/advanced/styles-settings.tsx Normal file
View file

@ -0,0 +1,126 @@
import { useState } from 'react';
import { Button, ConfirmModal, Switch, Text, Textarea } from '/@/renderer/components';
import { sanitizeCss } from '/@/renderer/utils/sanitize';
import { Code } from '@mantine/core';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { closeAllModals, openModal } from '@mantine/modals';
import { useTranslation } from 'react-i18next';
import { useCssSettings, useSettingsStoreActions } from '/@/renderer/store';
export const StylesSettings = () => {
const [open, setOpen] = useState(false);
const { t } = useTranslation();
const { enabled, content } = useCssSettings();
const [css, setCss] = useState(content);
const { setSettings } = useSettingsStoreActions();
const handleSave = () => {
setSettings({
css: {
content: css,
enabled,
},
});
};
const handleResetToDefault = () => {
setSettings({
css: {
content,
enabled: true,
},
});
closeAllModals();
};
const openConfirmModal = () => {
openModal({
children: (
<ConfirmModal onConfirm={handleResetToDefault}>
<Text color="red !important">
{t('setting.customCssNotice', { postProcess: 'sentenceCase' })}
</Text>
</ConfirmModal>
),
title: t('setting.customCssEnable', { postProcess: 'sentenceCase' }),
});
};
return (
<>
<SettingsOptions
control={
<Switch
checked={enabled}
onChange={(e) => {
if (!e.currentTarget.checked) {
setSettings({
css: {
content,
enabled: false,
},
});
} else {
openConfirmModal();
}
}}
/>
}
description={t('setting.customCssEnable', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.customCssEnable', { postProcess: 'sentenceCase' })}
/>
{enabled && (
<>
<SettingsOptions
control={
<>
{open && (
<Button
compact
// disabled={isSaveButtonDisabled}
variant="filled"
onClick={handleSave}
>
{t('common.save', { postProcess: 'titleCase' })}
</Button>
)}
<Button
compact
variant="filled"
onClick={() => setOpen(!open)}
>
{t(open ? 'common.close' : 'common.edit', {
postProcess: 'titleCase',
})}
</Button>
</>
}
description={t('setting.customCss', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.customCss', { postProcess: 'sentenceCase' })}
/>
{open && (
<>
<Textarea
autosize
defaultValue={css}
onBlur={(e) =>
setCss(sanitizeCss(`<style>${e.currentTarget.value}`))
}
/>
<Text>{t('common.preview', { postProcess: 'sentenceCase' })}: </Text>
<Code block>{css}</Code>
</>
)}
</>
)}
</>
);
};

12
src/renderer/features/settings/components/settings-content.tsx
View file

@ -29,6 +29,12 @@ const HotkeysTab = lazy(() =>
})),
);
const AdvancedTab = lazy(() =>
import('/@/renderer/features/settings/components/advanced/advanced-tab').then((module) => ({
default: module.AdvancedTab,
})),
);
const TabContainer = styled.div`
width: 100%;
height: 100%;
@ -65,6 +71,9 @@ export const SettingsContent = () => {
{t('page.setting.windowTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
)}
<Tabs.Tab value="advanced">
{t('page.setting.advanced', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<GeneralTab />
@ -80,6 +89,9 @@ export const SettingsContent = () => {
<ApplicationTab />
</Tabs.Panel>
)}
<Tabs.Panel value="advanced">
<AdvancedTab />
</Tabs.Panel>
</Tabs>
</TabContainer>
);