Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-24 15:49:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-2332 | 2295] style: UI improvements. (#5433)

Browse Source 
* [WEB-2332] style: minor layout improvements.

* [WEB-2295] style: fix scrollbar padding in workspace list section of profile settings.

* style: add `app-container` css.
This commit is contained in:
Prateek Shourya
2024-08-27 14:26:09 +05:30
committed by GitHub
parent 08c9bd7949
commit 83ceba3166
4 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/layout.tsx
View File

@@ -72,10 +72,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
crossOrigin="use-credentials"
/>
</head>
<body>
<div id="context-menu-portal" />
<body className={`h-screen w-screen`}>
<AppProvider>
<div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>{children}</div>
<div className={`app-container h-full w-full flex flex-col overflow-hidden`}>
<div id="context-menu-portal" />
<div className="h-full w-full overflow-hidden bg-custom-background-100">{children}</div>
</div>
</AppProvider>
</body>
{process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (

2
web/app/profile/layout.tsx
View File

@@ -19,7 +19,7 @@ export default function ProfileSettingsLayout(props: Props) {
<>
<CommandPalette />
<AuthenticationWrapper>
<div className="relative flex h-screen w-full overflow-hidden">
<div className="relative flex h-full w-full overflow-hidden">
<ProfileLayoutSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full overflow-hidden">{children}</div>

21
web/app/profile/sidebar.tsx
View File

@@ -12,6 +12,8 @@ import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import { SidebarNavItem } from "@/components/sidebar";
// constants
import { PROFILE_ACTION_LINKS } from "@/constants/profile";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@@ -117,11 +119,11 @@ export const ProfileLayoutSidebar = observer(() => {
)}
</div>
</Link>
<div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
<div className="flex flex-shrink-0 flex-col overflow-x-hidden">
{!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
<h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
)}
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto">
<div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
{PROFILE_ACTION_LINKS.map((link) => {
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
@@ -150,12 +152,17 @@ export const ProfileLayoutSidebar = observer(() => {
})}
</div>
</div>
<div className="flex flex-col overflow-x-hidden px-4">
<div className="flex flex-col overflow-x-hidden">
{!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
<h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
)}
{workspacesList && workspacesList.length > 0 && (
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
<div
className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
"scrollbar-sm": !sidebarCollapsed,
"ml-2.5 px-1": sidebarCollapsed,
})}
>
{workspacesList.map((workspace) => (
<Link
key={workspace.id}
@@ -193,7 +200,7 @@ export const ProfileLayoutSidebar = observer(() => {
))}
</div>
)}
<div className="mt-1.5">
<div className="mt-1.5 px-4">
{WORKSPACE_ACTION_LINKS.map((link) => (
<Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
<Tooltip

6
web/styles/globals.css
View File

@@ -359,6 +359,12 @@ body {
color: rgba(var(--color-text-100));
}
.app-container {
contain: layout style size;
contain-intrinsic-size: 100%;
position: relative; /* Ensure it's the containing block */
}
/* scrollbar style */
::-webkit-scrollbar {
display: none;