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

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

@ -35,6 +35,10 @@ export default function Type(props) {
const [selectedTimeZone, setSelectedTimeZone] = useState(''); const [selectedTimeZone, setSelectedTimeZone] = useState('');
function toggleTimeOptions() {
setIsTimeOptionsOpen(!isTimeOptionsOpen);
}
useEffect(() => { useEffect(() => {
// Setting timezone only client-side // Setting timezone only client-side
setSelectedTimeZone(dayjs.tz.guess()) setSelectedTimeZone(dayjs.tz.guess())
@ -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,9 +170,17 @@ 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}
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
</button>
{isTimeOptionsOpen &&
<div className="w-full rounded shadow border bg-white px-4 py-2">
<div className="flex mb-4">
<div className="w-1/2 font-medium">Time Options</div>
<div className="w-1/2">
<Switch.Group as="div" className="flex items-center justify-end">
<Switch.Label as="span" className="mr-3"> <Switch.Label as="span" className="mr-3">
<span className="text-sm text-gray-500">am/pm</span> <span className="text-sm text-gray-500">am/pm</span>
</Switch.Label> </Switch.Label>
@ -179,15 +189,15 @@ export default function Type(props) {
onChange={setIs24h} onChange={setIs24h}
className={classNames( className={classNames(
is24h ? 'bg-blue-600' : 'bg-gray-200', is24h ? 'bg-blue-600' : 'bg-gray-200',
'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' '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'
)} )}
> >
<span className="sr-only">Use setting</span> <span className="sr-only">Use setting</span>
<span <span
aria-hidden="true" aria-hidden="true"
className={classNames( className={classNames(
is24h ? 'translate-x-5' : 'translate-x-0', is24h ? 'translate-x-3' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200' 'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
)} )}
/> />
</Switch> </Switch>
@ -195,10 +205,11 @@ export default function Type(props) {
<span className="text-sm text-gray-500">24h</span> <span className="text-sm text-gray-500">24h</span>
</Switch.Label> </Switch.Label>
</Switch.Group> </Switch.Group>
</p> </div>
<p className="mt-1 text-gray-500"> </div>
<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" /> <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" />
</p> </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')}>