mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
fix: Settings styles
This commit is contained in:
parent
2c07e71349
commit
f3106daa4b
4 changed files with 97 additions and 92 deletions
|
@ -1,5 +1,5 @@
|
|||
import { CheckBox } from "./checkbox";
|
||||
import { inputStyle } from "./styles";
|
||||
import { inputStyle, settingsAddInput } from "./styles";
|
||||
|
||||
function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
||||
return (
|
||||
|
@ -27,12 +27,12 @@ function SettingsTextInput({
|
|||
secret,
|
||||
}) {
|
||||
return (
|
||||
<div className="ml-2">
|
||||
<div>
|
||||
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
className={`${inputStyle} m-2 ${className}`}
|
||||
className={`${inputStyle} ${settingsAddInput} m-2 ${className}`}
|
||||
type={secret ? "password" : "text"}
|
||||
placeholder={placeholder}
|
||||
title={title}
|
||||
|
@ -55,12 +55,12 @@ function SettingsSelectInput({
|
|||
onChange,
|
||||
}) {
|
||||
return (
|
||||
<div className="ml-2">
|
||||
<div>
|
||||
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
className={`${inputStyle} m-2 ${className}`}
|
||||
className={`${inputStyle} ${settingsAddInput} m-2 ${className}`}
|
||||
defaultValue={window.settings[settingName]}
|
||||
onChange={(e) => {
|
||||
window.settings[settingName] = e.target.value;
|
||||
|
@ -78,11 +78,14 @@ function SettingsSelectInput({
|
|||
);
|
||||
}
|
||||
|
||||
function SettingsPlaceholder({ text }) {
|
||||
function SettingsSection({ name, children }) {
|
||||
return (
|
||||
<h1 className="text-center lg:text-left leading-tight text-xl font-semibold">
|
||||
{text}
|
||||
</h1>
|
||||
<div className="ml-0 lg:ml-6 mt-6 lg:mt-3">
|
||||
<h1 className="text-center lg:text-left leading-tight text-xl font-semibold">
|
||||
{name}
|
||||
</h1>
|
||||
<div className="ml-0 lg:ml-6 mt-6 lg:mt-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -90,5 +93,5 @@ export {
|
|||
SettingsCheckBox,
|
||||
SettingsTextInput,
|
||||
SettingsSelectInput,
|
||||
SettingsPlaceholder,
|
||||
SettingsSection,
|
||||
};
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
let inputStyle =
|
||||
"w-full 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";
|
||||
"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";
|
||||
let settingsAddInput = "w-full lg:w-1/4";
|
||||
|
||||
export { inputStyle };
|
||||
export { inputStyle, settingsAddInput };
|
||||
|
|
|
@ -17,7 +17,7 @@ import remarkGfm from "remark-gfm";
|
|||
import remarkMath from "remark-math";
|
||||
import {
|
||||
SettingsCheckBox,
|
||||
SettingsPlaceholder,
|
||||
SettingsSection,
|
||||
} from "../components/settingsInputs";
|
||||
import { inputStyle } from "../components/styles";
|
||||
import { Complete } from "../components/openai";
|
||||
|
@ -136,18 +136,19 @@ function CreateNote() {
|
|||
|
||||
{settings.additionalFeatures && (
|
||||
<div className="justify-self-start lg:justify-self-start">
|
||||
<SettingsPlaceholder text={locals.AdditionalFeatures} />
|
||||
{!!settings.openAiKey && (
|
||||
<ButtonWithIcon
|
||||
icon={DocumentTextIcon}
|
||||
text={locals.AIComplete}
|
||||
className="m-1"
|
||||
w="w-full"
|
||||
onClick={() => {
|
||||
Complete(setText);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<SettingsSection name={locals.AdditionalFeatures}>
|
||||
{!!settings.openAiKey && (
|
||||
<ButtonWithIcon
|
||||
icon={DocumentTextIcon}
|
||||
text={locals.AIComplete}
|
||||
className="m-1"
|
||||
w="w-full"
|
||||
onClick={() => {
|
||||
Complete(setText);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SettingsSection>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -2,91 +2,91 @@ import {
|
|||
SettingsCheckBox,
|
||||
SettingsTextInput,
|
||||
SettingsSelectInput,
|
||||
SettingsPlaceholder,
|
||||
SettingsSection,
|
||||
} from "../components/settingsInputs";
|
||||
import { reRenderPage } from "../components/utils";
|
||||
import Locales from "../localisation/main";
|
||||
|
||||
function Settings() {
|
||||
return (
|
||||
<div className="">
|
||||
<div>
|
||||
<h1 className="text-center lg:text-left leading-tight text-2xl font-bold">
|
||||
{locals.Settings}
|
||||
</h1>
|
||||
|
||||
<SettingsPlaceholder text={locals.User} />
|
||||
<SettingsSection name={locals.User}>
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Name}
|
||||
label={locals.UserName}
|
||||
settingName="userName"
|
||||
/>
|
||||
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Name}
|
||||
label={locals.UserName}
|
||||
settingName="userName"
|
||||
/>
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Url}
|
||||
label={locals.PhotoUrl}
|
||||
settingName="userPhoto"
|
||||
/>
|
||||
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Url}
|
||||
label={locals.PhotoUrl}
|
||||
settingName="userPhoto"
|
||||
/>
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Status}
|
||||
label={locals.UserStatus}
|
||||
settingName="userStatus"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Status}
|
||||
label={locals.UserStatus}
|
||||
settingName="userStatus"
|
||||
/>
|
||||
<SettingsSection name={locals.Notes}>
|
||||
<SettingsCheckBox
|
||||
label={locals.EditPreview}
|
||||
title={locals.EditPreviewWarn}
|
||||
settingName="editPreview"
|
||||
/>
|
||||
|
||||
<SettingsPlaceholder text={locals.Notes} />
|
||||
<SettingsCheckBox
|
||||
label={locals.PublicNote}
|
||||
title={locals.PublicNoteTitle}
|
||||
settingName="publicNote"
|
||||
/>
|
||||
|
||||
<SettingsCheckBox
|
||||
label={locals.EditPreview}
|
||||
title={locals.EditPreviewWarn}
|
||||
settingName="editPreview"
|
||||
/>
|
||||
<SettingsCheckBox
|
||||
label={locals.AdditionalFeatures}
|
||||
settingName="additionalFeatures"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsCheckBox
|
||||
label={locals.PublicNote}
|
||||
title={locals.PublicNoteTitle}
|
||||
settingName="publicNote"
|
||||
/>
|
||||
<SettingsSection name={locals.Interface}>
|
||||
<SettingsSelectInput
|
||||
label={locals.Language}
|
||||
settingName="language"
|
||||
options={[
|
||||
{
|
||||
value: "ru",
|
||||
label: "Русский",
|
||||
},
|
||||
{
|
||||
value: "en",
|
||||
label: "English (US)",
|
||||
},
|
||||
]}
|
||||
onChange={(e) => {
|
||||
window.locals =
|
||||
Locales[window.settings.language] ||
|
||||
Locales[navigator.language] ||
|
||||
Locales[navigator.userLanguage] ||
|
||||
Locales.en;
|
||||
|
||||
<SettingsCheckBox
|
||||
label={locals.AdditionalFeatures}
|
||||
settingName="additionalFeatures"
|
||||
/>
|
||||
reRenderPage();
|
||||
}}
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsPlaceholder text={locals.Interface} />
|
||||
|
||||
<SettingsSelectInput
|
||||
label={locals.Language}
|
||||
settingName="language"
|
||||
options={[
|
||||
{
|
||||
value: "ru",
|
||||
label: "Русский",
|
||||
},
|
||||
{
|
||||
value: "en",
|
||||
label: "English (US)",
|
||||
},
|
||||
]}
|
||||
onChange={(e) => {
|
||||
window.locals =
|
||||
Locales[window.settings.language] ||
|
||||
Locales[navigator.language] ||
|
||||
Locales[navigator.userLanguage] ||
|
||||
Locales.en;
|
||||
|
||||
reRenderPage();
|
||||
}}
|
||||
/>
|
||||
|
||||
<SettingsPlaceholder text={locals.ThirdPartyApi} />
|
||||
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Key}
|
||||
label={locals.OpenAiKey}
|
||||
settingName="openAiKey"
|
||||
secret
|
||||
/>
|
||||
<SettingsSection name={locals.ThirdPartyApi}>
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Key}
|
||||
label={locals.OpenAiKey}
|
||||
settingName="openAiKey"
|
||||
secret
|
||||
/>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue