Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +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 { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from "../../atoms/global";
import { saveToLocalStorage } from "./AppsNavBar"; import { saveToLocalStorage } from "./AppsNavBar";
export const AppInfoSnippet = ({ app, myName, isFromCategory }) => { export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {} }) => {
const isInstalled = app?.status?.status === 'READY' const isInstalled = app?.status?.status === 'READY'
const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom); 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 isSelectedAppPinned = !!sortablePinnedApps?.find((item)=> item?.name === app?.name && item?.service === app?.service)
const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom); const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom);
return ( return (
<AppInfoSnippetContainer> <AppInfoSnippetContainer sx={{
...parentStyles
}}>
<AppInfoSnippetLeft> <AppInfoSnippetLeft>
<ButtonBase <ButtonBase
sx={{ sx={{

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

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

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

@ -24,7 +24,7 @@ import {
PublishQAppCTARight, PublishQAppCTARight,
PublishQAppDotsBG, PublishQAppDotsBG,
} from "./Apps-styles"; } 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 { Add } from "@mui/icons-material";
import { MyContext, getBaseApiReact } from "../../App"; import { MyContext, getBaseApiReact } from "../../App";
import LogoSelected from "../../assets/svgs/LogoSelected.svg"; import LogoSelected from "../../assets/svgs/LogoSelected.svg";
@ -145,6 +145,9 @@ export const AppsLibraryDesktop = ({
key={`${app?.service}-${app?.name}`} key={`${app?.service}-${app?.name}`}
app={app} app={app}
myName={myName} myName={myName}
parentStyles={{
padding: '0px 10px'
}}
/> />
); );
}; };
@ -261,7 +264,7 @@ export const AppsLibraryDesktop = ({
<AppsWidthLimiter> <AppsWidthLimiter>
<StyledVirtuosoContainer <StyledVirtuosoContainer
sx={{ sx={{
height: `calc(100vh - 36px - 90px)`, height: `calc(100vh - 36px - 90px - 90px)`,
}} }}
> >
<Virtuoso <Virtuoso
@ -270,12 +273,16 @@ export const AppsLibraryDesktop = ({
itemContent={rowRenderer} itemContent={rowRenderer}
atBottomThreshold={50} atBottomThreshold={50}
followOutput="smooth" followOutput="smooth"
components={{ // components={{
Scroller: ScrollerStyled, // Use the styled scroller component // Scroller: ScrollerStyled, // Use the styled scroller component
}} // }}
/> />
</StyledVirtuosoContainer> </StyledVirtuosoContainer>
</AppsWidthLimiter> </AppsWidthLimiter>
) : searchedList?.length === 0 && debouncedValue ? (
<AppsWidthLimiter>
<Typography>No results</Typography>
</AppsWidthLimiter>
) : ( ) : (
<> <>
<AppLibrarySubTitle <AppLibrarySubTitle
@ -411,6 +418,32 @@ export const AppsLibraryDesktop = ({
flexWrap: "wrap", 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) => { {categories?.map((category) => {
return ( return (
<ButtonBase <ButtonBase