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

chore: update create shortcut dialog

Browse Source
This commit is contained in:
Steven 2023-07-27 23:24:13 +08:00
parent ce5c4b65d3
commit 49cc1e9755
1 changed files with 16 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/CreateShortcutDialog.tsx
View File

@ -37,7 +37,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
}, },
}, },
}); });
const [showDescriptionAndTag, setShowDescriptionAndTag] = useState<boolean>(false); const [showAdditionalFields, setShowAdditionalFields] = useState<boolean>(false);
const [showOpenGraphMetadata, setShowOpenGraphMetadata] = useState<boolean>(false); const [showOpenGraphMetadata, setShowOpenGraphMetadata] = useState<boolean>(false);
const [tag, setTag] = useState<string>(""); const [tag, setTag] = useState<string>("");
const requestState = useLoading(false); const requestState = useLoading(false);
@ -185,9 +185,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
</div> </div>
<div className="overflow-y-auto overflow-x-hidden"> <div className="overflow-y-auto overflow-x-hidden">
<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"> <span className="mb-2">Name</span>
Name <span className="text-red-600">*</span>
</span>
<div className="relative w-full"> <div className="relative w-full">
<Input <Input
className="w-full" className="w-full"
@ -199,21 +197,21 @@ const CreateShortcutDialog: 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"> <span className="mb-2">Destination URL</span>
Destination URL <span className="text-red-600">*</span>
</span>
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="e.g. https://github.com/boojack/slash" placeholder="https://github.com/boojack/slash"
value={state.shortcutCreate.link} value={state.shortcutCreate.link}
onChange={handleLinkInputChange} onChange={handleLinkInputChange}
/> />
</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"> <span className="mb-2">Tags</span>
Visibility <span className="text-red-600">*</span> <Input className="w-full" type="text" placeholder="github slash" value={tag} onChange={handleTagsInputChange} />
</span> </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"> <div className="w-full flex flex-row justify-start items-center text-base">
<RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}> <RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
{visibilities.map((visibility) => ( {visibilities.map((visibility) => (
@ -230,39 +228,28 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<div <div
className={classnames( className={classnames(
"w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100", "w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100",
showDescriptionAndTag ? "bg-gray-100 border-b" : "" showAdditionalFields ? "bg-gray-100 border-b" : ""
)} )}
onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)} onClick={() => setShowAdditionalFields(!showAdditionalFields)}
> >
<span className="text-sm">Description and tags</span> <span className="text-sm">Additional fields</span>
<button className="w-7 h-7 p-1 rounded-md"> <button className="w-7 h-7 p-1 rounded-md">
<Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showDescriptionAndTag ? "transform rotate-180" : "")} /> <Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showAdditionalFields ? "transform rotate-180" : "")} />
</button> </button>
</div> </div>
{showDescriptionAndTag && ( {showAdditionalFields && (
<div className="w-full px-2 py-1"> <div className="w-full px-2 py-1">
<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 text-sm">Description</span> <span className="mb-2 text-sm">Description</span>
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="Something to describe the url" placeholder="Github repo for slash"
size="sm" size="sm"
value={state.shortcutCreate.description} value={state.shortcutCreate.description}
onChange={handleDescriptionInputChange} onChange={handleDescriptionInputChange}
/> />
</div> </div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2 text-sm">Tags</span>
<Input
className="w-full"
type="text"
placeholder="Separated by spaces"
size="sm"
value={tag}
onChange={handleTagsInputChange}
/>
</div>
</div> </div>
)} )}
</div> </div>
@ -288,7 +275,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="The image url" placeholder="https://the.link.to/the/image.png"
size="sm" size="sm"
value={state.shortcutCreate.openGraphMetadata.image} value={state.shortcutCreate.openGraphMetadata.image}
onChange={handleOpenGraphMetadataImageChange} onChange={handleOpenGraphMetadataImageChange}