mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 13:34:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: bug fixes, style improvements, background transition toggle and marketplace language support

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-04-11 20:17:23 +01:00
parent fbc656f978
commit 061c9ef6db
19 changed files with 79 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/modals/main/marketplace/sections/Added.jsx
View File

@@ -30,8 +30,9 @@ export default class Added extends React.PureComponent {
button: ''
};
this.buttons = {
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
}
this.language = window.language.modals.main.addons;
}
toggle(type, type2, data) {
@@ -106,8 +107,8 @@ export default class Added extends React.PureComponent {
<div className='items'>
<div className='emptyMessage'>
<LocalMallIcon/>
<h1>Empty</h1>
<p className='description'>No addons are installed</p>
<h1>{this.language.empty.title}</h1>
<p className='description'>{this.language.empty.description}</p>
</div>
</div>
);

24
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -47,7 +47,7 @@ export default class Marketplace extends React.PureComponent {
try {
info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
} catch (e) {
return toast(this.props.toastLanguage.error);
return toast(window.language.toasts.error);
}
// check if already installed
@@ -131,35 +131,25 @@ export default class Marketplace extends React.PureComponent {
);
}
if (navigator.onLine === false) {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return errorMessage(
<>
<WifiOffIcon/>
<h1>Offline</h1>
<p className='description'>Mue down!</p>
</>
);
}
if (localStorage.getItem('offlineMode') === 'true') {
return errorMessage(
<>
<WifiOffIcon/>
<h1>Offline mode is enabled</h1>
<p className='description'>Please turn off offline mode to access the marketplace</p>
<h1>{this.language.offline.title}</h1>
<p className='description'>{this.language.offline.description}</p>
</>
);
}
if (this.state.done === false) {
return errorMessage(<h1>Loading</h1>);
return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
}
if (this.state.items.length === 0) {
return errorMessage(<>
<LocalMallIcon/>
<h1>Empty</h1>
<p className='description'>No items in this category</p>
<h1>{window.language.modals.main.addons.empty.title}</h1>
<p className='description'>{this.language.no_items}</p>
</>)
}

5
src/components/modals/main/scss/index.scss
View File

@@ -124,6 +124,7 @@ ul.sidebar {
h1 {
text-align: center;
font-size: 1.8em;
}
svg {
@@ -358,3 +359,7 @@ li {
color: var(--modal-text) !important;
padding-right: 10px;
}
.MuiIconButton-root {
color: var(--modal-text) !important;
}

4
src/components/modals/main/scss/settings/_buttons.scss
View File

@@ -69,10 +69,12 @@
.import {
@extend %settingsButton;
background-color: map-get($button-colours, 'other');
color: map-get($theme-colours, 'secondary');
color: map-get($theme-colours, 'primary');
border: 2px solid map-get($button-colours, 'other');
&:hover {
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
}
}

4
src/components/modals/main/settings/ResetModal.jsx
View File

@@ -11,8 +11,8 @@ export default function ResetModal(props) {
<h4>{language.question}</h4>
<p>{language.information}</p>
<div className='resetfooter'>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{window.language.modals.main.settings.buttons.reset}</button>
<button className='import' onClick={props.modalClose}>{language.cancel}</button>
<button className='reset' style={{ 'margin-left': '0' }} onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{window.language.modals.main.settings.buttons.reset}</button>
<button className='import' style={{ 'margin-left': '5px' }} onClick={props.modalClose}>{language.cancel}</button>
</div>
</>
);

1
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -119,6 +119,7 @@ export default class BackgroundSettings extends React.PureComponent {
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} />
<Checkbox name='ddgProxy' text={background.ddg_proxy} />
<Checkbox name='bgtransition' text={background.transition} />
<h3>{background.source.title}</h3>
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>

6
src/components/modals/main/tabs/Addons.jsx
View File

@@ -5,10 +5,12 @@ import Added from '../marketplace/sections/Added';
import AddonsTabs from './backend/Tabs';
export default function Addons() {
const language = window.language.modals.main.addons;
return (
<AddonsTabs>
<div label='Added'><Added/></div>
<div label='Sideload'></div>
<div label={language.added}><Added/></div>
<div label={language.sideload}></div>
</AddonsTabs>
);
}

6
src/components/modals/main/tabs/Marketplace.jsx
View File

@@ -5,10 +5,12 @@ import MarketplaceTab from '../marketplace/sections/Marketplace';
import Tabs from './backend/Tabs';
export default function Marketplace() {
const language = window.language.modals.main.marketplace;
return (
<Tabs>
<div label='Photo Packs'><MarketplaceTab type='photo_packs'/></div>
<div label='Quote Packs'><MarketplaceTab type='quote_packs'/></div>
<div label={language.photo_packs}><MarketplaceTab type='photo_packs'/></div>
<div label={language.quote_packs}><MarketplaceTab type='quote_packs'/></div>
</Tabs>
);
}

10
src/components/modals/main/tabs/backend/Tab.jsx
View File

@@ -40,6 +40,8 @@ function Tab(props) {
const language = window.language.modals.main.settings.sections;
const navbarlanguage = window.language.modals.main.navbar;
const marketplacelanguage = window.language.modals.main.marketplace;
const addonslanguage = window.language.modals.main.addons;
let icon, divider;
switch (props.label) {
@@ -65,10 +67,10 @@ function Tab(props) {
case language.about.title: icon = <About/>; break;
// Store
case 'Photo Packs': icon = <Background/>; break;
case 'Quote Packs': icon = <Quote/>; break;
case 'Added': icon = <Added/>; break;
case 'Sideload': icon = <Sideload/>; break;
case marketplacelanguage.photo_packs: icon = <Background/>; break;
case marketplacelanguage.quote_packs: icon = <Quote/>; break;
case addonslanguage.added: icon = <Added/>; break;
case addonslanguage.sideload: icon = <Sideload/>; break;
default: break;
}

2
src/components/widgets/Widgets.jsx
View File

@@ -75,7 +75,7 @@ export default class Widgets extends React.PureComponent {
<React.Suspense fallback={renderLoader()}>
{this.enabled('searchBar') ? <Search/> : null}
{elements}
{this.enabled('weatherEnabled') && (localStorage.getItem('offlineMode') === 'false') ? <Weather/> : null}
{this.enabled('weatherEnabled') && !localStorage.getItem('offlineMode') ? <Weather/> : null}
</React.Suspense>
</div>
);

14
src/components/widgets/background/Background.jsx
View File

@@ -61,8 +61,15 @@ export default class Background extends React.PureComponent {
setBackground() {
if (this.state.url !== '') {
const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
const backgroundImage = document.querySelector('#backgroundImage');
if (localStorage.getItem('bgtransition') === 'false') {
return backgroundImage.setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
);
}
backgroundImage.classList.add('backgroundPreload');
// preloader for background transition
@@ -118,15 +125,16 @@ export default class Background extends React.PureComponent {
// API background
const backgroundAPI = localStorage.getItem('backgroundAPI');
const apiCategory = localStorage.getItem('apiCategory');
let requestURL, data;
switch (backgroundAPI) {
case 'unsplash':
requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
break;
// Defaults to Mue
default:
requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;
requestURL = `${window.constants.API_URL}/images/random?category=${apiCategory}`;
break;
}

12
src/components/widgets/background/scss/index.scss
View File

@@ -34,14 +34,4 @@
to {
opacity: 1;
}
}
.backgroundEffects {
opacity: 0.7;
transition: ease 0.6s;
}
.creditlink {
text-decoration: none;
color: white;
}
}

2
src/components/widgets/navbar/Navbar.jsx
View File

@@ -31,7 +31,7 @@ export default function Navbar(props) {
:null}
{(window.constants.BETA_VERSION === true) ?
<Tooltip title='Feedback' placement='top'>
<Tooltip title={language.widgets.navbar.tooltips.feedback} placement='top'>
<Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
</Tooltip>
:null}

3
src/components/widgets/quicklinks/quicklinks.scss
View File

@@ -60,9 +60,10 @@ textarea {
.quicklinks {
border: none;
color: #fff;
font-size: 22px;
font-size: 42px;
background: none;
cursor: pointer;
text-shadow: 0 0 10px rgb(0 0 0 / 60%);
}
.quicklinks-container>a,

25
src/components/widgets/quote/Quote.jsx
View File

@@ -16,9 +16,9 @@ export default class Quote extends React.PureComponent {
this.state = {
quote: '',
author: '',
favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />
favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
tweet: <TwitterIcon className='copyButton' onClick={this.tweetQuote} />,
copy: <FileCopy className='copyButton' onClick={this.copyQuote} />
};
this.language = window.language.widgets.quote;
@@ -92,7 +92,7 @@ export default class Quote extends React.PureComponent {
// First we try and get a quote from the API...
try {
const data = await (await fetch(window.constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json();
const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
// If we hit the ratelimit, we fallback to local quotes
if (data.statusCode === 429) {
@@ -115,25 +115,25 @@ export default class Quote extends React.PureComponent {
}
}
copyQuote() {
copyQuote = () => {
navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
toast(this.language.quote);
toast(window.language.toasts.quote);
}
tweetQuote() {
tweetQuote = () => {
window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus();
}
favourite() {
favourite = () => {
if (localStorage.getItem('favouriteQuote')) {
localStorage.removeItem('favouriteQuote');
this.setState({
favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />
favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />
});
} else {
localStorage.setItem('favouriteQuote', this.state.quote + ' - ' + this.state.author);
this.setState({
favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} />
favourited: <StarIcon className='copyButton' onClick={this.favourite} />
});
}
}
@@ -141,7 +141,7 @@ export default class Quote extends React.PureComponent {
componentDidMount() {
let favouriteQuote = '';
if (localStorage.getItem('favouriteQuoteEnabled') === 'true') {
favouriteQuote = localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : <StarIcon2 className='copyButton' onClick={() => this.favourite()} />;
favouriteQuote = localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={this.favourite} /> : <StarIcon2 className='copyButton' onClick={this.favourite} />;
}
this.setState({
@@ -158,7 +158,8 @@ export default class Quote extends React.PureComponent {
<div className='quotediv'>
<h1 className='quote'>{`${this.state.quote}`}</h1>
<h1 className='quoteauthor'>
<a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a>
<a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a>
<br/>
{this.state.copy} {this.state.tweet} {this.state.favourited}
</h1>
</div>

2
src/components/widgets/quote/quote.scss
View File

@@ -15,8 +15,10 @@
.quoteauthor {
font-size: 0.9em;
letter-spacing: 0.5px;
svg {
margin-left: 10px;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}
}