aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-16 04:13:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update visibility checkbox

Browse Source
This commit is contained in:
Steven 2024-08-31 22:54:30 +08:00
parent a49f87c55f
commit f276c979fa
4 changed files with 30 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/locales/en.json
View File

@ -42,7 +42,7 @@
},
"public": {
"self": "Public",
"description": "Visible to everyone on the internet"
"description": "Public on the internet"
}
}
},

2
frontend/locales/zh.json
View File

@ -39,7 +39,7 @@
},
"public": {
"self": "公开的",
"description": "对任何人可见"
"description": "公开至互联网"
}
}
},

35
frontend/web/src/components/CreateCollectionDrawer.tsx
View File

@ -1,4 +1,4 @@
import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
import { Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Drawer, Input, ModalClose } from "@mui/joy";
import { isUndefined } from "lodash-es";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
@ -107,14 +107,6 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
});
};
const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
collectionCreate: Object.assign(state.collectionCreate, {
visibility: e.target.value,
}),
});
};
const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
collectionCreate: Object.assign(state.collectionCreate, {
@ -209,18 +201,21 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
</div>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Visibility</span>
<div className="w-full flex flex-row justify-start items-center text-base">
<RadioGroup orientation="horizontal" value={state.collectionCreate.visibility} onChange={handleVisibilityInputChange}>
<Radio value={Visibility.WORKSPACE} label={t(`shortcut.visibility.workspace.self`)} />
<Radio value={Visibility.PUBLIC} label={t(`shortcut.visibility.public.self`)} />
</RadioGroup>
<Checkbox
className="w-full dark:text-gray-400"
checked={state.collectionCreate.visibility === Visibility.PUBLIC}
label={t(`shortcut.visibility.public.description`)}
onChange={(e) =>
setPartialState({
collectionCreate: Object.assign(state.collectionCreate, {
visibility: e.target.checked ? Visibility.PUBLIC : Visibility.WORKSPACE,
}),
})
}
/>
</div>
<p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 dark:bg-zinc-800 dark:border-zinc-700 dark:text-gray-400 px-2 py-1 rounded-md">
{t(`shortcut.visibility.${state.collectionCreate.visibility.toLowerCase()}.description`)}
</p>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<Divider className="text-gray-500" />
<div className="w-full flex flex-col justify-start items-start mt-3 mb-3">
<p className="mb-2">
<span>Shortcuts</span>
<span className="opacity-60">({selectedShortcuts.length})</span>

44
frontend/web/src/components/CreateShortcutDrawer.tsx
View File

@ -1,16 +1,4 @@
import {
Button,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Drawer,
Input,
ModalClose,
Radio,
RadioGroup,
Textarea,
} from "@mui/joy";
import { Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Drawer, Input, ModalClose, Textarea } from "@mui/joy";
import classnames from "classnames";
import { isUndefined, uniq } from "lodash-es";
import { useEffect, useState } from "react";
@ -124,14 +112,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
});
};
const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
shortcutCreate: Object.assign(state.shortcutCreate, {
visibility: e.target.value,
}),
});
};
const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
shortcutCreate: Object.assign(state.shortcutCreate, {
@ -291,16 +271,18 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
)}
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Visibility</span>
<div className="w-full flex flex-row justify-start items-center text-base">
<RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
<Radio value={Visibility.WORKSPACE} label={t(`shortcut.visibility.workspace.self`)} />
<Radio value={Visibility.PUBLIC} label={t(`shortcut.visibility.public.self`)} />
</RadioGroup>
</div>
<p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 dark:bg-zinc-800 dark:border-zinc-700 dark:text-gray-400 px-2 py-1 rounded-md">
{t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
</p>
<Checkbox
className="w-full dark:text-gray-400"
checked={state.shortcutCreate.visibility === Visibility.PUBLIC}
label={t(`shortcut.visibility.public.description`)}
onChange={(e) =>
setPartialState({
shortcutCreate: Object.assign(state.shortcutCreate, {
visibility: e.target.checked ? Visibility.PUBLIC : Visibility.WORKSPACE,
}),
})
}
/>
</div>
<Divider className="text-gray-500">More</Divider>
<div className="w-full flex flex-col justify-start items-start border rounded-md mt-3 overflow-hidden dark:border-zinc-800">