Content
View differences
Updated by Marc Alcobé almost 4 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 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 location" 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 folders and 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 _(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.
* 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 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.
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37440/content"><img src="/api/v3/attachments/37317/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37444/content"><img src="/api/v3/attachments/37319/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37442/content"><img src="/api/v3/attachments/37316/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37441/content"><img src="/api/v3/attachments/37315/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37443/content"> src="/api/v3/attachments/37318/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 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 location" 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 folders and 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 _(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.
* 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 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.
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37440/content"><img
## Figma
https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2439%3A70282