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

refactor: small styling changes and 7.0.1 start

This commit is contained in:
David Ralph 2024-01-01 11:47:58 +00:00
parent de24d11463
commit d482deccb4
32 changed files with 134 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
LICENSE
View File

@ -1,7 +1,7 @@
BSD 3-Clause License BSD 3-Clause License
Copyright (c) 2023- Kaiso One Ltd Copyright (c) 2023-2024 Kaiso One Ltd
Copyright (c) 2019-2023 The Mue Authors Copyright (c) 2019-2024 The Mue Authors
Copyright (c) 2018-2019 David Ralph Copyright (c) 2018-2019 David Ralph
All rights reserved. All rights reserved.

9
README.md
View File

@ -48,7 +48,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
### Planned Features ### Planned Features
Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). We are currently working on a rewrite over on the "phoenix" branch.
## Installation ## Installation
@ -117,10 +117,3 @@ And finally, a big thank you to all the other [contributors](https://github.com/
[Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode <br/> [Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode <br/>
[Undraw](https://undraw.co) - Welcome modal images [Undraw](https://undraw.co) - Welcome modal images
<p>This project is supported by:</p>
<p>
<a href="https://www.digitalocean.com/">
<img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="201px">
</a>
</p>

2
package.json
View File

@ -9,7 +9,7 @@
"homepage": "https://muetab.com", "homepage": "https://muetab.com",
"bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"version": "7.0.0", "version": "7.0.1",
"dependencies": { "dependencies": {
"@eartharoid/i18n": "1.2.1", "@eartharoid/i18n": "1.2.1",
"@emotion/react": "^11.11.3", "@emotion/react": "^11.11.3",

2
src/App.jsx
View File

@ -38,7 +38,7 @@ export default class App extends PureComponent {
render() { render() {
return ( return (
<> <>
{localStorage.getItem('background') === 'true' ? <Background /> : null} {localStorage.getItem('background') === 'true' && <Background />}
<ToastContainer <ToastContainer
position="bottom-right" position="bottom-right"
autoClose={localStorage.getItem('toastDisplayTime') || 2500} autoClose={localStorage.getItem('toastDisplayTime') || 2500}

6
src/components/modals/Modals.jsx
View File

@ -77,9 +77,9 @@ export default class Modals extends PureComponent {
render() { render() {
return ( return (
<> <>
{this.state.welcomeModal === false ? ( {this.state.welcomeModal === false && (
<Navbar openModal={(modal) => this.toggleModal(modal, true)} /> <Navbar openModal={(modal) => this.toggleModal(modal, true)} />
) : null} )}
<Modal <Modal
closeTimeoutMS={300} closeTimeoutMS={300}
id="modal" id="modal"
@ -102,7 +102,7 @@ export default class Modals extends PureComponent {
> >
<Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} /> <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
</Modal> </Modal>
{this.state.preview ? <Preview setup={() => window.location.reload()} /> : null} {this.state.preview && <Preview setup={() => window.location.reload()} />}
</> </>
); );
} }

28
src/components/modals/main/marketplace/Item.jsx
View File

@ -109,22 +109,22 @@ class Item extends PureComponent {
</div> </div>
<div className="itemPage"> <div className="itemPage">
<div className="itemShowcase"> <div className="itemShowcase">
{this.props.data.data.photos ? ( {this.props.data.data.photos && (
<div className="carousel"> <div className="carousel">
<div className="carousel_container"> <div className="carousel_container">
<ImageCarousel data={this.props.data.data.photos} /> <ImageCarousel data={this.props.data.data.photos} />
</div> </div>
</div> </div>
) : null} )}
{this.props.data.data.settings ? ( {this.props.data.data.settings && (
<img <img
alt="product" alt="product"
draggable={false} draggable={false}
src={iconsrc} src={iconsrc}
onClick={() => this.setState({ showLightbox: true })} onClick={() => this.setState({ showLightbox: true })}
/> />
) : null} )}
{this.props.data.data.quotes ? ( {this.props.data.data.quotes && (
<> <>
<table> <table>
<tbody> <tbody>
@ -156,8 +156,8 @@ class Item extends PureComponent {
</span> </span>
</div> </div>
</> </>
) : null} )}
{this.props.data.data.settings ? ( {this.props.data.data.settings && (
<> <>
<table> <table>
<tbody> <tbody>
@ -191,7 +191,7 @@ class Item extends PureComponent {
</span> </span>
</div> </div>
</> </>
) : null} )}
<div> <div>
<p className="title"> <p className="title">
{variables.getMessage('modals.main.marketplace.product.description')} {variables.getMessage('modals.main.marketplace.product.description')}
@ -223,7 +223,7 @@ class Item extends PureComponent {
<span>{this.props.data.author}</span> <span>{this.props.data.author}</span>
</div> </div>
</div> </div>
{this.props.data.data.quotes ? ( {this.props.data.data.quotes && (
<div className="infoItem"> <div className="infoItem">
<MdFormatQuote /> <MdFormatQuote />
<div className="text"> <div className="text">
@ -233,8 +233,8 @@ class Item extends PureComponent {
<span>{this.props.data.data.quotes.length}</span> <span>{this.props.data.data.quotes.length}</span>
</div> </div>
</div> </div>
) : null} )}
{this.props.data.data.photos ? ( {this.props.data.data.photos && (
<div className="infoItem"> <div className="infoItem">
<MdImage /> <MdImage />
<div className="text"> <div className="text">
@ -244,7 +244,7 @@ class Item extends PureComponent {
<span>{this.props.data.data.photos.length}</span> <span>{this.props.data.data.photos.length}</span>
</div> </div>
</div> </div>
) : null} )}
{this.props.data.data.quotes && this.props.data.data.language !== '' ? ( {this.props.data.data.quotes && this.props.data.data.language !== '' ? (
<div className="infoItem"> <div className="infoItem">
<MdTranslate /> <MdTranslate />
@ -312,7 +312,7 @@ class Item extends PureComponent {
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
{this.props.data.data.collection ? ( {this.props.data.data.collection && (
<div className="inCollection"> <div className="inCollection">
<span className="subtitle"> <span className="subtitle">
{variables.getMessage('modals.main.marketplace.product.part_of')} {variables.getMessage('modals.main.marketplace.product.part_of')}
@ -320,7 +320,7 @@ class Item extends PureComponent {
<span className="title">{this.props.data.data.collection}</span> <span className="title">{this.props.data.data.collection}</span>
<button>{variables.getMessage('modals.main.marketplace.product.explore')}</button> <button>{variables.getMessage('modals.main.marketplace.product.explore')}</button>
</div> </div>
) : null} )}
</div> </div>
</div> </div>
</div> </div>

2
src/components/modals/main/marketplace/sections/Create.jsx
View File

@ -27,7 +27,7 @@ export default class Create extends PureComponent {
{variables.getMessage('modals.main.addons.create.moved_description')} {variables.getMessage('modals.main.addons.create.moved_description')}
</span> </span>
<div className="createButtons"> <div className="createButtons">
<button> {variables.getMessage('modals.main.addons.create.moved_button')}</button> <button>Coming soon...</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -395,7 +395,7 @@ class Marketplace extends PureComponent {
</span> </span>
</div> </div>
<div className="headerExtras marketplaceCondition"> <div className="headerExtras marketplaceCondition">
{this.props.type !== 'collections' ? ( {this.props.type !== 'collections' && (
<div> <div>
<form className="marketplaceSearch"> <form className="marketplaceSearch">
<input <input
@ -412,7 +412,7 @@ class Marketplace extends PureComponent {
<MdRefresh /> {variables.getMessage('widgets.navbar.tooltips.refresh')} <MdRefresh /> {variables.getMessage('widgets.navbar.tooltips.refresh')}
</span>*/} </span>*/}
</div> </div>
) : null} )}
<Dropdown <Dropdown
label={variables.getMessage('modals.main.addons.sort.title')} label={variables.getMessage('modals.main.addons.sort.title')}
name="sortMarketplace" name="sortMarketplace"

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

@ -66,11 +66,11 @@ class Dropdown extends PureComponent {
{this.props.manual {this.props.manual
? this.props.children ? this.props.children
: this.props.children.map((e, index) => { : this.props.children.map((e, index) => {
return e ? ( return e && (
<MenuItem key={index} value={e.props ? e.props.value : ''}> <MenuItem key={index} value={e.props ? e.props.value : ''}>
{e.props ? e.props.children : ''} {e.props ? e.props.children : ''}
</MenuItem> </MenuItem>
) : null; );
})} })}
</Select> </Select>
</FormControl> </FormControl>

9
src/components/modals/main/settings/Header.jsx
View File

@ -10,7 +10,6 @@ import {
} from 'react-icons/md'; } from 'react-icons/md';
import Slider from './Slider'; import Slider from './Slider';
import Switch from './Switch';
import SettingsItem from './SettingsItem'; import SettingsItem from './SettingsItem';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
@ -53,7 +52,7 @@ class Header extends PureComponent {
return ( return (
<> <>
<div className="flexTopMarketplace topAddons"> <div className="flexTopMarketplace topAddons">
{this.props.backButton ? ( {this.props.backButton && (
<div className="returnButton" onClick={this.props.clickEffect}> <div className="returnButton" onClick={this.props.clickEffect}>
<Tooltip <Tooltip
title={variables.getMessage('modals.main.navbar.marketplace.product.buttons.back')} title={variables.getMessage('modals.main.navbar.marketplace.product.buttons.back')}
@ -62,7 +61,7 @@ class Header extends PureComponent {
<MdArrowBack className="backArrow" /> <MdArrowBack className="backArrow" />
</Tooltip> </Tooltip>
</div> </div>
) : null} )}
<span className="mainTitle">{this.props.title}</span> <span className="mainTitle">{this.props.title}</span>
{this.props.switch && ( {this.props.switch && (
<button <button
@ -109,7 +108,7 @@ class Header extends PureComponent {
<MdFlag /> {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag /> {variables.getMessage('modals.main.settings.sections.header.report_issue')}
</span> </span>
</div> </div>
{this.props.zoomSetting ? ( {this.props.zoomSetting && (
<SettingsItem <SettingsItem
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.widget_zoom', 'modals.main.settings.sections.appearance.accessibility.widget_zoom',
@ -126,7 +125,7 @@ class Header extends PureComponent {
category={this.props.zoomCategory || this.props.category} category={this.props.zoomCategory || this.props.category}
/> />
</SettingsItem> </SettingsItem>
) : null} )}
</> </>
); );
} }

4
src/components/modals/main/settings/sections/Advanced.jsx
View File

@ -39,7 +39,7 @@ export default class AdvancedSettings extends PureComponent {
> >
<Switch name="offlineMode" element=".other" /> <Switch name="offlineMode" element=".other" />
</SettingsItem> </SettingsItem>
{localStorage.getItem('welcomePreview') !== 'true' ? ( {localStorage.getItem('welcomePreview') !== 'true' && (
<div className="settingsRow"> <div className="settingsRow">
<div className="content"> <div className="content">
<span className="title"> <span className="title">
@ -64,7 +64,7 @@ export default class AdvancedSettings extends PureComponent {
</button> </button>
</div> </div>
</div> </div>
) : null} )}
<SettingsItem <SettingsItem
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')} title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={variables.getMessage( subtitle={variables.getMessage(

4
src/components/modals/main/settings/sections/Changelog.jsx
View File

@ -132,14 +132,14 @@ export default class Changelog extends PureComponent {
<h5> <h5>
{this.state.author} • {this.state.date} {this.state.author} • {this.state.date}
</h5> </h5>
{this.state.image ? ( {this.state.image && (
<img <img
draggable={false} draggable={false}
src={this.state.image} src={this.state.image}
alt={this.state.title} alt={this.state.title}
className="updateImage" className="updateImage"
/> />
) : null} )}
<div className="updateChangelog">{this.state.content}</div> <div className="updateChangelog">{this.state.content}</div>
<Modal <Modal
closeTimeoutMS={100} closeTimeoutMS={100}

4
src/components/modals/main/settings/sections/Message.jsx
View File

@ -112,7 +112,7 @@ export default class Message extends PureComponent {
</div> </div>
))} ))}
</div> </div>
{this.state.messages.length === 0 ? ( {this.state.messages.length === 0 && (
<div className="photosEmpty"> <div className="photosEmpty">
<div className="emptyNewMessage"> <div className="emptyNewMessage">
<MdOutlineTextsms /> <MdOutlineTextsms />
@ -128,7 +128,7 @@ export default class Message extends PureComponent {
</button> </button>
</div> </div>
</div> </div>
) : null} )}
</> </>
); );
} }

4
src/components/modals/main/settings/sections/Navbar.jsx
View File

@ -56,7 +56,7 @@ function Navbar() {
category="navbar" category="navbar"
/> />
</SettingsItem> </SettingsItem>
{showRefreshOptions ? ( {showRefreshOptions && (
<SettingsItem <SettingsItem
title={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')} title={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
subtitle={variables.getMessage( subtitle={variables.getMessage(
@ -82,7 +82,7 @@ function Navbar() {
</option> </option>
</Dropdown> </Dropdown>
</SettingsItem> </SettingsItem>
) : null} )}
</> </>
); );
} }

30
src/components/modals/main/settings/sections/QuickLinks.jsx
View File

@ -39,7 +39,7 @@ export default class QuickLinks extends PureComponent {
variables.stats.postEvent('feature', 'Quicklink delete'); variables.stats.postEvent('feature', 'Quicklink delete');
} }
addLink(name, url, icon) { async addLink(name, url, icon) {
const data = JSON.parse(localStorage.getItem('quicklinks')); const data = JSON.parse(localStorage.getItem('quicklinks'));
// regex: https://ihateregex.io/expr/url/ // regex: https://ihateregex.io/expr/url/
@ -63,7 +63,7 @@ export default class QuickLinks extends PureComponent {
} }
data.push({ data.push({
name: name || url, name: name || await this.getTitle(url),
url, url,
icon: icon || '', icon: icon || '',
key: Math.random().toString(36).substring(7) + 1, key: Math.random().toString(36).substring(7) + 1,
@ -89,10 +89,10 @@ export default class QuickLinks extends PureComponent {
}); });
} }
editLink(og, name, url, icon) { async editLink(og, name, url, icon) {
const data = JSON.parse(localStorage.getItem('quicklinks')); const data = JSON.parse(localStorage.getItem('quicklinks'));
const dataobj = data.find((i) => i.key === og.key); const dataobj = data.find((i) => i.key === og.key);
dataobj.name = name || url; dataobj.name = name || await this.getTitle(url);
dataobj.url = url; dataobj.url = url;
dataobj.icon = icon || ''; dataobj.icon = icon || '';
@ -105,6 +105,24 @@ export default class QuickLinks extends PureComponent {
}); });
} }
async getTitle(url) {
let title;
try {
let response = await fetch(url);
if (response.redirected) {
response = await fetch(response.url);
}
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
title = doc.title;
} catch (e) {
title = url;
}
return title;
}
componentDidMount() { componentDidMount() {
EventBus.on('refresh', (data) => { EventBus.on('refresh', (data) => {
if (data === 'quicklinks') { if (data === 'quicklinks') {
@ -255,7 +273,7 @@ export default class QuickLinks extends PureComponent {
</button> </button>
</SettingsItem> </SettingsItem>
{this.state.items.length === 0 ? ( {this.state.items.length === 0 && (
<div className="photosEmpty"> <div className="photosEmpty">
<div className="emptyNewMessage"> <div className="emptyNewMessage">
<MdLinkOff /> <MdLinkOff />
@ -271,7 +289,7 @@ export default class QuickLinks extends PureComponent {
</button> </button>
</div> </div>
</div> </div>
) : null} )}
<div className="messagesContainer" ref={this.quicklinksContainer}> <div className="messagesContainer" ref={this.quicklinksContainer}>
{this.state.items.map((item) => quickLink(item))} {this.state.items.map((item) => quickLink(item))}

4
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -220,7 +220,7 @@ export default class QuoteSettings extends PureComponent {
</Dropdown> </Dropdown>
</div> </div>
</div> </div>
{!this.state.sourceSection ? ( {!this.state.sourceSection && (
<> <>
<SettingsItem <SettingsItem
title={variables.getMessage('modals.main.settings.sections.quote.buttons.title')} title={variables.getMessage('modals.main.settings.sections.quote.buttons.title')}
@ -291,7 +291,7 @@ export default class QuoteSettings extends PureComponent {
/> />
</SettingsItem> </SettingsItem>
</> </>
) : null} )}
{customSettings} {customSettings}
</> </>
); );

4
src/components/modals/main/settings/sections/advanced/Advanced.jsx
View File

@ -67,7 +67,7 @@ export default class AdvancedSettings extends PureComponent {
> >
<Switch name="offlineMode" element=".other" /> <Switch name="offlineMode" element=".other" />
</SettingsItem> </SettingsItem>
{localStorage.getItem('welcomePreview') !== 'true' ? ( {localStorage.getItem('welcomePreview') !== 'true' && (
<div className="settingsRow"> <div className="settingsRow">
<div className="content"> <div className="content">
<span className="title"> <span className="title">
@ -92,7 +92,7 @@ export default class AdvancedSettings extends PureComponent {
</button> </button>
</div> </div>
</div> </div>
) : null} )}
<SettingsItem <SettingsItem
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')} title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={variables.getMessage( subtitle={variables.getMessage(

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

@ -287,11 +287,11 @@ export default class BackgroundSettings extends PureComponent {
onChange={(value) => this.setState({ backgroundType: value })} onChange={(value) => this.setState({ backgroundType: value })}
category="background" category="background"
> >
{this.state.marketplaceEnabled ? ( {this.state.marketplaceEnabled && (
<option value="photo_pack"> <option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')} {variables.getMessage('modals.main.navbar.marketplace')}
</option> </option>
) : null} )}
<option value="api"> <option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')} {variables.getMessage('modals.main.settings.sections.background.type.api')}
</option> </option>
@ -406,11 +406,11 @@ export default class BackgroundSettings extends PureComponent {
onChange={(value) => this.setState({ backgroundType: value })} onChange={(value) => this.setState({ backgroundType: value })}
category="background" category="background"
> >
{this.state.marketplaceEnabled ? ( {this.state.marketplaceEnabled && (
<option value="photo_pack"> <option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')} {variables.getMessage('modals.main.navbar.marketplace')}
</option> </option>
) : null} )}
<option value="api"> <option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')} {variables.getMessage('modals.main.settings.sections.background.type.api')}
</option> </option>
@ -520,7 +520,7 @@ export default class BackgroundSettings extends PureComponent {
)} )}
</option> </option>
</Dropdown> </Dropdown>
{this.state.backgroundFilter !== 'none' ? ( {this.state.backgroundFilter !== 'none' && (
<Slider <Slider
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.amount', 'modals.main.settings.sections.background.effects.filters.amount',
@ -534,7 +534,7 @@ export default class BackgroundSettings extends PureComponent {
category="background" category="background"
element="#backgroundImage" element="#backgroundImage"
/> />
) : null} )}
</SettingsItem> </SettingsItem>
) : null} ) : null}
</> </>

4
src/components/modals/main/settings/sections/background/Colour.jsx
View File

@ -207,13 +207,13 @@ export default class ColourSettings extends PureComponent {
colourSettings = ( colourSettings = (
<> <>
<div className="colourInput">{gradientInputs}</div> <div className="colourInput">{gradientInputs}</div>
{!gradientHasMoreThanOneColour ? ( {!gradientHasMoreThanOneColour && (
<> <>
<button type="button" className="add" onClick={this.addColour}> <button type="button" className="add" onClick={this.addColour}>
{variables.getMessage('modals.main.settings.sections.background.source.add_colour')} {variables.getMessage('modals.main.settings.sections.background.source.add_colour')}
</button> </button>
</> </>
) : null} )}
</> </>
); );
} }

6
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@ -227,8 +227,8 @@ export default class CustomSettings extends PureComponent {
alt={'Custom background ' + (index || 0)} alt={'Custom background ' + (index || 0)}
src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`} src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
/> />
{this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null} {this.videoCheck(url) && <MdPersonalVideo className="customvideoicon" />}
{this.state.customBackground.length > 0 ? ( {this.state.customBackground.length > 0 && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.background.source.remove', 'modals.main.settings.sections.background.source.remove',
@ -238,7 +238,7 @@ export default class CustomSettings extends PureComponent {
<MdCancel /> <MdCancel />
</button> </button>
</Tooltip> </Tooltip>
) : null} )}
</div> </div>
))} ))}
</div> </div>

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

@ -154,11 +154,11 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
return ( return (
<> <>
{mue === true ? <span className="mainTitle">Mue</span> : null} {mue === true && <span className="mainTitle">Mue</span>}
<button className={className} onClick={() => onClick(label)}> <button className={className} onClick={() => onClick(label)}>
{icon} <span>{label}</span> {icon} <span>{label}</span>
</button> </button>
{divider === true ? <hr /> : null} {divider === true && <hr />}
</> </>
); );
} }

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

@ -391,14 +391,14 @@ class WelcomeSections extends PureComponent {
)} )}
</span> </span>
</div> </div>
{this.state.importedSettings.length !== 0 ? ( {this.state.importedSettings.length !== 0 && (
<div className="toggle" onClick={() => this.props.switchTab(2)}> <div className="toggle" onClick={() => this.props.switchTab(2)}>
{variables.getMessage('modals.main.settings.sections.final.imported', { {variables.getMessage('modals.main.settings.sections.final.imported', {
amount: this.state.importedSettings.length, amount: this.state.importedSettings.length,
})}{' '} })}{' '}
{this.state.importedSettings.length} {this.state.importedSettings.length}
</div> </div>
) : null} )}
</div> </div>
</> </>
); );

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

@ -26,12 +26,12 @@ export default class Widgets extends PureComponent {
}; };
// widgets we can re-order // widgets we can re-order
this.widgets = { this.widgets = {
time: this.enabled('time') ? <Clock /> : null, time: this.enabled('time') && <Clock />,
greeting: this.enabled('greeting') ? <Greeting /> : null, greeting: this.enabled('greeting') && <Greeting />,
quote: this.enabled('quote') ? <Quote /> : null, quote: this.enabled('quote') && <Quote />,
date: this.enabled('date') ? <Date /> : null, date: this.enabled('date') && <Date />,
quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks /> : null, quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks /> : null,
message: this.enabled('message') ? <Message /> : null, message: this.enabled('message') && <Message />,
}; };
} }
@ -77,7 +77,7 @@ export default class Widgets extends PureComponent {
) : ( ) : (
<div id="widgets"> <div id="widgets">
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
{this.enabled('searchBar') ? <Search /> : null} {this.enabled('searchBar') && <Search />}
{this.state.order.map((element, key) => ( {this.state.order.map((element, key) => (
<Fragment key={key}>{this.widgets[element]}</Fragment> <Fragment key={key}>{this.widgets[element]}</Fragment>
))} ))}

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

@ -564,13 +564,13 @@ export default class Background extends PureComponent {
}} }}
id="backgroundImage" id="backgroundImage"
/> />
{this.state.photoInfo.credit !== '' ? ( {this.state.photoInfo.credit !== '' && (
<PhotoInformation <PhotoInformation
info={this.state.photoInfo} info={this.state.photoInfo}
api={this.state.currentAPI} api={this.state.currentAPI}
url={this.state.url} url={this.state.url}
/> />
) : null} )}
</> </>
); );
} }

26
src/components/widgets/background/PhotoInformation.jsx
View File

@ -201,7 +201,7 @@ function PhotoInformation({ info, url, api }) {
{widgetStyle !== 'legacy' || other ? ( {widgetStyle !== 'legacy' || other ? (
<div <div
className="photoInformation orHover" className="photoInformation orHover"
style={{ padding: widgetStyle === 'legacy' ? '20px' : null }} style={{ padding: widgetStyle === 'legacy' && '20px' }}
onMouseEnter={() => setshowExtraInfo(true)} onMouseEnter={() => setshowExtraInfo(true)}
onMouseLeave={() => setshowExtraInfo(false)} onMouseLeave={() => setshowExtraInfo(false)}
> >
@ -210,7 +210,7 @@ function PhotoInformation({ info, url, api }) {
<h1>{photoMap}</h1> <h1>{photoMap}</h1>
{photoMap()} {photoMap()}
</div> </div>
{showingPhotoMap ? ( {showingPhotoMap && (
<div className="copyright"> <div className="copyright">
<a <a
href="https://www.mapbox.com/about/maps/" href="https://www.mapbox.com/about/maps/"
@ -239,7 +239,7 @@ function PhotoInformation({ info, url, api }) {
Improve this map{' '} Improve this map{' '}
</a> </a>
</div> </div>
) : null} )}
<div className="photoInformation-content"> <div className="photoInformation-content">
<span className="title"> <span className="title">
{(showExtraInfo || other) && info.description {(showExtraInfo || other) && info.description
@ -295,15 +295,15 @@ function PhotoInformation({ info, url, api }) {
{width}x{height} {width}x{height}
</span> </span>
</div> </div>
{info.category ? ( {info.category && (
<div className="row" title={variables.getMessage('widgets.background.category')}> <div className="row" title={variables.getMessage('widgets.background.category')}>
<Category /> <Category />
<span id="infoCategory"> <span id="infoCategory">
{info.category[0].toUpperCase() + info.category.slice(1)} {info.category[0].toUpperCase() + info.category.slice(1)}
</span> </span>
</div> </div>
) : null} )}
{api ? ( {api && (
<div className="row" title={variables.getMessage('widgets.background.source')}> <div className="row" title={variables.getMessage('widgets.background.source')}>
<Source /> <Source />
<span id="infoSource"> <span id="infoSource">
@ -328,10 +328,10 @@ function PhotoInformation({ info, url, api }) {
)} )}
</span> </span>
</div> </div>
) : null} )}
</div> </div>
<div className="buttons"> <div className="buttons">
{!info.offline ? ( {!info.offline && (
<Tooltip <Tooltip
title={variables.getMessage('widgets.quote.share')} title={variables.getMessage('widgets.quote.share')}
key="share" key="share"
@ -339,7 +339,7 @@ function PhotoInformation({ info, url, api }) {
> >
<Share onClick={() => openShareModal(true)} /> <Share onClick={() => openShareModal(true)} />
</Tooltip> </Tooltip>
) : null} )}
<Tooltip <Tooltip
title={variables.getMessage('widgets.quote.favourite')} title={variables.getMessage('widgets.quote.favourite')}
key="favourite" key="favourite"
@ -352,7 +352,7 @@ function PhotoInformation({ info, url, api }) {
photoURL={info.url} photoURL={info.url}
/> />
</Tooltip> </Tooltip>
{!info.offline ? ( {!info.offline && (
<Tooltip <Tooltip
title={variables.getMessage('widgets.background.download')} title={variables.getMessage('widgets.background.download')}
key="download" key="download"
@ -360,8 +360,8 @@ function PhotoInformation({ info, url, api }) {
> >
<Download onClick={() => downloadImage(info)} /> <Download onClick={() => downloadImage(info)} />
</Tooltip> </Tooltip>
) : null} )}
{info.pun ? ( {info.pun && (
<Tooltip <Tooltip
title={variables.getMessage('widgets.background.exclude')} title={variables.getMessage('widgets.background.exclude')}
key="exclude" key="exclude"
@ -369,7 +369,7 @@ function PhotoInformation({ info, url, api }) {
> >
<VisibilityOff onClick={() => openExcludeModal(true)} /> <VisibilityOff onClick={() => openExcludeModal(true)} />
</Tooltip> </Tooltip>
) : null} )}
</div> </div>
</> </>
) : null} ) : null}

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

@ -103,14 +103,14 @@ class Navbar extends PureComponent {
{localStorage.getItem('view') === 'true' && backgroundEnabled ? ( {localStorage.getItem('view') === 'true' && backgroundEnabled ? (
<Maximise fontSize={this.state.zoomFontSize} /> <Maximise fontSize={this.state.zoomFontSize} />
) : null} ) : null}
{localStorage.getItem('notesEnabled') === 'true' ? ( {localStorage.getItem('notesEnabled') === 'true' && (
<Notes fontSize={this.state.zoomFontSize} /> <Notes fontSize={this.state.zoomFontSize} />
) : null} )}
{localStorage.getItem('todoEnabled') === 'true' ? ( {localStorage.getItem('todoEnabled') === 'true' && (
<Todo fontSize={this.state.zoomFontSize} /> <Todo fontSize={this.state.zoomFontSize} />
) : null} )}
{this.refreshEnabled !== 'false' ? ( {this.refreshEnabled !== 'false' && (
<Tooltip <Tooltip
title={variables.getMessage('widgets.navbar.tooltips.refresh')} title={variables.getMessage('widgets.navbar.tooltips.refresh')}
subtitle={this.state.refreshText} subtitle={this.state.refreshText}
@ -123,7 +123,7 @@ class Navbar extends PureComponent {
<MdRefresh className="refreshicon topicons" /> <MdRefresh className="refreshicon topicons" />
</button> </button>
</Tooltip> </Tooltip>
) : null} )}
<Tooltip <Tooltip
title={variables.getMessage('modals.main.navbar.settings', { title={variables.getMessage('modals.main.navbar.settings', {
type: variables.getMessage( type: variables.getMessage(

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

@ -470,13 +470,12 @@ export default class Quote extends PureComponent {
{this.state.author !== '' ? ( {this.state.author !== '' ? (
<div className="author-content" ref={this.quoteauthor}> <div className="author-content" ref={this.quoteauthor}>
<span className="title">{this.state.author}</span> <span className="title">{this.state.author}</span>
{this.state.authorOccupation !== 'Unknown' ? ( {this.state.authorOccupation !== 'Unknown' && (
<span className="subtitle">{this.state.authorOccupation}</span> <span className="subtitle">{this.state.authorOccupation}</span>
) : null} )}
<span className="author-license"> <span className="author-license">
{this.state.authorimglicense {this.state.authorimglicense &&
? this.state.authorimglicense.replace(' undefined. ', ' ') this.state.authorimglicense.replace(' undefined. ', ' ')}
: null}
</span> </span>
</div> </div>
) : ( ) : (

4
src/components/widgets/search/Search.jsx
View File

@ -249,7 +249,7 @@ export default class Search extends PureComponent {
</div> </div>
<div> <div>
{localStorage.getItem('searchDropdown') === 'true' && {localStorage.getItem('searchDropdown') === 'true' &&
this.state.searchDropdown === true ? ( this.state.searchDropdown === true && (
<div className="searchDropdown"> <div className="searchDropdown">
{searchEngines.map(({ name }, key) => { {searchEngines.map(({ name }, key) => {
return ( return (
@ -275,7 +275,7 @@ export default class Search extends PureComponent {
{customText} {customText}
</span> </span>
</div> </div>
) : null} )}
</div> </div>
</div> </div>
); );

28
src/components/widgets/weather/Expanded.jsx
View File

@ -27,7 +27,7 @@ function Expanded({ state, weatherType, variables }) {
{variables.getMessage('widgets.weather.extra_information')} {variables.getMessage('widgets.weather.extra_information')}
</span> </span>
)} )}
{enabled('cloudiness') ? ( {enabled('cloudiness') && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.cloudiness', 'modals.main.settings.sections.weather.extra_info.cloudiness',
@ -39,8 +39,8 @@ function Expanded({ state, weatherType, variables }) {
{state.weather.cloudiness}% {state.weather.cloudiness}%
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
{enabled('windspeed') ? ( {enabled('windspeed') && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.wind_speed', 'modals.main.settings.sections.weather.extra_info.wind_speed',
@ -51,15 +51,15 @@ function Expanded({ state, weatherType, variables }) {
<WiWindy className="weatherIcon" /> <WiWindy className="weatherIcon" />
{state.weather.wind_speed} {state.weather.wind_speed}
<span className="minmax">m/s</span>{' '} <span className="minmax">m/s</span>{' '}
{enabled('windDirection') ? ( {enabled('windDirection') && (
<div style={{ fontSize: '25px', display: 'grid' }}> <div style={{ fontSize: '25px', display: 'grid' }}>
<WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} /> <WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
</div> </div>
) : null} )}
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
{enabled('atmosphericpressure') ? ( {enabled('atmosphericpressure') && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure', 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
@ -72,8 +72,8 @@ function Expanded({ state, weatherType, variables }) {
<span className="minmax">hPa</span> <span className="minmax">hPa</span>
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
{enabled('weatherdescription') ? ( {enabled('weatherdescription') && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.weather_description', 'modals.main.settings.sections.weather.extra_info.weather_description',
@ -85,8 +85,8 @@ function Expanded({ state, weatherType, variables }) {
{state.weather.description} {state.weather.description}
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
{enabled('visibility') ? ( {enabled('visibility') && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.visibility', 'modals.main.settings.sections.weather.extra_info.visibility',
@ -100,8 +100,8 @@ function Expanded({ state, weatherType, variables }) {
})} })}
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
{enabled('humidity') ? ( {enabled('humidity') && (
<Tooltip <Tooltip
title={variables.getMessage('modals.main.settings.sections.weather.extra_info.humidity')} title={variables.getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
placement="left" placement="left"
@ -111,7 +111,7 @@ function Expanded({ state, weatherType, variables }) {
{state.weather.humidity} {state.weather.humidity}
</span> </span>
</Tooltip> </Tooltip>
) : null} )}
</div> </div>
); );
} }

4
src/components/widgets/weather/Weather.jsx
View File

@ -135,9 +135,9 @@ export default class Weather extends PureComponent {
<span className="loc">{this.state.location}</span> <span className="loc">{this.state.location}</span>
</div> </div>
)} )}
{weatherType >= 3 ? ( {weatherType >= 3 && (
<Expanded weatherType={weatherType} state={this.state} variables={variables} /> <Expanded weatherType={weatherType} state={this.state} variables={variables} />
) : null} )}
</div> </div>
); );
} }

2
src/components/widgets/weather/WindDirectionIcon.jsx
View File

@ -52,7 +52,7 @@ function WindDirectionIcon({ degrees }) {
const direction = const direction =
directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8]; directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8];
return direction ? direction.icon : null; return direction && direction.icon;
} }
WindDirectionIcon.propTypes = { WindDirectionIcon.propTypes = {

4
src/modules/constants.js
View File

@ -26,11 +26,11 @@ export const REPO_NAME = 'mue';
export const EMAIL = 'hello@muetab.com'; export const EMAIL = 'hello@muetab.com';
export const TWITTER_HANDLE = 'getmue'; export const TWITTER_HANDLE = 'getmue';
export const DISCORD_SERVER = 'zv8C9F8'; export const DISCORD_SERVER = 'zv8C9F8';
export const COPYRIGHT_NAME = 'The Mue Authors'; export const COPYRIGHT_NAME = 'The Mue Authors & Kaiso One Ltd';
export const COPYRIGHT_YEAR = '2018'; export const COPYRIGHT_YEAR = '2018';
export const COPYRIGHT_LICENSE = 'BSD-3-Clause License'; export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
export const OPENCOLLECTIVE_USERNAME = 'mue'; export const OPENCOLLECTIVE_USERNAME = 'mue';
export const OFFLINE_IMAGES = 20; export const OFFLINE_IMAGES = 20;
export const VERSION = '7.0.0'; export const VERSION = '7.0.1';