binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-713] style: remove tooltips in mobile responsiveness (#3948)

Browse source 
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Ramesh Kumar Chandra 2024-03-12 20:39:36 +05:30 • committed by GitHub
parent b930d98665
commit cb632408f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
70 changed files with 327 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/components/workspace/help-section.tsx
View file

@ -10,6 +10,7 @@ import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// hooks
import { useApplication } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { usePlatformOS } from "hooks/use-platform-os";
// assets
import packageJson from "package.json";
@ -41,6 +42,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
theme: { sidebarCollapsed, toggleSidebar },
commandPalette: { toggleShortcutModal },
} = useApplication();
const { isMobile } = usePlatformOS();
// states
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
// refs
@ -69,7 +71,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
</div>
)}
<div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-1/2 justify-evenly"}`}>
<Tooltip tooltipContent="Shortcuts">
<Tooltip tooltipContent="Shortcuts" isMobile={isMobile}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
@ -80,7 +82,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<Zap className="h-3.5 w-3.5" />
</button>
</Tooltip>
<Tooltip tooltipContent="Help">
<Tooltip tooltipContent="Help" isMobile={isMobile}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
@ -100,7 +102,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<MoveLeft className="h-3.5 w-3.5" />
</button>
<Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
<Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
<button
type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${

4
web/components/workspace/settings/invitations-list-item.tsx
View file

@ -10,6 +10,7 @@ import { ConfirmWorkspaceMemberRemove } from "components/workspace";
import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
// hooks
import { useMember, useUser } from "hooks/store";
import { usePlatformOS } from "hooks/use-platform-os";
type Props = {
invitationId: string;
@ -29,6 +30,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
const {
workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
} = useMember();
const { isMobile } = usePlatformOS();
// derived values
const invitationDetails = getWorkspaceInvitationDetails(invitationId);
@ -134,7 +136,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
);
})}
</CustomSelect>
<Tooltip tooltipContent="Remove member" disabled={!isAdmin}>
<Tooltip tooltipContent="Remove member" disabled={!isAdmin} isMobile={isMobile}>
<button
type="button"
onClick={() => setRemoveMemberModal(true)}

3
web/components/workspace/settings/members-list-item.tsx
View file

@ -13,6 +13,7 @@ import { WORKSPACE_MEMBER_lEAVE } from "constants/event-tracker";
import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
// hooks
import { useEventTracker, useMember, useUser } from "hooks/store";
import { usePlatformOS } from "hooks/use-platform-os";
type Props = {
memberId: string;
@ -35,6 +36,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
} = useMember();
const { captureEvent } = useEventTracker();
const { isMobile } = usePlatformOS();
// derived values
const memberDetails = getWorkspaceMemberDetails(memberId);
@ -185,6 +187,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
})}
</CustomSelect>
<Tooltip
isMobile={isMobile}
tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
disabled={!isAdmin && !isCurrentUser}
>

8
web/components/workspace/sidebar-menu.tsx
View file

@ -15,11 +15,13 @@ import { EUserWorkspaceRoles } from "constants/workspace";
import { cn } from "helpers/common.helper";
// hooks
import { useApplication, useEventTracker, useUser } from "hooks/store";
import { usePlatformOS } from "hooks/use-platform-os";
export const WorkspaceSidebarMenu = observer(() => {
// store hooks
const { theme: themeStore } = useApplication();
const { captureEvent } = useEventTracker();
const { isMobile } = usePlatformOS();
const {
membership: { currentWorkspaceRole },
} = useUser();
@ -50,13 +52,13 @@ export const WorkspaceSidebarMenu = observer(() => {
position="right"
className="ml-2"
disabled={!themeStore?.sidebarCollapsed}
isMobile={isMobile}
>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
link.highlight(router.asPath, `/${workspaceSlug}`)
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.asPath, `/${workspaceSlug}`)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
>
{
<link.Icon