From 47c2d94154dff7502531b50f314094845af803ae Mon Sep 17 00:00:00 2001 From: Isaac Date: Sat, 15 Jun 2024 00:55:10 +0100 Subject: [PATCH 1/3] style: modal loader, sidebar colours --- src/components/Elements/MainModal/Main.jsx | 14 ++++---------- src/components/Elements/MainModal/scss/index.scss | 4 ++-- src/scss/_variables.scss | 9 +++++++-- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx index f8f2e953..5c87c658 100644 --- a/src/components/Elements/MainModal/Main.jsx +++ b/src/components/Elements/MainModal/Main.jsx @@ -10,16 +10,10 @@ const Addons = lazy(() => import('../../../features/misc/views/Addons')); const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace')); const renderLoader = () => ( -
-
-
-
-
-
- {variables.getMessage('modals.main.loading')} -
-
-
+
+
+
+ {variables.getMessage('modals.main.loading')}
); diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index 72c65913..76e9265c 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -130,9 +130,9 @@ h5 { height: 50px; @include themed { - border: 3px solid t($modal-sidebar); + border: 3px solid t($btn-background); border-radius: 50%; - border-top-color: t($modal-sidebarActive); + border-top-color: t($brand-accent); } animation: spin 1s ease-in-out infinite; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index aba3abce..229378dd 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -18,8 +18,11 @@ $link: 'link'; $weather: 'weather'; $modal-secondaryColour: 'modal-secondaryColour'; $slightGradient: 'slightGradient'; +$orange: #ffb032; +$pink: #dd3b67; +$brand-accent: 'brand-accent'; $theme-colours: ( - 'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%), + 'gradient': linear-gradient(90deg, $orange 0%, $pink 100%), 'main': rgb(242 243 244 / 100%), 'secondary': rgb(0 0 0 / 100%), 'main-text-color': rgb(242 243 244 / 100%), @@ -54,6 +57,7 @@ $ui-elements: ( ); $themes: ( light: ( + 'brand-accent': $pink, 'weather': #333, 'background': rgb(255 255 255 / 70%), 'backgroundBlur': 15px, @@ -71,6 +75,7 @@ $themes: ( 'slightGradient': linear-gradient(#fff, #ddd), ), dark: ( + 'brand-accent': $orange, 'weather': #e7e7e7, 'background': rgb(0 0 0 / 70%), 'backgroundBlur': 15px, @@ -82,7 +87,7 @@ $themes: ( 'btn-backgroundHover': #565656, 'modal-background': #0a0a0a, 'modal-sidebar': rgb(14, 16, 19), - 'modal-sidebarActive': #333, + 'modal-sidebarActive': rgba(0, 0, 0, 0.4), 'modal-secondaryColour': #111, 'link': rgb(115 115 255), 'slightGradient': linear-gradient(#0e1013, #322a2a), From 4812b9e602c66151f15267367dde879c2ae605d1 Mon Sep 17 00:00:00 2001 From: Isaac Date: Sat, 15 Jun 2024 00:57:48 +0100 Subject: [PATCH 2/3] style: sidebar was better before --- src/scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 229378dd..9270b586 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -87,7 +87,7 @@ $themes: ( 'btn-backgroundHover': #565656, 'modal-background': #0a0a0a, 'modal-sidebar': rgb(14, 16, 19), - 'modal-sidebarActive': rgba(0, 0, 0, 0.4), + 'modal-sidebarActive': #333, 'modal-secondaryColour': #111, 'link': rgb(115 115 255), 'slightGradient': linear-gradient(#0e1013, #322a2a), From 3ab5889e734ea0935c110d54f3dd9a985720df86 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 15 Jun 2024 11:25:19 +0100 Subject: [PATCH 3/3] refactor(marketplace): full rewrite, very broken --- .../marketplace/components/Items/NewItems.jsx | 77 ++++ .../marketplace/views/newItemPage.jsx | 419 ++++++++++++++++++ src/features/misc/views/Marketplace.jsx | 52 ++- 3 files changed, 546 insertions(+), 2 deletions(-) create mode 100644 src/features/marketplace/components/Items/NewItems.jsx create mode 100644 src/features/marketplace/views/newItemPage.jsx diff --git a/src/features/marketplace/components/Items/NewItems.jsx b/src/features/marketplace/components/Items/NewItems.jsx new file mode 100644 index 00000000..2f373bf8 --- /dev/null +++ b/src/features/marketplace/components/Items/NewItems.jsx @@ -0,0 +1,77 @@ +import variables from 'config/variables'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; +import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; + +function ItemCard({ item, onClick, type, onCollection, isCurator }) { + item._onCollection = onCollection; + return ( + + { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + aria-hidden="true" + /> + icon { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> +
+ {item.display_name || item.name} + {!isCurator ? ( + + {variables.getMessage('modals.main.marketplace.by', { author: item.author })} + + ) : ( + '' + )} + + {type === 'all' && !onCollection ? ( + + {variables.getMessage('modals.main.marketplace.' + item.type)} + + ) : null} +
+ + ); +} + +const NewItems = ({ items }) => { + const { setSubTab } = useTab(); + return ( +
+ {items.map((item, index) => ( + setSubTab(item.name)} + //isCurator={isCurator} + item={item} + //toggleFunction={toggleFunction} + //type={type} + //onCollection={onCollection} + key={index} + /> + ))} +
+ ); +}; + +export { NewItems }; diff --git a/src/features/marketplace/views/newItemPage.jsx b/src/features/marketplace/views/newItemPage.jsx new file mode 100644 index 00000000..64ab50c1 --- /dev/null +++ b/src/features/marketplace/views/newItemPage.jsx @@ -0,0 +1,419 @@ +import variables from 'config/variables'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; +import { useEffect, useState } from 'react'; +import { ShareModal } from 'components/Elements'; +import { + MdIosShare, + MdFlag, + MdAccountCircle, + MdCalendarMonth, + MdFormatQuote, + MdImage, + MdTranslate, + MdOutlineWarning, + MdStyle, + MdClose, + MdLibraryAdd, +} from 'react-icons/md'; +import { Header } from 'components/Layout/Settings'; +import Modal from 'react-modal'; +import Markdown from 'markdown-to-jsx'; + +const NewItemPage = () => { + const { subTab } = useTab(); + const controller = new AbortController(); + const [itemName, setItemName] = useState(''); + const [ItemDescription, setItemDescription] = useState(''); + + async function getItemData() { + const item = await ( + await fetch(`${variables.constants.API_URL}/marketplace/item/quote_packs/${subTab}`, { + signal: controller.signal, + }) + ).json(); + console.log(item); + + setItemName(item.data.display_name); + setItemDescription(item.data.description); + } + + useEffect(() => { + getItemData(); + }, []); + + const moreInfoItem = (icon, header, text) => ( +
+ {icon} +
+ {header} + {text} +
+
+ ); + + const itemWarning = () => { + const template = (message) => ( +
+ +
+ Warning + {message} +
+
+ ); + + if (this.props.data.data.sideload === true) { + return template(variables.getMessage('modals.main.marketplace.product.sideload_warning')); + } + + if (this.props.data.data.image_api === true) { + return template(variables.getMessage('modals.main.marketplace.product.third_party_api')); + } + + if (this.props.data.data.language !== undefined && this.props.data.data.language !== null) { + if (shortLocale !== this.props.data.data.language) { + return template(variables.getMessage('modals.main.marketplace.product.not_in_language')); + } + } + + return null; + }; + + { + /*async function toggle(pageType, data) { + if (pageType === 'item') { + const toggleType = type === 'all' || type === 'collections' ? data.type : type; + const item = await ( + await fetch(`${variables.constants.API_URL}/marketplace/item/${toggleType}/${data.name}`, { + signal: controller.signal, + }) + ).json(); + + if (controller.signal.aborted === true) { + return; + } + + // check if already installed + let addonInstalled = false; + let addonInstalledVersion; + const installed = JSON.parse(localStorage.getItem('installed')); + if (installed.some((item) => item.name === item.data.name)) { + addonInstalled = true; + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === item.data.name) { + addonInstalledVersion = installed[i].version; + break; + } + } + } + + setItem({ + onCollection: data._onCollection, + type: item.data.type, + display_name: item.data.name, + author: item.data.author, + description: item.data.description, + version: item.data.version, + icon: item.data.screenshot_url, + data: item.data, + local: { + installed: addonInstalled, + version: addonInstalledVersion, + }, + slug: data.name, + }); + + setType('item'); + + variables.stats.postEvent('marketplace-item', `${item.display_name} viewed`); + } else if (pageType === 'collection') { + setDone(false); + setItem({}); + + const collection = await ( + await fetch(`${variables.constants.API_URL}/marketplace/collection/${data}`, { + signal: controller.signal, + }) + ).json(); + + setItems(collection.data.items); + setCollection({ + visible: true, + title: collection.data.display_name, + description: collection.data.description, + img: collection.data.img, + }); + + setType('collection'); + } else { + setItem({}); + setCollection({}); + setType('normal'); + } + }*/ + } + + return ( + <> + {/* this.setState({ shareModal: false })} + > + this.setState({ shareModal: false })} + /> + */} + {/*
0 + ? this.props.data.data.in_collections[0].display_name + : variables.getMessage('modals.main.navbar.marketplace') + } + secondaryTitle={ + this.props.data.data.sideload + ? this.props.data.data.name + : this.props.data.data.display_name + } + report={false} + goBack={this.props.toggleFunction} + />*/} + {itemName} +
+ {/*
+
+ {moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.created_by'), + this.props.data.author, + )} + {itemWarning()} +
+ {this.props.data.data.photos && ( +
+
+ +
+
+ )} + {this.props.data.data.settings && ( + product { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> + )}*/} +
+ + {variables.getMessage('modals.main.marketplace.product.description')} + + {ItemDescription} +
+
+ {/*} + {this.props.data.data.quotes && ( + <> + + + + + + + {this.props.data.data.quotes.slice(0, this.state.count).map((quote, index) => ( + + + + + ))} + +
{variables.getMessage('modals.main.settings.sections.quote.title')}{variables.getMessage('modals.main.settings.sections.quote.author')}
{quote.quote}{quote.author}
+
+ this.incrementCount('quotes')}> + {this.state.count !== this.props.data.data.quotes.length + ? variables.getMessage('modals.main.marketplace.product.show_all') + : variables.getMessage('modals.main.marketplace.product.show_less')} + +
+ + )} + {this.props.data.data.settings && ( + <> + + + + + + + {Object.entries(this.props.data.data.settings) + .slice(0, this.state.count) + .map(([key, value]) => ( + + + + + ))} + +
{variables.getMessage('modals.main.marketplace.product.setting')}{variables.getMessage('modals.main.marketplace.product.value')}
{key}{value}
+
+ this.incrementCount('settings')}> + {this.state.count !== this.props.data.data.settings.length + ? variables.getMessage('modals.main.marketplace.product.show_all') + : variables.getMessage('modals.main.marketplace.product.show_less')} + +
+ + )} +
+ + {variables.getMessage('modals.main.marketplace.product.details')} + +
+ {this.props.data.data.updated_at && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.updated_at'), + formattedDate, + )} + {this.props.data.data.quotes && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.no_quotes'), + this.props.data.data.quotes.length, + )} + {this.props.data.data.photos && + moreInfoItem( + , + variables.getMessage('modals.main.marketplace.product.no_images'), + this.props.data.data.photos.length, + )} + {this.props.data.data.quotes && this.props.data.data.language + ? moreInfoItem( + , + variables.getMessage('modals.main.settings.sections.language.title'), + languageNames.of(this.props.data.data.language), + ) + : null} + {moreInfoItem( + , + variables.getMessage('modals.main.settings.sections.background.type.title'), + variables.getMessage( + 'modals.main.marketplace.' + this.getName(this.props.data.data.type), + ) || 'marketplace', + )} +
+
+
+
+
+ icon { + e.target.onerror = null; + e.target.src = placeholderIcon; + }} + /> + {localStorage.getItem('welcomePreview') !== 'true' ? ( + this.state.button + ) : ( +

+ {variables.getMessage( + 'modals.main.marketplace.product.buttons.not_available_preview', + )} +

+ )} + {this.props.data.data.sideload !== true && ( +
+
+ )} + {this.props.data.data.in_collections?.length > 0 && ( +
+
+ + {variables.getMessage('modals.main.marketplace.product.part_of')} + + + this.props.toggleFunction( + 'collection', + this.props.data.data.in_collections[0].name, + ) + } + > + {this.props.data.data.in_collections[0].display_name} + +
+
+ )} +
+
+
+ {/*} + {moreByCurator.length > 1 && ( +
+ + {variables.getMessage('modals.main.marketplace.product.more_from_curator', { + name: this.props.data.author, + })} + +
+ this.props.toggleFunction('item', input)} + collectionFunction={(input) => this.props.toggleFunction('collection', input)} + filter={''} + moreByCreator={true} + showCreateYourOwn={false} + /> +
+
+ )} + */} + + ); +}; + +export { NewItemPage as default, NewItemPage }; diff --git a/src/features/misc/views/Marketplace.jsx b/src/features/misc/views/Marketplace.jsx index 9f6fd320..9a734139 100644 --- a/src/features/misc/views/Marketplace.jsx +++ b/src/features/misc/views/Marketplace.jsx @@ -1,9 +1,49 @@ import variables from 'config/variables'; -import { memo } from 'react'; +import { memo, useState, useEffect } from 'react'; import MarketplaceTab from '../../marketplace/views/Browse'; +import { sortItems } from '../../marketplace/api'; +import { NewItems as Items } from '../../marketplace/components/Items/NewItems'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; +import { NewItemPage } from '../../marketplace/views/newItemPage'; function Marketplace(props) { + const [done, setDone] = useState(false); + const [items, setItems] = useState([]); + const [type, setType] = useState('all'); + const [selectedItem, setSelectedItem] = useState(null); + const { subTab } = useTab(); + + const controller = new AbortController(); + + async function getItems() { + setDone(false); + const dataURL = + variables.constants.API_URL + + (type === 'collections' ? '/marketplace/collections' : '/marketplace/items/' + type); + + const { data } = await ( + await fetch(dataURL, { + signal: controller.signal, + }) + ).json(); + + if (controller.signal.aborted === true) { + return; + } + + setItems(sortItems(data, 'z-a')); + setDone(true); + } + + useEffect(() => { + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { + return; + } + + getItems(); + }, []); + return ( { /* props.changeTab(type)} current="marketplace" modalClose={props.modalClose}> @@ -29,7 +69,15 @@ function Marketplace(props) { }, (
- + {/* + {selectedItem !== null ? {selectedItem?.display_name} : null}*/} + {subTab === '' ? ( + + ) : ( + <> + + + )}
) );