Content
View differences
Updated by Eric Schubert over 3 years ago
## **Acceptance criteria**
* The file picker element is a modal that appears centred in the screen with a 50% black background that blocks the UI bellow.
* The size of the modal is:
* Desktop and tablet: fixed 800px X 460px.
* Mobile: responsive with margin 16px in all sides (same as Include Projects without X button).
* The elements that compose the file picker in order from top to down are:
* Header: with a text "Select files" and a button to open the Nextcloud instance in a new tab.
* Divider: full width.
* Breadcrumb: a full width breadcrumb with the first element being the icon of the storage and the instance name always present and then the folder hierarchy that has been navigated (see visuals to see edge cases like very long breadcrumb).
* All the previous levels are always clickable to navigate back.
* The level where you are is grey as it's not clickable.
* In mobile for really long breadcrumbs the first element might be also hidden keeping only the logo of the storage (check visuals for this case).
* List of files with checkboxes (based on the current spot-list element used in both files tab and include project):
* The order of the list is defined by the current order in Nextcloud with the folders always in the top _(TBD)_.
* Only the files has the time stamp and avatar of user as the folders have a chevron to be able to navigate to deeper levels.
* Selecting complete folders is possible.
* Selecting multiple elements in the same or different levels of navigation.
* The complete row is clickable to select a file with the exemption of the navigation chevron in the folders.
* The truncation behaviour is the same as in the files tab (truncates name before time stamp) (check visuals for mobile case).
* In case the current folder contains a file that has been already linked this element from the list is greyed out and on mouse hover a tooltip will be displayed (check case in the visuals).
* Action bar with three actions:
* The right actions are "cancel" and "link files" while in the left side there is the "select all" action.
* The "cancel" button always persist in the same state.
* The "link files" button has two states (check visual to see them):
* Inactive state if no file/folder has been selected.
* Active with files selected: "Link 1 file" for a single case or "Link X files" for multiple.
* In case the user selects a file and then navigates thought the folders the file keeps selected and counted in the button.
* The "select all" link will select all the files and folders from the current folder the user is in (new icon available in the Figma file)
* The action bar in mobile is divided in two rows as in the project include (check visuals)
* Clicking outside the modal (50% black area) will close this one.
Update 2022-09-15: Implementation decisions
* modal will cache each level of files, to give faster interaction between levels
* cache is invalidated before modal is opened (closing the modal and opening it again is needed, if new data should be shown)
* loading indicator debounces at 200ms
* disabled items are static input, linking a file to this work package in another tab won't update the modal
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37434/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37435/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37436/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37438/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37437/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37439/content">
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2438%3A69081
* The file picker element is a modal that appears centred in the screen with a 50% black background that blocks the UI bellow.
* The size of the modal is:
* Desktop and tablet: fixed 800px X 460px.
* Mobile: responsive with margin 16px in all sides (same as Include Projects without X button).
* The elements that compose the file picker in order from top to down are:
* Header: with a text "Select files" and a button to open the Nextcloud instance in a new tab.
* Divider: full width.
* Breadcrumb: a full width breadcrumb with the first element being the icon of the storage and the instance name always present and then the folder hierarchy that has been navigated (see visuals to see edge cases like very long breadcrumb).
* All the previous levels are always clickable to navigate back.
* The level where you are is grey as it's not clickable.
* In mobile for really long breadcrumbs the first element might be also hidden keeping only the logo of the storage (check visuals for this case).
* List of files with checkboxes (based on the current spot-list element used in both files tab and include project):
* The order of the list is defined by the current order in Nextcloud with the folders always in the top _(TBD)_.
* Only the files has the time stamp and avatar of user as the folders have a chevron to be able to navigate to deeper levels.
* Selecting complete folders is possible.
* Selecting multiple elements in the same or different levels of navigation.
* The complete row is clickable to select a file with the exemption of the navigation chevron in the folders.
* The truncation behaviour is the same as in the files tab (truncates name before time stamp) (check visuals for mobile case).
* In case the current folder contains a file that has been already linked this element from the list is greyed out and on mouse hover a tooltip will be displayed (check case in the visuals).
* Action bar with three actions:
* The right actions are "cancel" and "link files" while in the left side there is the "select all" action.
* The "cancel" button always persist in the same state.
* The "link files" button has two states (check visual to see them):
* Inactive state if no file/folder has been selected.
* Active with files selected: "Link 1 file" for a single case or "Link X files" for multiple.
* In case the user selects a file and then navigates thought the folders the file keeps selected and counted in the button.
* The "select all" link will select all the files and folders from the current folder the user is in (new icon available in the Figma file)
* The action bar in mobile is divided in two rows as in the project include (check visuals)
* Clicking outside the modal (50% black area) will close this one.
Update 2022-09-15: Implementation decisions
* modal will cache each level of files, to give faster interaction between levels
* cache is invalidated before modal is opened (closing the modal and opening it again is needed, if new data should be shown)
* loading indicator debounces at 200ms
* disabled items are static input, linking a file to this work package in another tab won't update the modal
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37434/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37435/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37436/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37438/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37437/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37439/content">
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2438%3A69081