Custom Animated Drawers

[ljilekor]

Question

Hi everybody.

I'm looking for a generalized way to implement 'Custom Animated Drawers'.
Since the drawer objects are top-level only and are not animated a custom solution seems appropriate.
It would also be a plus if the user can adjust the width of the custom-drawer by dragging (cfr splitter)

Here is the minimal example code :

from nicegui import ui, context

ui.add_css('''
    @keyframes fade_in_left {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes fade_out_left {
        from {
            opacity: 1;
            transform: translateX(0px);
        }
        to {
            opacity: 0;
            transform: translateX(-100%);
        }
    }
''')

context.client.content.classes('h-[100vh] gap-0 m-0 p-0') 
with ui.column().classes('w-full h-full gap-0 border-4 border-green-100').style("min-height:0"):    # ensure that the main container resizes with the viewport
    with ui.row():
        ui.button(icon='add',    on_click=lambda: mycol.style('animation: fade_in_left 0.25s ease-out forwards'))
        ui.button(icon='remove', on_click=lambda: mycol.style('animation: fade_out_left 0.25s ease-in forwards'))
        
    with ui.splitter().classes('w-full h-full border-4 border-red-100') as splitter:
        with splitter.before:
            with ui.column().classes('w-full h-full  border-4 border-blue-100') as mycol:
                ui.label('popo')
        with splitter.after:
            with ui.column().classes('w-full h-full  border-4 border-yellow-100'):
                ui.label('pupu')
                
ui.run()

1. the mycol column is animated in-out but the other column(s)/content doesn't scale accordingly (even without the splitter).
2. now I have 2 buttons (to hide and to expand). Is there a way to toggle mycol in-out with1 button.
3. the buttons are processed by the server. Such purely ui functionality can (should) be handled on the client side.
   Is there a way to keep everything purely on the client side e.g. ___.on('click', js_handler='''() => {...}''')

Thanks in advance!

[falkoschindler]

Hi @ljilekor,

This reminds me of #4034, which demonstrated something very similar just recently.

[ljilekor]

Thank you for this quick reply.
The only problem here is that, for a more generalized approach, a drawer is a top level layout element, thus can not be nested...

E.g.

    with ui.row().classes('w-full h-full'):
        ui.label('OTHER STUFF')
        with ui.left_drawer().props(f'width={width}') as left_drawer:
            ui.label("Resizable drawer")
        ui.label("Resizable content")

RuntimeError: Found top level layout element "LeftDrawer" inside element "Row". Top level layout elements can not be nested but must be direct children of the page content.

Can the functionality be implemented using ui.column().style(...) or ui.row().style(...) for a more generalized approach?
Additionally, one could consider implementing left, top, right, and bottom dynamic panels for the sake of completeness?

[falkoschindler]

Can the functionality be implemented using ui.column().style(...) or ui.row().style(...) for a more generalized approach?
Additionally, one could consider implementing left, top, right, and bottom dynamic panels for the sake of completeness?

For custom application you can certainly implement your own panel element. But we decided to provide header, footer and drawers from Quasar. They are pretty customizable and support different behavior on desktop and mobile. Recreating all these features with a custom implementation would be rather challenging, I guess.

[ljilekor]

I totally get the approach for using drawers.

The reason why I'd like to have (let's call it) nested interactive panels is more for desktop applications. Simple slide open/close and resize functionality is sufficient.

Those slide panels can present a more modular approach and free up real estate when it comes to e.g. implementing settings/properties panels for a highcharts graph (to set economic indicators, etc...), aggrid column properties (to set custom column formats), etc etc...

Should I start from the solution for interactive drawers 4034 ?
Could someone point me in the right direction/give me a head start on how to begin please...?

The JavaScript used in the example seems quite advanced. I’m comfortable with data science, but building UIs is frankly making my head spin... (which is why I'm so fond of NiceGUI compared to options like Dash/Qt/...)

[falkoschindler]

@s71m What do you think? Maybe your approach from #4034 can be generalized to custom drawers?

[s71m]

My approach is not ideal, and here its a space to improvement. But, sure, that's why we shared own ideas :)
@ljilekor you can put javascript code to file and just add

ui.add_head_html('''
  <script src="/static/drawer.js"></script>         
''')

And it must work for most of nicegui templating pages, because in javascript code used base NiceGUI div-classes.
Also you can check examples of NiceGUI templates for pages in my repo - https://github.com/s71m/nicegui_dashboard, there is an original code of left_drawer and styling. Its very similar approach to your opened discussion for Golden Layout #4042