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

Update styles and dependencies 

Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes 2024-01-05 00:01:47 +00:00
parent 80dd8bcd8e
commit 6915c0ef9e
18 changed files with 132 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -12,6 +12,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
<br> <br>
## Table of contents ## Table of contents
- [Table of contents](#table-of-contents) - [Table of contents](#table-of-contents)
- [Screenshots](#screenshots) - [Screenshots](#screenshots)
- [Features](#features) - [Features](#features)
@ -107,6 +108,7 @@ Please see the [documentation](https://docs.muetab.com/development#mue-tab).
[Aksal](https://github.com/aksalsf) - Indonesian <br/> [Aksal](https://github.com/aksalsf) - Indonesian <br/>
[Kağan Can Şit](https://github.com/KaganCanSit) - Turkish <br/> [Kağan Can Şit](https://github.com/KaganCanSit) - Turkish <br/>
efeaydal - Turkish <br/> efeaydal - Turkish <br/>
### Contributors ### Contributors
Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs. Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.

4
index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -23,7 +23,7 @@
*, *,
a { a {
color: white; color: white;
background: #2f3640 !important; background: #0a0a0a !important;
} }
} }
</style> </style>

2
package.json
View File

@ -14,7 +14,7 @@
"@eartharoid/i18n": "1.2.1", "@eartharoid/i18n": "1.2.1",
"@emotion/react": "^11.11.3", "@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@floating-ui/react-dom": "2.0.4", "@floating-ui/react-dom": "1.3.0",
"@fontsource/lexend-deca": "5.0.8", "@fontsource/lexend-deca": "5.0.8",
"@fontsource/montserrat": "5.0.8", "@fontsource/montserrat": "5.0.8",
"@muetab/react-color-gradient-picker": "0.1.2", "@muetab/react-color-gradient-picker": "0.1.2",

15
pnpm-lock.yaml
View File

@ -15,8 +15,8 @@ dependencies:
specifier: ^11.11.0 specifier: ^11.11.0
version: 11.11.0(@emotion/react@11.11.3)(react@18.2.0) version: 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
'@floating-ui/react-dom': '@floating-ui/react-dom':
specifier: 2.0.4 specifier: 1.3.0
version: 2.0.4(react-dom@18.2.0)(react@18.2.0) version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
'@fontsource/lexend-deca': '@fontsource/lexend-deca':
specifier: 5.0.8 specifier: 5.0.8
version: 5.0.8 version: 5.0.8
@ -2137,6 +2137,17 @@ packages:
'@floating-ui/utils': 0.1.6 '@floating-ui/utils': 0.1.6
dev: false dev: false
/@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@floating-ui/dom': 1.5.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@floating-ui/react-dom@2.0.4(react-dom@18.2.0)(react@18.2.0): /@floating-ui/react-dom@2.0.4(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==} resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
peerDependencies: peerDependencies:

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

@ -31,7 +31,6 @@ class Item extends PureComponent {
showUpdateButton: showUpdateButton:
this.props.addonInstalled === true && this.props.addonInstalled === true &&
this.props.addonInstalledVersion !== this.props.data.version, this.props.addonInstalledVersion !== this.props.data.version,
showMore: false,
shareModal: false, shareModal: false,
count: 5, count: 5,
}; };
@ -46,14 +45,6 @@ class Item extends PureComponent {
}); });
} }
toggleShowMore() {
if (this.state.showMore === true) {
this.setState({ showMore: false });
} else {
this.setState({ showMore: true });
}
}
incrementCount(type) { incrementCount(type) {
if (this.state.count !== this.props.data.data[type].length) { if (this.state.count !== this.props.data.data[type].length) {
this.setState({ count: this.props.data.data[type].length }); this.setState({ count: this.props.data.data[type].length });
@ -62,6 +53,19 @@ class Item extends PureComponent {
} }
} }
getName(name) {
switch (name) {
case 'photos':
return 'photo_packs';
case 'quotes':
return 'quote_packs';
case 'settings':
return 'preset_settings';
default:
return name;
}
}
render() { render() {
if (!this.props.data.display_name) { if (!this.props.data.display_name) {
return null; return null;
@ -95,7 +99,9 @@ class Item extends PureComponent {
onRequestClose={() => this.setState({ shareModal: false })} onRequestClose={() => this.setState({ shareModal: false })}
> >
<ShareModal <ShareModal
data={variables.constants.MARKETPLACE_URL + '/share/' + btoa(this.props.data.api_name)} data={
variables.constants.API_URL + '/marketplace/share/' + btoa(this.props.data.api_name)
}
modalClose={() => this.setState({ shareModal: false })} modalClose={() => this.setState({ shareModal: false })}
/> />
</Modal> </Modal>
@ -266,7 +272,7 @@ class Item extends PureComponent {
<span> <span>
{' '} {' '}
{variables.getMessage( {variables.getMessage(
'modals.main.addons.create.types.' + this.props.data.data.type, 'modals.main.marketplace.' + this.getName(this.props.data.data.type),
) || 'marketplace'} ) || 'marketplace'}
</span> </span>
</div> </div>

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

@ -143,7 +143,7 @@ export default class Added extends PureComponent {
let updates = 0; let updates = 0;
this.state.installed.forEach(async (item) => { this.state.installed.forEach(async (item) => {
const data = await ( const data = await (
await fetch(variables.constants.MARKETPLACE_URL + '/item/' + item.name) await fetch(variables.constants.API_URL + 'marketplace//item/' + item.name)
).json(); ).json();
if (data.version !== item.version) { if (data.version !== item.version) {
updates++; updates++;

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

@ -54,7 +54,7 @@ class Marketplace extends PureComponent {
type = data.type; type = data.type;
} }
info = await ( info = await (
await fetch(`${variables.constants.MARKETPLACE_URL}/item/${type}/${data.name}`, { await fetch(`${variables.constants.API_URL}/marketplace/item/${type}/${data.name}`, {
signal: this.controller.signal, signal: this.controller.signal,
}) })
).json(); ).json();
@ -109,7 +109,7 @@ class Marketplace extends PureComponent {
done: false, done: false,
}); });
const collection = await ( const collection = await (
await fetch(`${variables.constants.MARKETPLACE_URL}/collection/${data}`, { await fetch(`${variables.constants.API_URL}/marketplace/collection/${data}`, {
signal: this.controller.signal, signal: this.controller.signal,
}) })
).json(); ).json();
@ -131,15 +131,15 @@ class Marketplace extends PureComponent {
async getItems() { async getItems() {
const dataURL = const dataURL =
this.props.type === 'collections' this.props.type === 'collections'
? variables.constants.MARKETPLACE_URL + '/collections' ? variables.constants.API_URL + '/marketplace/collections'
: variables.constants.MARKETPLACE_URL + '/items/' + this.props.type; : variables.constants.API_URL + '/marketplace/items/' + this.props.type;
const { data } = await ( const { data } = await (
await fetch(dataURL, { await fetch(dataURL, {
signal: this.controller.signal, signal: this.controller.signal,
}) })
).json(); ).json();
const collections = await ( const collections = await (
await fetch(variables.constants.MARKETPLACE_URL + '/collections', { await fetch(variables.constants.API_URL + '/marketplace/collections', {
signal: this.controller.signal, signal: this.controller.signal,
}) })
).json(); ).json();
@ -184,7 +184,7 @@ class Marketplace extends PureComponent {
for (const item of this.state.items) { for (const item of this.state.items) {
if (installed.some((i) => i.name === item.display_name)) continue; // don't install if already installed if (installed.some((i) => i.name === item.display_name)) continue; // don't install if already installed
let { data } = await ( let { data } = await (
await fetch(`${variables.constants.MARKETPLACE_URL}/item/${item.type}/${item.name}`, { await fetch(`${variables.constants.API_URL}/marketplace/item/${item.type}/${item.name}`, {
signal: this.controller.signal, signal: this.controller.signal,
}) })
).json(); ).json();
@ -277,7 +277,9 @@ class Marketplace extends PureComponent {
return errorMessage( return errorMessage(
<> <>
<MdWifiOff /> <MdWifiOff />
<span className="title">{variables.getMessage('modals.main.marketplace.offline.title')}</span> <span className="title">
{variables.getMessage('modals.main.marketplace.offline.title')}
</span>
<span className="subtitle"> <span className="subtitle">
{variables.getMessage('modals.main.marketplace.offline.description')} {variables.getMessage('modals.main.marketplace.offline.description')}
</span> </span>
@ -302,7 +304,9 @@ class Marketplace extends PureComponent {
{errorMessage( {errorMessage(
<> <>
<MdLocalMall /> <MdLocalMall />
<span className="title">{variables.getMessage('modals.main.addons.empty.title')}</span> <span className="title">
{variables.getMessage('modals.main.addons.empty.title')}
</span>
<span className="subtitle"> <span className="subtitle">
{variables.getMessage('modals.main.marketplace.no_items')} {variables.getMessage('modals.main.marketplace.no_items')}
</span> </span>

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

@ -164,6 +164,14 @@ h5 {
} }
} }
.headerActions {
display: flex;
flex-flow: row;
gap: 20px;
justify-content: center;
align-items: center;
}
.marketplaceCondition { .marketplaceCondition {
display: flex; display: flex;
flex-flow: row !important; flex-flow: row !important;

3
src/components/modals/main/scss/marketplace/_main.scss
View File

@ -255,7 +255,8 @@
grid-gap: 5px; grid-gap: 5px;
padding: 50px; padding: 50px;
.title, svg { .title,
svg {
margin: 10px; margin: 10px;
} }

2
src/components/modals/main/scss/modules/_tab-content.scss
View File

@ -27,7 +27,7 @@
justify-content: space-between; justify-content: space-between;
/* border-top: 1px solid #ccc; */ /* border-top: 1px solid #ccc; */
border-bottom: 1px solid #ccc; border-bottom: 1px solid #676767;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;

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

@ -63,47 +63,34 @@ class Header extends PureComponent {
</div> </div>
)} )}
<span className="mainTitle">{this.props.title}</span> <span className="mainTitle">{this.props.title}</span>
{this.props.switch && ( <div className="headerActions">
<button className="sideload" onClick={() => this.changeSetting()}> <button
{this.state[this.props.setting] ? ( className="sideload"
<> onClick={() =>
Hide window.open(
<MdOutlineVisibilityOff /> variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
</> '_blank',
) : ( )
<> }
Show >
<MdOutlineVisibility /> {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
</>
)}
</button> </button>
)} {this.props.switch && (
</div> <button className="sideload" onClick={() => this.changeSetting()}>
<div className="headerExtras"> {this.state[this.props.setting] ? (
{/*<span <>
className="link" Hide
onClick={() => <MdOutlineVisibilityOff />
window.open( </>
variables.constants.KNOWLEDGEBASE + ) : (
'/settings/' + <>
this.props.setting.toLowerCase().replace('enabled', ''), Show
'_blank', <MdOutlineVisibility />
) </>
} )}
> </button>
<MdHelpOutline /> {variables.getMessage('modals.main.settings.sections.header.more_info')} )}
</span>*/} </div>
<span
className="link"
onClick={() =>
window.open(
variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
'_blank',
)
}
>
<MdFlag /> {variables.getMessage('modals.main.settings.sections.header.report_issue')}
</span>
</div> </div>
{this.props.zoomSetting && ( {this.props.zoomSetting && (
<SettingsItem <SettingsItem

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

@ -125,24 +125,11 @@ export default class BackgroundSettings extends PureComponent {
</Dropdown> </Dropdown>
</> </>
) : ( ) : (
<> <ChipSelect
{/*<Dropdown label={variables.getMessage('modals.main.settings.sections.background.categories')}
label={variables.getMessage('modals.main.settings.sections.background.category')} options={this.state.backgroundCategories}
name="apiCategories" name="apiCategories"
> />
{this.state.backgroundCategories.map((category) => (
<MenuItem value={category.name} key={category.name}>
{category.name.charAt(0).toUpperCase() + category.name.slice(1)} (
{category.count})
</MenuItem>
))}
</Dropdown>*/}
<ChipSelect
label={variables.getMessage('modals.main.settings.sections.background.categories')}
options={this.state.backgroundCategories}
name="apiCategories"
></ChipSelect>
</>
)} )}
<Dropdown <Dropdown
label={variables.getMessage( label={variables.getMessage(
@ -388,7 +375,7 @@ export default class BackgroundSettings extends PureComponent {
/> />
</SettingsItem> </SettingsItem>
) : null} ) : null}
{this.state.backgroundSettingsSection ? ( {this.state.backgroundSettingsSection && (
<> <>
<SettingsItem <SettingsItem
title={variables.getMessage('modals.main.settings.sections.background.source.title')} title={variables.getMessage('modals.main.settings.sections.background.source.title')}
@ -444,7 +431,7 @@ export default class BackgroundSettings extends PureComponent {
: null}*/} : null}*/}
{backgroundSettings} {backgroundSettings}
</> </>
) : null} )}
{(this.state.backgroundType === 'api' || {(this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' || this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) && this.state.marketplaceEnabled) &&

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

@ -76,17 +76,8 @@ export default class CustomSettings extends PureComponent {
localStorage.setItem('showReminder', true); localStorage.setItem('showReminder', true);
} }
videoCheck(url) {
return (
url.startsWith('data:video/') ||
url.endsWith('.mp4') ||
url.endsWith('.webm') ||
url.endsWith('.ogg')
);
}
videoCustomSettings = () => { videoCustomSettings = () => {
const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg)); const hasVideo = this.state.customBackground.filter((bg) => videoCheck(bg));
if (hasVideo.length > 0) { if (hasVideo.length > 0) {
return ( return (
@ -225,9 +216,9 @@ export default class CustomSettings extends PureComponent {
<div key={index}> <div key={index}>
<img <img
alt={'Custom background ' + (index || 0)} alt={'Custom background ' + (index || 0)}
src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`} src={`${!videoCheck(url) ? this.state.customBackground[index] : ''}`}
/> />
{this.videoCheck(url) && <MdPersonalVideo className="customvideoicon" />} {videoCheck(url) && <MdPersonalVideo className="customvideoicon" />}
{this.state.customBackground.length > 0 && ( {this.state.customBackground.length > 0 && (
<Tooltip <Tooltip
title={variables.getMessage( title={variables.getMessage(

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

@ -105,10 +105,16 @@ export default class Background extends PureComponent {
} }
let requestURL, data; let requestURL, data;
switch (backgroundAPI) { switch (backgroundAPI) {
case 'unsplash': case 'unsplash':
case 'pexels': case 'pexels':
requestURL = `${variables.constants.API_URL}/images/unsplash?categories=${apiCategories}&quality=${apiQuality}`; const collection = localStorage.getItem('apiCollection');
if (collection) {
requestURL = `${variables.constants.API_URL}/images/unsplash?collection=${collection}&quality=${apiQuality}`;
} else {
requestURL = `${variables.constants.API_URL}/images/unsplash?categories=${apiCategories}&quality=${apiQuality}`;
}
break; break;
// Defaults to Mue // Defaults to Mue
default: default:

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

@ -241,16 +241,23 @@ function PhotoInformation({ info, url, api }) {
</div> </div>
)} )}
<div className="photoInformation-content"> <div className="photoInformation-content">
<span className="title"> <div className="photoInfomration-text">
{(showExtraInfo || other) && info.description <span
? info.description.length > 40 className="title"
? info.description.substring(0, 40) + '...' title={
: info.description (showExtraInfo || other) && info.description ? info.description : info.location
: info.location?.split(',').slice(-2).join(', ').trim()} }
</span> >
<span className="subtitle" id="credit"> {(showExtraInfo || other) && info.description
{photo} {credit} ? info.description.length > 40
</span> ? info.description.substring(0, 40) + '...'
: info.description
: info.location?.split(',').slice(-2).join(', ').trim()}
</span>
<span className="subtitle" id="credit">
{photo} {credit}
</span>
</div>
{info.views && info.downloads !== null ? ( {info.views && info.downloads !== null ? (
<div className="unsplashStats"> <div className="unsplashStats">
<div title={variables.getMessage('widgets.background.views')}> <div title={variables.getMessage('widgets.background.views')}>

15
src/components/widgets/background/scss/_photoinformation.scss
View File

@ -358,8 +358,12 @@
line-height: 2em; line-height: 2em;
margin-right: 3px; margin-right: 3px;
display: flex; display: flex;
flex-flow: column; flex-flow: row;
align-items: center;
gap: 20px;
padding-left: 20px; padding-left: 20px;
width: 100%;
justify-content: space-between;
a { a {
@include themed { @include themed {
@ -452,10 +456,8 @@
.unsplashStats { .unsplashStats {
display: flex; display: flex;
flex-flow: row; flex-flow: column;
justify-content: space-between; justify-content: space-between;
gap: 40px;
margin-right: 40px;
div { div {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -463,3 +465,8 @@
align-items: center; align-items: center;
} }
} }
.photoInfomration-text {
display: flex;
flex-flow: column;
}

1
src/modules/constants.js
View File

@ -1,6 +1,5 @@
// API URLs // API URLs
export const API_URL = 'https://api.muetab.com/v2'; export const API_URL = 'https://api.muetab.com/v2';
export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
export const SPONSORS_URL = 'https://sponsors.muetab.com'; export const SPONSORS_URL = 'https://sponsors.muetab.com';
export const GITHUB_URL = 'https://api.github.com'; export const GITHUB_URL = 'https://api.github.com';
export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u='; export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';

1
src/scss/_variables.scss
View File

@ -120,6 +120,7 @@ $themes: (
font-size: 38px; font-size: 38px;
font-weight: 600; font-weight: 600;
margin-bottom: 15px; margin-bottom: 15px;
text-transform: capitalize;
@include themed { @include themed {
color: t($color); color: t($color);