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 isAdmin = useAdmin()
const isCreator = user?.id === contract.creatorId const isCreator = user?.id === contract.creatorId
const isUnlisted = contract.visibility === 'unlisted' const isUnlisted = contract.visibility === 'unlisted'
const wasUnlistedByCreator = const wasUnlistedByCreator = contract.unlistedById
contract.unlistedById && contract.unlistedById === contract.creatorId ? contract.unlistedById === contract.creatorId
: true
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a') 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>[ADMIN] Featured</td>
<td> <td>
<ShortToggle <ShortToggle
enabled={featured} on={featured}
setEnabled={setFeatured} setOn={setFeatured}
onChange={onFeaturedToggle} onChange={onFeaturedToggle}
/> />
</td> </td>
</tr> </tr>
)} )}
{user && {user && (
(isAdmin || <tr>
(isCreator && <td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
(isUnlisted ? wasUnlistedByCreator : true))) && ( <td>
<tr> <ShortToggle
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td> disabled={
<td> isUnlisted
<ShortToggle ? !(isAdmin || (isCreator && wasUnlistedByCreator))
enabled={contract.visibility === 'unlisted'} : !(isCreator || isAdmin)
setEnabled={(b) => }
updateContract(id, { on={contract.visibility === 'unlisted'}
visibility: b ? 'unlisted' : 'public', setOn={(b) =>
unlistedById: b ? user.id : '', updateContract(id, {
}) visibility: b ? 'unlisted' : 'public',
} unlistedById: b ? user.id : '',
/> })
</td> }
</tr> />
)} </td>
</tr>
)}
</tbody> </tbody>
</table> </table>

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

@ -3,22 +3,27 @@ import { Switch } from '@headlessui/react'
import clsx from 'clsx' import clsx from 'clsx'
export default function ShortToggle(props: { export default function ShortToggle(props: {
enabled: boolean on: boolean
setEnabled: (enabled: boolean) => void setOn: (enabled: boolean) => void
disabled?: boolean
onChange?: (enabled: boolean) => void onChange?: (enabled: boolean) => void
}) { }) {
const { enabled, setEnabled } = props const { on, setOn, disabled } = props
return ( return (
<Switch <Switch
checked={enabled} disabled={disabled}
checked={on}
onChange={(e: boolean) => { onChange={(e: boolean) => {
setEnabled(e) setOn(e)
if (props.onChange) { if (props.onChange) {
props.onChange(e) 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 className="sr-only">Use setting</span>
<span <span
@ -28,14 +33,14 @@ export default function ShortToggle(props: {
<span <span
aria-hidden="true" aria-hidden="true"
className={clsx( 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' 'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
)} )}
/> />
<span <span
aria-hidden="true" aria-hidden="true"
className={clsx( 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' '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'
)} )}
/> />