alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 19:43:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

adjust new chat button display in chat folder (#199)

Browse source 
* adjust new chat button display in chat folder

* Display it at the top instead at the end.
This because chats are order by recently created.
UX issue when clicking to the button at the end,
and have to scroll at the top to see and edit newly created chat.

* Display the button when hovering the folder,
not just the group of chats in the folder.
This make the button to display when hover the folder,
even if there is not yet chats list in the folder.

* parent sibling hover

---------

Co-authored-by: Jing Hua <tohjinghua123@gmail.com>
This commit is contained in:
Tindo N. Arsel 2023-04-04 09:04:39 +01:00 committed by GitHub
parent 4d258687c0
commit 8f0ed233e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Menu/ChatFolder.tsx
View file

@ -155,7 +155,7 @@ const ChatFolder = ({
style={{ background: color || '' }} style={{ background: color || '' }}
className={`${ className={`${
color ? '' : 'hover:bg-gray-850' color ? '' : 'hover:bg-gray-850'
} transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer`} } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
onClick={toggleExpanded} onClick={toggleExpanded}
ref={folderRef} ref={folderRef}
onMouseEnter={() => { onMouseEnter={() => {
@ -272,7 +272,8 @@ const ChatFolder = ({
)} )}
</div> </div>
</div> </div>
<div className='group/folder ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1'> <div className='ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1 parent'>
{isExpanded && <NewChat folder={folderId} />}
{isExpanded && {isExpanded &&
folderChats.map((chat) => ( folderChats.map((chat) => (
<ChatHistory <ChatHistory
@ -281,7 +282,6 @@ const ChatFolder = ({
key={`${chat.title}-${chat.index}`} key={`${chat.title}-${chat.index}`}
/> />
))} ))}
{isExpanded && <NewChat folder={folderId} />}
</div> </div>
</div> </div>
); );

2
src/components/Menu/NewChat.tsx
View file

@ -28,7 +28,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
title={folder ? String(t('newChat')) : ''} title={folder ? String(t('newChat')) : ''}
> >
{folder ? ( {folder ? (
<div className='max-h-0 group-hover/folder:max-h-10 group-hover/folder:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'> <div className='max-h-0 parent-sibling-hover:max-h-10 parent-sibling-hover:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
<PlusIcon /> {t('newChat')} <PlusIcon /> {t('newChat')}
</div> </div>
) : ( ) : (

13
tailwind.config.cjs
View file

@ -1,4 +1,15 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
function parentSiblingHoverPlugin({ addVariant, e }) {
addVariant('parent-sibling-hover', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.parent-sibling:hover ~ .parent .${e(
`parent-sibling-hover${separator}${className}`
)}`;
});
});
}
module.exports = { module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: { theme: {
@ -52,6 +63,6 @@ module.exports = {
}, },
}, },
}, },
plugins: [require('@tailwindcss/typography')], plugins: [require('@tailwindcss/typography'), parentSiblingHoverPlugin],
darkMode: 'class', darkMode: 'class',
}; };