Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: fix settings dialog side bar transparent from bottom

Browse Source
This commit is contained in:
Abdullah Atta
2024-04-25 14:43:21 +05:00
parent 30ef679432
commit 1ad7bfb82f
1 changed files with 90 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
apps/web/src/dialogs/settings/index.tsx
View File

@@ -236,109 +236,106 @@ function SettingsSideBar(props: SettingsSideBarProps) {
return (
<FlexScrollContainer
id="settings-side-menu"
className="theme-scope-navigationMenu"
style={{
width: 240,
overflow: "auto"
overflow: "auto",
backgroundColor: "var(--background)"
}}
data-test-id="settings-navigation-menu"
>
<ScopedThemeProvider scope="navigationMenu">
<Flex
<Flex
sx={{
flexDirection: "column",
display: "flex",
overflow: "hidden"
}}
>
<Input
id="search"
name="search"
placeholder="Search"
data-test-id="settings-search"
sx={{
flexDirection: "column",
display: "flex",
overflow: "hidden",
backgroundColor: "background"
m: 2,
mb: 2,
width: "auto",
bg: "background",
py: "7px"
}}
>
<Input
id="search"
name="search"
placeholder="Search"
data-test-id="settings-search"
sx={{
m: 2,
mb: 2,
width: "auto",
bg: "background",
py: "7px"
}}
onChange={(e) => {
const query = e.target.value.toLowerCase().trim();
if (!query)
return onNavigate(
SettingsGroups.filter((g) => g.section === route)
);
onChange={(e) => {
const query = e.target.value.toLowerCase().trim();
if (!query)
return onNavigate(
SettingsGroups.filter((g) => g.section === route)
);
const groups: SettingsGroup[] = [];
for (const group of SettingsGroups) {
const isTitleMatch =
typeof group.header === "string" &&
group.header.toLowerCase().includes(query);
const isSectionMatch = group.section.includes(query);
const groups: SettingsGroup[] = [];
for (const group of SettingsGroups) {
const isTitleMatch =
typeof group.header === "string" &&
group.header.toLowerCase().includes(query);
const isSectionMatch = group.section.includes(query);
if (isTitleMatch || isSectionMatch) {
groups.push(group);
continue;
}
const settings = group.settings.filter((setting) => {
const description =
typeof setting.description === "function"
? setting.description()
: setting.description;
return [
description || "",
setting.keywords?.join(" ") || "",
setting.title
]
.join(" ")
?.toLowerCase()
.includes(query);
});
if (!settings.length) continue;
groups.push({ ...group, settings });
if (isTitleMatch || isSectionMatch) {
groups.push(group);
continue;
}
onNavigate(groups);
}}
/>
{sectionGroups.map((group) => (
<Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
<Text
variant={"subBody"}
sx={{
fontWeight: "bold",
color: "paragraph",
mx: 3,
mb: 1
}}
>
{group.title}
</Text>
{group.sections.map(
(section) =>
(!section.isHidden || !section.isHidden()) && (
<NavigationItem
key={section.key}
icon={section.icon}
title={section.title}
selected={section.key === route}
onClick={() => {
onNavigate(
SettingsGroups.filter(
(g) => g.section === section.key
)
);
setRoute(section.key);
}}
/>
)
)}
</Flex>
))}
</Flex>
</ScopedThemeProvider>
const settings = group.settings.filter((setting) => {
const description =
typeof setting.description === "function"
? setting.description()
: setting.description;
return [
description || "",
setting.keywords?.join(" ") || "",
setting.title
]
.join(" ")
?.toLowerCase()
.includes(query);
});
if (!settings.length) continue;
groups.push({ ...group, settings });
}
onNavigate(groups);
}}
/>
{sectionGroups.map((group) => (
<Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
<Text
variant={"subBody"}
sx={{
fontWeight: "bold",
color: "paragraph",
mx: 3,
mb: 1
}}
>
{group.title}
</Text>
{group.sections.map(
(section) =>
(!section.isHidden || !section.isHidden()) && (
<NavigationItem
key={section.key}
icon={section.icon}
title={section.title}
selected={section.key === route}
onClick={() => {
onNavigate(
SettingsGroups.filter((g) => g.section === section.key)
);
setRoute(section.key);
}}
/>
)
)}
</Flex>
))}
</Flex>
</FlexScrollContainer>
);
}