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

chore: update shortcut view style

Browse Source
This commit is contained in:
Steven
2023-07-23 01:53:17 +08:00
parent 792b60c480
commit 709118464b
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
import classnames from "classnames";
import { isUndefined } from "lodash-es";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
@ -227,14 +228,15 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<Divider className="text-gray-500">Optional</Divider>
<div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-3">
<div
className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
showDescriptionAndTag ? "bg-gray-100" : ""
}`}
className={classnames(
"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" : ""
)}
onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)}
>
<span className="text-sm">Description and tags</span>
<button className="w-7 h-7 p-1 rounded-md">
<Icon.ChevronDown className={`w-4 h-auto text-gray-500 ${showDescriptionAndTag ? "transform rotate-180" : ""}`} />
<Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showDescriptionAndTag ? "transform rotate-180" : "")} />
</button>
</div>
{showDescriptionAndTag && (
@ -267,7 +269,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden">
<div
className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
showOpenGraphMetadata ? "bg-gray-100" : ""
showOpenGraphMetadata ? "bg-gray-100 border-b" : ""
}`}
onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)}
>
@ -276,7 +278,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<Icon.Sparkles className="ml-1 w-4 h-auto text-blue-600" />
</span>
<button className="w-7 h-7 p-1 rounded-md">
<Icon.ChevronDown className={`w-4 h-auto text-gray-500 ${showDescriptionAndTag ? "transform rotate-180" : ""}`} />
<Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showOpenGraphMetadata ? "transform rotate-180" : "")} />
</button>
</div>
{showOpenGraphMetadata && (

2
web/src/components/ShortcutView.tsx
View File

@ -149,7 +149,7 @@ const ShortcutView = (props: Props) => {
<Tooltip title="Creator" variant="solid" placement="top" arrow>
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
<Icon.User className="w-4 h-auto mr-1" />
{shortcut.creator.nickname}
<span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
</div>
</Tooltip>
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>