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

improve modals

Browse Source
This commit is contained in:
David Ralph
2021-03-01 12:06:02 +00:00
parent 30a3d87431
commit 7105360b31
11 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ErrorBoundary.jsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
export default class ErrorBoundary extends React.PureComponent {
constructor(props) {
super(props);
this.state = { hasError: false, error: '' };
}
static getDerivedStateFromError(error) {
console.log(error);
return { hasError: true, error: error };
}
render() {
if (this.state.hasError) {
return (
<div style={{'text-align': 'center'}}>
<h1>Error</h1>
<p>Failed to load this component of Mue.</p>
<button class='refresh' onClick={() => window.location.reload()}>Refresh</button>
</div>
)
}
return this.props.children;
}
}

6
src/components/modals/settings/sections/Appearance.jsx
View File

@@ -4,11 +4,11 @@ import Checkbox from '../Checkbox';
export default function AppearanceSettings (props) {
return (
<div>
<h2>Appearance</h2>
<h2>{props.language.title}</h2>
<Checkbox name='darkTheme' text={props.language.dark} />
<Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
<Checkbox name='brightnessTime' text={props.language.night_mode} betaFeature={true} />
<h3>Accessibility</h3>
<Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
<Checkbox name='animations' text={props.language.animations} betaFeature={true} />
<ul>
<p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />

22
src/components/modals/settings/sections/Background.jsx
View File

@@ -210,7 +210,7 @@ export default class BackgroundSettings extends React.PureComponent {
<div>
{gradientInputs}
{this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.add_colour}</button>) : null
}
</div>
);
@@ -222,23 +222,23 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='background' text='Enabled' />
<h3>Buttons</h3>
<ul>
<Checkbox name='view' text={this.props.language.background.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
<Checkbox name='refresh' text={this.props.language.background.refresh} />
<Checkbox name='view' text={this.props.language.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
<Checkbox name='refresh' text={this.props.language.refresh} />
</ul>
<h3>Effects</h3>
<ul>
<p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<h3>Source</h3>
<ul>
<Dropdown
label={this.props.language.background.api}
label={this.props.language.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
@@ -247,16 +247,16 @@ export default class BackgroundSettings extends React.PureComponent {
</Dropdown>
</ul>
<ul>
<p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{this.props.language.background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
<p>{this.props.language.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{this.props.language.background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>

14
src/components/modals/settings/sections/Greeting.jsx
View File

@@ -41,18 +41,18 @@ export default class GreetingSettings extends React.PureComponent {
render() {
return (
<div>
<h2>Greeting</h2>
<Checkbox name='greeting'>Enabled</Checkbox>
<Checkbox name='events' text={this.props.language.greeting.events} />
<Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
<h2>{this.props.language.title}</h2>
<Checkbox name='greeting' text={'Enabled'}>Enabled</Checkbox>
<Checkbox name='events' text={this.props.language.events} />
<Checkbox name='defaultGreetingMessage' text={this.props.language.default} />
<ul>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
<p>{this.props.language.name} <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
</ul>
<h3>Birthday</h3>
<Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
<Checkbox name='birthdayenabled' text={this.props.language.birthday_enabled} />
<ul>
<p>{this.props.language.greeting.birthday_date}</p>
<p>{this.props.language.birthday_date}</p>
<DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
</ul>
</div>

6
src/components/modals/settings/sections/Search.jsx
View File

@@ -58,9 +58,9 @@ export default class SearchSettings extends React.PureComponent {
return (
<div className='section'>
<h2>Search</h2>
<Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
<Checkbox name='voiceSearch' text={this.props.language.voice_search} />
<ul>
<Dropdown label={this.props.language.searchbar.search_engine}
<Dropdown label={this.props.language.search_engine}
name='searchEngine'
id='searchEngine'
onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
@@ -71,7 +71,7 @@ export default class SearchSettings extends React.PureComponent {
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</div>

8
src/components/modals/tabs/Settings.jsx
View File

@@ -23,16 +23,16 @@ export default function Settings (props) {
<Quote language={props.language.sections.quote}/>
</div>
<div label={props.language.sections.greeting.title}>
<Greeting language={props.language} toastLanguage={props.toastLanguage} />
<Greeting language={props.language.sections.greeting} toastLanguage={props.language.toasts} />
</div>
<div label={props.language.sections.background.title}>
<Background language={props.language} toastLanguage={props.toastLanguage}/>
<Background language={props.language.sections.background} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.search.title}>
<Search language={props.language}/>
<Search language={props.language.sections.search}/>
</div>
<div label={props.language.sections.appearance}>
<Appearance language={props.language} toastLanguage={props.toastLanguage}/>
<Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.language}>
<Language language={props.language}/>

3
src/components/modals/tabs/backend/Tabs.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import Tab from './Tab';
import ErrorBoundary from '../../../ErrorBoundary';
export default class Tabs extends React.PureComponent {
constructor(props) {
@@ -43,10 +44,12 @@ export default class Tabs extends React.PureComponent {
})}
</ul>
<div className={tabClass}>
<ErrorBoundary>
{this.props.children.map((child) => {
if (child.props.label !== this.state.currentTab) return undefined;
return child.props.children;
})}
</ErrorBoundary>
</div>
</span>
);

2
src/scss/index.scss
View File

@@ -6,11 +6,11 @@
@import 'modules/marketplace';
@import 'modules/buttons';
@import 'modules/dropdown';
@import 'modules/welcome';
@import 'modules/modals/main';
@import 'modules/modals/feedback';
@import 'modules/modals/update';
@import 'modules/modals/welcome';
body {
background: #2f3640;

11
src/scss/modules/_buttons.scss
View File

@@ -17,6 +17,17 @@
box-shadow: none;
}
.refresh {
@extend %settingsButton;
background-color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
&:hover {
border: 2px solid map-get($button-colours, 'confirm');
color: map-get($button-colours, 'confirm');
}
}
.apply {
@extend %settingsButton;
margin-right: 20px;

35
src/scss/modules/_settings.scss
View File

@@ -64,8 +64,7 @@ input {
}
h4,
.switch,
.expandIcons {
.switch {
display: inline;
font-size: 1.4em;
font-weight: 100;
@@ -80,40 +79,10 @@ h4,
margin-bottom: 20px;
}
.expandIcons {
font-size: 25px;
vertical-align: middle;
}
h4,
.expandIcons {
h4 {
cursor: pointer;
}
.extraSettings {
border-left: 10px solid;
border-image-slice: 1;
border-width: 5px;
list-style: none;
border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
p {
margin: 0;
padding: 0;
}
select {
margin-left: 20px;
}
input[type=text],
input[type=range],
p,
button {
margin-top: 10px;
}
}
ul {
padding-left: 5px;
margin: 0;

0
src/scss/modules/_welcome.scss → src/scss/modules/modals/_welcome.scss
View File