open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show whether market is unlisted

Browse Source
This commit is contained in:
Ian Philips 2022-10-03 09:36:49 -06:00
parent f92f098f82
commit adb8bc476f
2 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/components/contract/contract-info-dialog.tsx
View File

@ -40,8 +40,9 @@ export function ContractInfoDialog(props: {
const isAdmin = useAdmin()
const isCreator = user?.id === contract.creatorId
const isUnlisted = contract.visibility === 'unlisted'
const wasUnlistedByCreator =
contract.unlistedById && contract.unlistedById === contract.creatorId
const wasUnlistedByCreator = contract.unlistedById
? contract.unlistedById === contract.creatorId
: true
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
@ -173,32 +174,34 @@ export function ContractInfoDialog(props: {
<td>[ADMIN] Featured</td>
<td>
<ShortToggle
enabled={featured}
setEnabled={setFeatured}
on={featured}
setOn={setFeatured}
onChange={onFeaturedToggle}
/>
</td>
</tr>
)}
{user &&
(isAdmin ||
(isCreator &&
(isUnlisted ? wasUnlistedByCreator : true))) && (
<tr>
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
<td>
<ShortToggle
enabled={contract.visibility === 'unlisted'}
setEnabled={(b) =>
updateContract(id, {
visibility: b ? 'unlisted' : 'public',
unlistedById: b ? user.id : '',
})
}
/>
</td>
</tr>
)}
{user && (
<tr>
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
<td>
<ShortToggle
disabled={
isUnlisted
? !(isAdmin || (isCreator && wasUnlistedByCreator))
: !(isCreator || isAdmin)
}
on={contract.visibility === 'unlisted'}
setOn={(b) =>
updateContract(id, {
visibility: b ? 'unlisted' : 'public',
unlistedById: b ? user.id : '',
})
}
/>
</td>
</tr>
)}
</tbody>
</table>

21
web/components/widgets/short-toggle.tsx
View File

@ -3,22 +3,27 @@ import { Switch } from '@headlessui/react'
import clsx from 'clsx'
export default function ShortToggle(props: {
enabled: boolean
setEnabled: (enabled: boolean) => void
on: boolean
setOn: (enabled: boolean) => void
disabled?: boolean
onChange?: (enabled: boolean) => void
}) {
const { enabled, setEnabled } = props
const { on, setOn, disabled } = props
return (
<Switch
checked={enabled}
disabled={disabled}
checked={on}
onChange={(e: boolean) => {
setEnabled(e)
setOn(e)
if (props.onChange) {
props.onChange(e)
}
}}
className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className={clsx(
'group relative inline-flex h-5 w-10 flex-shrink-0 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
!disabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'
)}
>
<span className="sr-only">Use setting</span>
<span
@ -28,14 +33,14 @@ export default function ShortToggle(props: {
<span
aria-hidden="true"
className={clsx(
enabled ? 'bg-indigo-600' : 'bg-gray-200',
on ? 'bg-indigo-600' : 'bg-gray-200',
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
)}
/>
<span
aria-hidden="true"
className={clsx(
enabled ? 'translate-x-5' : 'translate-x-0',
on ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
)}
/>