Skip to content

Commit

Permalink
[ui]: improvement in scrollbar (#2362)
Browse files Browse the repository at this point in the history 
* [ui]: improvement in scrollbar

* [ui]: improvement in scrollbar

* [ui]: improvement in scrollbar

* [ui]: improvement in scrollbar

---------

Co-authored-by: Ruslan Konviser <[email protected]>
  • Loading branch information
@Anishali2 @evereq
Anishali2 and evereq authored Apr 7, 2024
1 parent bd2cc57 commit 9b20a0c
Show file tree
Hide file tree
Showing 7 changed files with 282 additions and 199 deletions.
152 changes: 77 additions & 75 deletions apps/web/app/[locale]/auth/passcode/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useRouter } from 'next/navigation';
import { Dispatch, FormEvent, FormEventHandler, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

import stc from 'string-to-color';
import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';

function AuthPasscode() {
const form = useAuthenticationPasscode();
Expand Down Expand Up @@ -173,8 +174,8 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
form.errors['code'] || form.errors['email']
? 'error'
: form.authenticated
? 'success'
: undefined
? 'success'
: undefined
}
autoFocus={form.authScreen.screen === 'passcode'}
/>
Expand Down Expand Up @@ -317,83 +318,84 @@ export function WorkSpaceComponent(props: IWorkSpace) {
<Text.Heading as="h3" className="text-center">
{t('pages.auth.SELECT_WORKSPACE')}
</Text.Heading>

<div className="flex flex-col w-full gap-4 max-h-[16.9375rem] overflow-scroll scrollbar-hide">
{props.workspaces?.map((worksace, index) => (
<div
key={index}
className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
>
<div className="text-base font-medium py-[1.25rem] px-4 flex flex-col gap-[1.0625rem]">
<div className="flex justify-between">
<span>{worksace.user.tenant.name}</span>
<span
className="hover:cursor-pointer"
onClick={() => {
props.setSelectedWorkspace(index);
if (
props.selectedTeam &&
!worksace.current_teams
?.map((team) => team.team_id)
.includes(props.selectedTeam)
) {
props.setSelectedTeam(worksace.current_teams[0].team_id);
}
}}
>
{props.selectedWorkspace === index ? (
<CheckCircleOutlineIcon className="w-6 h-6 stroke-[#27AE60] fill-[#27AE60]" />
) : (
<CircleIcon className="w-6 h-6" />
)}
</span>
</div>
<span className="bg-[#E5E5E5] w-full h-[1px]"></span>
{/* <div className="w-full h-[1px] bg-[#E5E5E5] dark:bg-[#34353D]"></div> */}
<div className="flex flex-col gap-4 px-5 py-1.5">
{worksace.current_teams?.map((team) => (
<div
key={`${index}-${team.team_id}`}
className="flex items-center justify-between gap-4 min-h-[2.875rem]"
<ScrollArea className='h-64 relative w-full pr-2 '>
<div className="flex flex-col gap-y-4 ">
{props.workspaces?.map((worksace, index) => (
<div
key={index}
className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
>
<div className="text-base font-medium py-[1.25rem] px-4 flex flex-col gap-[1.0625rem]">
<div className="flex justify-between">
<span>{worksace.user.tenant.name}</span>
<span
className="hover:cursor-pointer"
onClick={() => {
props.setSelectedWorkspace(index);
if (
props.selectedTeam &&
!worksace.current_teams
?.map((team) => team.team_id)
.includes(props.selectedTeam)
) {
props.setSelectedTeam(worksace.current_teams[0].team_id);
}
}}
>
<span className="flex items-center justify-between gap-4">
<Avatar
imageTitle={team.team_name}
size={34}
backgroundColor={`${stc(team.team_name)}80`}
/>
<div className="flex justify-between">
<span className="max-w-[14rem] whitespace-nowrap text-ellipsis overflow-hidden">
{team.team_name}
</span>
<span>({team.team_member_count})</span>
</div>
</span>
<span
className="hover:cursor-pointer"
onClick={() => {
props.setSelectedTeam(team.team_id);
if (props.selectedWorkspace !== index) {
props.setSelectedWorkspace(index);
}
}}
{props.selectedWorkspace === index ? (
<CheckCircleOutlineIcon className="w-6 h-6 stroke-[#27AE60] fill-[#27AE60]" />
) : (
<CircleIcon className="w-6 h-6" />
)}
</span>
</div>
<span className="bg-[#E5E5E5] w-full h-[1px]"></span>
{/* <div className="w-full h-[1px] bg-[#E5E5E5] dark:bg-[#34353D]"></div> */}
<div className="flex flex-col gap-4 px-5 py-1.5">
{worksace.current_teams?.map((team) => (
<div
key={`${index}-${team.team_id}`}
className="flex items-center justify-between gap-4 min-h-[2.875rem]"
>
{props.selectedTeam === team.team_id ? (
<CheckCircleOutlineIcon className="w-5 h-5 stroke-[#27AE60] fill-[#27AE60]" />
) : (
<CircleIcon className="w-5 h-5" />
)}
</span>
</div>
))}
<span className="flex items-center justify-between gap-4">
<Avatar
imageTitle={team.team_name}
size={34}
backgroundColor={`${stc(team.team_name)}80`}
/>
<div className="flex justify-between">
<span className="max-w-[14rem] whitespace-nowrap text-ellipsis overflow-hidden">
{team.team_name}
</span>
<span>({team.team_member_count})</span>
</div>
</span>
<span
className="hover:cursor-pointer"
onClick={() => {
props.setSelectedTeam(team.team_id);
if (props.selectedWorkspace !== index) {
props.setSelectedWorkspace(index);
}
}}
>
{props.selectedTeam === team.team_id ? (
<CheckCircleOutlineIcon className="w-5 h-5 stroke-[#27AE60] fill-[#27AE60]" />
) : (
<CircleIcon className="w-5 h-5" />
)}
</span>
</div>
))}
</div>
</div>
</div>
</div>
))}
</div>

))}
</div>
<ScrollBar className='-pr-20'/>
</ScrollArea>
<div className="flex items-center justify-between w-full">
<div className="flex flex-col space-y-2">
<div>
Expand Down
101 changes: 54 additions & 47 deletions apps/web/components/shared/collaborate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import stc from 'string-to-color';
import { JitsuAnalytics } from '../../../lib/components/services/jitsu-analytics';
import { useTranslations } from 'next-intl';
import { BrushSquareIcon, PhoneUpArrowIcon, UserLinearIcon } from 'assets/svg';
import { ScrollArea } from '@components/ui/scroll-bar';

const Collaborate = () => {
const { onMeetClick, onBoardClick, collaborativeMembers, setCollaborativeMembers } = useCollaborative();
Expand Down Expand Up @@ -89,58 +90,64 @@ const Collaborate = () => {
<CommandInput placeholder="Search member..." />
<CommandList>
<CommandEmpty>{t('common.USER_NOT_FOUND')}</CommandEmpty>
<CommandGroup className="p-2">
{members.map((member) => (
<CommandItem
key={member?.id}
className="flex items-center px-2 cursor-pointer"
onSelect={() => {
handleMemberClick(member);
}}
>
<div
className={clsxm(
'w-[2.25rem] h-[2.25rem]',
'flex justify-center items-center',
'rounded-full text-xs text-default dark:text-white',
'shadow-md text-lg font-normal'
)}
style={{
backgroundColor: `${stc(member?.name || '')}80`
<ScrollArea className="h-[15rem]">
<CommandGroup className="p-2">
{members.map((member) => (
<CommandItem
key={member?.id}
className="flex items-center px-2 cursor-pointer"
onSelect={() => {
handleMemberClick(member);
}}
>
{(member?.image?.thumbUrl || member?.image?.fullUrl || member?.imageUrl) &&
isValidUrl(
member?.image?.thumbUrl || member?.image?.fullUrl || member?.imageUrl
) ? (
<Avatar
size={36}
className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"
imageUrl={
member?.image?.thumbUrl ||
<div
className={clsxm(
'w-[2.25rem] h-[2.25rem]',
'flex justify-center items-center',
'rounded-full text-xs text-default dark:text-white',
'shadow-md text-lg font-normal'
)}
style={{
backgroundColor: `${stc(member?.name || '')}80`
}}
>
{(member?.image?.thumbUrl ||
member?.image?.fullUrl ||
member?.imageUrl) &&
isValidUrl(
member?.image?.thumbUrl ||
member?.image?.fullUrl ||
member?.imageUrl
}
alt="Team Avatar"
imageTitle={member?.name || ''}
></Avatar>
) : member?.name ? (
imgTitle(member?.name || ' ').charAt(0)
) : (
''
)}
</div>
) ? (
<Avatar
size={36}
className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"
imageUrl={
member?.image?.thumbUrl ||
member?.image?.fullUrl ||
member?.imageUrl
}
alt="Team Avatar"
imageTitle={member?.name || ''}
></Avatar>
) : member?.name ? (
imgTitle(member?.name || ' ').charAt(0)
) : (
''
)}
</div>

<div className="ml-2">
<p className="text-sm font-medium leading-none">{member?.name}</p>
<p className="text-xs text-muted-foreground">{member?.email}</p>
</div>
{selectedMemberIds.includes(member?.id) ? (
<Check className="flex w-5 h-5 ml-auto text-primary dark:text-white" />
) : null}
</CommandItem>
))}
</CommandGroup>
<div className="ml-2">
<p className="text-sm font-medium leading-none">{member?.name}</p>
<p className="text-xs text-muted-foreground">{member?.email}</p>
</div>
{selectedMemberIds.includes(member?.id) ? (
<Check className="flex w-5 h-5 ml-auto text-primary dark:text-white" />
) : null}
</CommandItem>
))}
</CommandGroup>
</ScrollArea>
</CommandList>
</Command>
<DialogFooter className="flex items-center border-t border-[#0000001A] dark:border-[#26272C] p-4 sm:justify-between">
Expand Down
42 changes: 42 additions & 0 deletions apps/web/components/ui/scroll-bar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
'use client';

import * as React from 'react';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { clsxm } from '@app/utils';


const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root ref={ref} className={clsxm('relative overflow-hidden', className)} {...props}>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={clsxm(
'flex touch-none select-none transition-colors',
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full dark:bg-white bg-[#6b7280]" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

export { ScrollArea, ScrollBar };
19 changes: 11 additions & 8 deletions apps/web/lib/components/image-overlapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Image from 'next/image';
import Link from 'next/link';
import Skeleton from 'react-loading-skeleton';
import { Tooltip } from './tooltip';
import { ScrollArea } from '@components/ui/scroll-bar';
export interface ImageOverlapperProps {
id: string;
url: string;
Expand Down Expand Up @@ -72,11 +73,12 @@ export default function ImageOverlapper({
{secondArray.length < 100 ? secondArray.length : 99}+
</div>
</PopoverTrigger>
<PopoverContent className="!p-0 bg-white dark:bg-dark--theme max-h-40 overflow-y-auto ">
<div className="flex flex-col space-y-2 m-2">
{secondArray.map((image: ImageOverlapperProps, index: number) => {
return (
<Link
<PopoverContent className="!p-0 bg-white dark:bg-dark--theme input-border">
<ScrollArea className="h-40 ">
<div className="flex flex-col space-y-2 m-2">
{secondArray.map((image: ImageOverlapperProps, index: number) => {
return (
<Link
href={`/profile/${image.id}?name=${image.alt}`}
className="relative hover:bg-gray-300 hover:dark:bg-[#24262c] p-1 rounded-md"
key={index}
Expand All @@ -92,9 +94,10 @@ export default function ImageOverlapper({
<p className="ml-2">{image.alt}</p>
</div>
</Link>
);
})}
</div>
);
})}
</div>
</ScrollArea>
</PopoverContent>
</Popover>
)}
Expand Down
Loading

0 comments on commit 9b20a0c

Please sign in to comment.