extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: welcome svg, privacy welcome tab, marketplace optimisations, various widget fixes etc 

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph 2021-07-06 19:38:20 +01:00
parent 44fc24951f
commit 95614a383f
29 changed files with 155 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -5,4 +5,4 @@ indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
insert_final_newline = true

4
.eslintrc.js
View File

@ -1,4 +1,4 @@
module.exports = {
extends: 'react-app',
parser: '@babel/eslint-parser'
extends: 'react-app',
parser: '@babel/eslint-parser'
};

5
package.json
View File

@ -11,6 +11,7 @@
"license": "BSD-3-Clause",
"version": "5.1.1",
"dependencies": {
"@emotion/react": "11.4.0",
"@fontsource/lexend-deca": "^4.4.5",
"@fontsource/montserrat": "^4.4.5",
"@material-ui/core": "5.0.0-beta.0",
@ -41,11 +42,11 @@
"eslint": "^7.30.0",
"eslint-config-react-app": "^6.0.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.0.0",
"mini-css-extract-plugin": "^2.1.0",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"source-map-loader": "^3.0.0",
"webpack": "^5.42.0",
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.0.0-beta.3"
},

2
src/App.jsx
View File

@ -14,7 +14,7 @@ export default class App extends React.PureComponent {
// 4.0 -> 5.0 (the key below is only on 5.0)
// now featuring 5.0 -> 5.1
// the firstRun check was moved here because the old function was useless
if (!localStorage.getItem('firstRun') || !localStorage.getItem('order') || !localStorage.getItem('backgroundFilterAmount')) {
if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
SettingsFunctions.moveSettings();
window.location.reload();
}

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

@ -77,7 +77,7 @@ export default class Marketplace extends React.PureComponent {
}
async getItems() {
const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/all', { signal: this.controller.signal })).json();
const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/items/' + this.props.type, { signal: this.controller.signal })).json();
const featured = await (await fetch(window.constants.MARKETPLACE_URL + '/featured', { signal: this.controller.signal })).json();
if (this.controller.signal.aborted === true) {
@ -85,8 +85,8 @@ export default class Marketplace extends React.PureComponent {
}
this.setState({
items: data[this.props.type],
oldItems: data[this.props.type],
items: data,
oldItems: data,
featured: featured.data,
done: true
});

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

@ -358,6 +358,9 @@ li {
.resetfooter {
position: absolute;
bottom: 20px;
width: 300px;
justify-content: center;
display: flex;
button.reset {
margin-right: 43px;

11
src/components/modals/main/scss/marketplace/_buttons.scss
View File

@ -46,3 +46,14 @@
display: inline;
margin-top: 0px;
}
button.round {
margin-left: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 3px;
vertical-align: middle;
padding: 10px;
}

1
src/components/modals/main/scss/settings/_dropdown.scss
View File

@ -24,7 +24,6 @@ select {
}
}
// safari dropdown
@supports (-webkit-hyphens: none) {
select {

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

@ -1,3 +1,6 @@
import CloseIcon from '@material-ui/icons/Close';
import DeleteIcon from '@material-ui/icons/Delete';
import SettingsFunctions from '../../../../modules/helpers/settings';
export default function ResetModal(props) {
@ -11,12 +14,17 @@ export default function ResetModal(props) {
return (
<>
<h3 style={{ textAlign: 'center' }}>{language.title}</h3>
<h4>{language.question}</h4>
<p>{language.information}</p>
<h1 style={{ textAlign: 'center' }}>{language.title}</h1>
<span>{language.question}</span>
<br/><br/>
<span>{language.information}</span>
<div className='resetfooter'>
<button className='reset' style={{ marginLeft: 0 }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
<button className='import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>{language.cancel}</button>
<button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
<DeleteIcon/>
</button>
<button className='round import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>
<CloseIcon/>
</button>
</div>
</>
);

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

@ -20,7 +20,6 @@ export default class SearchSettings extends React.PureComponent {
customDisplay: 'none',
customValue: localStorage.getItem('customSearchEngine') || ''
};
this.language = window.language.modals.main.settings;
}
resetSearch() {

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

@ -114,7 +114,7 @@ export default class BackgroundSettings extends React.PureComponent {
const APISettings = (
<>
<br/>
<Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background'/>
<Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<br/>
<Dropdown label={background.category} name='apiCategory'>
{this.state.backgroundCategories.map((category) => (
@ -152,7 +152,7 @@ export default class BackgroundSettings extends React.PureComponent {
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} category='background' />
<Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
<Checkbox name='bgtransition' text={background.transition} />
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
@ -174,17 +174,17 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
<h3>{background.effects.title}</h3>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<br/><br/>
<Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background'>
<Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background' element='#backgroundImage'>
<option value='grayscale'>{background.effects.filters.grayscale}</option>
<option value='sepia'>{background.effects.filters.sepia}</option>
<option value='invert'>{background.effects.filters.invert}</option>
<option value='saturate'>{background.effects.filters.saturate}</option>
<option value='contrast'>{background.effects.filters.contrast}</option>
</Dropdown>
<Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' />
<Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
</>
);
}

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

@ -64,12 +64,14 @@ function Tab(props) {
case settings.changelog: icon = <Changelog/>; break;
case settings.about.title: icon = <About/>; break;
// Store
// Addons
case addons.added: icon = <Added/>; break;
case addons.sideload: icon = <Sideload/>; break;
// Marketplace
case marketplace.photo_packs: icon = <Background/>; break;
case marketplace.quote_packs: icon = <Quote/>; break;
case marketplace.preset_settings: icon = <Advanced/>; break;
case addons.added: icon = <Added/>; break;
case addons.sideload: icon = <Sideload/>; break;
default: break;
}

2
src/components/modals/welcome/Welcome.jsx
View File

@ -51,7 +51,7 @@ export default class WelcomeModal extends React.PureComponent {
return (
<div className='welcomeContent'>
<section>
<img alt='celebration' draggable={false} src={this.state.image} />
<img className='showcaseimg' alt='celebration' draggable={false} src={this.state.image} />
<ProgressBar count={this.images} currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
</section>
<section>

19
src/components/modals/welcome/WelcomeSections.jsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import Radio from '../main/settings/Radio';
//import Checkbox from '../main/settings/Checkbox';
import Checkbox from '../main/settings/Checkbox';
import FileUpload from '../main/settings/FileUpload';
import UploadIcon from '@material-ui/icons/CloudUpload';
import AutoIcon from '@material-ui/icons/AutoAwesome';
import LightModeIcon from '@material-ui/icons/LightMode';
@ -79,9 +80,11 @@ export default class WelcomeSections extends React.Component {
changeWelcomeImg() {
let welcomeImage = this.state.welcomeImage;
this.setState({
welcomeImage: ++welcomeImage % this.welcomeImages.length
});
this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
}
@ -125,7 +128,7 @@ export default class WelcomeSections extends React.Component {
</>
);
const { appearance } = window.language.modals.main.settings.sections;
const { appearance, advanced } = window.language.modals.main.settings.sections;
const languageSettings = window.language.modals.main.settings.sections.language;
const theme = (
@ -139,12 +142,12 @@ export default class WelcomeSections extends React.Component {
</div>
<div className='options'>
<div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
<LightModeIcon/>
<span>{appearance.theme.light}</span>
<LightModeIcon/>
<span>{appearance.theme.light}</span>
</div>
<div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
<DarkModeIcon/>
<span>{appearance.theme.dark}</span>
<DarkModeIcon/>
<span>{appearance.theme.dark}</span>
</div>
</div>
<h3 className='quicktip'>{language.tip}</h3>
@ -172,6 +175,10 @@ export default class WelcomeSections extends React.Component {
<>
<h1>{language.sections.privacy.title}</h1>
<p>{language.sections.privacy.description}</p>
<Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
<p>{language.sections.privacy.offline_mode_description}</p>
<h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
<a className='privacy' href='https://muetab.com/privacy' target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
</>
);

38
src/components/modals/welcome/welcome.scss
View File

@ -24,10 +24,6 @@
justify-content: center;
align-items: center;
img {
height: 300px;
width: 400px;
}
}
section:nth-child(2) {
@ -82,20 +78,6 @@
}
}
.examples {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
img {
width: 30rem;
height: auto;
display: block;
margin: 30px;
border-radius: 12px;
}
}
.themesToggleArea {
.active {
@ -146,3 +128,23 @@ a.privacy {
color: #5352ed;
}
}
.examples {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
img {
width: 30rem !important;
height: auto !important;
display: block;
margin: 30px;
border-radius: 12px;
}
}
.showcaseimg {
width: 350px;
height: auto;
}

8
src/components/widgets/quicklinks/QuickLinks.jsx
View File

@ -100,6 +100,10 @@ export default class QuickLinks extends React.PureComponent {
}
componentDidMount() {
if (localStorage.getItem('offlineMode') === 'true') {
return;
}
EventBus.on('refresh', (data) => {
if (data === 'quicklinks') {
const element = document.querySelector('.quicklinks-container');
@ -144,6 +148,10 @@ export default class QuickLinks extends React.PureComponent {
}
render() {
if (localStorage.getItem('offlineMode') === 'true') {
return null;
}
let target, rel = null;
if (localStorage.getItem('quicklinksnewtab') === 'true') {
target = '_blank';

4
src/modules/default_settings.json
View File

@ -238,5 +238,9 @@
{
"name": "statsData",
"value": "{}"
},
{
"name": "offlineMode",
"value": false
}
]

6
src/modules/helpers/stats.js
View File

@ -2,13 +2,13 @@ export default class Stats {
constructor(id) {
this.id = id;
this.url = window.constants.UMAMI_DOMAIN + '/api/collect';
this.offline = (localStorage.getItem('offlineMode') !== 'true');
this.online = (localStorage.getItem('offlineMode') === 'false');
}
async postEvent(type, name) {
const value = name.toLowerCase().replaceAll(' ', '-');
if (!this.offline) {
if (this.online) {
// umami
await fetch(this.url, {
method: 'POST',
@ -46,7 +46,7 @@ export default class Stats {
}
async tabLoad() {
if (!this.offline) {
if (this.online) {
// umami
await fetch(this.url, {
method: 'POST',

7
src/translations/de_DE.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/en_GB.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/en_US.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/es.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/fr.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/nl.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/no.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/ru.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

7
src/translations/zh_CN.json
View File

@ -398,7 +398,12 @@
},
"privacy": {
"title": "Privacy Options",
"description": "to be added"
"description": "Enable settings to further protect your privacy with Mue.",
"offline_mode_description": "Enabling offline mode will disable all requests to any service. This will result in online backgrounds, online quotes, marketplace, weather, quick links, change log and some about tab information to be disabled.",
"links": {
"title": "Links",
"privacy_policy": "Privacy Policy"
}
},
"final": {
"title": "Final step",

6
vercel.json
View File

@ -1,5 +1,5 @@
{
"github": {
"silent": true
}
"github": {
"silent": true
}
}

2
webpack.config.js
View File

@ -76,4 +76,4 @@ module.exports = {
chunkFilename: '[id].[chunkhash].chunk.css'
}),
]
};
};