Skip to content

[dashboard] imporved workspace entry layout #20016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 10, 2024
Merged

[dashboard] imporved workspace entry layout #20016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions components/dashboard/src/components/ItemsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,19 @@ export function ItemsList(props: { children?: React.ReactNode; className?: strin
}

export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean; solid?: boolean }) {
let layoutClassName = "flex flex-grow flex-row justify-between";
// set layoutClassName to "" if className contains 'grid'
if (props.className?.includes("grid")) {
layoutClassName = "";
}

// cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
const solidClassName = props.solid ? "bg-gray-100 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
const notHeaderClassName = "rounded-xl focus:bg-kumquat-light " + solidClassName;
return (
<div
className={`flex flex-grow flex-row w-full p-3 justify-between transition ease-in-out ${
className={`${layoutClassName} w-full p-3 transition ease-in-out ${
props.header ? headerClassName : notHeaderClassName
} ${props.className || ""}`}
>
Expand All @@ -44,7 +50,7 @@ export function ItemFieldContextMenu(props: {

return (
<div
className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8 ${cls} ${
className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8 ${cls} ${
props.className || ""
}`}
>
Expand Down
21 changes: 12 additions & 9 deletions components/dashboard/src/workspaces/WorkspaceEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,15 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
[workspace.id],
);

let gridCol =
"grid-cols-[minmax(32px,32px),minmax(100px,auto),minmax(100px,300px),minmax(80px,160px),minmax(32px,32px),minmax(32px,32px)]";
if (shortVersion) {
gridCol = "grid-cols-[minmax(32px,32px),minmax(100px,auto)]";
}

return (
<Item className="whitespace-nowrap py-6" solid={menuActive}>
<ItemFieldIcon>
<Item className={`whitespace-nowrap py-6 px-4 gap-3 grid ${gridCol}`} solid={menuActive}>
<ItemFieldIcon className="min-w-8">
<WorkspaceStatusIndicator status={workspace?.status} />
</ItemFieldIcon>
<div className="flex-grow flex flex-col h-full py-auto truncate">
Expand All @@ -77,7 +83,7 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
</div>
{!shortVersion && (
<>
<div className="w-2/12 sm:w-3/12 xl:w-4/12 flex flex-col xl:flex-row xl:items-center xl:gap-6 justify-between px-1 md:px-3">
<div className="flex flex-col justify-between">
<div className="text-gray-500 dark:text-gray-400 flex flex-row gap-1 items-center overflow-hidden">
<div className="min-w-4">
<GitBranchIcon className="h-4 w-4" />
Expand All @@ -86,14 +92,11 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
{currentBranch}
</Tooltip>
</div>
<div className="mr-auto xl:hidden">
<div className="mr-auto">
<PendingChangesDropdown gitStatus={gitStatus} />
</div>
</div>
<div className="hidden xl:flex xl:items-center xl:min-w-46">
<PendingChangesDropdown gitStatus={gitStatus} />
</div>
<div className="px-1 md:px-3 flex items-center min-w-96 w-28 lg:w-44 text-right">
<div className="flex items-center">
<Tooltip
content={`Last Activate ${dayjs(
info.status!.phase!.lastTransitionTime!.toDate(),
Expand All @@ -105,7 +108,7 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
</div>
</Tooltip>
</div>
<div className="px-1 md:px-3 flex items-center">
<div className="min-w-8 flex items-center">
<div
onClick={togglePinned}
className={
Expand Down
Loading