mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-06 04:53:56 +03:00
feat: more settings
This commit is contained in:
parent
c789c914aa
commit
e7564d4058
4 changed files with 130 additions and 4 deletions
|
@ -1,4 +1,5 @@
|
||||||
import { CheckBox } from "./checkbox";
|
import { CheckBox } from "./checkbox";
|
||||||
|
import { inputStyle } from "./styles";
|
||||||
|
|
||||||
function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
||||||
return (
|
return (
|
||||||
|
@ -10,10 +11,71 @@ function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
window.settings[settingName] = e.target.checked;
|
window.settings[settingName] = e.target.checked;
|
||||||
localStorage.setObj("settings", window.settings);
|
localStorage.setObj("settings", window.settings);
|
||||||
onClick(e);
|
onClick && onClick(e);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { SettingsCheckBox };
|
function SettingsTextInput({
|
||||||
|
placeholder,
|
||||||
|
title,
|
||||||
|
label,
|
||||||
|
className,
|
||||||
|
settingName,
|
||||||
|
onChange,
|
||||||
|
secret,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="ml-2">
|
||||||
|
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className={`${inputStyle} m-2 ${className}`}
|
||||||
|
type={secret ? "password" : "text"}
|
||||||
|
placeholder={placeholder}
|
||||||
|
title={title}
|
||||||
|
defaultValue={window.settings[settingName]}
|
||||||
|
onChange={(e) => {
|
||||||
|
window.settings[settingName] = e.target.value;
|
||||||
|
localStorage.setObj("settings", window.settings);
|
||||||
|
onChange && onChange(e);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SettingsSelectInput({
|
||||||
|
label,
|
||||||
|
className,
|
||||||
|
settingName,
|
||||||
|
options,
|
||||||
|
onChange,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="ml-2">
|
||||||
|
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
className={`${inputStyle} m-2 ${className}`}
|
||||||
|
defaultValue={window.settings[settingName]}
|
||||||
|
onChange={(e) => {
|
||||||
|
window.settings[settingName] = e.target.value;
|
||||||
|
localStorage.setObj("settings", window.settings);
|
||||||
|
onChange && onChange(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{options.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { SettingsCheckBox, SettingsTextInput, SettingsSelectInput };
|
||||||
|
|
4
src/components/styles.js
Normal file
4
src/components/styles.js
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
let inputStyle =
|
||||||
|
"form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
|
||||||
|
|
||||||
|
export { inputStyle };
|
|
@ -13,6 +13,7 @@ import remarkStringify from "remark-stringify";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import remarkMath from "remark-math";
|
import remarkMath from "remark-math";
|
||||||
import { SettingsCheckBox } from "../components/settingsInputs";
|
import { SettingsCheckBox } from "../components/settingsInputs";
|
||||||
|
import { inputStyle } from "../components/styles";
|
||||||
|
|
||||||
function CreateNote() {
|
function CreateNote() {
|
||||||
const [preview, setPreview] = useState(false);
|
const [preview, setPreview] = useState(false);
|
||||||
|
@ -36,7 +37,6 @@ function CreateNote() {
|
||||||
localStorage.setItem("NoteText", md);
|
localStorage.setItem("NoteText", md);
|
||||||
}
|
}
|
||||||
|
|
||||||
let inputStyle = `form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none`;
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
import { SettingsCheckBox } from "../components/settingsInputs";
|
import {
|
||||||
|
SettingsCheckBox,
|
||||||
|
SettingsTextInput,
|
||||||
|
SettingsSelectInput,
|
||||||
|
} from "../components/settingsInputs";
|
||||||
function Settings() {
|
function Settings() {
|
||||||
return (
|
return (
|
||||||
<div className="">
|
<div className="">
|
||||||
|
@ -6,6 +10,32 @@ function Settings() {
|
||||||
Настройки
|
Настройки
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
|
||||||
|
Пользователь
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<SettingsTextInput
|
||||||
|
placeholder="Имя"
|
||||||
|
label="Имя пользователя"
|
||||||
|
settingName="userName"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SettingsTextInput
|
||||||
|
placeholder="Ссылка"
|
||||||
|
label="Ссылка на фото"
|
||||||
|
settingName="userPhoto"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SettingsTextInput
|
||||||
|
placeholder="Статус"
|
||||||
|
label="Статус пользователя"
|
||||||
|
settingName="userStatus"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
|
||||||
|
Заметки
|
||||||
|
</h1>
|
||||||
|
|
||||||
<SettingsCheckBox
|
<SettingsCheckBox
|
||||||
label="Редактирование в предпросмотре"
|
label="Редактирование в предпросмотре"
|
||||||
title="Может вызывать необратимые изменения текста, например ломает теги кода"
|
title="Может вызывать необратимые изменения текста, например ломает теги кода"
|
||||||
|
@ -19,6 +49,36 @@ function Settings() {
|
||||||
checked={settings.publicNote}
|
checked={settings.publicNote}
|
||||||
settingName="publicNote"
|
settingName="publicNote"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
|
||||||
|
Интерфейс
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<SettingsSelectInput
|
||||||
|
label="Язык"
|
||||||
|
settingName="language"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
value: "ru",
|
||||||
|
label: "Русский",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "en",
|
||||||
|
label: "English",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
|
||||||
|
Стороннее API
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<SettingsTextInput
|
||||||
|
placeholder="Ключ"
|
||||||
|
label="OpenAi API ключ"
|
||||||
|
settingName="openAiKey"
|
||||||
|
secret
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue