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: workspace view header scroll to view improvement (#3771)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-02-23 19:08:50 +05:30 committed by GitHub
parent 0aaca709da
commit 8c1f169f61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/workspace/views/header.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
@ -24,9 +24,8 @@ const ViewTab = observer((props: { viewId: string }) => {
if (!view) return null;
return (
<Link key={viewId} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
<Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
<span
id={`global-view-${viewId}`}
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
viewId === globalViewId
? "border-custom-primary-100 text-custom-primary-100"
@ -42,6 +41,7 @@ const ViewTab = observer((props: { viewId: string }) => {
export const GlobalViewsHeader: React.FC = observer(() => {
// states
const [createViewModal, setCreateViewModal] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
// router
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
@ -54,19 +54,22 @@ export const GlobalViewsHeader: React.FC = observer(() => {
// bring the active view to the centre of the header
useEffect(() => {
if (!globalViewId) return;
captureEvent(GLOBAL_VIEW_OPENED, {
view_id: globalViewId,
view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
? "Default"
: "Custom",
});
const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
}, [globalViewId]);
if (globalViewId && currentWorkspaceViews) {
captureEvent(GLOBAL_VIEW_OPENED, {
view_id: globalViewId,
view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
? "Default"
: "Custom",
});
const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
if (activeTabElement && containerRef.current) {
const containerRect = containerRef.current.getBoundingClientRect();
const activeTabRect = activeTabElement.getBoundingClientRect();
const diff = containerRect.right - activeTabRect.right;
activeTabElement.scrollIntoView({ behavior: "smooth", inline: diff > 500 ? "center" : "nearest" });
}
}
}, [globalViewId, currentWorkspaceViews, containerRef]);
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
@ -74,9 +77,12 @@ export const GlobalViewsHeader: React.FC = observer(() => {
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="group relative flex border-b border-custom-border-200">
<div className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm">
<div
ref={containerRef}
className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
>
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
<Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
<Link key={tab.key} id={`global-view-${tab.key}`} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
<span
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
tab.key === globalViewId