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

fix: various settings bug fixes and style changes

Browse Source
This commit is contained in:
David Ralph
2021-06-30 15:25:34 +01:00
parent 6aa1c6b0ea
commit c6b65f943a
19 changed files with 35 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/Main.jsx
View File

@@ -18,7 +18,7 @@ const renderLoader = () => (
</div>
</div>
</div>
<div label='' style={{ 'display': 'none' }}></div>
<div label='' style={{ display: 'none' }}></div>
</Tabs>
);

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

@@ -168,7 +168,7 @@ export default class Marketplace extends React.PureComponent {
window.open(this.state.featured.buttonLink);
}
return (
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
<div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>

2
src/components/modals/main/settings/Dropdown.jsx
View File

@@ -57,7 +57,7 @@ export default class Dropdown extends React.PureComponent {
return (
<>
{this.getLabel()}
<select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
<select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{ width: `${(8*this.state.title.length) + 50}px` }}>
{this.props.children}
</select>
</>

6
src/components/modals/main/settings/ResetModal.jsx
View File

@@ -11,12 +11,12 @@ export default function ResetModal(props) {
return (
<>
<h3 style={{ 'textAlign': 'center' }}>{language.title}</h3>
<h3 style={{ textAlign: 'center' }}>{language.title}</h3>
<h4>{language.question}</h4>
<p>{language.information}</p>
<div className='resetfooter'>
<button className='reset' style={{ 'marginLeft': '0' }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
<button className='import' style={{ 'marginLeft': '5px' }} onClick={props.modalClose}>{language.cancel}</button>
<button className='reset' style={{ marginLeft: 0 }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
<button className='import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>{language.cancel}</button>
</div>
</>
);

2
src/components/modals/main/settings/sections/Advanced.jsx
View File

@@ -51,7 +51,7 @@ export default class AdvancedSettings extends React.PureComponent {
<Text title={advanced.custom_css} name='customcss' textarea={true} category='other'/>
<h3>{this.language.sections.experimental.title}</h3>
<p style={{ 'maxWidth': '75%'}}>{advanced.experimental_warning}</p>
<p style={{ maxWidth: '75%' }}>{advanced.experimental_warning}</p>
<Switch name='experimental' text={this.language.enabled} element='.other'/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

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

@@ -101,8 +101,8 @@ export default class Changelog extends React.PureComponent {
return (
<div className='changelogtab'>
<h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
<h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
<h1 style={{ marginBottom: '-10px' }}>{this.state.title}</h1>
<h5 style={{ lineHeight: '0px' }}>{this.state.author} • {this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
<div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

2
src/components/modals/main/settings/sections/Experimental.jsx
View File

@@ -24,7 +24,7 @@ export default function ExperimentalSettings() {
<br/><br/>
<button className='uploadbg' onClick={() => EventBus.dispatch(document.getElementById('eventType').value, document.getElementById('eventName').value)}>Send</button>
<br/><br/>
<button className='reset' style={{ 'marginLeft': '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
<button className='reset' style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
</>
);
}

2
src/components/modals/main/settings/sections/Order.jsx
View File

@@ -27,7 +27,7 @@ const widget_name = {
const SortableItem = sortableElement(({ value }) => (
<li className='sortableitem' style={{ display: enabled(value) ? 'block' : 'none' }}>
<DragHandleIcon style={{'verticalAlign': 'middle'}} />
<DragHandleIcon style={{ verticalAlign: 'middle' }} />
{widget_name[value]}
</li>
));

12
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -23,18 +23,14 @@ export default class QuoteSettings extends React.PureComponent {
render() {
const { quote } = window.language.modals.main.settings.sections;
let quoteSettings;
const customSettings = (
let customSettings;
if (this.state.quoteType === 'custom') {
customSettings = (
<>
<Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
</>
);
switch (this.state.quoteType) {
case 'custom': quoteSettings = customSettings; break;
default: break;
}
return (
@@ -47,7 +43,7 @@ export default class QuoteSettings extends React.PureComponent {
<option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
<option value='custom'>{quote.custom}</option>
</Dropdown>
{quoteSettings}
{customSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
<h3>{quote.buttons.title}</h3>

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

@@ -29,7 +29,7 @@ export default class SearchSettings extends React.PureComponent {
customValue: ''
});
toast(window.language.modals.main.settings.toasts.reset);
toast(window.language.toasts.reset);
}
componentDidMount() {
@@ -88,7 +88,7 @@ export default class SearchSettings extends React.PureComponent {
<ul style={{ display: this.state.customDisplay }}>
<br/>
<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' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
</ul>
<br/>

2
src/components/modals/main/tabs/Settings.jsx
View File

@@ -41,7 +41,7 @@ export default function Settings() {
<div label={sections.changelog}><Changelog/></div>
<div label={sections.about.title}><About/></div>
</Tabs>
<div className='reminder-info' style={{ 'display': display }}>
<div className='reminder-info' style={{ display: display }}>
<h1>{reminder.title}</h1>
<p>{reminder.message}</p>
<button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>

2
src/components/modals/welcome/Welcome.jsx
View File

@@ -13,7 +13,7 @@ export default function WelcomeModal(props) {
<div className='welcomeModalText'>
<h2 className='subtitle'>{language.title}</h2>
<h1 className='welcometitle'>Mue Tab</h1>
<img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
<img alt='celebration' style={{ height: '200px', width: 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
<h2 className='subtitle'>{language.information}</h2>
<p>{language.thankyoumessage1}<br/> {language.thankyoumessage2}</p>
<h2 className='subtitle'>{language.support}</h2>

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

@@ -352,7 +352,7 @@ export default class Background extends React.PureComponent {
};
return (
<video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundVideo'>
<video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundVideo'>
<source src={this.state.url}/>
</video>
);

2
src/components/widgets/quicklinks/QuickLinks.jsx
View File

@@ -151,7 +151,7 @@ export default class QuickLinks extends React.PureComponent {
quickLink(item)
))}
<button className='quicklinks' onClick={this.toggleAdd}>+</button>
<span className='quicklinkscontainer' style={{ 'visibility': this.state.showAddLink }}>
<span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink }}>
<div className='topbarquicklinks'>
<h4>{this.language.new}</h4>
<TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />

8
src/components/widgets/weather/Weather.jsx
View File

@@ -35,6 +35,8 @@ export default class Weather extends React.PureComponent {
return null;
}
document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
let data = {
weather: [
{
@@ -118,12 +120,8 @@ export default class Weather extends React.PureComponent {
EventBus.on('refresh', (data) => {
if (data === 'weather') {
this.getWeather();
document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
document.querySelector('.weather svg').style.fontSize = `${0.95 * Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
}
});
document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
this.getWeather();
}
@@ -165,7 +163,7 @@ export default class Weather extends React.PureComponent {
<div className='weather'>
<WeatherIcon name={this.state.icon}/>
<span>{this.state.weather.temp + this.state.temp_text}</span>
{enabled('weatherdescription') ? <span className='loc' style={{ 'textTransform': 'capitalize' }}><br/>{this.state.weather.description}</span> : null}
{enabled('weatherdescription') ? <span className='loc'><br/>{this.state.weather.description}</span> : null}
<span className='minmax'>{minmax()}</span>
{enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
{enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}

4
src/components/widgets/weather/WindDirectionIcon.jsx
View File

@@ -2,10 +2,12 @@ import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirection
export default function WindDirectionIcon(props) {
let icon;
// fix potential bug, idk what causes it but now it is fixed
let degrees = props.degrees;
// convert the number openweathermap gives us to closest direction or something
const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];
const direction = directions[Math.round(((props.degrees %= 360) < 0 ? props.degrees + 360 : props.degrees) / 45) % 8];
const direction = directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8];
switch (direction) {
case 'North': icon = <WiDirectionUp/>; break;

1
src/components/widgets/weather/weather.scss
View File

@@ -23,6 +23,7 @@
font-size: 0.7em;
margin: 0;
padding: 0;
text-transform: capitalize;
}
.minmax {