[WEB-808] style: workspace settings mobile responsiveness (#4047)
* [WEB-808] style: workspace settings mobile responsiveness * fix: scroll on mobile-view * responsiveness fixes --------- Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
This commit is contained in:
Ramesh Kumar Chandra
GitHub
parent
0c880bbbc8
commit
9c8b4afc20
16 changed files with 140 additions and 128 deletions
|
|
@ -104,7 +104,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative translate-y-0 transform rounded-lg bg-custom-background-100 p-5 text-left opacity-100 shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl sm:scale-100">
|
||||
<Dialog.Panel className="relative translate-y-0 transform rounded-lg bg-custom-background-100 p-5 text-left opacity-100 shadow-custom-shadow-md transition-all w-full sm:max-w-2xl sm:scale-100">
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
onKeyDown={(e) => {
|
||||
|
|
@ -121,8 +121,8 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
|
|||
|
||||
<div className="mb-3 space-y-4">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="group relative grid grid-cols-12 items-start gap-4">
|
||||
<div className="col-span-9">
|
||||
<div key={field.id} className="group relative flex items-start gap-4">
|
||||
<div className="w-full">
|
||||
<Controller
|
||||
control={control}
|
||||
name={`emails.${index}.email`}
|
||||
|
|
@ -155,7 +155,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name={`emails.${index}.role`}
|
||||
|
|
|
|||
|
|
@ -104,8 +104,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
|
|||
}}
|
||||
onSubmit={handleRemove}
|
||||
/>
|
||||
<div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-x-4 gap-y-2">
|
||||
<div className="group w-full flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
|
||||
<div className="flex w-full items-center gap-x-4 gap-y-2">
|
||||
{memberDetails.member.avatar && memberDetails.member.avatar.trim() !== "" ? (
|
||||
<Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`}>
|
||||
<span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
|
||||
|
|
@ -123,86 +123,90 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
|
|||
</span>
|
||||
</Link>
|
||||
)}
|
||||
<div>
|
||||
<Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`}>
|
||||
<span className="text-sm font-medium">
|
||||
{memberDetails.member.first_name} {memberDetails.member.last_name}
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center">
|
||||
<p className="text-xs text-custom-text-300">{memberDetails.member.display_name}</p>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Dot height={16} width={16} className="text-custom-text-300" />
|
||||
<p className="text-xs text-custom-text-300">{memberDetails.member.email}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<CustomSelect
|
||||
customButton={
|
||||
<div className="item-center flex gap-1 rounded px-2 py-0.5">
|
||||
<span
|
||||
className={`flex items-center rounded text-xs font-medium ${
|
||||
hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
|
||||
}`}
|
||||
>
|
||||
{ROLE[memberDetails.role]}
|
||||
</span>
|
||||
{hasRoleChangeAccess && (
|
||||
<span className="grid place-items-center">
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
<div className="w-full truncate flex items-center justify-between">
|
||||
<div className="truncate">
|
||||
<Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`} className="truncate">
|
||||
<div className="w-full truncate">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{memberDetails.member.first_name} {memberDetails.member.last_name}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center truncate">
|
||||
<p className="text-xs text-custom-text-300">{memberDetails.member.display_name}</p>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Dot height={16} width={16} className="text-custom-text-300 hidden sm:block" />
|
||||
<p className="text-xs text-custom-text-300 line-clamp-1 truncate">{memberDetails.member.email}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
value={memberDetails.role}
|
||||
onChange={(value: EUserWorkspaceRoles) => {
|
||||
if (!workspaceSlug || !value) return;
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 items-center gap-2 text-xs">
|
||||
<CustomSelect
|
||||
customButton={
|
||||
<div className="item-center flex gap-1 rounded px-2 py-0.5">
|
||||
<span
|
||||
className={`flex items-center rounded text-xs font-medium ${
|
||||
hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
|
||||
}`}
|
||||
>
|
||||
{ROLE[memberDetails.role]}
|
||||
</span>
|
||||
{hasRoleChangeAccess && (
|
||||
<span className="grid place-items-center">
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
value={memberDetails.role}
|
||||
onChange={(value: EUserWorkspaceRoles) => {
|
||||
if (!workspaceSlug || !value) return;
|
||||
|
||||
updateMember(workspaceSlug.toString(), memberDetails.member.id, {
|
||||
role: value,
|
||||
}).catch(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "An error occurred while updating member role. Please try again.",
|
||||
});
|
||||
});
|
||||
}}
|
||||
disabled={!hasRoleChangeAccess}
|
||||
placement="bottom-end"
|
||||
>
|
||||
{Object.keys(ROLE).map((key) => {
|
||||
if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
|
||||
return null;
|
||||
updateMember(workspaceSlug.toString(), memberDetails.member.id, {
|
||||
role: value,
|
||||
}).catch(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "An error occurred while updating member role. Please try again.",
|
||||
});
|
||||
});
|
||||
}}
|
||||
disabled={!hasRoleChangeAccess}
|
||||
placement="bottom-end"
|
||||
>
|
||||
{Object.keys(ROLE).map((key) => {
|
||||
if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
|
||||
return null;
|
||||
|
||||
return (
|
||||
<CustomSelect.Option key={key} value={parseInt(key, 10)}>
|
||||
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
|
||||
</CustomSelect.Option>
|
||||
);
|
||||
})}
|
||||
</CustomSelect>
|
||||
<Tooltip
|
||||
isMobile={isMobile}
|
||||
tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
|
||||
disabled={!isAdmin && !isCurrentUser}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRemoveMemberModal(true)}
|
||||
className={
|
||||
isAdmin || isCurrentUser
|
||||
? "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
|
||||
: "pointer-events-none opacity-0"
|
||||
}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
return (
|
||||
<CustomSelect.Option key={key} value={parseInt(key, 10)}>
|
||||
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
|
||||
</CustomSelect.Option>
|
||||
);
|
||||
})}
|
||||
</CustomSelect>
|
||||
<Tooltip
|
||||
isMobile={isMobile}
|
||||
tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
|
||||
disabled={!isAdmin && !isCurrentUser}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRemoveMemberModal(true)}
|
||||
className={
|
||||
isAdmin || isCurrentUser
|
||||
? "pointer-events-none md:opacity-0 group-hover:pointer-events-auto md:group-hover:opacity-100"
|
||||
: "pointer-events-none hidden md:opacity-0 md:block"
|
||||
}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import router from "next/router";
|
||||
import { WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
|
||||
|
||||
const MobileWorkspaceSettingsTabs = () => {
|
||||
const { workspaceSlug } = router.query;
|
||||
return (
|
||||
<div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
|
||||
{WORKSPACE_SETTINGS_LINKS.map((item, index) => (
|
||||
<div
|
||||
className={`${
|
||||
item.highlight(router.asPath, `/${workspaceSlug}`)
|
||||
? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
|
||||
: "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
|
||||
}`}
|
||||
key={index}
|
||||
onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileWorkspaceSettingsTabs;
|
||||
|
|
@ -174,7 +174,7 @@ export const WorkspaceDetails: FC = observer(() => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
<div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
|
||||
<div className={`w-full overflow-y-auto md:py-8 py-4 md:pr-9 pr-4 ${isAdmin ? "" : "opacity-60"}`}>
|
||||
<div className="flex items-center gap-5 border-b border-custom-border-100 pb-7">
|
||||
<div className="flex flex-col gap-1">
|
||||
<button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
|
||||
|
|
@ -195,7 +195,7 @@ export const WorkspaceDetails: FC = observer(() => {
|
|||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-lg font-semibold leading-6">{watch("name")}</h3>
|
||||
<button type="button" onClick={handleCopyUrl} className="text-sm tracking-tight">{`${
|
||||
<button type="button" onClick={handleCopyUrl} className="text-sm tracking-tight text-left">{`${
|
||||
typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
|
||||
}/${currentWorkspace.slug}`}</button>
|
||||
{isAdmin && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue