mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-08 14:10:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: background fade in animation (WIP)

Browse Source
This commit is contained in:
David Ralph
2021-04-10 22:32:46 +01:00
parent f4de44bbbb
commit 149bcdbe05
4 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,9 +79,9 @@ export default class SearchSettings extends React.PureComponent {
</Dropdown> </Dropdown>
<br/><br/> <br/><br/>
<ul id='searchEngineInput' style={{ display: this.state.customDisplay }}> <ul style={{ display: this.state.customDisplay }}>
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p> <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
<input type='text' id='customSearchEngine' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input> <input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
</ul> </ul>
</> </>
); );

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

@@ -68,10 +68,21 @@ export default class Background extends React.PureComponent {
if (this.state.url !== '') { if (this.state.url !== '') {
const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url; const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
document.querySelector('#backgroundImage').setAttribute( const backgroundImage = document.querySelector('#backgroundImage');
backgroundImage.classList.add('backgroundPreload');
let preloader = document.createElement('img');
preloader.src = url;
preloader.addEventListener('load', () => {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
backgroundImage.setAttribute(
'style', 'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
); );
preloader = null;
});
} else { } else {
document.querySelector('#backgroundImage').setAttribute( document.querySelector('#backgroundImage').setAttribute(
'style', 'style',
@@ -136,7 +147,7 @@ export default class Background extends React.PureComponent {
case 'colour': case 'colour':
// background colour // background colour
const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {"angle":"180","gradient":[{"colour":"#ffb032","stop":0}],"type":"linear"}; const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
let gradientSettings = ''; let gradientSettings = '';
try { try {
gradientSettings = JSON.parse(customBackgroundColour); gradientSettings = JSON.parse(customBackgroundColour);

6
src/components/widgets/background/scss/index.scss
View File

@@ -10,6 +10,10 @@
zoom: 100% !important; zoom: 100% !important;
} }
.backgroundPreload {
opacity: 0;
}
#backgroundVideo { #backgroundVideo {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -19,7 +23,7 @@
} }
.fade-in { .fade-in {
@include animation('fadein 2s'); @include animation('fadein 1s');
} }
@include keyframes(fadein) { @include keyframes(fadein) {

2
src/scss/index.scss
View File

@@ -7,7 +7,7 @@
@import 'modules/buttons'; @import 'modules/buttons';
body { body {
background: #2f3640; background: #000000;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }