display file list in flexbox

[rmanibus]

fixes #20130

[GretaD]

Thank you @rmanibus for your contribution :)
The problem with buttons and scrolling is fixed, but now the upload button stays always below the path.
Before the change

After the change

[rmanibus]

oh yes I missed that.
I will try something (sorry I'm not a frontend developer haha)

[rmanibus]

Ok so the breadcrumb is an inline flex, I don't see how we can put the add button after the last breadcrumb item without putting it in the same flex context.

This is working if the breadcrumb is less than a line long, but if it is two line long the add button will not be on the same line than the last breadcrumb item.

<div style="display: inline-flex; flex-direction:row;">
  <span class="dirtree breadcrumb" style="flex-shrink: 1;">
    <div data-dir="" class="crumb"><a></a></div>
    <div data-dir="/..." class="crumb"><a>long name destination</a></div>
  </span>
  <span class="actions creatable">...</span>
</div>

I think the button must be the last breadcrumb item for it to work. Do you see any other solution ?

[rmanibus]

The main breadcrumb is also broken if the path is too long in 18.02

[GretaD]

Ok so the breadcrumb is an inline flex, I don't see how we can put the add button after the last breadcrumb item without putting it in the same flex context.

This is working if the breadcrumb is less than a line long, but if it is two line long the add button will not be on the same line than the last breadcrumb item.

<div style="display: inline-flex; flex-direction:row;">
  <span class="dirtree breadcrumb" style="flex-shrink: 1;">
    <div data-dir="" class="crumb"><a></a></div>
    <div data-dir="/..." class="crumb"><a>long name destination</a></div>
  </span>
  <span class="actions creatable">...</span>
</div>

I think the button must be the last breadcrumb item for it to work. Do you see any other solution ?

Hey, thank you for rechecking, no, i dont have any better solution tbh.

[rmanibus]

so, the breadcrumb shows up correctly but the button is non functioning for now. what do you think of this ? I did not commit the compiled file for now because it is generating a lots of noise, I think you will have to rebuild the JS.

[rmanibus]

Fetching the button with detach() effectively preserve all event handlers attached with it (https://stackoverflow.com/questions/29461969/appending-element-and-removing-it-destroys-all-event-handlers-in-jquery). So the button is functioning again. I think we are good now.

[rmanibus]

Do you want me to commit all the generated js ? I dont now why it generated files in the app folder, I only made change in the core.

[gary-kim]

You can just comment /compile amend / and and @npmbuildbot will come in and compile it for you :).

[rmanibus]

/compile amend /

[rmanibus]

hi, can someone review this ?

[skjnldsv]

code looks good
Hopefully we create our own new component for it soon :)

[GretaD]

please squash it and resolve the conflicts. Thank you 👍 1

[rmanibus]

/compile amend /

[rmanibus]

I think we are good !

[welcome]

Thanks for your first pull request and welcome to the community! Feel free to keep them coming! If you are looking for issues to tackle then have a look at this selection: https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22

[skjnldsv]

Thanks a lot @rmanibus 🤗