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

Update styles and dependencies

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,6 @@ class Item extends PureComponent {
showUpdateButton:
this.props.addonInstalled === true &&
this.props.addonInstalledVersion !== this.props.data.version,
showMore: false,
shareModal: false,
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) {
if (this.state.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() {
if (!this.props.data.display_name) {
return null;
@@ -95,7 +99,9 @@ class Item extends PureComponent {
onRequestClose={() => this.setState({ shareModal: false })}
>
<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 })}
/>
</Modal>
@@ -266,7 +272,7 @@ class Item extends PureComponent {
<span>
{' '}
{variables.getMessage(
'modals.main.addons.create.types.' + this.props.data.data.type,
'modals.main.marketplace.' + this.getName(this.props.data.data.type),
) || 'marketplace'}
</span>
</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;
this.state.installed.forEach(async (item) => {
const data = await (
await fetch(variables.constants.MARKETPLACE_URL + '/item/' + item.name)
await fetch(variables.constants.API_URL + 'marketplace//item/' + item.name)
).json();
if (data.version !== item.version) {
updates++;

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

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

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

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

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

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

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

@@ -63,47 +63,34 @@ class Header extends PureComponent {
</div>
)}
<span className="mainTitle">{this.props.title}</span>
{this.props.switch && (
<button className="sideload" onClick={() => this.changeSetting()}>
{this.state[this.props.setting] ? (
<>
Hide
<MdOutlineVisibilityOff />
</>
) : (
<>
Show
<MdOutlineVisibility />
</>
)}
<div className="headerActions">
<button
className="sideload"
onClick={() =>
window.open(
variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
'_blank',
)
}
>
{variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
</button>
)}
</div>
<div className="headerExtras">
{/*<span
className="link"
onClick={() =>
window.open(
variables.constants.KNOWLEDGEBASE +
'/settings/' +
this.props.setting.toLowerCase().replace('enabled', ''),
'_blank',
)
}
>
<MdHelpOutline /> {variables.getMessage('modals.main.settings.sections.header.more_info')}
</span>*/}
<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>
{this.props.switch && (
<button className="sideload" onClick={() => this.changeSetting()}>
{this.state[this.props.setting] ? (
<>
Hide
<MdOutlineVisibilityOff />
</>
) : (
<>
Show
<MdOutlineVisibility />
</>
)}
</button>
)}
</div>
</div>
{this.props.zoomSetting && (
<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
label={variables.getMessage('modals.main.settings.sections.background.category')}
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>
</>
<ChipSelect
label={variables.getMessage('modals.main.settings.sections.background.categories')}
options={this.state.backgroundCategories}
name="apiCategories"
/>
)}
<Dropdown
label={variables.getMessage(
@@ -388,7 +375,7 @@ export default class BackgroundSettings extends PureComponent {
/>
</SettingsItem>
) : null}
{this.state.backgroundSettingsSection ? (
{this.state.backgroundSettingsSection && (
<>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
@@ -444,7 +431,7 @@ export default class BackgroundSettings extends PureComponent {
: null}*/}
{backgroundSettings}
</>
) : null}
)}
{(this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
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);
}
videoCheck(url) {
return (
url.startsWith('data:video/') ||
url.endsWith('.mp4') ||
url.endsWith('.webm') ||
url.endsWith('.ogg')
);
}
videoCustomSettings = () => {
const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg));
const hasVideo = this.state.customBackground.filter((bg) => videoCheck(bg));
if (hasVideo.length > 0) {
return (
@@ -225,9 +216,9 @@ export default class CustomSettings extends PureComponent {
<div key={index}>
<img
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 && (
<Tooltip
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;
switch (backgroundAPI) {
case 'unsplash':
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;
// Defaults to Mue
default:

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

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

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

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