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-21 22:06:06 +08:00
parent b4e23fc8a0
commit db2aebcf57
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy"; import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
import { isUndefined } from "lodash-es"; import { isUndefined } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -127,7 +127,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
}); });
}; };
const handleOpenGraphMetadataDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleOpenGraphMetadataDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setPartialState({ setPartialState({
shortcutCreate: Object.assign(state.shortcutCreate, { shortcutCreate: Object.assign(state.shortcutCreate, {
openGraphMetadata: { openGraphMetadata: {
@ -225,7 +225,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
</p> </p>
</div> </div>
<Divider className="text-gray-500">Optional</Divider> <Divider className="text-gray-500">Optional</Divider>
<div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-2"> <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-3">
<div <div
className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${ className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
showDescriptionAndTag ? "bg-gray-100" : "" showDescriptionAndTag ? "bg-gray-100" : ""
@ -240,18 +240,26 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
{showDescriptionAndTag && ( {showDescriptionAndTag && (
<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">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="Something to describe the url"
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"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Tags</span> <span className="mb-2 text-sm">Tags</span>
<Input className="w-full" type="text" placeholder="Separated by spaces" value={tag} onChange={handleTagsInputChange} /> <Input
className="w-full"
type="text"
placeholder="Separated by spaces"
size="sm"
value={tag}
onChange={handleTagsInputChange}
/>
</div> </div>
</div> </div>
)} )}
@ -263,7 +271,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
}`} }`}
onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)} onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)}
> >
<span className="text-sm">Social media metadata</span> <span className="text-sm flex flex-row justify-start items-center">
Social media metadata
<Icon.Sparkles className="ml-1 w-4 h-auto text-blue-600" />
</span>
<button className="w-7 h-7 p-1 rounded-md"> <button className="w-7 h-7 p-1 rounded-md">
<Icon.ChevronDown className={`w-5 h-auto text-gray-500 ${showOpenGraphMetadata ? "transform rotate-180" : ""}`} /> <Icon.ChevronDown className={`w-5 h-auto text-gray-500 ${showOpenGraphMetadata ? "transform rotate-180" : ""}`} />
</button> </button>
@ -271,31 +282,34 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
{showOpenGraphMetadata && ( {showOpenGraphMetadata && (
<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">Image URL</span> <span className="mb-2 text-sm">Image URL</span>
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="The image url" placeholder="The image url"
size="sm"
value={state.shortcutCreate.openGraphMetadata.image} value={state.shortcutCreate.openGraphMetadata.image}
onChange={handleOpenGraphMetadataImageChange} onChange={handleOpenGraphMetadataImageChange}
/> />
</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">Title</span> <span className="mb-2 text-sm">Title</span>
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="Slash - A bookmarking and url shortener" placeholder="Slash - A bookmarking and url shortener"
size="sm"
value={state.shortcutCreate.openGraphMetadata.title} value={state.shortcutCreate.openGraphMetadata.title}
onChange={handleOpenGraphMetadataTitleChange} onChange={handleOpenGraphMetadataTitleChange}
/> />
</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">Description</span> <span className="mb-2 text-sm">Description</span>
<Input <Textarea
className="w-full" className="w-full"
type="text"
placeholder="A bookmarking and url shortener, save and share your links very easily." placeholder="A bookmarking and url shortener, save and share your links very easily."
size="sm"
maxRows={3}
value={state.shortcutCreate.openGraphMetadata.description} value={state.shortcutCreate.openGraphMetadata.description}
onChange={handleOpenGraphMetadataDescriptionChange} onChange={handleOpenGraphMetadataDescriptionChange}
/> />