refactor: minor changes to tab and prettier

This commit is contained in:
David Ralph 2023-09-17 12:16:57 +01:00
parent fc6d988a52
commit ef3733d534
9 changed files with 65 additions and 53 deletions

View File

@ -180,7 +180,7 @@ export default class BackgroundSettings extends PureComponent {
{ {
name: 'Unsplash', name: 'Unsplash',
value: 'unsplash', value: 'unsplash',
} },
]} ]}
name="backgroundAPI" name="backgroundAPI"
category="background" category="background"

View File

@ -38,10 +38,11 @@ class Tabs extends PureComponent {
} }
render() { render() {
const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
const reminderInfo = ( const reminderInfo = (
<div className="reminder-info" style={{ display }}> <div
className="reminder-info"
style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
>
<div className="shareHeader"> <div className="shareHeader">
<span className="title"> <span className="title">
{variables.getMessage('modals.main.settings.reminder.title')} {variables.getMessage('modals.main.settings.reminder.title')}
@ -60,24 +61,6 @@ class Tabs extends PureComponent {
</div> </div>
); );
let settingsActive = '';
let addonsActive = '';
let marketplaceActive = '';
switch (this.props.current) {
case 'settings':
settingsActive = ' navbar-item-active';
break;
case 'addons':
addonsActive = ' navbar-item-active';
break;
case 'marketplace':
marketplaceActive = ' navbar-item-active';
break;
default:
break;
}
return ( return (
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}> <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
<ul className="sidebar"> <ul className="sidebar">
@ -96,21 +79,31 @@ class Tabs extends PureComponent {
<ErrorBoundary> <ErrorBoundary>
<div className="modalNavbar"> <div className="modalNavbar">
<button <button
className={'navbar-item' + settingsActive} className={
this.props.current === 'settings'
? 'navbar-item navbar-item-active'
: 'navbar-item'
}
onClick={() => this.props.changeTab('settings')} onClick={() => this.props.changeTab('settings')}
> >
<MdSettings /> <MdSettings />
<span> {variables.getMessage('modals.main.navbar.settings')}</span> <span>{variables.getMessage('modals.main.navbar.settings')}</span>
</button> </button>
<button <button
className={'navbar-item' + addonsActive} className={
this.props.current === 'addons' ? 'navbar-item navbar-item-active' : 'navbar-item'
}
onClick={() => this.props.changeTab('addons')} onClick={() => this.props.changeTab('addons')}
> >
<MdOutlineExtension /> <MdOutlineExtension />
<span>{variables.getMessage('modals.main.navbar.addons')}</span> <span>{variables.getMessage('modals.main.navbar.addons')}</span>
</button> </button>
<button <button
className={'navbar-item' + marketplaceActive} className={
this.props.current === 'marketplace'
? 'navbar-item navbar-item-active'
: 'navbar-item'
}
onClick={() => this.props.changeTab('marketplace')} onClick={() => this.props.changeTab('marketplace')}
> >
<MdOutlineShoppingBasket /> <MdOutlineShoppingBasket />

View File

@ -76,7 +76,11 @@ class Maximise extends PureComponent {
<Tooltip <Tooltip
title={variables.getMessage('modals.main.settings.sections.background.buttons.view')} title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
> >
<button style={{ fontSize: this.props.fontSize }} onClick={this.maximise} aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}> <button
style={{ fontSize: this.props.fontSize }}
onClick={this.maximise}
aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
>
<MdCropFree className="topicons" /> <MdCropFree className="topicons" />
</button> </button>
</Tooltip> </Tooltip>

View File

@ -25,28 +25,40 @@ export default class Quote extends PureComponent {
buttons = { buttons = {
share: ( share: (
<Tooltip title={variables.getMessage('widgets.quote.share')}> <Tooltip title={variables.getMessage('widgets.quote.share')}>
<button onClick={() => this.setState({ shareModal: true })} aria-label={variables.getMessage('widgets.quote.share')}> <button
onClick={() => this.setState({ shareModal: true })}
aria-label={variables.getMessage('widgets.quote.share')}
>
<MdIosShare className="copyButton" /> <MdIosShare className="copyButton" />
</button> </button>
</Tooltip> </Tooltip>
), ),
copy: ( copy: (
<Tooltip title={variables.getMessage('widgets.quote.copy')}> <Tooltip title={variables.getMessage('widgets.quote.copy')}>
<button onClick={() => this.copyQuote()} aria-label={variables.getMessage('widgets.quote.copy')}> <button
onClick={() => this.copyQuote()}
aria-label={variables.getMessage('widgets.quote.copy')}
>
<MdContentCopy className="copyButton" /> <MdContentCopy className="copyButton" />
</button> </button>
</Tooltip> </Tooltip>
), ),
unfavourited: ( unfavourited: (
<Tooltip title={variables.getMessage('widgets.quote.favourite')}> <Tooltip title={variables.getMessage('widgets.quote.favourite')}>
<button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.favourite')}> <button
onClick={() => this.favourite()}
aria-label={variables.getMessage('widgets.quote.favourite')}
>
<MdStarBorder className="copyButton" /> <MdStarBorder className="copyButton" />
</button> </button>
</Tooltip> </Tooltip>
), ),
favourited: ( favourited: (
<Tooltip title={variables.getMessage('widgets.quote.unfavourite')}> <Tooltip title={variables.getMessage('widgets.quote.unfavourite')}>
<button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.unfavourite')}> <button
onClick={() => this.favourite()}
aria-label={variables.getMessage('widgets.quote.unfavourite')}
>
<MdStar className="copyButton" /> <MdStar className="copyButton" />
</button> </button>
</Tooltip> </Tooltip>

View File

@ -100,7 +100,11 @@ export default class Search extends PureComponent {
if (localStorage.getItem('voiceSearch') === 'true') { if (localStorage.getItem('voiceSearch') === 'true') {
microphone = ( microphone = (
<button onClick={this.startSpeechRecognition} ref={this.micIcon} aria-label="Microphone Search"> <button
onClick={this.startSpeechRecognition}
ref={this.micIcon}
aria-label="Microphone Search"
>
<MdMic className="micIcon" /> <MdMic className="micIcon" />
</button> </button>
); );

View File

@ -52,8 +52,8 @@ function Expanded({ state, weatherType, variables }) {
{state.weather.wind_speed} {state.weather.wind_speed}
<span className="minmax">m/s</span>{' '} <span className="minmax">m/s</span>{' '}
{enabled('windDirection') ? ( {enabled('windDirection') ? (
<div style={{ fontSize: "25px", display: "grid" }}> <div style={{ fontSize: '25px', display: 'grid' }}>
<WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} /> <WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
</div> </div>
) : null} ) : null}
</span> </span>

View File

@ -41,17 +41,17 @@ export function initTranslations(locale) {
} }
export const translations = { export const translations = {
de_DE, de_DE,
en_GB, en_GB,
en_US, en_US,
es, es,
es_419, es_419,
fr, fr,
nl, nl,
no, no,
ru, ru,
zh_CN, zh_CN,
id_ID, id_ID,
tr_TR, tr_TR,
pt_BR, pt_BR,
} };

View File

@ -119,15 +119,14 @@ body {
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
.statsTopBar { .statsTopBar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
button { button {
margin-bottom: 15px; margin-bottom: 15px;
flex-flow: row !important; flex-flow: row !important;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
} }

View File

@ -95,7 +95,7 @@ export default defineConfig({
components: path.resolve(__dirname, './src/components'), components: path.resolve(__dirname, './src/components'),
modules: path.resolve(__dirname, './src/modules'), modules: path.resolve(__dirname, './src/modules'),
translations: path.resolve(__dirname, './src/translations'), translations: path.resolve(__dirname, './src/translations'),
scss: path.resolve(__dirname, './src/scss') scss: path.resolve(__dirname, './src/scss'),
}, },
}, },
}); });