thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-579] style: scrollbar implementation (#3835)

Browse Source 
* style: scrollbar added in profile summary and sidebar

* style: scrollbar added in modals

* style: scrollbar added in project setting screens

* style: scrollbar added in workspace and profile settings

* style: scrollbar added in dropdowns and filters
This commit is contained in:
Anmol Singh Bhatia
2024-03-06 14:18:19 +05:30
committed by GitHub
parent 4d0f641ee0
commit c06ef4d1d7
24 changed files with 41 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/layouts/settings-layout/profile/layout.tsx
View File

@@ -21,7 +21,9 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
<ProfileLayoutSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
{header}
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">
{children}
</div>
</main>
</div>
</UserAuthWrapper>

4
web/layouts/settings-layout/profile/preferences/layout.tsx
View File

@@ -73,7 +73,9 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
<ProfilePreferenceSettingsSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
{header}
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
<div className="h-full w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
{children}
</div>
</main>
</div>
</ProfileSettingsLayout>

4
web/layouts/settings-layout/profile/sidebar.tsx
View File

@@ -129,7 +129,7 @@ export const ProfileLayoutSidebar = observer(() => {
{!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
)}
<div className="mt-2 h-full space-y-1.5 overflow-y-auto">
<div className="mt-2 h-full space-y-1.5 overflow-y-auto vertical-scrollbar scrollbar-sm">
{PROFILE_ACTION_LINKS.map((link) => {
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
@@ -157,7 +157,7 @@ export const ProfileLayoutSidebar = observer(() => {
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
)}
{workspacesList && workspacesList.length > 0 && (
<div className="mt-2 h-full space-y-1.5 overflow-y-auto">
<div className="mt-2 h-full space-y-1.5 overflow-y-auto vertical-scrollbar scrollbar-sm">
{workspacesList.map((workspace) => (
<Link
key={workspace.id}

4
web/layouts/settings-layout/project/layout.tsx
View File

@@ -45,7 +45,9 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props)
<div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
<ProjectSettingsSidebar />
</div>
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll">{children}</div>
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
{children}
</div>
</div>
);
});

4
web/layouts/settings-layout/workspace/layout.tsx
View File

@@ -10,11 +10,11 @@ export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
const { children } = props;
return (
<div className="inset-y-0 z-20 flex h-full w-full gap-2 overflow-x-hidden overflow-y-scroll">
<div className="inset-y-0 z-20 flex h-full w-full gap-2">
<div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
<WorkspaceSettingsSidebar />
</div>
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0">
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
{children}
</div>
</div>