binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2742] chore: issue link ui revamp (#5971)

Browse source 
* chore-issue-link-ui

* chore: issue link ui revamp
This commit is contained in:
Anmol Singh Bhatia 2024-11-07 19:24:15 +05:30 • committed by GitHub
parent 7574206a41
commit 4c6ab984c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/core/components/issues/issue-detail/links/link-item.tsx
View file

@ -40,13 +40,13 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
<>
<div
key={linkId}
className="col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-8 flex-shrink-0 px-3 bg-custom-background-90 border-[0.5px] border-custom-border-200 rounded"
className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-custom-background-90 hover:bg-custom-background-80 border-[0.5px] border-custom-border-200 rounded"
>
<div className="flex items-center gap-2.5 truncate">
<LinkIcon className="h-3 w-3 flex-shrink-0" />
<div className="flex items-center gap-2.5 truncate flex-grow">
<LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<span
className="truncate text-xs cursor-pointer"
className="truncate text-sm cursor-pointer flex-grow"
onClick={() => {
copyTextToClipboard(linkDetail.url);
setToast({
@ -60,21 +60,21 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
</span>
</Tooltip>
</div>
<div className="flex items-center gap-1">
<p className="p-1 text-xs align-bottom leading-5 text-custom-text-300">
<div className="flex items-center gap-1 flex-shrink-0">
<p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
{calculateTimeAgoShort(linkDetail.created_at)}
</p>
<a
href={linkDetail.url}
target="_blank"
rel="noopener noreferrer"
className="relative grid place-items-center rounded p-1 text-custom-text-300 outline-none hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
>
<ExternalLink className="h-3.5 w-3.5 stroke-[1.5]" />
</a>
<CustomMenu
ellipsis
buttonClassName="text-custom-text-300 hover:text-custom-text-200"
buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"
placement="bottom-end"
closeOnSelect
disabled={isNotAllowed}

2
web/core/components/issues/issue-detail/links/link-list.tsx
View file

@ -27,7 +27,7 @@ export const LinkList: FC<TLinkList> = observer((props) => {
if (!issueLinks) return null;
return (
<div className="grid grid-cols-12 3xl:grid-cols-10 gap-2 px-9 py-4">
<div className="flex flex-col gap-2 py-4">
{issueLinks.map((linkId) => (
<IssueLinkItem key={linkId} linkId={linkId} linkOperations={linkOperations} isNotAllowed={disabled} />
))}