Content
View differences
Updated by Marc Alcobé 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 60rem x 30rem (960px x 480px).
* In case the content exceeds the height the breadcrumb and list of files will scroll (see visual attached).
* 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:** Header: with a text "Select files" and a button to open the Nextcloud instance in a new tab.
* **Divider:** Divider: full width.
* **Breadcrumb:** 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).
* There is a specified (configurable per view) number of levels shown. If there is more than this levels a second level with "..." will appear collapsing the levels in between.
* The breadcrumb has some configurable elements from a code perspective:
* Configurations for the complete breadcrumb:
* How many levels are shown before showing the truncate level (in this case: 5 levels).
* Does the breadcrumb show the current level (in this case: yes, showing the current folder).
* Configurations for each level of the breadcrumb:
* A non mandatory and non-clickable label (not used in this case).
* A non mandatory and clickable icon that has the same link as the text (in this case appears in the first level to indicate what is the storage).
* A mandatory and clickable link text (only exception is the current level that is not clickable).
* Once the parent is set and "outside of the breadcrumb" the actions to edit or remove the parent will be added.
* The logic for long breadcrumbs is taken from the one already implemented on file/location picker: If even with the "..." level the breadcrumb exceeds the total screen width, all the levels shown will start truncating at the same % adding at the end of each also the "...".
* **List List of files** 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.
* 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** 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
* The loading indicator will be a loading skeleton.
* 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/38840/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38841/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38842/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38941/content"><img src="/api/v3/attachments/38849/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38942/content"><img src="/api/v3/attachments/38844/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38943/content"><img src="/api/v3/attachments/38845/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38848/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38846/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 60rem x 30rem (960px x 480px).
* In case the content exceeds the height the breadcrumb and list of files will scroll (see visual attached).
* 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:**
* **Divider:**
* **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).
* There is a specified (configurable per view) number of levels shown. If there is more than this levels a second level with "..." will appear collapsing the levels in between.
* The breadcrumb has some configurable elements from a code perspective:
* Configurations for the complete breadcrumb:
* How many levels are shown before showing the truncate level (in this case: 5 levels).
* Does the breadcrumb show the current level (in this case: yes, showing the current folder).
* Configurations for each level of the breadcrumb:
* A non mandatory and non-clickable label (not used in this case).
* A non mandatory and clickable icon that has the same link as the text (in this case appears in the first level to indicate what is the storage).
* A mandatory and clickable link text (only exception is the current level that is not clickable).
* Once the parent is set and "outside of the breadcrumb" the actions to edit or remove the parent will be added.
* The logic for long breadcrumbs is taken from the one already implemented on file/location picker: If even with the "..." level the breadcrumb exceeds the total screen width, all the levels shown will start truncating at the same % adding at the end of each also the "...".
* **List
* The order of the list is defined by the current order in Nextcloud with the folders always in the top.
* 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**
* 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
* The loading indicator will be a loading skeleton.
* 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/38840/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38841/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38842/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38941/content"><img
##
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2438%3A69081