aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-16 12:23:12 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@ -12,6 +12,7 @@
"@mui/joy": "5.0.0-alpha.84",
"@reduxjs/toolkit": "^1.8.1",
"axios": "^0.27.2",
"classnames": "^2.3.2",
"copy-to-clipboard": "^3.3.2",
"dayjs": "^1.11.3",
"i18next": "^23.2.3",

7
web/pnpm-lock.yaml generated
View File

@ -20,6 +20,9 @@ dependencies:
axios:
specifier: ^0.27.2
version: 0.27.2
classnames:
specifier: ^2.3.2
version: 2.3.2
copy-to-clipboard:
specifier: ^3.3.2
version: 3.3.2
@ -1263,6 +1266,10 @@ packages:
fsevents: 2.3.2
dev: false
/classnames@2.3.2:
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
dev: false
/clsx@1.2.1:
resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
engines: {node: '>=6'}

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>