public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI improvements to time settings

pull/166/head
Bailey Pumfleet 2021-05-06 21:44:55 +01:00
parent 60d7351eeb
commit 5be885de19
1 changed files with 44 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
pages/[user]/[type].tsx
View File

@ -34,6 +34,10 @@ export default function Type(props) {
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const [selectedTimeZone, setSelectedTimeZone] = useState(''); const [selectedTimeZone, setSelectedTimeZone] = useState('');
function toggleTimeOptions() {
setIsTimeOptionsOpen(!isTimeOptionsOpen);
}
useEffect(() => { useEffect(() => {
// Setting timezone only client-side // Setting timezone only client-side
@ -45,8 +49,6 @@ export default function Type(props) {
const router = useRouter(); const router = useRouter();
const { user } = router.query; const { user } = router.query;
const toggleTimeOptions = () => { setIsTimeOptionsOpen(!isTimeOptionsOpen); }
// Handle month changes // Handle month changes
const incrementMonth = () => { const incrementMonth = () => {
setSelectedMonth(selectedMonth + 1); setSelectedMonth(selectedMonth + 1);
@ -168,37 +170,46 @@ export default function Type(props) {
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes {props.eventType.length} minutes
</p> </p>
<p className="text-gray-500 mb-1 px-2 py-1 -ml-2"> <button onClick={toggleTimeOptions} className="text-gray-500 mb-1 px-2 py-1 -ml-2">
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1"/> <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
<Switch.Group as="span" className=""> {selectedTimeZone}
<Switch.Label as="span" className="mr-3"> <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
<span className="text-sm text-gray-500">am/pm</span> </button>
</Switch.Label> {isTimeOptionsOpen &&
<Switch <div className="w-full rounded shadow border bg-white px-4 py-2">
checked={is24h} <div className="flex mb-4">
onChange={setIs24h} <div className="w-1/2 font-medium">Time Options</div>
className={classNames( <div className="w-1/2">
is24h ? 'bg-blue-600' : 'bg-gray-200', <Switch.Group as="div" className="flex items-center justify-end">
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500' <Switch.Label as="span" className="mr-3">
)} <span className="text-sm text-gray-500">am/pm</span>
> </Switch.Label>
<span className="sr-only">Use setting</span> <Switch
<span checked={is24h}
aria-hidden="true" onChange={setIs24h}
className={classNames( className={classNames(
is24h ? 'translate-x-5' : 'translate-x-0', is24h ? 'bg-blue-600' : 'bg-gray-200',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200' 'relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)} )}
/> >
</Switch> <span className="sr-only">Use setting</span>
<Switch.Label as="span" className="ml-3"> <span
<span className="text-sm text-gray-500">24h</span> aria-hidden="true"
</Switch.Label> className={classNames(
</Switch.Group> is24h ? 'translate-x-3' : 'translate-x-0',
</p> 'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
<p className="mt-1 text-gray-500"> )}
<TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={({ value }) =>setSelectedTimeZone(value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" /> />
</p> </Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm text-gray-500">24h</span>
</Switch.Label>
</Switch.Group>
</div>
</div>
<TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={({ value }) =>setSelectedTimeZone(value)} className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" />
</div>
}
<p className="text-gray-600 mt-3 mb-8">{props.eventType.description}</p> <p className="text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
</div> </div>
<div className={"mt-8 sm:mt-0 " + (selectedDate ? 'sm:w-1/3 border-r sm:px-4' : 'sm:w-1/2 sm:pl-4')}> <div className={"mt-8 sm:mt-0 " + (selectedDate ? 'sm:w-1/3 border-r sm:px-4' : 'sm:w-1/2 sm:pl-4')}>