Mirrors/colanode
1
0
Fork 0
mirror of https://github.com/colanode/colanode.git synced 2025-12-29 00:25:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve avatar picker tabs

Browse Source
This commit is contained in:
Hakan Shehu
2024-11-19 22:49:03 +01:00
parent 9d66fbb930
commit 61c58f1f41
4 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/renderer/components/avatars/avatar-upload.tsx
View File

@@ -21,7 +21,7 @@ export const AvatarUpload = ({ onUpload }: AvatarUploadProps) => {
};
return (
<div className="min-h-[280px] w-full min-w-[355px] p-1">
<div className="h-[280px] min-h-[280px] w-[360px] min-w-[360px] p-1">
<form
className="mb-5 flex gap-x-2"
onSubmit={async (e) => {

60
apps/desktop/src/renderer/components/emojis/emoji-picker.tsx
View File

@@ -15,36 +15,38 @@ export const EmojiPicker = ({ onPick }: EmojiPickerProps) => {
const [skinTone, setSkinTone] = React.useState(0);
const { data, isPending } = useQuery({ type: 'emojis_get' });
if (isPending || !data) {
return null;
}
return (
<EmojiPickerContext.Provider
value={{ data, skinTone, onPick: (emoji) => onPick(emoji, skinTone) }}
>
<div className="flex flex-col gap-1 p-1">
<div className="flex flex-row items-center gap-1">
<input
type="text"
placeholder="Search..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="w-full rounded-md bg-gray-100 p-2 text-xs focus:outline-none"
/>
<EmojiSkinToneSelector
skinTone={skinTone}
onSkinToneChange={setSkinTone}
/>
</div>
<div className="h-full min-h-[280px] w-full overflow-auto md:w-[350px]">
{query.length > 2 ? (
<EmojiPickerSearch query={query} />
) : (
<EmojiPickerBrowser />
)}
</div>
<div className="flex flex-col gap-1 p-1">
<div className="flex flex-row items-center gap-1">
<input
type="text"
placeholder="Search..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="w-full rounded-md bg-gray-100 p-2 text-xs focus:outline-none"
/>
<EmojiSkinToneSelector
skinTone={skinTone}
onSkinToneChange={setSkinTone}
/>
</div>
</EmojiPickerContext.Provider>
<div className="h-[280px] min-h-[280px] overflow-auto w-[350px] min-w-[350px]">
{!isPending && data && (
<EmojiPickerContext.Provider
value={{
data,
skinTone,
onPick: (emoji) => onPick(emoji, skinTone),
}}
>
{query.length > 2 ? (
<EmojiPickerSearch query={query} />
) : (
<EmojiPickerBrowser />
)}
</EmojiPickerContext.Provider>
)}
</div>
</div>
);
};

18
apps/desktop/src/renderer/components/icons/icon-picker.tsx
View File

@@ -13,10 +13,6 @@ export const IconPicker = ({ onPick }: IconPickerProps) => {
const [query, setQuery] = React.useState('');
const { data, isPending } = useQuery({ type: 'icons_get' });
if (isPending || !data) {
return null;
}
return (
<IconPickerContext.Provider value={{ data, onPick }}>
<div className="flex flex-col gap-1 p-1">
@@ -27,11 +23,15 @@ export const IconPicker = ({ onPick }: IconPickerProps) => {
onChange={(e) => setQuery(e.target.value)}
className="w-full rounded-md bg-gray-100 p-2 text-xs focus:outline-none"
/>
<div className="h-full min-h-[280px] w-full overflow-auto md:w-[350px]">
{query.length > 2 ? (
<IconPickerSearch query={query} />
) : (
<IconPickerBrowser />
<div className="h-[280px] min-h-[280px] overflow-auto w-[350px] min-w-[350px]">
{!isPending && data && (
<IconPickerContext.Provider value={{ data, onPick }}>
{query.length > 2 ? (
<IconPickerSearch query={query} />
) : (
<IconPickerBrowser />
)}
</IconPickerContext.Provider>
)}
</div>
</div>

2
apps/desktop/src/renderer/components/ui/tabs.tsx
View File

@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
className
)}
{...props}