Logo navigationDrawer placeholder for not square images

[guillim]

Scope & Context

Currently, Logo is not displayed properly in navigationDrawer when the uploaded image is not a square image.

Current behavior

Expected behavior

It would be nice to have a placehodler for images that are not squared. For example here the ACME company logo would be replaced by the first letter A and a pink background.

Technical inputs

We could use the Avatar.tsx component to achieve this

[SandipGyawali]

@guillim can i look into it. I was also looking at the project to contribute further, might help me to kick start.

[guillim]

yes you can @SandipGyawali

[SandipGyawali]

ok thanks

[guillim]

@Bonapara : a question about the color. Do we let the background color transparent ? do we follow what we do on the MenuItemAvatar ?

[SandipGyawali]

@guillim i was trying to setup the project and i has an issue are you familier with it?

[SandipGyawali]

@guillim i was trying to setup the project and i has an issue are you familier with it?

never mind resolved it.

[guillim]

usually, when I have this kind of issue, i do yarn :)
and if it does not work, i reset my local db

[SandipGyawali]

usually, when I have this kind of issue, i do yarn :) and if it does not work, i reset my local db

Initally i also removed the cache and did yarn install it didn't work for me.
It was giving the issue with the page number but i managed to found the same issue in stackoverflow so fixed from there.

[guillim]

What was responsible of the bug ? Any link that can be useful for other contributors ?

[SandipGyawali]

What was responsible of the bug ? Any link that can be useful for other contributors ?

https://stackoverflow.com/questions/53930305/nodemon-error-system-limit-for-number-of-file-watchers-reached

for now i basically i asked chat gpt and used the above reference to solve it locally on my system. It typically happends when you have many files being watched by tools like vite, which relies on file watchers to track changes.
I increased the fs.module max_user_watches number on my system.
If i find any thing that causes in the codebase and can be fix i will open an issue for it.

Command used for my system
-> sudo sysctl fs.inotify.max_user_watches=524288
-> sudo sysctl -p

[Bonapara]

@Bonapara : a question about the color. Do we let the background color transparent ? do we follow what we do on the MenuItemAvatar ?

Yes we should follow what we did for MenuItemAvatar!

[muraliSingh7]

I am planning to create a NavigationDrawerLogo component.

Here is the logic I am planning to implement:

1. The logo URL and placeholderLogo is passed as a prop to the component.
2. The useEffect hook loads the logo and stores its width and height in the logoDimensions state.
3. If the logo is too large (i.e., its width or height exceeds the max allowed dimensions), it renders an Avatar component using the placeholderLogo.
4. If the logo is within the acceptable size, it renders the logo with background-image styling, ensuring it doesn't exceed the max dimensions.

@guillim @Bonapara Would love your feedback on the overall approach and any potential improvements ?

Here is the screenshot when the image exceeds the height and width of 16px :

[Bonapara]

Don't we already have a component for this?

[guillim]

@Bonapara 's got a point. The best option would be to adapt existing component logic for this specific use case so that all images benefits from this feature. If you could look at Avatar.tsx I think that would be a good starting point @muraliSingh7

[muraliSingh7]

@guillim

I reviewed the logic for displaying the placeholder in Avatar.tsx and noticed the following:

const showPlaceholder =
    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);

While this works for cases where the image URL is invalid or missing, it does not account for the image's dimensions.
To improve the logic, we can add a check for the image's dimensions (width and height) to ensure that it fits within predefined constraints.

Another approach would be to update the image styling using the object-fit property. Setting object-fit: scale-down will automatically adjust the image size to fit the available space, ensuring it doesn't exceed the container's dimensions.

Which approach should we prefer ?

[guillim]

the check for the image's dimensions sounds a better approach to me, since it's what @Bonapara has in mind.

[Bonapara]

@muraliSingh7 @SandipGyawali, I think we had a misunderstanding with @guillim. The current behavior (zoom in) is what we want. We will introduce some guidelines for uploading a logo so users won't upload an inadequate one.

My point was that we should display an icon avatar in case the user don't upload a workspace logo. We will do this later in another issue as well.

Thanks!

[SandipGyawali]

@Bonapara ok fine..

[guillim]

My bad guys ! Sorry for your time loss

[Bonapara]

#9042

[Bonapara]

Sorry for the bad communication @SandipGyawali, just linked the replacement issue

[SandipGyawali]

@Bonapara that's fine. i will look for the other issues. that might be ok right??

[Bonapara]

Sure @SandipGyawali!

[SandipGyawali]

My bad guys ! Sorry for your time loss

that's fine. some time mistake happens.