feat(settings): enhance appearance settings with descriptions and layout adjustments
- Added descriptions to various appearance settings for improved user understanding. - Refactored layout to utilize `SettingItemGroup` for better organization and visual clarity. - Updated the `SettingTabbedSegment` to include an optional description prop. - Introduced a new `GlobalFontSize` component to manage overall text size settings. Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
parent
2438f072fd
commit
e05fc74ca3
|
|
@ -76,37 +76,41 @@ export const SettingTabbedSegment: Component<{
|
|||
value: string
|
||||
onValueChanged?: (value: string) => void
|
||||
values: { value: string; label: string; icon?: ReactNode }[]
|
||||
}> = ({ label, className, value, values, onValueChanged }) => {
|
||||
description?: string
|
||||
}> = ({ label, className, value, values, onValueChanged, description }) => {
|
||||
const [currentValue, setCurrentValue] = useState(value)
|
||||
|
||||
return (
|
||||
<div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
|
||||
<label className="text-sm font-medium leading-none">
|
||||
{typeof label === "string" ? titleCase(label) : label}
|
||||
</label>
|
||||
<>
|
||||
<div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
|
||||
<label className="text-sm font-medium leading-none">
|
||||
{typeof label === "string" ? titleCase(label) : label}
|
||||
</label>
|
||||
|
||||
<SegmentGroup
|
||||
className="h-8"
|
||||
value={currentValue}
|
||||
onValueChanged={(v) => {
|
||||
setCurrentValue(v)
|
||||
onValueChanged?.(v)
|
||||
}}
|
||||
>
|
||||
{values.map((v) => (
|
||||
<SegmentItem
|
||||
key={v.value}
|
||||
value={v.value}
|
||||
label={
|
||||
<div className="flex items-center gap-1">
|
||||
{v.icon}
|
||||
<span>{v.label}</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</SegmentGroup>
|
||||
</div>
|
||||
<SegmentGroup
|
||||
className="h-8"
|
||||
value={currentValue}
|
||||
onValueChanged={(v) => {
|
||||
setCurrentValue(v)
|
||||
onValueChanged?.(v)
|
||||
}}
|
||||
>
|
||||
{values.map((v) => (
|
||||
<SegmentItem
|
||||
key={v.value}
|
||||
value={v.value}
|
||||
label={
|
||||
<div className="flex items-center gap-1">
|
||||
{v.icon}
|
||||
<span>{v.label}</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</SegmentGroup>
|
||||
</div>
|
||||
{description && <SettingDescription className="-mt-3">{description}</SettingDescription>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export const createDefineSettingItem =
|
|||
): any => {
|
||||
const { label, description, onChange, hide, ...rest } = options
|
||||
|
||||
if (hide) return null
|
||||
return {
|
||||
key,
|
||||
label,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ import { setUISetting, useUISettingSelector } from "~/atoms/settings/ui"
|
|||
import { useModalStack } from "~/components/ui/modal/stacked/hooks"
|
||||
import { ipcServices } from "~/lib/client"
|
||||
|
||||
import { SettingDescription } from "../control"
|
||||
import { SettingItemGroup } from "../section"
|
||||
|
||||
const FALLBACK_FONT = "Default (UI Font)"
|
||||
const DEFAULT_FONT = "SN Pro"
|
||||
const CUSTOM_FONT = "Custom"
|
||||
|
|
@ -84,27 +87,30 @@ export const ContentFontSelector = () => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.content_font.label")}</span>
|
||||
<ResponsiveSelect
|
||||
defaultValue={FALLBACK_FONT}
|
||||
value={readerFontFamily}
|
||||
onValueChange={(value) => {
|
||||
if (value === CUSTOM_FONT) {
|
||||
setCustom()
|
||||
return
|
||||
}
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.content_font.label")}</span>
|
||||
<ResponsiveSelect
|
||||
defaultValue={FALLBACK_FONT}
|
||||
value={readerFontFamily}
|
||||
onValueChange={(value) => {
|
||||
if (value === CUSTOM_FONT) {
|
||||
setCustom()
|
||||
return
|
||||
}
|
||||
|
||||
setUISetting("readerFontFamily", value)
|
||||
}}
|
||||
size="sm"
|
||||
triggerClassName="w-48"
|
||||
items={[
|
||||
isCustomFont && { label: readerFontFamily, value: readerFontFamily },
|
||||
...data,
|
||||
].filter((i) => typeof i === "object")}
|
||||
/>
|
||||
</div>
|
||||
setUISetting("readerFontFamily", value)
|
||||
}}
|
||||
size="sm"
|
||||
triggerClassName="w-48"
|
||||
items={[
|
||||
isCustomFont && { label: readerFontFamily, value: readerFontFamily },
|
||||
...data,
|
||||
].filter((i) => typeof i === "object")}
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>Adjust the font used for the reading content.</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -122,28 +128,31 @@ export const UIFontSelector = () => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="-mt-1 mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.ui_font")}</span>
|
||||
<ResponsiveSelect
|
||||
defaultValue={FALLBACK_FONT}
|
||||
value={uiFont}
|
||||
onValueChange={(value) => {
|
||||
if (value === CUSTOM_FONT) {
|
||||
setCustom()
|
||||
return
|
||||
}
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.ui_font")}</span>
|
||||
<ResponsiveSelect
|
||||
defaultValue={FALLBACK_FONT}
|
||||
value={uiFont}
|
||||
onValueChange={(value) => {
|
||||
if (value === CUSTOM_FONT) {
|
||||
setCustom()
|
||||
return
|
||||
}
|
||||
|
||||
setUISetting("uiFontFamily", value)
|
||||
}}
|
||||
size="sm"
|
||||
triggerClassName="w-48"
|
||||
items={[
|
||||
isCustomFont && { label: uiFont, value: uiFont },
|
||||
{ label: DEFAULT_FONT, value: DEFAULT_FONT },
|
||||
...data,
|
||||
].filter((i) => typeof i === "object")}
|
||||
/>
|
||||
</div>
|
||||
setUISetting("uiFontFamily", value)
|
||||
}}
|
||||
size="sm"
|
||||
triggerClassName="w-48"
|
||||
items={[
|
||||
isCustomFont && { label: uiFont, value: uiFont },
|
||||
{ label: DEFAULT_FONT, value: DEFAULT_FONT },
|
||||
...data,
|
||||
].filter((i) => typeof i === "object")}
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>Adjust the font used for the UI elements.</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,9 +53,37 @@ export const SettingAppearance = () => {
|
|||
settings={[
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.general"),
|
||||
value: t("appearance.common.title"),
|
||||
},
|
||||
|
||||
// Top Level - Most Common
|
||||
AppThemeSegment,
|
||||
GlobalFontSize,
|
||||
UIFontSelector,
|
||||
ContentLineHeight,
|
||||
CustomizeToolbar,
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.subscription_list.title"),
|
||||
},
|
||||
|
||||
defineItem("sidebarShowUnreadCount", {
|
||||
label: "Show unread count",
|
||||
description: "Display unread counts next to feeds and groups",
|
||||
}),
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.reading_view.title"),
|
||||
},
|
||||
|
||||
!isMobile && ZenMode,
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.interface_window.title"),
|
||||
},
|
||||
|
||||
defineItem("opaqueSidebar", {
|
||||
label: t("appearance.opaque_sidebars.label"),
|
||||
|
|
@ -63,9 +91,26 @@ export const SettingAppearance = () => {
|
|||
hide: !window.api?.canWindowBlur || isMobile,
|
||||
}),
|
||||
|
||||
defineItem("modalOverlay", {
|
||||
label: t("appearance.modal_overlay.label"),
|
||||
description: t("appearance.modal_overlay.description"),
|
||||
hide: isMobile,
|
||||
}),
|
||||
|
||||
defineItem("reduceMotion", {
|
||||
label: t("appearance.reduce_motion.label"),
|
||||
description: t("appearance.reduce_motion.description"),
|
||||
}),
|
||||
|
||||
defineItem("usePointerCursor", {
|
||||
label: t("appearance.use_pointer_cursor.label"),
|
||||
description: t("appearance.use_pointer_cursor.description"),
|
||||
hide: isMobile,
|
||||
}),
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.unread_count.label"),
|
||||
value: t("appearance.system_integration.title"),
|
||||
},
|
||||
|
||||
defineItem("showDockBadge", {
|
||||
|
|
@ -74,41 +119,39 @@ export const SettingAppearance = () => {
|
|||
hide: !IN_ELECTRON || !["macOS", "Linux"].includes(getOS()) || isMobile,
|
||||
}),
|
||||
|
||||
defineItem("sidebarShowUnreadCount", {
|
||||
label: t("appearance.unread_count.view_and_subscription.label"),
|
||||
description: t("appearance.unread_count.view_and_subscription.description"),
|
||||
}),
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.sidebar"),
|
||||
},
|
||||
defineItem("hideExtraBadge", {
|
||||
label: t("appearance.hide_extra_badge.label"),
|
||||
description: t("appearance.hide_extra_badge.description"),
|
||||
hide: isMobile,
|
||||
}),
|
||||
!isMobile && ZenMode,
|
||||
ThumbnailRatio,
|
||||
CustomCSS,
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.fonts"),
|
||||
value: t("appearance.typography.title"),
|
||||
},
|
||||
UIFontSelector,
|
||||
TextSize,
|
||||
|
||||
ContentFontSelector,
|
||||
ContentFontSize,
|
||||
ContentLineHeight,
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.content"),
|
||||
value: t("appearance.content_display.title"),
|
||||
},
|
||||
ShikiTheme,
|
||||
|
||||
ThumbnailRatio,
|
||||
DateFormat,
|
||||
|
||||
defineItem("hideRecentReader", {
|
||||
label: t("appearance.hide_recent_reader.label"),
|
||||
description: t("appearance.hide_recent_reader.description"),
|
||||
}),
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.code_highlighting.title"),
|
||||
},
|
||||
|
||||
ShikiTheme,
|
||||
|
||||
defineItem("guessCodeLanguage", {
|
||||
label: t("appearance.guess_code_language.label"),
|
||||
hide: !ELECTRON_BUILD,
|
||||
|
|
@ -120,31 +163,12 @@ export const SettingAppearance = () => {
|
|||
description: t("appearance.reader_render_inline_style.description"),
|
||||
}),
|
||||
|
||||
defineItem("hideRecentReader", {
|
||||
label: t("appearance.hide_recent_reader.label"),
|
||||
description: t("appearance.hide_recent_reader.description"),
|
||||
}),
|
||||
|
||||
{
|
||||
type: "title",
|
||||
value: t("appearance.misc"),
|
||||
value: t("appearance.customization.title"),
|
||||
},
|
||||
|
||||
defineItem("modalOverlay", {
|
||||
label: t("appearance.modal_overlay.label"),
|
||||
description: t("appearance.modal_overlay.description"),
|
||||
hide: isMobile,
|
||||
}),
|
||||
defineItem("reduceMotion", {
|
||||
label: t("appearance.reduce_motion.label"),
|
||||
description: t("appearance.reduce_motion.description"),
|
||||
}),
|
||||
defineItem("usePointerCursor", {
|
||||
label: t("appearance.use_pointer_cursor.label"),
|
||||
description: t("appearance.use_pointer_cursor.description"),
|
||||
hide: isMobile,
|
||||
}),
|
||||
CustomizeToolbar,
|
||||
CustomCSS,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -159,32 +183,37 @@ const ShikiTheme = () => {
|
|||
const codeHighlightThemeDark = useUISettingKey("codeHighlightThemeDark")
|
||||
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.code_highlight_theme")}</span>
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">
|
||||
{t("appearance.code_highlight_theme.label")}
|
||||
</span>
|
||||
|
||||
<ResponsiveSelect
|
||||
items={bundledThemesInfo
|
||||
.filter((theme) => theme.type === (isDark ? "dark" : "light"))
|
||||
.map((theme) => ({ value: theme.id, label: theme.displayName }))}
|
||||
value={isDark ? codeHighlightThemeDark : codeHighlightThemeLight}
|
||||
onValueChange={(value) => {
|
||||
if (isDark) {
|
||||
setUISetting("codeHighlightThemeDark", value)
|
||||
} else {
|
||||
setUISetting("codeHighlightThemeLight", value)
|
||||
<ResponsiveSelect
|
||||
items={bundledThemesInfo
|
||||
.filter((theme) => theme.type === (isDark ? "dark" : "light"))
|
||||
.map((theme) => ({ value: theme.id, label: theme.displayName }))}
|
||||
value={isDark ? codeHighlightThemeDark : codeHighlightThemeLight}
|
||||
onValueChange={(value) => {
|
||||
if (isDark) {
|
||||
setUISetting("codeHighlightThemeDark", value)
|
||||
} else {
|
||||
setUISetting("codeHighlightThemeLight", value)
|
||||
}
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
renderItem={(item) =>
|
||||
isMobile ? (
|
||||
capitalizeFirstLetter(item.label)
|
||||
) : (
|
||||
<span className="capitalize">{item.label}</span>
|
||||
)
|
||||
}
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
renderItem={(item) =>
|
||||
isMobile ? (
|
||||
capitalizeFirstLetter(item.label)
|
||||
) : (
|
||||
<span className="capitalize">{item.label}</span>
|
||||
)
|
||||
}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>{t("appearance.code_highlight_theme.description")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -219,6 +248,40 @@ export const TextSize = () => {
|
|||
)
|
||||
}
|
||||
|
||||
// Global Font Size component that combines UI and content font size
|
||||
const GlobalFontSize = () => {
|
||||
const { t } = useTranslation("settings")
|
||||
const uiTextSize = useUISettingSelector((state) => state.uiTextSize)
|
||||
|
||||
return (
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">
|
||||
{t("appearance.global_font_size.label")}
|
||||
</span>
|
||||
|
||||
<ResponsiveSelect
|
||||
defaultValue={textSizeMap.default.toString()}
|
||||
value={uiTextSize.toString() || textSizeMap.default.toString()}
|
||||
onValueChange={(value) => {
|
||||
const size = Number.parseInt(value) || textSizeMap.default
|
||||
setUISetting("uiTextSize", size)
|
||||
// Also update content font size to keep them in sync
|
||||
setUISetting("contentFontSize", size)
|
||||
}}
|
||||
size="sm"
|
||||
triggerClassName="w-48 capitalize"
|
||||
items={Object.entries(textSizeMap).map(([size, value]) => ({
|
||||
label: t(`appearance.text_size.${size as keyof typeof textSizeMap}`),
|
||||
value: value.toString(),
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>{t("appearance.global_font_size.description")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export const AppThemeSegment = () => {
|
||||
const { t } = useTranslation("settings")
|
||||
const theme = useThemeAtomValue()
|
||||
|
|
@ -228,6 +291,7 @@ export const AppThemeSegment = () => {
|
|||
<SettingTabbedSegment
|
||||
key="theme"
|
||||
label={t("appearance.theme.label")}
|
||||
description={t("appearance.theme.description")}
|
||||
value={theme}
|
||||
values={[
|
||||
{
|
||||
|
|
@ -265,7 +329,7 @@ const ZenMode = () => {
|
|||
onCheckedChange={toggleZenMode}
|
||||
label={t("appearance.zen_mode.label")}
|
||||
/>
|
||||
<SettingDescription>{t("appearance.zen_mode.description")}</SettingDescription>
|
||||
<SettingDescription>{t("appearance.zen_mode.description_simple")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
|
@ -305,7 +369,7 @@ const CustomCSS = () => {
|
|||
const { t } = useTranslation("settings")
|
||||
const { present } = useModalStack()
|
||||
return (
|
||||
<SettingItemGroup>
|
||||
<>
|
||||
<SettingActionItem
|
||||
label={t("appearance.custom_css.label")}
|
||||
action={() => {
|
||||
|
|
@ -323,8 +387,10 @@ const CustomCSS = () => {
|
|||
}}
|
||||
buttonText={t("appearance.custom_css.button")}
|
||||
/>
|
||||
<SettingDescription>{t("appearance.custom_css.description")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
<SettingDescription className="-mt-3">
|
||||
{t("appearance.custom_css.description")}
|
||||
</SettingDescription>
|
||||
</>
|
||||
)
|
||||
}
|
||||
const LazyCSSEditor = lazy(() =>
|
||||
|
|
@ -401,57 +467,34 @@ const CustomCSSModal = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const ContentFontSize = () => {
|
||||
const { t } = useTranslation("settings")
|
||||
const contentFontSize = useUISettingKey("contentFontSize")
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.content_font_size")}</span>
|
||||
|
||||
<ResponsiveSelect
|
||||
items={[
|
||||
{ value: "12", label: "12" },
|
||||
{ value: "14", label: "14" },
|
||||
{ value: "16", label: "16" },
|
||||
{ value: "18", label: "18" },
|
||||
{ value: "20", label: "20" },
|
||||
]}
|
||||
value={contentFontSize.toString()}
|
||||
onValueChange={(value) => {
|
||||
setUISetting("contentFontSize", Number.parseInt(value))
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ContentLineHeight = () => {
|
||||
const { t } = useTranslation("settings")
|
||||
const contentLineHeight = useUISettingKey("contentLineHeight")
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">
|
||||
{t("appearance.content_line_height.label")}
|
||||
</span>
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">
|
||||
{t("appearance.content_line_height.label")}
|
||||
</span>
|
||||
|
||||
<ResponsiveSelect
|
||||
items={[
|
||||
{ value: "1.25", label: t("appearance.content_line_height.tight") },
|
||||
{ value: "1.375", label: t("appearance.content_line_height.snug") },
|
||||
{ value: "1.5", label: t("appearance.content_line_height.normal") },
|
||||
{ value: "1.75", label: t("appearance.content_line_height.relaxed") },
|
||||
{ value: "2", label: t("appearance.content_line_height.loose") },
|
||||
]}
|
||||
value={contentLineHeight.toString()}
|
||||
onValueChange={(value) => {
|
||||
setUISetting("contentLineHeight", Number.parseFloat(value))
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<ResponsiveSelect
|
||||
items={[
|
||||
{ value: "1.25", label: t("appearance.content_line_height.tight") },
|
||||
{ value: "1.375", label: t("appearance.content_line_height.snug") },
|
||||
{ value: "1.5", label: t("appearance.content_line_height.normal") },
|
||||
{ value: "1.75", label: t("appearance.content_line_height.relaxed") },
|
||||
{ value: "2", label: t("appearance.content_line_height.loose") },
|
||||
]}
|
||||
value={contentLineHeight.toString()}
|
||||
onValueChange={(value) => {
|
||||
setUISetting("contentLineHeight", Number.parseFloat(value))
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>{t("appearance.content_line_height.description")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -466,30 +509,33 @@ const DateFormat = () => {
|
|||
label: dayjs(date).format(format),
|
||||
})
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.date_format")}</span>
|
||||
<SettingItemGroup>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="shrink-0 text-sm font-medium">{t("appearance.date_format")}</span>
|
||||
|
||||
<ResponsiveSelect
|
||||
items={[
|
||||
{ value: "default", label: commonT("words.default") },
|
||||
generateItem("MM/DD/YY HH:mm"),
|
||||
generateItem("DD/MM/YYYY HH:mm"),
|
||||
<ResponsiveSelect
|
||||
items={[
|
||||
{ value: "default", label: commonT("words.default") },
|
||||
generateItem("MM/DD/YY HH:mm"),
|
||||
generateItem("DD/MM/YYYY HH:mm"),
|
||||
|
||||
generateItem("L"),
|
||||
generateItem("LTS"),
|
||||
generateItem("LT"),
|
||||
generateItem("LLLL"),
|
||||
generateItem("LL"),
|
||||
generateItem("LLL"),
|
||||
]}
|
||||
value={dateFormat}
|
||||
onValueChange={(value) => {
|
||||
setUISetting("dateFormat", value)
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
generateItem("L"),
|
||||
generateItem("LTS"),
|
||||
generateItem("LT"),
|
||||
generateItem("LLLL"),
|
||||
generateItem("LL"),
|
||||
generateItem("LLL"),
|
||||
]}
|
||||
value={dateFormat}
|
||||
onValueChange={(value) => {
|
||||
setUISetting("dateFormat", value)
|
||||
}}
|
||||
triggerClassName="w-48"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<SettingDescription>Adjust the display date format.</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -503,13 +549,12 @@ const CustomizeToolbar = () => {
|
|||
return (
|
||||
<SettingItemGroup>
|
||||
<SettingActionItem
|
||||
label={<span className="flex items-center gap-1">{t("customizeToolbar.title")}</span>}
|
||||
label={t("appearance.customize_toolbar.label")}
|
||||
action={async () => {
|
||||
showModal()
|
||||
}}
|
||||
buttonText={t("customizeToolbar.title")}
|
||||
buttonText={t("appearance.customize_toolbar.label")}
|
||||
/>
|
||||
<SettingDescription>{t("customizeToolbar.quick_actions.description")}</SettingDescription>
|
||||
</SettingItemGroup>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,11 +64,16 @@
|
|||
"actions.saveSuccess": "🎉 Actions Saved.",
|
||||
"actions.sidebar_title": "Actions",
|
||||
"actions.title": "Actions",
|
||||
"appearance.code_highlight_theme": "Code Highlight Theme",
|
||||
"appearance.code_highlight_theme.description": "Adjust the code highlight theme.",
|
||||
"appearance.code_highlight_theme.label": "Code Highlight Theme",
|
||||
"appearance.code_highlighting.title": "Code Highlighting",
|
||||
"appearance.common.title": "Common",
|
||||
"appearance.content": "Content",
|
||||
"appearance.content_display.title": "Content Display",
|
||||
"appearance.content_font.default": "Default (UI Font)",
|
||||
"appearance.content_font.label": "Content Font",
|
||||
"appearance.content_font_size": "Content Font Size",
|
||||
"appearance.content_line_height.description": "Adjust spacing between lines of text in articles",
|
||||
"appearance.content_line_height.label": "Content Line Height",
|
||||
"appearance.content_line_height.loose": "Loose",
|
||||
"appearance.content_line_height.normal": "Normal",
|
||||
|
|
@ -79,17 +84,22 @@
|
|||
"appearance.custom_css.description": "Custom CSS Style for Content",
|
||||
"appearance.custom_css.label": "Custom CSS",
|
||||
"appearance.custom_font": "Custom Font",
|
||||
"appearance.customization.title": "Customization",
|
||||
"appearance.customize_toolbar.label": "Customize Toolbar",
|
||||
"appearance.date_format": "Date Format",
|
||||
"appearance.font.custom": "Custom",
|
||||
"appearance.font.system": "System UI",
|
||||
"appearance.fonts": "Fonts",
|
||||
"appearance.general": "General",
|
||||
"appearance.global_font_size.description": "Adjust the overall text size",
|
||||
"appearance.global_font_size.label": "Global Font Size",
|
||||
"appearance.guess_code_language.description": "Major Programming Languages That Use Models to Infer Unlabeled Code Blocks",
|
||||
"appearance.guess_code_language.label": "Guess Code Language",
|
||||
"appearance.hide_extra_badge.description": "Hide the Special Badge of the Feed in the Sidebar, e.g. Boost, Claimed",
|
||||
"appearance.hide_extra_badge.label": "Hide Special Badge",
|
||||
"appearance.hide_recent_reader.description": "Hide the Recent Reader in the Entry Header.",
|
||||
"appearance.hide_recent_reader.label": "Hide Recent Reader",
|
||||
"appearance.interface_window.title": "Interface & Window",
|
||||
"appearance.misc": "Misc",
|
||||
"appearance.modal_overlay.description": "Show Modal Overlay",
|
||||
"appearance.modal_overlay.label": "Show Modal Overlay",
|
||||
|
|
@ -97,18 +107,22 @@
|
|||
"appearance.opaque_sidebars.label": "Opaque Sidebars",
|
||||
"appearance.reader_render_inline_style.description": "Allows Rendering of the Inline Style of the Original HTML.",
|
||||
"appearance.reader_render_inline_style.label": "Render Inline Style",
|
||||
"appearance.reading_view.title": "Reading View",
|
||||
"appearance.reduce_motion.description": "Reducing the Motion of Elements to Improve Performance and Reduce Energy Consumption",
|
||||
"appearance.reduce_motion.label": "Reduce Motion",
|
||||
"appearance.save": "Save",
|
||||
"appearance.sidebar": "Sidebar",
|
||||
"appearance.sidebar_title": "Appearance",
|
||||
"appearance.subscription_list.title": "Subscription List",
|
||||
"appearance.subscriptions": "Subscriptions",
|
||||
"appearance.system_integration.title": "System Integration",
|
||||
"appearance.text_size.default": "Default",
|
||||
"appearance.text_size.label": "Global Text Size",
|
||||
"appearance.text_size.large": "Large",
|
||||
"appearance.text_size.medium": "Medium",
|
||||
"appearance.text_size.smaller": "Smaller",
|
||||
"appearance.theme.dark": "Dark",
|
||||
"appearance.theme.description": "Adjust the overall theme of the app",
|
||||
"appearance.theme.label": "Theme",
|
||||
"appearance.theme.light": "Light",
|
||||
"appearance.theme.system": "System",
|
||||
|
|
@ -117,6 +131,7 @@
|
|||
"appearance.thumbnail_ratio.square": "Square",
|
||||
"appearance.thumbnail_ratio.title": "Thumbnail Ratio",
|
||||
"appearance.title": "Appearance",
|
||||
"appearance.typography.title": "Typography",
|
||||
"appearance.ui_font": "Global Font",
|
||||
"appearance.unread_count.badge.description": "Show the unread count as a badge in the dock icon.",
|
||||
"appearance.unread_count.badge.label": "Show as Badge",
|
||||
|
|
@ -126,6 +141,7 @@
|
|||
"appearance.use_pointer_cursor.description": "When the mouse hovers over any interactive element, the cursor appears as a hand.",
|
||||
"appearance.use_pointer_cursor.label": "Use Hand Cursor",
|
||||
"appearance.zen_mode.description": "Zen mode is an undisturbed reading mode that allows you to focus on the content without any interference. Enabling Zen mode will hide the sidebar.",
|
||||
"appearance.zen_mode.description_simple": "Undisturbed reading mode (hides sidebar)",
|
||||
"appearance.zen_mode.label": "Zen Mode",
|
||||
"common.give_star": "<HeartIcon />Love our product? <Link>Give us a star on GitHub!</Link>",
|
||||
"customizeToolbar.more_actions.description": "Will be shown in the dropdown menu",
|
||||
|
|
|
|||
|
|
@ -64,11 +64,16 @@
|
|||
"actions.saveSuccess": "🎉 アクションが保存されました。",
|
||||
"actions.sidebar_title": "アクション",
|
||||
"actions.title": "アクション",
|
||||
"appearance.code_highlight_theme": "コードハイライトテーマ",
|
||||
"appearance.code_highlight_theme.description": "コードハイライトテーマを調整",
|
||||
"appearance.code_highlight_theme.label": "コードハイライトテーマ",
|
||||
"appearance.code_highlighting.title": "コードハイライト",
|
||||
"appearance.common.title": "共通",
|
||||
"appearance.content": "コンテンツ",
|
||||
"appearance.content_display.title": "コンテンツ表示",
|
||||
"appearance.content_font.default": "デフォルト（UIフォント）",
|
||||
"appearance.content_font.label": "コンテンツフォント",
|
||||
"appearance.content_font_size": "コンテンツフォントサイズ",
|
||||
"appearance.content_line_height.description": "記事内の文字の行間を調整",
|
||||
"appearance.content_line_height.label": "コンテンツ行の高さ",
|
||||
"appearance.content_line_height.loose": "ゆるい",
|
||||
"appearance.content_line_height.normal": "普通",
|
||||
|
|
@ -79,35 +84,44 @@
|
|||
"appearance.custom_css.description": "コンテンツに Custom CSS を適用できます",
|
||||
"appearance.custom_css.label": "Custom CSS",
|
||||
"appearance.custom_font": "カスタムフォント",
|
||||
"appearance.customization.title": "カスタマイズ",
|
||||
"appearance.customize_toolbar.label": "ツールバーをカスタマイズ",
|
||||
"appearance.date_format": "日付形式",
|
||||
"appearance.font.custom": "カスタム",
|
||||
"appearance.font.system": "システムUI",
|
||||
"appearance.fonts": "フォント",
|
||||
"appearance.general": "一般",
|
||||
"appearance.global_font_size.description": "全体的なテキストサイズを調整",
|
||||
"appearance.global_font_size.label": "グローバルフォントサイズ",
|
||||
"appearance.guess_code_language.description": "ラベルがないコードブロックの言語を推測するためにモデルを使用する主要なプログラミング言語",
|
||||
"appearance.guess_code_language.label": "コード言語を推測",
|
||||
"appearance.hide_extra_badge.description": "サイドバーにあるフィードのスペシャルバッジを非表示にする、例： ブースト、クレーム済み",
|
||||
"appearance.hide_extra_badge.label": "スペシャルバッジを非表示にする",
|
||||
"appearance.hide_recent_reader.description": "エントリーヘッダの最近の購読者を非表示にする。",
|
||||
"appearance.hide_recent_reader.label": "最近の購読者を非表示にする",
|
||||
"appearance.interface_window.title": "インターフェース＆ウィンドウ",
|
||||
"appearance.misc": "その他",
|
||||
"appearance.modal_overlay.description": "モーダルオーバーレイを表示",
|
||||
"appearance.modal_overlay.label": "モーダルオーバーレイを表示",
|
||||
"appearance.opaque_sidebars.label": "不透明なサイドバー",
|
||||
"appearance.reader_render_inline_style.description": "オリジナル HTML のインラインスタイルをレンダリングします。",
|
||||
"appearance.reader_render_inline_style.label": "インラインスタイルをレンダリング",
|
||||
"appearance.reading_view.title": "リーディングビュー",
|
||||
"appearance.reduce_motion.description": "要素の動きを減らして、パフォーマンスを向上させ、エネルギー消費を抑えます",
|
||||
"appearance.reduce_motion.label": "動きを減らす",
|
||||
"appearance.save": "保存",
|
||||
"appearance.sidebar": "サイドバー",
|
||||
"appearance.sidebar_title": "外観",
|
||||
"appearance.subscription_list.title": "購読リスト",
|
||||
"appearance.subscriptions": "購読",
|
||||
"appearance.system_integration.title": "システム統合",
|
||||
"appearance.text_size.default": "デフォルト",
|
||||
"appearance.text_size.label": "テキストサイズ",
|
||||
"appearance.text_size.large": "大",
|
||||
"appearance.text_size.medium": "中",
|
||||
"appearance.text_size.smaller": "小",
|
||||
"appearance.theme.dark": "ダーク",
|
||||
"appearance.theme.description": "アプリの全体的なテーマを調整",
|
||||
"appearance.theme.label": "テーマ",
|
||||
"appearance.theme.light": "ライト",
|
||||
"appearance.theme.system": "システム",
|
||||
|
|
@ -116,6 +130,7 @@
|
|||
"appearance.thumbnail_ratio.square": "正方形",
|
||||
"appearance.thumbnail_ratio.title": "サムネイル比率",
|
||||
"appearance.title": "外観",
|
||||
"appearance.typography.title": "タイポグラフィ",
|
||||
"appearance.ui_font": "UI フォント",
|
||||
"appearance.unread_count.badge.label": "Dockバッジとして表示",
|
||||
"appearance.unread_count.label": "未読数",
|
||||
|
|
@ -123,6 +138,7 @@
|
|||
"appearance.use_pointer_cursor.description": "マウスがインタラクティブな要素の上にあるとき、カーソルは手の形になります。",
|
||||
"appearance.use_pointer_cursor.label": "手の形のカーソルを使用する",
|
||||
"appearance.zen_mode.description": "Zen モードは、邪魔されることなくコンテンツに集中できる読書モードです。Zenモードを有効にすると、サイドバーが非表示になります。",
|
||||
"appearance.zen_mode.description_simple": "邪魔されない読書モード（サイドバーを非表示）",
|
||||
"appearance.zen_mode.label": "Zen モード",
|
||||
"common.give_star": "<HeartIcon />私たちの製品が好きですか？<Link>GitHub で Star を付けましょう！</Link>",
|
||||
"customizeToolbar.more_actions.description": "ドロップダウンメニューに表示されます",
|
||||
|
|
|
|||
|
|
@ -64,11 +64,16 @@
|
|||
"actions.saveSuccess": "🎉 规则已保存",
|
||||
"actions.sidebar_title": "自动化",
|
||||
"actions.title": "自动化",
|
||||
"appearance.code_highlight_theme": "代码高亮主题",
|
||||
"appearance.code_highlight_theme.description": "调整代码高亮主题",
|
||||
"appearance.code_highlight_theme.label": "代码高亮主题",
|
||||
"appearance.code_highlighting.title": "代码高亮",
|
||||
"appearance.common.title": "通用",
|
||||
"appearance.content": "内容",
|
||||
"appearance.content_display.title": "内容显示",
|
||||
"appearance.content_font.default": "默认（界面字体）",
|
||||
"appearance.content_font.label": "正文字体",
|
||||
"appearance.content_font_size": "正文字体大小",
|
||||
"appearance.content_line_height.description": "调整文章中文本行间距",
|
||||
"appearance.content_line_height.label": "正文行高",
|
||||
"appearance.content_line_height.loose": "松散",
|
||||
"appearance.content_line_height.normal": "正常",
|
||||
|
|
@ -79,35 +84,44 @@
|
|||
"appearance.custom_css.description": "用于条目内容的自定义 CSS 样式。",
|
||||
"appearance.custom_css.label": "自定义 CSS",
|
||||
"appearance.custom_font": "自定义字体",
|
||||
"appearance.customization.title": "自定义",
|
||||
"appearance.customize_toolbar.label": "自定义工具栏",
|
||||
"appearance.date_format": "日期格式",
|
||||
"appearance.font.custom": "自定义",
|
||||
"appearance.font.system": "系统字体",
|
||||
"appearance.fonts": "字体",
|
||||
"appearance.general": "通用",
|
||||
"appearance.global_font_size.description": "调整整体文字大小",
|
||||
"appearance.global_font_size.label": "全局字体大小",
|
||||
"appearance.guess_code_language.description": "使用模型推断未标记代码块的编程语言。",
|
||||
"appearance.guess_code_language.label": "代码语言检测",
|
||||
"appearance.hide_extra_badge.description": "将侧边栏中订阅源的特殊徽章隐藏，例如：已助力，已认证",
|
||||
"appearance.hide_extra_badge.label": "隐藏徽章",
|
||||
"appearance.hide_recent_reader.description": "隐藏条目标题显示的最近阅读者。",
|
||||
"appearance.hide_recent_reader.label": "隐藏最近阅读者",
|
||||
"appearance.interface_window.title": "界面与窗口",
|
||||
"appearance.misc": "杂项",
|
||||
"appearance.modal_overlay.description": "显示遮罩以获得更好的使用体验，推荐开启。",
|
||||
"appearance.modal_overlay.label": "显示遮罩",
|
||||
"appearance.opaque_sidebars.label": "不透明侧边栏",
|
||||
"appearance.reader_render_inline_style.description": "允许渲染原始 HTML 的内联样式。",
|
||||
"appearance.reader_render_inline_style.label": "渲染内联样式",
|
||||
"appearance.reading_view.title": "阅读视图",
|
||||
"appearance.reduce_motion.description": "减弱动态效果以提高整体性能并减少电量消耗。",
|
||||
"appearance.reduce_motion.label": "减弱动态效果",
|
||||
"appearance.save": "保存",
|
||||
"appearance.sidebar": "侧边栏",
|
||||
"appearance.sidebar_title": "外观",
|
||||
"appearance.subscription_list.title": "订阅列表",
|
||||
"appearance.subscriptions": "订阅",
|
||||
"appearance.system_integration.title": "系统集成",
|
||||
"appearance.text_size.default": "默认",
|
||||
"appearance.text_size.label": "界面字体大小",
|
||||
"appearance.text_size.large": "较大",
|
||||
"appearance.text_size.medium": "中等",
|
||||
"appearance.text_size.smaller": "较小",
|
||||
"appearance.theme.dark": "深色",
|
||||
"appearance.theme.description": "调整应用的整体主题",
|
||||
"appearance.theme.label": "主题",
|
||||
"appearance.theme.light": "亮色",
|
||||
"appearance.theme.system": "跟随系统",
|
||||
|
|
@ -116,6 +130,7 @@
|
|||
"appearance.thumbnail_ratio.square": "正方形",
|
||||
"appearance.thumbnail_ratio.title": "缩略比例",
|
||||
"appearance.title": "外观",
|
||||
"appearance.typography.title": "排版",
|
||||
"appearance.ui_font": "界面字体",
|
||||
"appearance.unread_count.badge.label": "在应用图标上显示",
|
||||
"appearance.unread_count.label": "未读数",
|
||||
|
|
@ -123,6 +138,7 @@
|
|||
"appearance.use_pointer_cursor.description": "当鼠标悬停在任何可交互元素上时，光标会显示为手型光标。",
|
||||
"appearance.use_pointer_cursor.label": "使用手型光标",
|
||||
"appearance.zen_mode.description": "禅定模式是一种不受干扰的阅读模式，让你能够专注于内容而不受任何干扰。启用禅定模式将会隐藏侧边栏。",
|
||||
"appearance.zen_mode.description_simple": "不受干扰的阅读模式（隐藏侧边栏）",
|
||||
"appearance.zen_mode.label": "禅定模式",
|
||||
"common.give_star": "<HeartIcon />喜欢我们的产品吗？ <Link>在 GitHub 上给我们「标星」吧！</Link>",
|
||||
"customizeToolbar.more_actions.description": "将显示在下拉菜单中",
|
||||
|
|
|
|||
|
|
@ -64,11 +64,16 @@
|
|||
"actions.saveSuccess": "🎉 規則已儲存",
|
||||
"actions.sidebar_title": "自動化操作",
|
||||
"actions.title": "自動化操作",
|
||||
"appearance.code_highlight_theme": "語法突顯主題",
|
||||
"appearance.code_highlight_theme.description": "調整語法突顯主題",
|
||||
"appearance.code_highlight_theme.label": "語法突顯主題",
|
||||
"appearance.code_highlighting.title": "語法突顯",
|
||||
"appearance.common.title": "通用",
|
||||
"appearance.content": "內容",
|
||||
"appearance.content_display.title": "內容顯示",
|
||||
"appearance.content_font.default": "預設（介面字體）",
|
||||
"appearance.content_font.label": "內容字體",
|
||||
"appearance.content_font_size": "內容字體大小",
|
||||
"appearance.content_line_height.description": "調整文章中文字行間距",
|
||||
"appearance.content_line_height.label": "內容行高",
|
||||
"appearance.content_line_height.loose": "鬆散",
|
||||
"appearance.content_line_height.normal": "一般",
|
||||
|
|
@ -79,35 +84,44 @@
|
|||
"appearance.custom_css.description": "自訂條目渲染中的 CSS 樣式",
|
||||
"appearance.custom_css.label": "自訂 CSS",
|
||||
"appearance.custom_font": "自訂字體",
|
||||
"appearance.customization.title": "自訂",
|
||||
"appearance.customize_toolbar.label": "自訂工具欄",
|
||||
"appearance.date_format": "日期格式",
|
||||
"appearance.font.custom": "自訂",
|
||||
"appearance.font.system": "系統字體",
|
||||
"appearance.fonts": "字體",
|
||||
"appearance.general": "一般",
|
||||
"appearance.global_font_size.description": "調整整體文字大小",
|
||||
"appearance.global_font_size.label": "全域字體大小",
|
||||
"appearance.guess_code_language.description": "使用模型來推斷未標記程式碼區塊的主要程式語言",
|
||||
"appearance.guess_code_language.label": "推測程式碼語言",
|
||||
"appearance.hide_extra_badge.description": "將側邊欄中 RSS 摘要的特殊徽章隱藏，例如：已加成、已認領。",
|
||||
"appearance.hide_extra_badge.label": "隱藏徽章",
|
||||
"appearance.hide_recent_reader.description": "隱藏條目標題顯示的最近閱讀者",
|
||||
"appearance.hide_recent_reader.label": "隱藏最近閱讀者",
|
||||
"appearance.interface_window.title": "介面與視窗",
|
||||
"appearance.misc": "其他",
|
||||
"appearance.modal_overlay.description": "顯示遮罩效果",
|
||||
"appearance.modal_overlay.label": "遮罩顯示",
|
||||
"appearance.opaque_sidebars.label": "不透明側邊欄",
|
||||
"appearance.reader_render_inline_style.description": "允許渲染原始 HTML 的行內樣式。",
|
||||
"appearance.reader_render_inline_style.label": "渲染行內樣式",
|
||||
"appearance.reading_view.title": "閱讀視圖",
|
||||
"appearance.reduce_motion.description": "減少元素的動畫效果以提升效能並降低功耗。",
|
||||
"appearance.reduce_motion.label": "減少動畫",
|
||||
"appearance.save": "儲存",
|
||||
"appearance.sidebar": "側邊欄",
|
||||
"appearance.sidebar_title": "外觀",
|
||||
"appearance.subscription_list.title": "訂閱列表",
|
||||
"appearance.subscriptions": "訂閱",
|
||||
"appearance.system_integration.title": "系統整合",
|
||||
"appearance.text_size.default": "預設",
|
||||
"appearance.text_size.label": "介面字體大小",
|
||||
"appearance.text_size.large": "大",
|
||||
"appearance.text_size.medium": "中",
|
||||
"appearance.text_size.smaller": "小",
|
||||
"appearance.theme.dark": "深色",
|
||||
"appearance.theme.description": "調整應用程式的整體主題",
|
||||
"appearance.theme.label": "主題",
|
||||
"appearance.theme.light": "淺色",
|
||||
"appearance.theme.system": "跟隨系統",
|
||||
|
|
@ -116,6 +130,7 @@
|
|||
"appearance.thumbnail_ratio.square": "正方形",
|
||||
"appearance.thumbnail_ratio.title": "縮略比例",
|
||||
"appearance.title": "外觀",
|
||||
"appearance.typography.title": "排版",
|
||||
"appearance.ui_font": "介面字體",
|
||||
"appearance.unread_count.badge.label": "在 Dock 圖示上顯示",
|
||||
"appearance.unread_count.label": "未讀數量",
|
||||
|
|
@ -123,6 +138,7 @@
|
|||
"appearance.use_pointer_cursor.description": "當滑鼠懸停在任何互動元素上時，游標會顯示為手型游標。",
|
||||
"appearance.use_pointer_cursor.label": "使用手型游標",
|
||||
"appearance.zen_mode.description": "禪定模式是一種防干擾的閱讀模式，你可以專注於內容而不受其他干擾。啟用禪定模式將會隱藏側邊欄。",
|
||||
"appearance.zen_mode.description_simple": "防干擾的閱讀模式（隱藏側邊欄）",
|
||||
"appearance.zen_mode.label": "禪定模式",
|
||||
"common.give_star": "<HeartIcon />喜歡我們的產品嗎？ <Link>在 GitHub 上給我們 Star 吧！</Link>",
|
||||
"customizeToolbar.more_actions.description": "將顯示在下拉選單中",
|
||||
|
|
|
|||
Loading…
Reference in New Issue