mirror of
https://github.com/usememos/memos.git
synced 2024-09-22 01:07:12 +03:00
feat: additional style system setting (#444)
* feat: additional style system setting * feat: remove editor font setting
This commit is contained in:
parent
67691d1e99
commit
a142d975d7
@ -6,5 +6,8 @@ type SystemStatus struct {
|
||||
Host *User `json:"host"`
|
||||
Profile *profile.Profile `json:"profile"`
|
||||
// System settings
|
||||
// Allow sign up.
|
||||
AllowSignUp bool `json:"allowSignUp"`
|
||||
// Additional style.
|
||||
AdditionalStyle string `json:"additionalStyle"`
|
||||
}
|
||||
|
@ -10,15 +10,16 @@ type SystemSettingName string
|
||||
const (
|
||||
// SystemSettingAllowSignUpName is the key type of allow signup setting.
|
||||
SystemSettingAllowSignUpName SystemSettingName = "allowSignUp"
|
||||
SystemSettingPlaceholderName SystemSettingName = "placeholder"
|
||||
// SystemSettingAdditionalStyleName is the key type of additional style.
|
||||
SystemSettingAdditionalStyleName SystemSettingName = "additionalStyle"
|
||||
)
|
||||
|
||||
func (key SystemSettingName) String() string {
|
||||
switch key {
|
||||
case SystemSettingAllowSignUpName:
|
||||
return "allowSignUp"
|
||||
case SystemSettingPlaceholderName:
|
||||
return "placeholder"
|
||||
case SystemSettingAdditionalStyleName:
|
||||
return "additionalStyle"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
@ -58,6 +59,12 @@ func (upsert SystemSettingUpsert) Validate() error {
|
||||
if invalid {
|
||||
return fmt.Errorf("invalid system setting allow signup value")
|
||||
}
|
||||
} else if upsert.Name == SystemSettingAdditionalStyleName {
|
||||
value := ""
|
||||
err := json.Unmarshal([]byte(upsert.Value), &value)
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to unmarshal system setting additional style value")
|
||||
}
|
||||
} else {
|
||||
return fmt.Errorf("invalid system setting name")
|
||||
}
|
||||
|
@ -12,9 +12,7 @@ const (
|
||||
UserSettingLocaleKey UserSettingKey = "locale"
|
||||
// UserSettingMemoVisibilityKey is the key type for user preference memo default visibility.
|
||||
UserSettingMemoVisibilityKey UserSettingKey = "memoVisibility"
|
||||
// UserSettingEditorFontStyleKey is the key type for editor font style.
|
||||
UserSettingEditorFontStyleKey UserSettingKey = "editorFontStyle"
|
||||
// UserSettingEditorFontStyleKey is the key type for mobile editor style.
|
||||
// UserSettingMobileEditorStyleKey is the key type for mobile editor style.
|
||||
UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle"
|
||||
// UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option.
|
||||
UserSettingMemoDisplayTsOptionKey UserSettingKey = "memoDisplayTsOption"
|
||||
@ -27,8 +25,6 @@ func (key UserSettingKey) String() string {
|
||||
return "locale"
|
||||
case UserSettingMemoVisibilityKey:
|
||||
return "memoVisibility"
|
||||
case UserSettingEditorFontStyleKey:
|
||||
return "editorFontFamily"
|
||||
case UserSettingMobileEditorStyleKey:
|
||||
return "mobileEditorStyle"
|
||||
case UserSettingMemoDisplayTsOptionKey:
|
||||
@ -93,23 +89,6 @@ func (upsert UserSettingUpsert) Validate() error {
|
||||
if invalid {
|
||||
return fmt.Errorf("invalid user setting memo visibility value")
|
||||
}
|
||||
} else if upsert.Key == UserSettingEditorFontStyleKey {
|
||||
editorFontStyleValue := "normal"
|
||||
err := json.Unmarshal([]byte(upsert.Value), &editorFontStyleValue)
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to unmarshal user setting editor font style")
|
||||
}
|
||||
|
||||
invalid := true
|
||||
for _, value := range UserSettingEditorFontStyleValue {
|
||||
if editorFontStyleValue == value {
|
||||
invalid = false
|
||||
break
|
||||
}
|
||||
}
|
||||
if invalid {
|
||||
return fmt.Errorf("invalid user setting editor font style value")
|
||||
}
|
||||
} else if upsert.Key == UserSettingMobileEditorStyleKey {
|
||||
mobileEditorStyleValue := "normal"
|
||||
err := json.Unmarshal([]byte(upsert.Value), &mobileEditorStyleValue)
|
||||
|
@ -38,9 +38,10 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
|
||||
}
|
||||
|
||||
systemStatus := api.SystemStatus{
|
||||
Host: hostUser,
|
||||
Profile: s.Profile,
|
||||
AllowSignUp: false,
|
||||
Host: hostUser,
|
||||
Profile: s.Profile,
|
||||
AllowSignUp: false,
|
||||
AdditionalStyle: "",
|
||||
}
|
||||
|
||||
systemSettingList, err := s.Store.FindSystemSettingList(ctx, &api.SystemSettingFind{})
|
||||
@ -56,6 +57,8 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
|
||||
|
||||
if systemSetting.Name == api.SystemSettingAllowSignUpName {
|
||||
systemStatus.AllowSignUp = value.(bool)
|
||||
} else if systemSetting.Name == api.SystemSettingAdditionalStyleName {
|
||||
systemStatus.AdditionalStyle = value.(string)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -5,6 +5,7 @@ import { RouterProvider } from "react-router-dom";
|
||||
import { globalService, locationService } from "./services";
|
||||
import { useAppSelector } from "./store";
|
||||
import router from "./router";
|
||||
import * as api from "./helpers/api";
|
||||
import * as storage from "./helpers/storage";
|
||||
|
||||
function App() {
|
||||
@ -20,6 +21,18 @@ function App() {
|
||||
globalService.initialState();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
api.getSystemStatus().then(({ data }) => {
|
||||
const { data: status } = data;
|
||||
if (status.additionalStyle) {
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.innerHTML = status.additionalStyle;
|
||||
styleEl.setAttribute("type", "text/css");
|
||||
document.head.appendChild(styleEl);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
i18n.changeLanguage(global.locale);
|
||||
storage.set({
|
||||
|
@ -55,7 +55,6 @@ const MemoEditor: React.FC = () => {
|
||||
const prevGlobalStateRef = useRef(editorState);
|
||||
const editorRef = useRef<EditorRefActions>(null);
|
||||
const tagSeletorRef = useRef<HTMLDivElement>(null);
|
||||
const editorFontStyle = user?.setting.editorFontStyle || "normal";
|
||||
const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
|
||||
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
|
||||
return {
|
||||
@ -395,14 +394,14 @@ const MemoEditor: React.FC = () => {
|
||||
|
||||
const editorConfig = useMemo(
|
||||
() => ({
|
||||
className: `memo-editor ${editorFontStyle}`,
|
||||
className: `memo-editor`,
|
||||
initialContent: getEditorContentCache(),
|
||||
placeholder: t("editor.placeholder"),
|
||||
fullscreen: state.fullscreen,
|
||||
onContentChange: handleContentChange,
|
||||
onPaste: handlePasteEvent,
|
||||
}),
|
||||
[state.fullscreen, i18n.language, editorFontStyle]
|
||||
[state.fullscreen, i18n.language]
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -20,17 +20,6 @@ const localeSelectorItems = [
|
||||
},
|
||||
];
|
||||
|
||||
const editorFontStyleSelectorItems = [
|
||||
{
|
||||
text: "Normal",
|
||||
value: "normal",
|
||||
},
|
||||
{
|
||||
text: "Mono",
|
||||
value: "mono",
|
||||
},
|
||||
];
|
||||
|
||||
const mobileEditorStyleSelectorItems = [
|
||||
{
|
||||
text: "Normal",
|
||||
@ -68,10 +57,6 @@ const PreferencesSection = () => {
|
||||
await userService.upsertUserSetting("memoVisibility", value);
|
||||
};
|
||||
|
||||
const handleEditorFontStyleChanged = async (value: string) => {
|
||||
await userService.upsertUserSetting("editorFontStyle", value);
|
||||
};
|
||||
|
||||
const handleMobileEditorStyleChanged = async (value: string) => {
|
||||
await userService.upsertUserSetting("mobileEditorStyle", value);
|
||||
};
|
||||
@ -97,15 +82,6 @@ const PreferencesSection = () => {
|
||||
handleValueChanged={handleDefaultMemoVisibilityChanged}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-label selector">
|
||||
<span className="normal-text">{t("setting.preference-section.editor-font-style")}</span>
|
||||
<Selector
|
||||
className="ml-2 w-32"
|
||||
value={setting.editorFontStyle}
|
||||
dataSource={editorFontStyleSelectorItems}
|
||||
handleValueChanged={handleEditorFontStyleChanged}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-label selector">
|
||||
<span className="normal-text">{t("setting.preference-section.mobile-editor-style")}</span>
|
||||
<Selector
|
||||
|
@ -1,17 +1,19 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Switch from "@mui/joy/Switch";
|
||||
import { Button, Switch, Textarea } from "@mui/joy";
|
||||
import * as api from "../../helpers/api";
|
||||
import "../../less/settings/preferences-section.less";
|
||||
|
||||
interface State {
|
||||
allowSignUp: boolean;
|
||||
additionalStyle: string;
|
||||
}
|
||||
|
||||
const SystemSection = () => {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useState<State>({
|
||||
allowSignUp: false,
|
||||
additionalStyle: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@ -19,6 +21,7 @@ const SystemSection = () => {
|
||||
const { data: status } = data;
|
||||
setState({
|
||||
allowSignUp: status.allowSignUp,
|
||||
additionalStyle: status.additionalStyle,
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
@ -34,6 +37,20 @@ const SystemSection = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAdditionalStyleChanged = (value: string) => {
|
||||
setState({
|
||||
...state,
|
||||
additionalStyle: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveAdditionalStyle = async () => {
|
||||
await api.upsertSystemSetting({
|
||||
name: "additionalStyle",
|
||||
value: JSON.stringify(state.additionalStyle),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="section-container preferences-section-container">
|
||||
<p className="title-text">{t("common.basic")}</p>
|
||||
@ -41,6 +58,21 @@ const SystemSection = () => {
|
||||
<span className="normal-text">Allow user signup</span>
|
||||
<Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
|
||||
</label>
|
||||
<label className="form-label selector">
|
||||
<span className="normal-text">Additional style</span>
|
||||
<Button size="sm" onClick={handleSaveAdditionalStyle}>
|
||||
Save
|
||||
</Button>
|
||||
</label>
|
||||
<Textarea
|
||||
className="w-full"
|
||||
sx={{
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
minRows={5}
|
||||
defaultValue={state.additionalStyle}
|
||||
onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -63,14 +63,8 @@ const UserBanner = () => {
|
||||
};
|
||||
|
||||
const handleSignOutBtnClick = async () => {
|
||||
userService
|
||||
.doSignOut()
|
||||
.then(() => {
|
||||
navigate("/auth");
|
||||
})
|
||||
.catch(() => {
|
||||
// do nth
|
||||
});
|
||||
userService.doSignOut().catch();
|
||||
navigate("/auth");
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -3,12 +3,6 @@
|
||||
.common-editor-wrapper {
|
||||
@apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
|
||||
|
||||
&.mono {
|
||||
> .common-editor-inputer {
|
||||
@apply font-mono;
|
||||
}
|
||||
}
|
||||
|
||||
> .common-editor-inputer {
|
||||
@apply w-full h-full mt-2 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
|
||||
max-height: 300px;
|
||||
|
@ -7,7 +7,6 @@ import { setUser, patchUser, setHost, setOwner } from "../store/modules/user";
|
||||
const defauleSetting: Setting = {
|
||||
locale: "en",
|
||||
memoVisibility: "PRIVATE",
|
||||
editorFontStyle: "normal",
|
||||
mobileEditorStyle: "normal",
|
||||
memoDisplayTsOption: "created_ts",
|
||||
};
|
||||
|
8
web/src/types/modules/setting.d.ts
vendored
8
web/src/types/modules/setting.d.ts
vendored
@ -1,7 +1,6 @@
|
||||
interface Setting {
|
||||
locale: Locale;
|
||||
memoVisibility: Visibility;
|
||||
editorFontStyle: "normal" | "mono";
|
||||
mobileEditorStyle: "normal" | "float";
|
||||
memoDisplayTsOption: "created_ts" | "updated_ts";
|
||||
}
|
||||
@ -16,12 +15,7 @@ interface UserMemoVisibilitySetting {
|
||||
value: Visibility;
|
||||
}
|
||||
|
||||
interface UserEditorFontStyleSetting {
|
||||
key: "editorFontStyle";
|
||||
value: "normal" | "mono";
|
||||
}
|
||||
|
||||
type UserSetting = UserLocaleSetting | UserMemoVisibilitySetting | UserEditorFontStyleSetting;
|
||||
type UserSetting = UserLocaleSetting | UserMemoVisibilitySetting;
|
||||
|
||||
interface UserSettingUpsert {
|
||||
key: keyof Setting;
|
||||
|
1
web/src/types/modules/system.d.ts
vendored
1
web/src/types/modules/system.d.ts
vendored
@ -8,6 +8,7 @@ interface SystemStatus {
|
||||
profile: Profile;
|
||||
// System settings
|
||||
allowSignUp: boolean;
|
||||
additionalStyle: string;
|
||||
}
|
||||
|
||||
interface SystemSetting {
|
||||
|
Loading…
Reference in New Issue
Block a user