Add a responsive layout

[js-ddev]

Step to reproduce : Use the File Manager below 768px width (tablet mode for bootstrap).

• Columns and rows keep the same position than on a desktop screen, their content is overridden and the application is not usable.
• The jstree class takes also new properties to increase its visibility, which doesn't help to render the content on a small screen:

• Toolbar buttons (New file, Download, Cut, etc) could be eventually displayed as icon only without their label, to be displayed on a single line.
• When a folder is opened, the vertical space below the header is not used to repeat the header columns on each line, as it is the case for XWiki livetable in mobile mode:

[mflorea]

I would do this (when screen width is less than 768px):

• Tree
  • hide or don't generate the tree and the divider
    • hide can be done from CSS, but since the display is done from JavaScript, I'd rather not output the tree and the divider, but for this we need to have the screen / drive width in the application state so that we can use it in the condition (2h)
  • show instead a breadcrumb with tree navigation above the action buttons and the live table (similar with the wiki page breadcrumb): File Manger / Path / To / Folder
    • requires a new Angular directive (breadcrumb) (2d)
  • replace the tree contextual menu with a 3-dot menu at the end of the breadcrumb: File Manger / Path / To / Folder ⋮
    • Add the ⋮ button with drop-down menu at the end of the breadcrumb; requires a new Angular directive; we need to find a way to reuse the enabled / disabled menu item conditions from jsTree's menu callback (4h)
    • New Folder: add a text input at the end of the breadcrumb; switch to the new folder on enter (4h)
    • Rename Folder: replace the last item in the breadcrumb with a text input prefilled with the name of the current folder (3h)
• Action buttons
  • hide the action button labels and show only their icons (3h)
• Live Table
  • Keep the default responsive table layout but add the column meta data in order to improve the display (when the column labels are repeated) (1h).
  • Hide the Type column (1h)
  • Display the file size, date and author on the name column and hide the corresponding columns (6h)

[icon] fileName.txt
2.1KB, by Administrator, 2 hours ago

This needs at least 5 days.