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

refactor(time options): Apply new layout to time options

Browse Source
This commit is contained in:
alexsparkes
2024-08-24 00:22:51 +01:00
parent f7bbf04070
commit 030c056aed
2 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Layout/Settings/Hero/Hero.jsx
View File

@@ -8,7 +8,7 @@ import values from 'utils/data/slider_values.json';
const Preview = (props) => {
return (
<div>
<div className="h-full">
<h1 className="py-3 uppercase tracking-tight text-neutral-300">Preview</h1>
<div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded">
{props.children}
@@ -69,7 +69,7 @@ const Controls = (props) => {
};
return (
<div>
<div className="h-full">
<h1 className="py-3 uppercase tracking-tight text-neutral-300">Controls</h1>
<div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded flex flex-col gap-10">
{props.visibilityToggle && <VisibilityToggle />}
@@ -92,7 +92,7 @@ const Controls = (props) => {
const Hero = (props) => {
return (
<div className="grid grid-cols-2 w-full rounded gap-10 auto-rows-[1fr] ">{props.children}</div>
<div className="grid grid-cols-2 w-full rounded gap-10 auto-rows-[1fr]">{props.children}</div>
);
};

42
src/features/time/options/TimeOptions.jsx
View File

@@ -3,14 +3,20 @@ import React, { useState } from 'react';
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
import Clock from 'features/time/Clock';
import { MdRefresh } from 'react-icons/md';
import defaults from './default';
const TimeOptions = () => {
const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || defaults.time.timeType);
const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || defaults.time.hourColour);
const [timeType, setTimeType] = useState(
localStorage.getItem('timeType') || defaults.time.timeType,
);
const [hourColour, setHourColour] = useState(
localStorage.getItem('hourColour') || defaults.time.hourColour,
);
const [minuteColour, setMinuteColour] = useState(
localStorage.getItem('minuteColour') || defaults.time.minuteColour,
);
@@ -142,9 +148,7 @@ const TimeOptions = () => {
<>
<Row>
<Content
title={variables.getMessage(
'settings:sections.time.vertical_clock.change_hour_colour',
)}
title={variables.getMessage('settings:sections.time.vertical_clock.change_hour_colour')}
/>
<Action>
<div className="colourInput">
@@ -167,9 +171,7 @@ const TimeOptions = () => {
</Row>
<Row>
<Content
title={variables.getMessage(
'settings:sections.time.vertical_clock.change_minute_colour',
)}
title={variables.getMessage('settings:sections.time.vertical_clock.change_minute_colour')}
/>
<Action>
<div className="colourInput">
@@ -192,9 +194,7 @@ const TimeOptions = () => {
</Row>
<Row>
<Content
title={variables.getMessage(
'settings:sections.time.vertical_clock.change_second_colour',
)}
title={variables.getMessage('settings:sections.time.vertical_clock.change_second_colour')}
/>
<Action>
<div className="colourInput">
@@ -235,7 +235,7 @@ const TimeOptions = () => {
return (
<>
<Header
{/*<Header
title={variables.getMessage(`${TIME_SECTION}.title`)}
setting="time"
category="clock"
@@ -248,10 +248,24 @@ const TimeOptions = () => {
zoomSetting="zoomClock"
category="clock"
visibilityToggle={true}
>
/>*/}
<Hero>
<Preview>
<Clock />
</Preview>
<Controls
setting="time"
category="clock"
element=".clock-container"
zoomSetting="zoomClock"
visibilityToggle={true}
/>
</Hero>
<h1 className="py-3 uppercase tracking-tight text-neutral-300">options</h1>
<PreferencesWrapper setting="time">
<WidgetType />
{getTimeSettings()}
</PreferencesWrapper>
<PreferencesWrapper setting="time">{getTimeSettings()}</PreferencesWrapper>
</>
);
};