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