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 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", "@mui/joy": "5.0.0-alpha.84",
"@reduxjs/toolkit": "^1.8.1", "@reduxjs/toolkit": "^1.8.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"classnames": "^2.3.2",
"copy-to-clipboard": "^3.3.2", "copy-to-clipboard": "^3.3.2",
"dayjs": "^1.11.3", "dayjs": "^1.11.3",
"i18next": "^23.2.3", "i18next": "^23.2.3",

7
web/pnpm-lock.yaml generated
View File

@ -20,6 +20,9 @@ dependencies:
axios: axios:
specifier: ^0.27.2 specifier: ^0.27.2
version: 0.27.2 version: 0.27.2
classnames:
specifier: ^2.3.2
version: 2.3.2
copy-to-clipboard: copy-to-clipboard:
specifier: ^3.3.2 specifier: ^3.3.2
version: 3.3.2 version: 3.3.2
@ -1263,6 +1266,10 @@ packages:
fsevents: 2.3.2 fsevents: 2.3.2
dev: false dev: false
/classnames@2.3.2:
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
dev: false
/clsx@1.2.1: /clsx@1.2.1:
resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
engines: {node: '>=6'} 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 { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
import classnames from "classnames";
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";
@ -227,14 +228,15 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<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-3"> <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={classnames(
showDescriptionAndTag ? "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" : ""
)}
onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)} onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)}
> >
<span className="text-sm">Description and tags</span> <span className="text-sm">Description and tags</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-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> </button>
</div> </div>
{showDescriptionAndTag && ( {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-col justify-start items-start border rounded-md overflow-hidden">
<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 ${
showOpenGraphMetadata ? "bg-gray-100" : "" showOpenGraphMetadata ? "bg-gray-100 border-b" : ""
}`} }`}
onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)} 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" /> <Icon.Sparkles className="ml-1 w-4 h-auto text-blue-600" />
</span> </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-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> </button>
</div> </div>
{showOpenGraphMetadata && ( {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> <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"> <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" /> <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> </div>
</Tooltip> </Tooltip>
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow> <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>