mirror of https://github.com/mue/mue.git
refactor(settings): Continue moving to feature focused organisation
This commit is contained in:
parent
ebe0784e8d
commit
8bf70eff81
|
@ -1,100 +0,0 @@
|
||||||
import variables from 'config/variables';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
|
|
||||||
import { Checkbox, Switch, Text } from 'components/Form/Settings';
|
|
||||||
|
|
||||||
const GreetingSettings = () => {
|
|
||||||
const [birthday, setBirthday] = useState(
|
|
||||||
new Date(localStorage.getItem('birthday')) || new Date(),
|
|
||||||
);
|
|
||||||
|
|
||||||
const changeDate = (e) => {
|
|
||||||
const newDate = e.target.value ? new Date(e.target.value) : new Date();
|
|
||||||
localStorage.setItem('birthday', newDate);
|
|
||||||
setBirthday(newDate);
|
|
||||||
};
|
|
||||||
|
|
||||||
const GREETING_SECTION = 'modals.main.settings.sections.greeting';
|
|
||||||
|
|
||||||
const AdditionalOptions = () => {
|
|
||||||
return (
|
|
||||||
<Row>
|
|
||||||
<Content
|
|
||||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
|
||||||
subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
|
|
||||||
/>
|
|
||||||
<Action>
|
|
||||||
<Checkbox
|
|
||||||
name="events"
|
|
||||||
text={variables.getMessage(`${GREETING_SECTION}.events`)}
|
|
||||||
category="greeting"
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
name="defaultGreetingMessage"
|
|
||||||
text={variables.getMessage(`${GREETING_SECTION}.default`)}
|
|
||||||
category="greeting"
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
title={variables.getMessage(`${GREETING_SECTION}.name`)}
|
|
||||||
name="greetingName"
|
|
||||||
category="greeting"
|
|
||||||
/>
|
|
||||||
</Action>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const BirthdayOptions = () => {
|
|
||||||
return (
|
|
||||||
<Row final={true}>
|
|
||||||
<Content
|
|
||||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
|
||||||
subtitle={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.greeting.birthday_subtitle',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Action>
|
|
||||||
<Switch
|
|
||||||
name="birthdayenabled"
|
|
||||||
text={variables.getMessage('modals.main.settings.enabled')}
|
|
||||||
category="greeting"
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
name="birthdayage"
|
|
||||||
text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
|
|
||||||
category="greeting"
|
|
||||||
/>
|
|
||||||
<p style={{ marginRight: 'auto' }}>
|
|
||||||
{variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
|
|
||||||
</p>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
onChange={changeDate}
|
|
||||||
value={birthday.toISOString().substring(0, 10)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</Action>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header
|
|
||||||
title={variables.getMessage(`${GREETING_SECTION}.title`)}
|
|
||||||
setting="greeting"
|
|
||||||
category="greeting"
|
|
||||||
element=".greeting"
|
|
||||||
zoomSetting="zoomGreeting"
|
|
||||||
visibilityToggle={true}
|
|
||||||
/>
|
|
||||||
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
|
|
||||||
<AdditionalOptions />
|
|
||||||
{BirthdayOptions()}
|
|
||||||
</PreferencesWrapper>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GreetingSettings;
|
|
|
@ -1,172 +0,0 @@
|
||||||
import variables from 'config/variables';
|
|
||||||
import { PureComponent } from 'react';
|
|
||||||
import { toast } from 'react-toastify';
|
|
||||||
import { MenuItem, TextField } from '@mui/material';
|
|
||||||
|
|
||||||
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
|
|
||||||
import { Dropdown, Checkbox } from 'components/Form/Settings';
|
|
||||||
|
|
||||||
import EventBus from 'utils/eventbus';
|
|
||||||
|
|
||||||
import searchEngines from 'features/widgets/search/search_engines.json';
|
|
||||||
|
|
||||||
export default class SearchSettings extends PureComponent {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.state = {
|
|
||||||
customEnabled: false,
|
|
||||||
customValue: localStorage.getItem('customSearchEngine') || '',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
resetSearch() {
|
|
||||||
localStorage.removeItem('customSearchEngine');
|
|
||||||
this.setState({
|
|
||||||
customValue: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
toast(variables.getMessage('toasts.reset'));
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
if (localStorage.getItem('searchEngine') === 'custom') {
|
|
||||||
this.setState({
|
|
||||||
customEnabled: true,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
localStorage.removeItem('customSearchEngine');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
if (this.state.customEnabled === true && this.state.customValue !== '') {
|
|
||||||
localStorage.setItem('customSearchEngine', this.state.customValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
EventBus.emit('refresh', 'search');
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchEngine(input) {
|
|
||||||
if (input === 'custom') {
|
|
||||||
this.setState({
|
|
||||||
customEnabled: true,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
customEnabled: false,
|
|
||||||
});
|
|
||||||
localStorage.setItem('searchEngine', input);
|
|
||||||
}
|
|
||||||
|
|
||||||
EventBus.emit('refresh', 'search');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const SEARCH_SECTION = 'modals.main.settings.sections.search';
|
|
||||||
|
|
||||||
const AdditionalOptions = () => {
|
|
||||||
return (
|
|
||||||
<Row>
|
|
||||||
<Content
|
|
||||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
|
||||||
subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
|
|
||||||
/>
|
|
||||||
<Action>
|
|
||||||
{/* not supported on firefox */}
|
|
||||||
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
|
|
||||||
<Checkbox
|
|
||||||
name="voiceSearch"
|
|
||||||
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
|
|
||||||
category="search"
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<Checkbox
|
|
||||||
name="searchDropdown"
|
|
||||||
text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
|
|
||||||
category="search"
|
|
||||||
element=".other"
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
name="searchFocus"
|
|
||||||
text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
|
|
||||||
category="search"
|
|
||||||
element=".other"
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
name="autocomplete"
|
|
||||||
text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
|
|
||||||
category="search"
|
|
||||||
/>
|
|
||||||
</Action>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const SearchEngineSelection = () => {
|
|
||||||
return (
|
|
||||||
<Row final={!this.state.customEnabled}>
|
|
||||||
<Content
|
|
||||||
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
|
|
||||||
subtitle={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Action>
|
|
||||||
<Dropdown
|
|
||||||
name="searchEngine"
|
|
||||||
onChange={(value) => this.setSearchEngine(value)}
|
|
||||||
items={[
|
|
||||||
searchEngines.map((engine) => ({
|
|
||||||
value: engine.settingsName,
|
|
||||||
text: engine.name,
|
|
||||||
})),
|
|
||||||
{
|
|
||||||
value: 'custom',
|
|
||||||
text: variables.getMessage(`${SEARCH_SECTION}.custom`),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Action>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CustomOptions = () => {
|
|
||||||
return (
|
|
||||||
<Row final={true}>
|
|
||||||
<Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
|
|
||||||
<Action>
|
|
||||||
<TextField
|
|
||||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
|
||||||
value={this.state.customValue}
|
|
||||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
|
||||||
varient="outlined"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
/>
|
|
||||||
<p style={{ marginTop: '0px' }}>
|
|
||||||
<span className="link" onClick={() => this.resetSearch()}>
|
|
||||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</Action>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header
|
|
||||||
title={variables.getMessage(`${SEARCH_SECTION}.title`)}
|
|
||||||
setting="searchBar"
|
|
||||||
category="widgets"
|
|
||||||
visibilityToggle={true}
|
|
||||||
/>
|
|
||||||
<PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
|
|
||||||
<AdditionalOptions />
|
|
||||||
<SearchEngineSelection />
|
|
||||||
{this.state.customEnabled && CustomOptions()}
|
|
||||||
</PreferencesWrapper>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -4,11 +4,11 @@ import { memo } from 'react';
|
||||||
import Tabs from './backend/Tabs';
|
import Tabs from './backend/Tabs';
|
||||||
|
|
||||||
import Overview from '../settings/sections/Overview';
|
import Overview from '../settings/sections/Overview';
|
||||||
import Navbar from '../settings/sections/Navbar';
|
import { NavbarOptions } from 'features/widgets/navbar';
|
||||||
import { GreetingOptions } from 'features/widgets/greeting';
|
import { GreetingOptions } from 'features/widgets/greeting';
|
||||||
import Time from '../settings/sections/Time';
|
import { TimeOptions } from 'features/widgets/time';
|
||||||
import { QuickLinksOptions } from 'features/widgets/quicklinks';
|
import { QuickLinksOptions } from 'features/widgets/quicklinks';
|
||||||
import Quote from '../settings/sections/Quote';
|
import { QuoteOptions } from 'features/widgets/quote';
|
||||||
import Date from '../settings/sections/Date';
|
import Date from '../settings/sections/Date';
|
||||||
import { MessageOptions } from 'features/widgets/message';
|
import { MessageOptions } from 'features/widgets/message';
|
||||||
import Background from '../settings/sections/background/Background';
|
import Background from '../settings/sections/background/Background';
|
||||||
|
@ -24,22 +24,58 @@ import About from '../settings/sections/About';
|
||||||
|
|
||||||
const sections = [
|
const sections = [
|
||||||
{ label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
|
{ label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
|
||||||
{ label: 'modals.main.settings.sections.appearance.navbar.title', name: 'navbar', component: Navbar },
|
{
|
||||||
{ label: 'modals.main.settings.sections.greeting.title', name: 'greeting', component: GreetingOptions },
|
label: 'modals.main.settings.sections.appearance.navbar.title',
|
||||||
{ label: 'modals.main.settings.sections.time.title', name: 'time', component: Time },
|
name: 'navbar',
|
||||||
{ label: 'modals.main.settings.sections.quicklinks.title', name: 'quicklinks', component: QuickLinksOptions },
|
component: NavbarOptions,
|
||||||
{ label: 'modals.main.settings.sections.quote.title', name: 'quote', component: Quote },
|
},
|
||||||
|
{
|
||||||
|
label: 'modals.main.settings.sections.greeting.title',
|
||||||
|
name: 'greeting',
|
||||||
|
component: GreetingOptions,
|
||||||
|
},
|
||||||
|
{ label: 'modals.main.settings.sections.time.title', name: 'time', component: TimeOptions },
|
||||||
|
{
|
||||||
|
label: 'modals.main.settings.sections.quicklinks.title',
|
||||||
|
name: 'quicklinks',
|
||||||
|
component: QuickLinksOptions,
|
||||||
|
},
|
||||||
|
{ label: 'modals.main.settings.sections.quote.title', name: 'quote', component: QuoteOptions },
|
||||||
{ label: 'modals.main.settings.sections.date.title', name: 'date', component: Date },
|
{ label: 'modals.main.settings.sections.date.title', name: 'date', component: Date },
|
||||||
{ label: 'modals.main.settings.sections.message.title', name: 'message', component: MessageOptions },
|
{
|
||||||
{ label: 'modals.main.settings.sections.background.title', name: 'background', component: Background },
|
label: 'modals.main.settings.sections.message.title',
|
||||||
|
name: 'message',
|
||||||
|
component: MessageOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'modals.main.settings.sections.background.title',
|
||||||
|
name: 'background',
|
||||||
|
component: Background,
|
||||||
|
},
|
||||||
{ label: 'modals.main.settings.sections.search.title', name: 'search', component: SearchOptions },
|
{ label: 'modals.main.settings.sections.search.title', name: 'search', component: SearchOptions },
|
||||||
{ label: 'modals.main.settings.sections.weather.title', name: 'weather', component: WeatherOptions },
|
{
|
||||||
{ label: 'modals.main.settings.sections.appearance.title', name: 'appearance', component: Appearance },
|
label: 'modals.main.settings.sections.weather.title',
|
||||||
|
name: 'weather',
|
||||||
|
component: WeatherOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'modals.main.settings.sections.appearance.title',
|
||||||
|
name: 'appearance',
|
||||||
|
component: Appearance,
|
||||||
|
},
|
||||||
{ label: 'modals.main.settings.sections.language.title', name: 'language', component: Language },
|
{ label: 'modals.main.settings.sections.language.title', name: 'language', component: Language },
|
||||||
{ label: 'modals.main.settings.sections.advanced.title', name: 'advanced', component: Advanced },
|
{ label: 'modals.main.settings.sections.advanced.title', name: 'advanced', component: Advanced },
|
||||||
{ label: 'modals.main.settings.sections.stats.title', name: 'stats', component: Stats },
|
{ label: 'modals.main.settings.sections.stats.title', name: 'stats', component: Stats },
|
||||||
{ label: 'modals.main.settings.sections.experimental.title', name: 'experimental', component: Experimental },
|
{
|
||||||
{ label: 'modals.main.settings.sections.changelog.title', name: 'changelog', component: Changelog },
|
label: 'modals.main.settings.sections.experimental.title',
|
||||||
|
name: 'experimental',
|
||||||
|
component: Experimental,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'modals.main.settings.sections.changelog.title',
|
||||||
|
name: 'changelog',
|
||||||
|
component: Changelog,
|
||||||
|
},
|
||||||
{ label: 'modals.main.settings.sections.about.title', name: 'about', component: About },
|
{ label: 'modals.main.settings.sections.about.title', name: 'about', component: About },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -55,4 +91,4 @@ function Settings(props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Settings);
|
export default memo(Settings);
|
||||||
|
|
|
@ -159,4 +159,4 @@ class Navbar extends PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Navbar;
|
export { Navbar as default, Navbar };
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './options';
|
||||||
|
export * from './Navbar';
|
|
@ -7,16 +7,15 @@ import { MdAddLink } from 'react-icons/md';
|
||||||
|
|
||||||
import { AddModal } from 'components/Elements/AddModal';
|
import { AddModal } from 'components/Elements/AddModal';
|
||||||
|
|
||||||
import Checkbox from '../../../../../components/Form/Settings/Checkbox/Checkbox';
|
import { Checkbox, Dropdown } from 'components/Form';
|
||||||
import Dropdown from '../../../../../components/Form/Settings/Dropdown/Dropdown';
|
|
||||||
import { Button } from 'components/Elements';
|
import { Button } from 'components/Elements';
|
||||||
|
|
||||||
import { Row, Content, Action } from '../../../../../components/Layout/Settings/Item/SettingsItem';
|
import { Row, Content, Action } from 'components/Layout/Settings';
|
||||||
import { Header } from 'components/Layout/Settings';
|
import { Header } from 'components/Layout/Settings';
|
||||||
import { getTitleFromUrl, isValidUrl } from 'utils/links';
|
import { getTitleFromUrl, isValidUrl } from 'utils/links';
|
||||||
import { QuickLinks } from 'features/widgets/quicklinks';
|
import { QuickLinks } from 'features/widgets/quicklinks';
|
||||||
|
|
||||||
function Navbar() {
|
function NavbarOptions() {
|
||||||
const [showRefreshOptions, setShowRefreshOptions] = useState(
|
const [showRefreshOptions, setShowRefreshOptions] = useState(
|
||||||
localStorage.getItem('refresh') === 'true',
|
localStorage.getItem('refresh') === 'true',
|
||||||
);
|
);
|
||||||
|
@ -274,4 +273,6 @@ function Navbar() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Navbar);
|
const MemoizedNavbarOptions = memo(NavbarOptions);
|
||||||
|
|
||||||
|
export { MemoizedNavbarOptions as default, MemoizedNavbarOptions as NavbarOptions };
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './NavbarOptions';
|
|
@ -22,7 +22,7 @@ import EventBus from 'utils/eventbus';
|
||||||
|
|
||||||
import './quote.scss';
|
import './quote.scss';
|
||||||
|
|
||||||
export default class Quote extends PureComponent {
|
class Quote extends PureComponent {
|
||||||
buttons = {
|
buttons = {
|
||||||
share: (
|
share: (
|
||||||
<Tooltip title={variables.getMessage('widgets.quote.share')}>
|
<Tooltip title={variables.getMessage('widgets.quote.share')}>
|
||||||
|
@ -514,3 +514,5 @@ export default class Quote extends PureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { Quote as default, Quote };
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './options';
|
||||||
|
export * from './Quote';
|
|
@ -16,7 +16,7 @@ import { Checkbox, Dropdown } from 'components/Form/Settings';
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import EventBus from 'utils/eventbus';
|
import EventBus from 'utils/eventbus';
|
||||||
|
|
||||||
export default class QuoteSettings extends PureComponent {
|
class QuoteOptions extends PureComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.state = {
|
this.state = {
|
||||||
|
@ -289,3 +289,5 @@ export default class QuoteSettings extends PureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { QuoteOptions as default, QuoteOptions };
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './QuoteOptions';
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './options';
|
|
@ -6,7 +6,7 @@ import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
|
||||||
|
|
||||||
import { MdRefresh } from 'react-icons/md';
|
import { MdRefresh } from 'react-icons/md';
|
||||||
|
|
||||||
const TimeSettings = () => {
|
const TimeOptions = () => {
|
||||||
const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
|
const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
|
||||||
const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
|
const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
|
||||||
const [minuteColour, setMinuteColour] = useState(
|
const [minuteColour, setMinuteColour] = useState(
|
||||||
|
@ -218,4 +218,4 @@ const TimeSettings = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TimeSettings;
|
export { TimeOptions as default, TimeOptions };
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './TimeOptions';
|
|
@ -53,7 +53,7 @@ class WeatherWidget extends PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="weather">
|
<div className="weather">
|
||||||
{this.state.done === false ? <h1>cheese</h1> : <h1>loading finished</h1>}
|
{/*{this.state.done === false ? <h1>cheese</h1> : <h1>loading finished</h1>}*/}
|
||||||
<div className="weatherCore">
|
<div className="weatherCore">
|
||||||
<div className="iconAndTemps">
|
<div className="iconAndTemps">
|
||||||
<div className="weathericon">
|
<div className="weathericon">
|
||||||
|
|
|
@ -77,15 +77,17 @@ function Expanded({ state: { weather, icon }, weatherType, variables }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
anyTooltipEnabled && (
|
anyTooltipEnabled && (
|
||||||
<div className="expanded-info">
|
<div className="weatherExpandedInfo">
|
||||||
{weatherType >= 3 && (
|
{weatherType >= 3 && (
|
||||||
<span className="subtitle">
|
<span className="subtitle">
|
||||||
{variables.getMessage('widgets.weather.extra_information')}
|
{variables.getMessage('widgets.weather.extra_information')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{Object.keys(weatherTypes).map((type) => (
|
<div className="weatherExpandedInfoItems">
|
||||||
<WeatherTooltip key={type} type={type} />
|
{Object.keys(weatherTypes).map((type) => (
|
||||||
))}
|
<WeatherTooltip key={type} type={type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,16 +18,6 @@
|
||||||
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.expanded-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.tooltipTitle {
|
|
||||||
max-height: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.extra-info {
|
.extra-info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -97,12 +87,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.expanded-info {
|
.weatherExpandedInfo {
|
||||||
display: none;
|
padding: 0 25px 25px 25px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weatherExpandedInfoItems {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 15px 25px 25px 25px;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
|
||||||
|
.tooltipTitle {
|
||||||
|
max-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue