Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-20 10:05:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

added 'all' category for qapps

Browse Source
This commit is contained in:
PhilReact 2024-12-14 18:28:00 +02:00
parent dc7e0db0d8
commit b7ca08b008
3 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Apps/AppInfoSnippet.tsx
View File

@ -22,7 +22,7 @@ import { useRecoilState, useSetRecoilState } from "recoil";
import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from "../../atoms/global";
import { saveToLocalStorage } from "./AppsNavBar";
export const AppInfoSnippet = ({ app, myName, isFromCategory }) => {
export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {} }) => {
const isInstalled = app?.status?.status === 'READY'
const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom);
@ -30,7 +30,9 @@ export const AppInfoSnippet = ({ app, myName, isFromCategory }) => {
const isSelectedAppPinned = !!sortablePinnedApps?.find((item)=> item?.name === app?.name && item?.service === app?.service)
const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom);
return (
<AppInfoSnippetContainer>
<AppInfoSnippetContainer sx={{
...parentStyles
}}>
<AppInfoSnippetLeft>
<ButtonBase
sx={{

12
src/components/Apps/AppsCategoryDesktop.tsx
View File

@ -97,6 +97,7 @@ export const AppsCategoryDesktop = ({
const { rootHeight } = useContext(MyContext);
const categoryList = useMemo(() => {
if(category?.id === 'all') return availableQapps
return availableQapps.filter(
(app) => app?.metadata?.category === category?.id
);
@ -133,6 +134,9 @@ export const AppsCategoryDesktop = ({
app={app}
myName={myName}
isFromCategory={true}
parentStyles={{
padding: '0px 10px'
}}
/>
);
};
@ -206,7 +210,7 @@ export const AppsCategoryDesktop = ({
<AppsWidthLimiter>
<StyledVirtuosoContainer
sx={{
height: `calc(100vh - 36px - 90px)`,
height: `calc(100vh - 36px - 90px - 25px)`,
}}
>
<Virtuoso
@ -215,9 +219,9 @@ export const AppsCategoryDesktop = ({
itemContent={rowRenderer}
atBottomThreshold={50}
followOutput="smooth"
components={{
Scroller: ScrollerStyled, // Use the styled scroller component
}}
// components={{
// Scroller: ScrollerStyled, // Use the styled scroller component
// }}
/>
</StyledVirtuosoContainer>
</AppsWidthLimiter>

43
src/components/Apps/AppsLibraryDesktop.tsx
View File

@ -24,7 +24,7 @@ import {
PublishQAppCTARight,
PublishQAppDotsBG,
} from "./Apps-styles";
import { Avatar, Box, ButtonBase, InputBase, styled } from "@mui/material";
import { Avatar, Box, ButtonBase, InputBase, Typography, styled } from "@mui/material";
import { Add } from "@mui/icons-material";
import { MyContext, getBaseApiReact } from "../../App";
import LogoSelected from "../../assets/svgs/LogoSelected.svg";
@ -145,6 +145,9 @@ export const AppsLibraryDesktop = ({
key={`${app?.service}-${app?.name}`}
app={app}
myName={myName}
parentStyles={{
padding: '0px 10px'
}}
/>
);
};
@ -261,7 +264,7 @@ export const AppsLibraryDesktop = ({
<AppsWidthLimiter>
<StyledVirtuosoContainer
sx={{
height: `calc(100vh - 36px - 90px)`,
height: `calc(100vh - 36px - 90px - 90px)`,
}}
>
<Virtuoso
@ -270,12 +273,16 @@ export const AppsLibraryDesktop = ({
itemContent={rowRenderer}
atBottomThreshold={50}
followOutput="smooth"
components={{
Scroller: ScrollerStyled, // Use the styled scroller component
}}
// components={{
// Scroller: ScrollerStyled, // Use the styled scroller component
// }}
/>
</StyledVirtuosoContainer>
</AppsWidthLimiter>
) : searchedList?.length === 0 && debouncedValue ? (
<AppsWidthLimiter>
<Typography>No results</Typography>
</AppsWidthLimiter>
) : (
<>
<AppLibrarySubTitle
@ -411,6 +418,32 @@ export const AppsLibraryDesktop = ({
flexWrap: "wrap",
}}
>
<ButtonBase
onClick={() => {
executeEvent("selectedCategory", {
data: {
id: 'all',
name: 'All'
},
});
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "60px",
padding: "0px 24px",
border: "4px solid #10242F",
borderRadius: "6px",
boxShadow: "2px 4px 0px 0px #000000",
}}
>
All
</Box>
</ButtonBase>
{categories?.map((category) => {
return (
<ButtonBase