Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PWA-23] chore: disable hover effect pwa #5556

Open
wants to merge 5 commits into
base: preview
Choose a base branch
from
Open

[PWA-23] chore: disable hover effect pwa #5556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1adef8f
chore: sidebar hover effect disabled for pwa
anmolsinghbhatia Sep 9, 2024
4f07b19
chore: existing and parent issue modal hover effect disabled for pwa
anmolsinghbhatia Sep 9, 2024
8e4f18a
fix: calendar mobile layout
anmolsinghbhatia Sep 9, 2024
305ddd1
chore: code refactor
anmolsinghbhatia Sep 9, 2024
e06dd81
chore: list and kanban layout hover effect disabled for pwa
anmolsinghbhatia Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions web/core/components/core/modals/existing-issues-list-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
// ui
import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
import { getTabIndex } from "@/helpers/tab-indices.helper";
// hooks
import useDebounce from "@/hooks/use-debounce";
Expand Down Expand Up @@ -244,9 +245,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
htmlFor={`issue-${issue.id}`}
value={issue}
className={({ active }) =>
`group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
`flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
active ? "bg-custom-background-80 text-custom-text-100" : ""
} ${selected ? "text-custom-text-100" : ""}`
} ${selected ? "text-custom-text-100" : ""} ${!isMobile ? "group" : ""}`
}
>
<div className="flex items-center gap-2">
Expand All @@ -271,7 +272,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
<a
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
target="_blank"
className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
className={cn("z-1 relative block text-custom-text-200", {
"hidden group-hover:block hover:text-custom-text-100": !isMobile,
})}
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
Expand Down
28 changes: 16 additions & 12 deletions web/core/components/issues/issue-detail/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useAppTheme, useEventTracker, useIssueDetail, useIssues, useUser } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import { usePlatformOS } from "@/hooks/use-platform-os";
// images
import emptyIssue from "@/public/empty-state/issue.svg";
// local components
Expand Down Expand Up @@ -81,6 +82,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
membership: { currentProjectRole },
} = useUser();
const { issueDetailSidebarCollapsed } = useAppTheme();
const { isMobile } = usePlatformOS();

const issueOperations: TIssueOperations = useMemo(
() => ({
Expand Down Expand Up @@ -359,18 +361,20 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
isArchived={is_archived}
/>
</div>
<div
className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 pb-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
>
<IssueDetailsSidebar
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
isEditable={!is_archived && isEditable}
/>
</div>
{!isMobile && (
<div
className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 pb-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
>
<IssueDetailsSidebar
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
isEditable={!is_archived && isEditable}
/>
</div>
)}
</div>
)}

Expand Down
24 changes: 0 additions & 24 deletions web/core/components/issues/issue-layouts/calendar/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,30 +219,6 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
</div>
</div>
</IssueLayoutHOC>

{/* mobile view */}
<div className="md:hidden">
<p className="p-4 text-xl font-semibold">
{`${selectedDate.getDate()} ${
MONTHS_LIST[selectedDate.getMonth() + 1].title
}, ${selectedDate.getFullYear()}`}
</p>
<CalendarIssueBlocks
date={selectedDate}
issueIdList={issueIdList}
quickActions={quickActions}
loadMoreIssues={loadMoreIssues}
getPaginationData={getPaginationData}
getGroupIssueCount={getGroupIssueCount}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView}
readOnly={readOnly}
isDragDisabled
isMobileView
/>
</div>
</div>
</>
);
Expand Down
5 changes: 3 additions & 2 deletions web/core/components/issues/issue-layouts/calendar/issue-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const CalendarIssueBlock = observer(
href={`/${workspaceSlug?.toString()}/projects/${projectId?.toString()}/issues/${issue.id}`}
onClick={() => handleIssuePeekOverview(issue)}
className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
disabled={!!issue?.tempId || isMobile}
disabled={!!issue?.tempId}
ref={ref}
>
<>
Expand All @@ -83,11 +83,12 @@ export const CalendarIssueBlock = observer(
<div
ref={blockRef}
className={cn(
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 ",
"flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 ",
{
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
"bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
"group/calendar-block": !isMobile,
}
)}
>
Expand Down
14 changes: 7 additions & 7 deletions web/core/components/issues/issue-layouts/list/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
<Row
ref={issueRef}
className={cn(
"group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 py-3 text-sm transition-colors border border-transparent",
"min-h-11 relative flex flex-col gap-3 bg-custom-background-100 py-3 text-sm transition-colors border border-transparent",
{
"border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"border-custom-border-400": isIssueActive,
Expand All @@ -141,6 +141,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
"bg-custom-background-80": isCurrentBlockDragging,
"md:flex-row md:items-center": isSidebarCollapsed,
"lg:flex-row lg:items-center": !isSidebarCollapsed,
"group/list-block hover:bg-custom-background-90": !isMobile,
}
)}
onDragStart={() => {
Expand Down Expand Up @@ -170,12 +171,11 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
>
<div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
<MultipleSelectEntityAction
className={cn(
"opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": isIssueSelected,
}
)}
className={cn("pointer-events-auto transition-opacity", {
"opacity-100 pointer-events-auto": isIssueSelected,
"opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto":
!isMobile,
})}
groupId={groupId}
id={issue.id}
selectionHelpers={selectionHelpers}
Expand Down
11 changes: 7 additions & 4 deletions web/core/components/issues/parent-issues-list-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// components
import { IssueSearchModalEmptyState } from "@/components/core";
// helpers
import { cn } from "@/helpers/common.helper";
import { getTabIndex } from "@/helpers/tab-indices.helper";
// hooks
import useDebounce from "@/hooks/use-debounce";
Expand Down Expand Up @@ -96,7 +97,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child>

<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
Expand Down Expand Up @@ -189,9 +190,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
key={issue.id}
value={issue}
className={({ active, selected }) =>
`group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
`flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
active ? "bg-custom-background-80 text-custom-text-100" : ""
} ${selected ? "text-custom-text-100" : ""}`
} ${selected ? "text-custom-text-100" : ""} ${!isMobile ? "group" : ""}`
}
>
<div className="flex flex-grow items-center gap-2 truncate">
Expand All @@ -215,7 +216,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
<a
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
target="_blank"
className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
className={cn("z-1 relative block flex-shrink-0 text-custom-text-200 ", {
"hidden hover:text-custom-text-100 group-hover:block": !isMobile,
})}
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
Expand Down
10 changes: 8 additions & 2 deletions web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,22 @@ export const SidebarFavoritesMenu = observer(() => {
ref={elementRef}
as="button"
className={cn(
"sticky top-0 bg-custom-sidebar-background-100 z-10 group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-xs font-semibold",
"sticky top-0 bg-custom-sidebar-background-100 z-10 w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 rounded text-xs font-semibold",
{
"bg-custom-sidebar-background-80 opacity-60": isDragging,
"group/workspace-button hover:bg-custom-sidebar-background-90": !isMobile,
}
)}
>
<span onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)} className="flex-1 text-start">
YOUR FAVORITES
</span>
<span className="flex flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 ">
<span
className={cn("flex flex-shrink-0 rounded p-0.5", {
"opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto":
!isMobile,
})}
>
<Tooltip tooltipHeading="Create folder" tooltipContent="">
<FolderPlus
onClick={() => {
Expand Down
33 changes: 14 additions & 19 deletions web/core/components/workspace/sidebar/projects-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,13 +301,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
>
<DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
<div
className={cn(
"group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
{
"bg-custom-sidebar-background-90": isMenuActive,
"p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
}
)}
className={cn("relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100", {
"bg-custom-sidebar-background-90": isMenuActive,
"p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
"group/project-item hover:bg-custom-sidebar-background-90": !isMobile,
})}
id={`${project?.id}`}
>
{!disableDrag && (
Expand Down Expand Up @@ -385,12 +383,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
<MoreHorizontal className="size-4" />
</span>
}
className={cn(
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
{
"opacity-100 pointer-events-auto": isMenuActive,
}
)}
className={cn("flex-shrink-0 pointer-events-auto", {
"opacity-100 pointer-events-auto": isMenuActive,
"opacity-0 pointer-events-none group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto":
!isMobile,
})}
customButtonClassName="grid place-items-center"
placement="bottom-start"
useCaptureForOutsideClick
Expand Down Expand Up @@ -468,12 +465,10 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
<Disclosure.Button
as="button"
type="button"
className={cn(
"hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
{
"inline-block": isMenuActive,
}
)}
className={cn("inline-block p-0.5 rounded", {
"inline-block": isMenuActive,
"hidden group-hover/project-item:inline-block hover:bg-custom-sidebar-background-80": !isMobile,
})}
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
>
<ChevronRight
Expand Down
13 changes: 10 additions & 3 deletions web/core/components/workspace/sidebar/projects-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { orderJoinedProjects } from "@/helpers/project.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";

export const SidebarProjectsList: FC = observer(() => {
// get local storage data for isFavoriteProjectsListOpen and isAllProjectsListOpen
Expand All @@ -40,6 +41,7 @@ export const SidebarProjectsList: FC = observer(() => {
const {
membership: { currentWorkspaceRole },
} = useUser();
const { isMobile } = usePlatformOS();
const { getProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
// router params
const { workspaceSlug } = useParams();
Expand Down Expand Up @@ -155,18 +157,19 @@ export const SidebarProjectsList: FC = observer(() => {
<Disclosure as="div" className="flex flex-col" defaultOpen={isAllProjectsListOpen}>
<div
className={cn(
"group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
"w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400",
{
"p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
isCollapsed,
"group hover:bg-custom-sidebar-background-90": !isMobile,
}
)}
>
<Disclosure.Button
as="button"
type="button"
className={cn(
"group w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
"w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
{
"!text-center w-8 px-2 py-1.5 justify-center": isCollapsed,
}
Expand All @@ -184,7 +187,11 @@ export const SidebarProjectsList: FC = observer(() => {
</Tooltip>
</Disclosure.Button>
{!isCollapsed && (
<div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
<div
className={cn("flex items-center pointer-events-auto", {
"opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto": !isMobile,
})}
>
{isAuthorizedUser && (
<Tooltip tooltipHeading="Create project" tooltipContent="">
<button
Expand Down
Loading
Loading