mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 04:24:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve selecting things

Browse Source
This commit is contained in:
David Ralph
2021-02-25 21:51:16 +00:00
parent 182da7cd5d
commit e3fb5140be
4 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/modals/marketplace/Item.jsx
View File

@@ -2,11 +2,10 @@ import React from 'react';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
export default class Item extends React.PureComponent {
render() {
export default function Item(props) {
let warningHTML;
try { // For some reason it breaks sometimes so we use try/catch
if (this.props.content.content.data.quote_api) {
if (props.content.content.data.quote_api) {
warningHTML = (
<div className='productInformation'>
<ul>
@@ -23,39 +22,38 @@ export default class Item extends React.PureComponent {
return (
<div id='item'>
<br/>
<ArrowBackIcon className='backArrow' onClick={this.props.function} />
<ArrowBackIcon className='backArrow' onClick={props.function} />
<br/>
<h1>{this.props.data.name}</h1>
{this.props.button}
<h1>{props.data.name}</h1>
{props.button}
<br/><br/>
<img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
<img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon} />
<div className='informationContainer'>
<div className='productInformation'>
<h4>{this.props.language.information}</h4>
<h4>{props.language.information}</h4>
<ul>
<br/>
<li className='header'>{this.props.language.last_updated}</li>
<li>{this.props.data.updated}</li>
<li className='header'>{props.language.last_updated}</li>
<li>{props.data.updated}</li>
<br/>
<li className='header'>{this.props.language.version}</li>
<li>{this.props.data.version}</li>
<li className='header'>{props.language.version}</li>
<li>{props.data.version}</li>
<br/>
<li className='header'>{this.props.language.author}</li>
<li>{this.props.data.author}</li>
<li className='header'>{props.language.author}</li>
<li>{props.data.author}</li>
</ul>
</div>
<div className='productInformation'>
<ul>
<li className='header'>{this.props.language.notice.title}</li>
<li id='updated'>{this.props.language.notice.description}</li>
<li className='header'>{props.language.notice.title}</li>
<li id='updated'>{props.language.notice.description}</li>
</ul>
</div>
{warningHTML}
</div>
<br/>
<h1>{this.props.language.overview}</h1>
<p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
<h1>{props.language.overview}</h1>
<p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
</div>
);
}
}

16
src/components/modals/marketplace/Items.jsx
View File

@@ -1,23 +1,22 @@
import React from 'react';
export default class Items extends React.PureComponent {
render() {
if (this.props.items.length === 0) {
export default function Items(props) {
if (props.items.length === 0) {
return null; // if there are no items in category don't render it
}
let seeMoreHTML;
if (this.props.seeMoreFunction && this.props.items.length === 3) {
seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>; // only render see more button if there are enough addons
if (props.seeMoreFunction && props.items.length === 3) {
seeMoreHTML = <button className='addToMue seemore' onClick={props.seeMoreFunction}>{props.seeMoreTitle}</button>; // only render see more button if there are enough addons
}
return (
<div>
{seeMoreHTML}
<h1>{this.props.title}</h1>
<h1>{props.title}</h1>
<div className='items'>
{this.props.items.map((item) =>
<div className='item' onClick={() => this.props.toggleFunction(item.name)} key={item.name}>
{props.items.map((item) =>
<div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
<img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
<div className='details'>
<h4>{item.display_name ? item.display_name : item.name}</h4>
@@ -27,5 +26,4 @@ export default class Items extends React.PureComponent {
</div>
</div>
);
}
}