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

style(background): transition effect on the background images grid

Browse Source
This commit is contained in:
alexsparkes
2024-11-27 20:39:50 +00:00
parent c15ce66bb8
commit 5dff2fa91e
2 changed files with 70 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/features/background/options/Custom.jsx
View File

@@ -9,11 +9,10 @@ import {
MdFolder, MdFolder,
} from 'react-icons/md'; } from 'react-icons/md';
import { addCustomImage, getCustomImages, deleteCustomImage } from 'utils/indexedDB'; import { addCustomImage, getCustomImages, deleteCustomImage } from 'utils/indexedDB';
import { Tooltip, Button } from 'components/Elements'; import { Tooltip, Button } from 'components/Elements';
import Modal from 'react-modal'; import Modal from 'react-modal';
import CustomURLModal from './CustomURLModal'; import CustomURLModal from './CustomURLModal';
import { motion, AnimatePresence } from 'framer-motion';
export default class CustomSettings extends PureComponent { export default class CustomSettings extends PureComponent {
getMessage = (text, obj) => variables.getMessage(text, obj || {}); getMessage = (text, obj) => variables.getMessage(text, obj || {});
@@ -123,50 +122,71 @@ export default class CustomSettings extends PureComponent {
</div> </div>
</div> </div>
<div className={`dropzone dropzone-content ${this.state.isDragging ? 'dragging' : ''}`}> <div className={`dropzone dropzone-content ${this.state.isDragging ? 'dragging' : ''}`}>
{this.state.customBackground.length > 0 ? ( <AnimatePresence>
<div className="images-row fixed-width"> {this.state.customBackground.length > 0 ? (
{this.state.customBackground.map((image, index) => ( <motion.div
<div key={index} className="image-container"> className="images-row fixed-width"
<img alt={'Custom background ' + index} src={image.url} /> initial={{ opacity: 0 }}
<Tooltip animate={{ opacity: 1 }}
title={variables.getMessage('settings:sections.background.source.remove')} exit={{ opacity: 0 }}
layout
>
{this.state.customBackground.map((image, index) => (
<motion.div
key={index}
className="image-container"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.5 }}
layout
> >
<Button <img alt={'Custom background ' + index} src={image.url} />
type="settings" <Tooltip
onClick={() => this.removeCustomImage(image.id)} title={variables.getMessage('settings:sections.background.source.remove')}
icon={<MdCancel />} >
/> <Button
</Tooltip> type="settings"
onClick={() => this.removeCustomImage(image.id)}
icon={<MdCancel />}
/>
</Tooltip>
</motion.div>
))}
</motion.div>
) : (
<motion.div
className="photosEmpty"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<div className="emptyNewMessage">
<MdAddPhotoAlternate />
<span className="title">
{variables.getMessage('settings:sections.background.source.drop_to_upload')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.source.formats', {
list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
})}
</span>
<Button
type="settings"
onClick={this.uploadCustomBackground}
icon={<MdFolder />}
label={variables.getMessage('settings:sections.background.source.select')}
/>
</div> </div>
))} </motion.div>
</div> )}
) : ( </AnimatePresence>
<div className="photosEmpty">
<div className="emptyNewMessage">
<MdAddPhotoAlternate />
<span className="title">
{variables.getMessage('settings:sections.background.source.drop_to_upload')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.source.formats', {
list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
})}
</span>
<Button
type="settings"
onClick={this.uploadCustomBackground}
icon={<MdFolder />}
label={variables.getMessage('settings:sections.background.source.select')}
/>
</div>
</div>
)}
</div> </div>
</div> </div>
<input <input
type="file" type="file"
id="bg-input" id="bg-input"
accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg" accept="image/jpeg, image/png, image/webp, image.webm, image/gif, video/mp4, video/webm, video/ogg"
multiple multiple
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={(e) => { onChange={(e) => {

14
src/features/background/scss/index.scss
View File

@@ -75,7 +75,15 @@
} }
} }
.dropzone.dragging { .dropzone {
border: 2px dashed #007bff; border: 2px dashed transparent;
background-color: rgba(0, 123, 255, 0.1); background-color: transparent;
transition:
border 0.3s ease-in-out,
background-color 0.3s ease-in-out;
&.dragging {
border: 2px dashed #007bff;
background-color: rgba(0, 123, 255, 0.1);
}
} }