Content
Updated by Marc Alcobé almost 3 years ago
## Acceptance criteria
As an extension of the work packages <mention class="mention" data-id="43684" data-type="work_package" data-text="#43684">#43684</mention> and <mention class="mention" data-id="43704" data-type="work_package" data-text="#43704">#43704</mention> in some of the pages where the modal dialogues there is need for minor re-designs and changes:
1. **File picker / location picker:** New
2. **Delete file links:** New
3. **Remove file:** New
4. **Work package deletion:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The header section does not have divider.
* The text has been modified to include the name of the WP inside.
* The action button changed to “Delete” and now includes an icon.
5. **Invite user:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The action bar now contains the option button “Back” and the always present option to “cancel”
* The process has been simplified to only three steps instead of one step per each form field.
* Now the form fields “Name or email address”, “Role in project \[X\]” and “Invitation message” are in a single step.
* The guidelines texts in the “Role in project \[X\]” and “Invitation message” are now more generic (no user name).
* The last step now also includes the text from the field “Invitation message”.
* In the case of a placeholder user the text area for including an “Invitation message” is hidden.
6. **Log time:**
* Modal dialogs doesn’t include “X” button on the header anymore.
7. **Add widget:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The list in the middle doesn’t have dividers anymore as now is using the spot-list default component as base.
* There is an action bar with only one action “Cancel”.
8. **New Board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* There is an action bar with only one action “Cancel”.
* The new width is 60REM (960px) as 70REM is removed as width size.
9. **Board > Configure this board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The size of the modal depends on the content and not a fix height.
10. **Work package table > Table settings:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The height of the modal is now fixed depending on the highest tab option (in this case the tab “Display settings” in order to avoid flickering behaviour. \*
* The action bar is now grey and the order of the buttons is with the positive action in the right. \*
* The new width is 60REM (960px) as 70REM is removed as width size.
11. **Work package table > Export:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* There is an action bar with only one action “Cancel”.
12. **Work package table/Calendar/Board/Team planner > Save as:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The divider in the content has been switched with the “Visibility settings” header. \*
* “Visibility settings” header font is reduced. \*
* The action bar now includes two buttons “Cancel” and “Save”. Only the ”Save” includes icon.
13. **Work package table/Calendar/Board/Team planner > Visibility settings:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The size of the modal depends on the content and not a fix height. \*
* The action bar now includes two buttons “Cancel” and “Save”. Only the ”Save” includes icon.
14. **Help text:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The header section does not have divider. \*
* The action bar now includes two buttons “Close” and “Edit”.
15. **Help > Introduction video:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The header section does not have colour. \*
* The action bar now includes two buttons“Close”. \*
* The text ”You can restart this video from the help menu” is now part of the description.
16. **My account > Two-factor authentication > Backup codes password:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The action bar now includes two buttons“Cancel” and “Confirm”.
17. **My account > Two-factor authentication > Delete authentication:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The action bar now includes two buttons“Cancel” and “Confirm”.
18. **Administration > Attribute help texts > Preview help text:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The header section does not have divider. \*
* The action bar now includes two buttons “Close” and “Edit”.
19. **Administration > Enterprise Edition > Delete token:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* The header section does not have divider. \*
* All texts has been actualised to make the action clearer. \*
* The action bar now includes two buttons “Cancel” and “Delete”. The second one now includes icon.
20. **Administration > GDPR > Review DPA:** \*
* Modal dialogs doesn’t include “X” button on the header anymore. \*
* Now there is an action bar with the button “Close”.
21. **Administration > Working days > Change working days:** \*
* This modal is new and tracked separately in <mention class="mention" data-id="42316" data-type="work_package" data-text="#42316">#42316</mention>.
## Note
With this release all the modals that until now had a width of 70rem (1120px) have now 60rem (960px). With this change we avoid space problems with small desktops like 1020px width and visual problems.
## Visuals in Figma
https://www.figma.com/file/OkoRuig4pvpwIdA2LQZIL0/SPOT---Design-cases?node-id=0%3A1
As an extension of the work packages <mention class="mention" data-id="43684" data-type="work_package" data-text="#43684">#43684</mention> and <mention class="mention" data-id="43704" data-type="work_package" data-text="#43704">#43704</mention> in some of the pages where the modal dialogues there is need for minor re-designs and changes:
1. **File picker / location picker:** New
2. **Delete file links:** New
3. **Remove file:** New
4. **Work package deletion:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The header section does not have divider.
* The text has been modified to include the name of the WP inside.
* The action button changed to “Delete” and now includes an icon.
5. **Invite user:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The action bar now contains the option button “Back” and the always present option to “cancel”
* The process has been simplified to only three steps instead of one step per each form field.
* Now the form fields “Name or email address”, “Role in project \[X\]” and “Invitation message” are in a single step.
* The guidelines texts in the “Role in project \[X\]” and “Invitation message” are now more generic (no user name).
* The last step now also includes the text from the field “Invitation message”.
* In the case of a placeholder user the text area for including an “Invitation message” is hidden.
6. **Log time:**
* Modal dialogs doesn’t include “X” button on the header anymore.
7. **Add widget:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The list in the middle doesn’t have dividers anymore as now is using the spot-list default component as base.
* There is an action bar with only one action “Cancel”.
8. **New Board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* There is an action bar with only one action “Cancel”.
* The new width is 60REM (960px) as 70REM is removed as width size.
9. **Board > Configure this board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The size of the modal depends on the content and not a fix height.
10. **Work package table > Table settings:** \*
*
*
*
*
11. **Work package table > Export:** \*
*
*
12. **Work package table/Calendar/Board/Team planner > Save as:** \*
*
*
*
*
13. **Work package table/Calendar/Board/Team planner > Visibility settings:** \*
*
*
*
14. **Help text:** \*
*
*
*
15. **Help > Introduction video:** \*
*
*
*
*
16. **My account > Two-factor authentication > Backup codes password:** \*
*
*
17. **My account > Two-factor authentication > Delete authentication:** \*
*
*
18. **Administration > Attribute help texts > Preview help text:** \*
*
*
*
19. **Administration > Enterprise Edition > Delete token:** \*
*
*
*
*
20. **Administration > GDPR > Review DPA:** \*
*
*
21. **Administration > Working days > Change working days:** \*
*
## Note
With this release all the modals that until now had a width of 70rem (1120px) have now 60rem (960px). With this change we avoid space problems with small desktops like 1020px width and visual problems.
## Visuals in Figma
https://www.figma.com/file/OkoRuig4pvpwIdA2LQZIL0/SPOT---Design-cases?node-id=0%3A1