Polishing: Modals + Popovers + Tooltips
Version 83.1 by Ecaterina Moraru (Valica) on 2018/08/09 17:42
- [UX][Polishing] Modals Overview (Jul 20, 2018) https://markmail.org/thread/5zrxxavafol7dz42
Description
Generic
Purpose
- Assure consistency across UI
- Replace old components with newer ones and deprecate the oldest
- Limit the modals usage since they pose accessibility and mobile issues
Note: Screenshots done on 10.6-rc-1+
Issues
XWIKI-15071
Modals
Overview
Feature | NO Modal M0 | Browser Modal (confirm(), alert(), prompt(), etc.) M1 | XDialog-Modal / Confirmation Box M2 | Lightbox M3 | Cke_Modal M4 | Bootstrap Modal M5 | Drawer M6 | Feature Total |
---|---|---|---|---|---|---|---|---|
Actions | 4 | 5 | 4 | 13 | ||||
Administration | 2 | 2 | ||||||
Administration Groups | 1 | 2 | 3 | |||||
Administration Users | 1 | 2 | 3 | |||||
AWM | 2 | 2 | 4 | |||||
CKEditor | 2 | 3 | 2 | 7 | ||||
Dashboard | 1 | 2 | 3 | |||||
Docextra | 2 | 3 | 5 | |||||
Flamingo | 1 | 1 | ||||||
Help | 1 | 1 | ||||||
Index | 2 | 2 | ||||||
Notifications | 1 | 1 | 2 | |||||
Profile | 1 | 1 | ||||||
Other | 1 | 1 | ||||||
Skin + Themes | 3 | 3 | ||||||
Tags | 2 | 2 | ||||||
Wiki | 2 | 2 | ||||||
Compatibility, error messages, etc. | ? | ? | ? | |||||
Modal Total | 6+ | 10+ | 21 | 4 | 3 | 10 | 1 | (55)+ |
Actions
- Create - Select Page (1): M5
- Create Non existing (1): M2
- Edit - Mandatory Summary (1): M1
- Edit Class - Delete Property - Save (2): 2xM2
- Edit Object - Delete Object (1): M2
- Version Delete | Rollback (2): 2xM1
- Export (1): M5
- Share Page by Email (1): M5
- Annotations Delete (1): M2
To Do
Done
Administration
- Groups Add / Edit / Delete (3): 2xM3, M1
- Users Add / Edit / Delete (3): 2xM3, M1
- Search Suggest Delete (1): M2
- Import Delete (1): M2
- Extension - Replay History - Delete (1): M1
- Templates - Create - Location (1): M5
AWM
- AWM Delete Application | All Entries (2): 2xM0
- AWM Create Entry (1): M2
- AWM Delete Property (1): M2
CKEditor
- CKEditor (3): 3xM4
- Macros Add | Edit (2): 2xM5
- Leave (1): M1
- Change Syntax (1): M1
Dashboard
- Gadget Add | Edit (2): 2xM5
- Gadget Delete (1): M2
Docextra
- Comments Delete / Permalink (2): 2xM2
- Attachments Delete (1): M2
- History Delete / Rollback (2): 2xM1
Flamingo
- Drawer (1): M6
Help
- Video View (N): NxM5
Index
- Delete Deleted Page / Attachment (2): 2xM2
Notifications
- Filter Add (1): M5
- Filter Delete (1): M2
Profile
- Profile Change Avatar (1): M2
Other
- Go to Page (1): M2
Skin + Themes
- Skin Add Logo | Remove Template (1): 2xM2
- Flamingo Themes - Add Logo (1): M2
Tags
- Tags Rename / Delete (2): 2xM0
Wiki
- Delete Wiki (1): M0
- Join Wiki (1): M0
Popovers
Overview
Feature | NO Popover P0 | Annotations P1 | Tags P2 | Date Picker P3 | Suggest P4 | Color picker P5 | Icon picker P6 | Bootstrap Popover P7 | Bootstrap Dropdowns P8 | Feature Total |
---|---|---|---|---|---|---|---|---|---|---|
Annotations | 3 | 3 | ||||||||
AWM | 1 | 2 | 2 | 5 | ||||||
Color Themes | 1 | 1 | ||||||||
Flamingo | 3 | 3 | ||||||||
Notifications | 1 | 1 | ||||||||
Suggest | 2+ | 2 | ||||||||
Tags | 1 | 1 | ||||||||
Templates | 1 | 1 | ||||||||
Tour | 1 | 1 | ||||||||
Popover Total | / | 3 | 1 | 1 | 4+ | 1 | 3 | 1 | 4 | (18)+ |
Annotations
- Annotations Create + View + Edit (3): P1
AWM
- Pickers Date, User, Group, Icon (3): P3, 2xP4
- Icon Themes AppBar | Template Provider (2): 2xP6
Color Themes
- Flamingo Themes Pick Color (1): P5
Flamingo
- Breadcrumbs (1): P8
- Menus (2): 2xP8
Notifications
- Notifications Menu (1): P8
Suggest
- Search Suggest (2): P4
- Search Input from Navbar
- Search Input from Go to page
- For more places see the Auto-complete on Reference investigation
Tags
- Tags Create (1): P2
Templates
- Administration: Template Providers (1): P6
Tour
- Tour Steps (N): NxP7
Tooltips
Overview
Feature | NO Tooltip T0 | HTML Tooltip T1 | Panel Wizard Tooltip T2 | Notifications Tooltip T3 | Feature Total |
---|---|---|---|---|---|
Notifications | 3 | 3 | |||
Panel Wizard | 1 | 1 | |||
Other | * | * | ? | ||
Tooltip Total | ?+ | ? | 1 | 3 | (4)+ |
Notifications
- Watch Switched Tooltip: Page, Space, Wiki (3): 3xT3
Panel Wizard
- Panel Tooltips (N): T2