Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 12:12:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: add support for endless scrolling in themes

Browse Source
This commit is contained in:
Abdullah Atta
2023-07-24 10:12:17 +05:00
parent c45e029780
commit c644f606f3
1 changed files with 64 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/web/src/dialogs/settings/components/themes-selector.tsx
View File

@@ -33,6 +33,7 @@ import {
import { ThemeMetadata } from "@notesnook/themes-server";
import { showThemeDetails } from "../../../common/dialog-controller";
import { ThemePreview } from "../../../components/theme-preview";
import { VirtuosoGrid } from "react-virtuoso";
const ThemesClient = ThemesTRPC.createClient({
links: [
@@ -131,61 +132,73 @@ function ThemesList() {
</Button>
))}
</Flex>
<Box
sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, mt: 2 }}
>
{themes.data?.pages
.flatMap((a) => a.themes)
.map((theme) => (
<Flex
key={theme.id}
<VirtuosoGrid
style={{ height: 700 }}
data={themes.data?.pages.flatMap((a) => a.themes) || []}
endReached={() => (themes.hasNextPage ? themes.fetchNextPage() : null)}
components={{
List: (props) => (
<Box
sx={{
flexDirection: "column",
flex: 1,
cursor: "pointer",
p: 2,
border: "1px solid transparent",
borderRadius: "default",
":hover": {
bg: "background-secondary",
border: "1px solid var(--border)",
".set-as-button": { opacity: 1 }
}
}}
onClick={async () => {
if (await showThemeDetails(theme)) {
await setTheme(theme);
}
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 4,
mt: 2
}}
{...props}
/>
)
}}
itemContent={(_index, theme) => (
<Flex
key={theme.id}
sx={{
flexDirection: "column",
flex: 1,
cursor: "pointer",
p: 2,
border: "1px solid transparent",
borderRadius: "default",
":hover": {
bg: "background-secondary",
border: "1px solid var(--border)",
".set-as-button": { opacity: 1 }
}
}}
onClick={async () => {
if (await showThemeDetails(theme)) {
await setTheme(theme);
}
}}
>
<ThemePreview theme={theme} />
<Text variant="title" sx={{ mt: 1 }}>
{theme.name}
</Text>
<Text variant="body">{theme.authors[0].name}</Text>
<Flex
sx={{ justifyContent: "space-between", alignItems: "center" }}
>
<ThemePreview theme={theme} />
<Text variant="title" sx={{ mt: 1 }}>
{theme.name}
</Text>
<Text variant="body">{theme.authors[0].name}</Text>
<Flex
sx={{ justifyContent: "space-between", alignItems: "center" }}
>
<Text variant="subBody">{theme.totalInstalls} installs</Text>
{isThemeCurrentlyApplied(theme.id) ? (
<CheckCircleOutline color="accent" size={20} />
) : (
<Button
className="set-as-button"
variant="secondary"
sx={{ opacity: 0, bg: "background" }}
onClick={(e) => {
e.stopPropagation();
setTheme(theme);
}}
>
Set as {theme.colorScheme}
</Button>
)}
</Flex>
<Text variant="subBody">{theme.totalInstalls} installs</Text>
{isThemeCurrentlyApplied(theme.id) ? (
<CheckCircleOutline color="accent" size={20} />
) : (
<Button
className="set-as-button"
variant="secondary"
sx={{ opacity: 0, bg: "background" }}
onClick={(e) => {
e.stopPropagation();
setTheme(theme);
}}
>
Set as {theme.colorScheme}
</Button>
)}
</Flex>
))}
</Box>
</Flex>
)}
></VirtuosoGrid>
</>
);
}