github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: bug fixes and ui improvements (#3468)

Browse Source 
* chore: empty state improvement

* chore: app sidebar improvement

* chore: dashboard empty state improvement
This commit is contained in:
Anmol Singh Bhatia 2024-01-25 14:23:55 +05:30 committed by GitHub
parent e4a3d0db5c
commit 336c97d336
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 57 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/empty-state/empty-state.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
// components
import { ComicBoxButton } from "./comic-box-button";
// ui
@ -51,8 +52,6 @@ export const EmptyState: React.FC<Props> = ({
</>
);
const imageElement = <img src={image} sizes="100%" alt={primaryButton?.text || "button image"} />;
const secondaryButtonElement = secondaryButton && (
<Button
size={size === "sm" ? "md" : "lg"}
@ -75,7 +74,14 @@ export const EmptyState: React.FC<Props> = ({
>
<div className="flex flex-col gap-1.5 flex-shrink-0">{emptyStateHeader}</div>
{imageElement}
<Image
src={image}
alt={primaryButton?.text || "button image"}
width={384}
height={250}
layout="responsive"
lazyBoundary="100%"
/>
<div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
{primaryButton && (

22
web/components/page-views/workspace-dashboard.tsx
View File

@ -55,17 +55,19 @@ export const WorkspaceDashboardView = observer(() => {
return (
<>
<IssuePeekOverview />
{currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
<TourRoot onComplete={handleTourCompleted} />
</div>
)}
{homeDashboardId && joinedProjectIds ? (
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
{currentUser && <UserGreetingsView user={currentUser} />}
<>
{joinedProjectIds.length > 0 ? (
<DashboardWidgets />
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
<IssuePeekOverview />
{currentUser && <UserGreetingsView user={currentUser} />}
{currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
<TourRoot onComplete={handleTourCompleted} />
</div>
)}
<DashboardWidgets />
</div>
) : (
<EmptyState
image={emptyStateImage}
@ -85,7 +87,7 @@ export const WorkspaceDashboardView = observer(() => {
disabled={!isEditingAllowed}
/>
)}
</div>
</>
) : (
<div className="h-full w-full grid place-items-center">
<Spinner />

64
web/components/workspace/help-section.tsx
View File

@ -7,7 +7,7 @@ import { useApplication } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
import { DiscordIcon, GithubIcon } from "@plane/ui";
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// assets
import packageJson from "package.json";
@ -67,24 +67,29 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
</div>
)}
<div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-1/2 justify-evenly"}`}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleShortcutModal(true)}
>
<Zap className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
>
<HelpCircle className="h-3.5 w-3.5" />
</button>
<Tooltip tooltipContent="Shortcuts">
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleShortcutModal(true)}
>
<Zap className="h-3.5 w-3.5" />
</button>
</Tooltip>
<Tooltip tooltipContent="Help">
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
>
<HelpCircle className="h-3.5 w-3.5" />
</button>
</Tooltip>
<button
type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
@ -92,15 +97,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button>
<Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
<button
type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button>
</Tooltip>
</div>
<div className="relative">