Content
View differences
Updated by Marc Alcobé over 3 years ago
## **Acceptance criteria**
* The location 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 location" 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 relevant 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 which 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 folders and files** files (based on the current spot-list element used in files tab):
* 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.
* Clicking on a folder row will navigate to a deeper level.
* The complete row is clickable.
* The truncation behaviour is the same as in the files tab (truncates name before time stamp) (check visuals for mobile case).
* All the files are not selectable (they help the user to reference where to upload a file) therefore the element from the list is greyed out and on mouse hover a tooltip will be displayed (check case in the visuals).
* The current folder you are on its the one where the file will be uploaded if the action is completed.
* **Action bar** Action bar with two actions:
* The actions are "cancel" and "choose location".
* The "cancel" button always persist in the same state.
* The "choose location" button always persist in an active state as the current selected folder is where the file will be updated.
* 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.
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38852/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38856/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38855/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38853/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38857/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38858/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38854/content">
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2439%3A70282
* The location 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 relevant 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 which 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.
* Clicking on a folder row will navigate to a deeper level.
* The complete row is clickable.
* The truncation behaviour is the same as in the files tab (truncates name before time stamp) (check visuals for mobile case).
* All the files are not selectable (they help the user to reference where to upload a file) therefore the element from the list is greyed out and on mouse hover a tooltip will be displayed (check case in the visuals).
* The current folder you are on its the one where the file will be uploaded if the action is completed.
* **Action bar**
* The actions are "cancel" and "choose location".
* The "cancel" button always persist in the same state.
* The "choose location" button always persist in an active state as the current selected folder is where the file will be updated.
* 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.
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38852/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38856/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38855/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38853/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38857/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38858/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38854/content">
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2439%3A70282