search

endlessm / kolibri-explore-plugin

The kolibri plugin to add the custom channel representation
MIT License
2 stars 4 forks source link

Add side nav #844

Closed dylanmccall closed 11 months ago

dylanmccall commented 11 months ago

This adds Kolibri's SideNav component to ExploreIndex when the ENABLE_SIDE_NAV option is True. When enabled, it can be toggled by clicking the Endless logo while holding the Ctrl key.

Here is an example, running the Endless Key app but after starting kolibri-daemon like this:

env KOLIBRI_ENABLE_SIDE_NAV=yes flatpak run --command=/app/libexec/kolibri-app/kolibri-daemon org.endlessos.Key.Devel

image

I think this is useful for testing the Explore plugin while doing other things with Kolibri (such as managing content or device settings), and my hope is it could replace our "showmedevice" cheat code eventually :)

Note that the SideNav in Kolibri 0.16 unfortunately includes other things which are not the sidebar (specifically a bottom bar thing). So I need to hide those via CSS. But that stuff only pollutes the DOM when we set ENABLE_SIDE_NAV.

jofilizola commented 11 months ago

Cool! I have a couple of questions. Are we doing this for the India deployment, to access device and install content from external storage? When or in which situations would the sidebar enabled? Will it be accessible to all users? To what extent can we modify it with CSS?

dylanmccall commented 11 months ago

Cool! I have a couple of questions. Are we doing this for the India deployment, to access device and install content from external storage? When or in which situations would the sidebar enabled? Will it be accessible to all users? To what extent can we modify it with CSS?

Yes, that India deployment is what I had in mind when I was doing this. Not sure if it will be useful, but it seems like a good option to have available. The sidebar would be accessible to all users when ENABLE_SIDE_NAV is True, just as it is for Kolibri usually. We could add a "is signed in as admin" check as well, if we find that we want that for some configuration.

We can certainly do some tweaks with CSS. In my change here I am already doing that to hide some elements and fix a modal dialog that wasn't showing up correctly. But in its current form I'm seeing this as a roughly attached dev tool so I'm not fussy about that misaligned close button, for instance. (Although it does pain me. I think there are some unscoped CSS rules being generated that should not be there, either in our thing, or in upstream's thing, or both).

If we do get to the point where we want to have that sidebar enabled by default and looking nice, we'll probably want to chat with upstream about splitting their sidebar component into smaller pieces so we can add our own version of it.