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 detail style

Browse Source
This commit is contained in:
Steven 2023-08-03 22:05:50 +08:00
parent f28d23eae7
commit 87841828ff
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,6 +161,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
id: shortcutId, id: shortcutId,
name: state.shortcutCreate.name, name: state.shortcutCreate.name,
link: state.shortcutCreate.link, link: state.shortcutCreate.link,
title: state.shortcutCreate.title,
description: state.shortcutCreate.description, description: state.shortcutCreate.description,
visibility: state.shortcutCreate.visibility, visibility: state.shortcutCreate.visibility,
tags: tag.split(" "), tags: tag.split(" "),

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

@ -46,8 +46,8 @@ const ShortcutView = (props: Props) => {
className={classNames( className={classNames(
"max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline" "max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
)} )}
target="_blank"
href={shortcutLink} href={shortcutLink}
target="_blank"
> >
<div className="truncate"> <div className="truncate">
<span>{shortcut.title}</span> <span>{shortcut.title}</span>

24
web/src/pages/ShortcutDetail.tsx
View File

@ -1,4 +1,5 @@
import { Tooltip } from "@mui/joy"; import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@ -73,14 +74,25 @@ const ShortcutDetail = () => {
)} )}
</div> </div>
<a <a
className="mt-4 text-2xl flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow" className={classNames(
target="_blank" "group max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
)}
href={shortcutLink} href={shortcutLink}
target="_blank"
> >
<span className="text-gray-400">s/</span> <div className="truncate text-3xl">
<span className="max-w-[14rem] truncate">{shortcut.name}</span> <span>{shortcut.title}</span>
<span className="hidden group-hover:block ml-1 cursor-pointer"> {shortcut.title ? (
<Icon.ExternalLink className="w-4 h-auto text-gray-600" /> <span className="text-gray-400">(s/{shortcut.name})</span>
) : (
<>
<span className="text-gray-400">s/</span>
<span className="truncate">{shortcut.name}</span>
</>
)}
</div>
<span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
<Icon.ExternalLink className="w-6 h-auto text-gray-600" />
</span> </span>
</a> </a>
<div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2"> <div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2">