mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-18 21:19:44 +00:00
chore: update shortcut list style
This commit is contained in:
Steven
parent
b3640699e0
commit
9ad2eaebc5
@ -127,13 +127,16 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
|
||||
<span className="mb-2">
|
||||
Name <span className="text-red-600">*</span>
|
||||
</span>
|
||||
<Input
|
||||
className="w-full"
|
||||
type="text"
|
||||
placeholder="shortcut-name"
|
||||
value={state.shortcutCreate.name}
|
||||
onChange={handleNameInputChange}
|
||||
/>
|
||||
<div className="relative w-full">
|
||||
<span className="absolute z-1 top-2 left-3 text-gray-400">o/</span>
|
||||
<Input
|
||||
className="w-full !pl-7"
|
||||
type="text"
|
||||
placeholder="shortcut-name"
|
||||
value={state.shortcutCreate.name}
|
||||
onChange={handleNameInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start mb-3">
|
||||
<span className="mb-2">
|
||||
@ -159,7 +162,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start mb-3">
|
||||
<span className="mb-2">Tags</span>
|
||||
<Input className="w-full" type="text" placeholder="Tags" value={tag} onChange={handleTagsInputChange} />
|
||||
<Input className="w-full" type="text" placeholder="Separated by spaces" value={tag} onChange={handleTagsInputChange} />
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start mb-3">
|
||||
<span className="mb-2">
|
||||
|
||||
@ -2,7 +2,6 @@ import { Tooltip } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { UNKNOWN_ID } from "../helpers/consts";
|
||||
import { shortcutService } from "../services";
|
||||
import { useAppSelector } from "../stores";
|
||||
import { absolutifyLink } from "../helpers/utils";
|
||||
@ -15,16 +14,10 @@ interface Props {
|
||||
shortcutList: Shortcut[];
|
||||
}
|
||||
|
||||
interface State {
|
||||
currentEditingShortcutId: ShortcutId;
|
||||
}
|
||||
|
||||
const ShortcutListView: React.FC<Props> = (props: Props) => {
|
||||
const { shortcutList } = props;
|
||||
const user = useAppSelector((state) => state.user.user as User);
|
||||
const [state, setState] = useState<State>({
|
||||
currentEditingShortcutId: UNKNOWN_ID,
|
||||
});
|
||||
const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
|
||||
|
||||
const havePermission = (shortcut: Shortcut) => {
|
||||
return user.role === "ADMIN" || shortcut.creatorId === user.id;
|
||||
@ -35,13 +28,6 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
|
||||
toast.success("Shortcut link copied to clipboard.");
|
||||
};
|
||||
|
||||
const handleEditShortcutButtonClick = (shortcut: Shortcut) => {
|
||||
setState({
|
||||
...state,
|
||||
currentEditingShortcutId: shortcut.id,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
|
||||
showCommonDialog({
|
||||
title: "Delete Shortcut",
|
||||
@ -61,49 +47,48 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
|
||||
<div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg">
|
||||
<div className="flex flex-col justify-start items-start mr-4">
|
||||
<p>
|
||||
<span>{shortcut.name}</span>
|
||||
{shortcut.description && <span className="text-gray-500 ml-1">({shortcut.description})</span>}
|
||||
<span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
|
||||
<span className="text-gray-400">o/</span>
|
||||
{shortcut.name}
|
||||
</span>
|
||||
</p>
|
||||
<div className="space-x-2">
|
||||
{shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
|
||||
<div className="mt-2 flex flex-row justify-start items-start gap-2">
|
||||
<Icon.Tag className="text-gray-400 w-4 h-auto" />
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span key={tag} className="text-gray-400 text-sm font-mono">
|
||||
<span key={tag} className="text-gray-400 text-sm font-mono leading-4">
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center">
|
||||
<span className="w-16 truncate mr-2 text-gray-600">{shortcut.creator.nickname}</span>
|
||||
<div className="flex flex-row justify-end items-center space-x-2">
|
||||
<Tooltip title="Copy link" variant="solid" placement="top">
|
||||
<button
|
||||
className="cursor-pointer mr-4 hover:opacity-80"
|
||||
onClick={() => {
|
||||
handleCopyButtonClick(shortcut);
|
||||
}}
|
||||
>
|
||||
<Icon.Copy className="w-5 h-auto" />
|
||||
<button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
|
||||
<Icon.Copy className="w-4 h-auto" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Go to link" variant="solid" placement="top">
|
||||
<a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link}>
|
||||
<Icon.ExternalLink className="w-5 h-auto" />
|
||||
<a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
|
||||
<Icon.ExternalLink className="w-4 h-auto" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
<Dropdown
|
||||
actionsClassName="!w-20"
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
disabled={!havePermission(shortcut)}
|
||||
className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => handleEditShortcutButtonClick(shortcut)}
|
||||
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => setEditingShortcutId(shortcut.id)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
disabled={!havePermission(shortcut)}
|
||||
className="w-full px-3 text-left leading-10 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => {
|
||||
handleDeleteShortcutButtonClick(shortcut);
|
||||
}}
|
||||
@ -112,7 +97,6 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
actionsClassName="!w-24"
|
||||
></Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,21 +104,11 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{state.currentEditingShortcutId !== UNKNOWN_ID && (
|
||||
{editingShortcutId && (
|
||||
<CreateShortcutDialog
|
||||
shortcutId={state.currentEditingShortcutId}
|
||||
onClose={() => {
|
||||
setState({
|
||||
...state,
|
||||
currentEditingShortcutId: UNKNOWN_ID,
|
||||
});
|
||||
}}
|
||||
onConfirm={() => {
|
||||
setState({
|
||||
...state,
|
||||
currentEditingShortcutId: UNKNOWN_ID,
|
||||
});
|
||||
}}
|
||||
shortcutId={editingShortcutId}
|
||||
onClose={() => setEditingShortcutId(undefined)}
|
||||
onConfirm={() => setEditingShortcutId(undefined)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -37,8 +37,8 @@ const Dropdown: React.FC<Props> = (props: Props) => {
|
||||
{trigger ? (
|
||||
trigger
|
||||
) : (
|
||||
<button className="flex flex-row justify-center items-center p-1 rounded text-gray-600 cursor-pointer border hover:opacity-80">
|
||||
<Icon.MoreHorizontal className="w-4 h-auto" />
|
||||
<button className="flex flex-row justify-center items-center rounded text-gray-600 cursor-pointer hover:opacity-80">
|
||||
<Icon.MoreVertical className="w-4 h-auto" />
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user