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": { "public": {
"self": "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": { "public": {
"self": "公开的", "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 { isUndefined } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; 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>) => { const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({ setPartialState({
collectionCreate: Object.assign(state.collectionCreate, { collectionCreate: Object.assign(state.collectionCreate, {
@ -209,18 +201,21 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
</div> </div>
</div> </div>
<div className="w-full flex flex-col justify-start items-start mb-3"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Visibility</span> <Checkbox
<div className="w-full flex flex-row justify-start items-center text-base"> className="w-full dark:text-gray-400"
<RadioGroup orientation="horizontal" value={state.collectionCreate.visibility} onChange={handleVisibilityInputChange}> checked={state.collectionCreate.visibility === Visibility.PUBLIC}
<Radio value={Visibility.WORKSPACE} label={t(`shortcut.visibility.workspace.self`)} /> label={t(`shortcut.visibility.public.description`)}
<Radio value={Visibility.PUBLIC} label={t(`shortcut.visibility.public.self`)} /> onChange={(e) =>
</RadioGroup> setPartialState({
</div> collectionCreate: Object.assign(state.collectionCreate, {
<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"> visibility: e.target.checked ? Visibility.PUBLIC : Visibility.WORKSPACE,
{t(`shortcut.visibility.${state.collectionCreate.visibility.toLowerCase()}.description`)} }),
</p> })
}
/>
</div> </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"> <p className="mb-2">
<span>Shortcuts</span> <span>Shortcuts</span>
<span className="opacity-60">({selectedShortcuts.length})</span> <span className="opacity-60">({selectedShortcuts.length})</span>

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

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