mirror of https://github.com/mue/mue.git
feat: background settings improvements
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
parent
3148a19685
commit
61bed2b478
|
@ -231,6 +231,11 @@
|
|||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;*/
|
||||
}
|
||||
button {
|
||||
svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.buttonsRow {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
|
@ -88,33 +88,45 @@ h4 {
|
|||
}
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
@include themed() {
|
||||
background: t($modal-sidebar);
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
.photosEmpty {
|
||||
height: 400px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
button {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.imagesTopBar {
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: 0.5s;
|
||||
padding: 45px 25px 45px 25px;
|
||||
gap: 20px;
|
||||
svg {
|
||||
font-size: 48px;
|
||||
font-size: 30px;
|
||||
@include themed() {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
&:hover {
|
||||
border-style: dashed;
|
||||
}
|
||||
button {
|
||||
width: 80% !important;
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
.topbarbuttons {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
}
|
||||
button {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
|
|
|
@ -45,16 +45,20 @@
|
|||
}
|
||||
|
||||
.images-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
height: 250px;
|
||||
padding: 20px;
|
||||
grid-gap: 20px;
|
||||
@include themed() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
div {
|
||||
background: t($modal-sidebar);
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 0 4px t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: auto;
|
||||
height: 100px;
|
||||
|
|
|
@ -98,6 +98,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
|
||||
const APISettings = (
|
||||
<>
|
||||
{interval}
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.api')}
|
||||
subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
|
||||
|
@ -168,7 +169,6 @@ export default class BackgroundSettings extends PureComponent {
|
|||
onChange={(e) => this.setState({ backgroundAPI: e })}
|
||||
/>
|
||||
</SettingsItem>
|
||||
{interval}
|
||||
</>
|
||||
);
|
||||
|
||||
|
@ -217,7 +217,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
className="mainTitle"
|
||||
onClick={() => this.setState({ backgroundSettingsSection: false })}
|
||||
>
|
||||
{getMessage('modals.main.settings.sections.background.title')}{' '}
|
||||
<span className='backTitle'>{getMessage('modals.main.settings.sections.background.title')}{' '}</span>
|
||||
<MdOutlineKeyboardArrowRight />{' '}
|
||||
{getMessage('modals.main.settings.sections.background.source.title')}
|
||||
</span>
|
||||
|
|
|
@ -1,7 +1,14 @@
|
|||
import variables from 'modules/variables';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
|
||||
import {
|
||||
MdCancel,
|
||||
MdAddLink,
|
||||
MdAddPhotoAlternate,
|
||||
MdPersonalVideo,
|
||||
MdOutlineFileUpload,
|
||||
MdFolder,
|
||||
} from 'react-icons/md';
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
import { compressAccurately, filetoDataURL } from 'image-conversion';
|
||||
import { videoCheck } from 'modules/helpers/background/widget';
|
||||
|
@ -14,7 +21,7 @@ import Modal from 'react-modal';
|
|||
import CustomURLModal from './CustomURLModal';
|
||||
|
||||
export default class CustomSettings extends PureComponent {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
getMessage = (text, obj) => variables.language.getMessage(variables.languagecode, text, obj || {});
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
@ -165,9 +172,10 @@ export default class CustomSettings extends PureComponent {
|
|||
return (
|
||||
<>
|
||||
{this.props.interval}
|
||||
<div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
|
||||
|
||||
{/*<div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
|
||||
<div className="content">
|
||||
<div className="images-row">
|
||||
{/*<div className="images-row">
|
||||
{this.state.customBackground.map((url, index) => (
|
||||
<div key={index}>
|
||||
<img
|
||||
|
@ -185,8 +193,9 @@ export default class CustomSettings extends PureComponent {
|
|||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="action">
|
||||
<div className="dropzone" ref={this.customDnd}>
|
||||
<MdAddPhotoAlternate />
|
||||
|
@ -210,6 +219,74 @@ export default class CustomSettings extends PureComponent {
|
|||
<MdAddLink />
|
||||
</button>
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
<div className="dropzone" ref={this.customDnd}>
|
||||
<div className="imagesTopBar">
|
||||
<div>
|
||||
<MdAddPhotoAlternate />
|
||||
<div>
|
||||
<span className="title">Custom Images</span>
|
||||
<span className="subtitle">Select images from your local computer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='topbarbuttons'>
|
||||
<button onClick={() => this.uploadCustomBackground()}>
|
||||
Upload
|
||||
<MdOutlineFileUpload />
|
||||
</button>
|
||||
<button onClick={() => this.setState({ customURLModal: true })}>
|
||||
{this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dropzone-content">
|
||||
{this.state.customBackground.length > 0 ? (
|
||||
<div className="images-row">
|
||||
{this.state.customBackground.map((url, index) => (
|
||||
<div key={index}>
|
||||
<img
|
||||
alt={'Custom background ' + (index || 0)}
|
||||
src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
|
||||
/>
|
||||
{this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
|
||||
{this.state.customBackground.length > 0 ? (
|
||||
<button
|
||||
className="iconButton"
|
||||
onClick={() => this.modifyCustomBackground('remove', index)}
|
||||
>
|
||||
<MdCancel />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="photosEmpty">
|
||||
<div className="emptyNewMessage">
|
||||
<MdAddPhotoAlternate />
|
||||
<span className="title">
|
||||
{this.getMessage(
|
||||
'modals.main.settings.sections.background.source.drop_to_upload',
|
||||
)}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{this.getMessage(
|
||||
'modals.main.settings.sections.background.source.formats',
|
||||
{
|
||||
list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
<button onClick={() => this.uploadCustomBackground()}>
|
||||
{this.getMessage('modals.main.settings.sections.background.source.select')}
|
||||
<MdFolder/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<FileUpload
|
||||
id="bg-input"
|
||||
|
|
|
@ -126,6 +126,16 @@ $themes: (
|
|||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
.backTitle {
|
||||
cursor: pointer;
|
||||
@include themed() {
|
||||
color: t($subColor);
|
||||
&:hover {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
Loading…
Reference in New Issue