Polishing: Icons
Last modified by Ecaterina Moraru (Valica) on 2020/01/28 14:37
- [UX][Polishing] Icons Overview (Aug 9, 2018) https://markmail.org/thread/6n4fm5nngzv5epq3
Description
Generic
Purpose
- Assure consistency across UI
- Make sure icons are controlled by the Icon Theme
- Support both inline icons (img src) [supported] and decorative (background-image) [not yet supported]
Note: Screenshots done on 10.6+
Issues
Icons
Overview
Icon Set | NO Icon I0 | xwiki I1 | datamodel I2 | silk I3 | glyphicon I4 | fa I5 | Icon Theme I6 | Other I7 | Feature Total | |||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
IMG | BG | IMG | BG | IMG | BG | IMG | BG | Content / Border / Value etc. | ||||||
Administration | 4+13 | 3 | 9* | 20+14 | 63 | |||||||||
Activity Stream | 3 | 11+1 | 1 | 2 | 18 | |||||||||
Annotations | 4+1+ 1+2+ 3 | 1 | 4 | 16 | ||||||||||
AWM | 6 | 1 | 1+1+1+1 | 4+1 | 6+3* | 3 | 1 | +29 | ||||||
Dashboard | 1+2 | 3 | ||||||||||||
Distribution Wizard | 1+1+1 | 3 | / | 1 | 1 | 2 | 10 | |||||||
Extension Manager | 2 | 9+5 | 6+1+* | 1 | +24 | |||||||||
Flamingo | 2 | 1+1 | 2+1 | 9+23+3* +2+2+ 5+4 | 1+1+3 | +60 | ||||||||
Help | 9+6 | 1+1 | 17 | |||||||||||
Livetable | 3+3+1 | 1 | 5+3+1 | 1 | 18 | |||||||||
Macros | 2+1+1+2 | 1 | 3 | 10 | ||||||||||
Notifications | 1+1 | 13+* +5+* +3 | 3 | +26 | ||||||||||
Panels | 1 | 3+* | +4 | |||||||||||
Search | 1 | 9 | 4 | 14 | ||||||||||
Search Suggest | 1 | 5 | 1+5+1 | 1+1 | 15 | |||||||||
Skin + Themes | 1+1 | 3 | 5 | |||||||||||
Tags | 3 | 2 | 5 | |||||||||||
Tree | 1 | 5 | * | * | +6 | |||||||||
Tour | 4 | 4 | ||||||||||||
User Profile | 2 | 1+1 | 6 | 1 | 11 | |||||||||
Web | 2+18 | 2+1 | 12 | 5+4+3+4 | 3+3+ 7+8+2+* | +74 | ||||||||
Wiki | 1 | 1 | ||||||||||||
Watchlist | 20 | 20 | ||||||||||||
Type Total | ? | 51 | 10 | 6 | 13 | 25 | 89 | / | 23 | +148 | 63 | +14 | +11 | +453 |
Administration
- Categories menu (9*): 9+xI6
- Categories & Sections images (20): 20xI7 (IMG)
- Default Section (1): I7 (IMG)
- WYSIWYG Section (2): 2xI7 (IMG)
- Invitation Section (1): I7 (IMG)
- Email Section (1): I7 (IMG)
- Panels Section (1): I7 (IMG)
- Extension Section (2): 2xI7 (IMG)
- Analytics Section (1): I7 (IMG)
- Message Stream Section (1): I7 (IMG)
- Office Importer Section (1): I7 (IMG)
- Request Section (1): I7 (IMG)
- Search Section (2): 2xI7 (IMG)
- Users & Groups: see Livetable
- Rights (4+13): 4xI1 (IMG) + 13 other icons not used (userandgroups/img)
- Import (3): 3xI3 (BG)
To Do
Done
Activity Stream
- Type Page (1): I3 (BG)
- Activity Actions (11) (3Page + 3Comments + 3Annotations + 2Message): 11xI3 (IMG)
- Activity Actions (3) (3Attachment): 11xI1 (IMG)
- Arrows (2): 2xI7 (Value)
- RSS (1): I3 (IMG)
Annotations
- Administration Section Icon (1): I7 (IMG)
- Annotation Tools (4): 4xI3 (BG)
- Annotation Tab Tools (3): 3xI3 (BG)
- Annotation Type (Altered, Updated, etc.) (4): 4xI7 (BG)
- Annotation Add menu (Colibri) (1): I3 (BG)
- Annotation Add area + Criteria (3): 1 + 2xI3 (BG)
AWM
- Actions (5): 4xI3 (BG) + I7 (BG) (Translate)
- Palette (12): 6xI2 (IMG) + 6xI6
- Toolbox (4): 3xI7 (IMG) + I3 (IMG)
- Static List Add (1): I3 (IMG)
- DateTime Picker (1): I2 (BG)
- Step 3 (3): I6 + 2*xI6
- Step 4 (1): I3 (IMG)
- Add entry (1): I3 (IMG)
- Drag & Drop hint (1): I3(BG)
- See Livetable
Dashboard
- Add Gadget / Column (1): I3 (BG)
- Gadget Actions (2): 2xI3 (BG)
Distribution Wizard
Technically, the DW styling in the install step, needs to fallback on the filesytem icons since the Icon Themes are not installed yet.
- Logo + Header (2): 2xI7 (IMG | BG)
- Pencil (1): I3 (IMG)
- Document Tree (6): 3xI3 (BG) + I3 (IMG) Delete + 2xI7 (Content) Tree expand
- Flavor Picker (1): I3 (IMG)
Extension Manager
- Extension Type / Status (9): 9xI3 (BG)
- Search placeholder + Loading (2): 2xI1 (BG)
- Search button (1): I6
- Logging (5): 5xI3 (BG)
- History (6+*): 6+xI6 (service)
- Ratings (1): I7 (BG)
Flamingo
- Drawer (9): 9xI6
- Menus (23): 23xI6
- NavBar (3*): 3xI6
- Menu Caret (1): I7 (Border)
- Login (2): 2xI6
- Accordion (1): I1 (BG)
- Breadcrumb (2): 2xI6 + see Tree
- Section Editing (1): I7 (Content)
- XList (viewer=info + tags + goto) (2): 2xI3 (BG)
- Viewer Changes (3+5): Arrows 3xI7 (Content + Border) + Diff Items 5xI6
- Comments (4): 4xI6
- Confirmation Modals (1): I3 (BG)
- External Link (1): I1 (BG)
- User and Group avatars (2): 2xI1 (IMG)
Help
- Watch (1): I6
- Configure (1): I6
- Features Icons (9): 9xI5
- Applications Icons (6): 6xI5
Livetable
- Actions (5: Edit, Delete, Copy, Rename, Rights): 5xI3 (BG)
- Loading (1): I1 (IMG)
- Index Deleted Doc (3: Error, Restore, Delete): 3xI3 (BG)
- Index Deleted Attachments (1: Delete): I3 (BG)
- Tour (1: Launch): I5 (SPAN)
- Users & Groups (3: Edit, Delete-Disabled): 3xI1 (IMG)
- AWM Examples: Menu, Contributors, Movies, etc.
Livetables actions with icons:
Edit | Delete | Copy | Rename | Rights | Restore | Launch | |
AWM Apps | ✔ | ✔ | |||||
AWM Example | ✔ | ✔ | |||||
Panels | ✔ | ✔ | |||||
ClassSheet | ✔ | ✔ | |||||
Index AllDocs | ✔ | ✔ | ✔ | ✔ | |||
Index DelPage | ✔ | ✔ | |||||
Index DelAtt | ✔ | ||||||
Children | ✔ | ✔ | ✔ | ||||
Wikis | ✔ | ✔ | |||||
WikisTemplate | ✔ | ✔ | |||||
Users | ✔ | ✔ | |||||
Groups | ✔ | ✔ | |||||
Notifications | ✔ | ||||||
Tour | ✔ | ✔ | ✔ | ||||
Count | 9 | 14 | 2 | 2 | 1 | 1 | 1 |
---|
Note: Some livetables don't add icons to their actions, some have just text, or buttons
Macros
- Wikis Macro (2): 2xI3 (BG)
- Children, DocumentTree, Tree Macros : see Tree
- Message Sender Main.MessageSenderMacro (1): I3 (IMG)
- Attachment Selector XWiki.AttachmentSelector (1+2+1): I3 (BG) + 2xI3 (BG)+ I6 (Mime)
- Gallery (3): 3xI7 (BG)
Notifications
- Notifications Mail (XWiki.Notifications.MailTemplate) (3): 3xI7
- Notifications Popover (3+3+1+PageTypes4+MessageTypes2*): 13+*xI6
- Notifications Administration (3+AppTypes2*): 5+*xI6
- Add Filter (1): I5
- Event Ellipsis (1): I5
- Following (3): 3xI6
- See Livetable
Panels
Search
- File Type Arrows (Main.SolrSearch) (4): 4xI7 (BG)
- Icon Theme icons (9): 9xI6 (2Arrows, Magnifying, Info, Breadcrumb, 4Type)
- RSS (1): I3 (BG)
Search Suggest
- Admin Source Type (5): 5xI3 (IMG)
- Admin Add (1): I3 (BG)
- Admin Delete (1): I6
- Popover Source Type (5): 5xI3 (BG)
- Popover Breadcrumb (1): I6
- Popover Loading Spinner (1): I1 (BG)
- Tags Suggest (1): I3 (BG)
Themes
- Create Theme (1): I3 (BG)
- Remove Deprecate property (1): I3 (BG)
- Skin Template add (3): 3xI6
Tags
- xdocFooter add / delete (2): 2xI7 (value)
- Tags Manage (3): 3xI3 (BG)
Tree
- Tree (7*): 5*xI5 + Arrows *xI7 (BG + Content)
- Tree Finder (1): I1 (BG)
Tour
- Homepage Tour (4): 4xI6
- See Livetable
User Profile
- noavatar from Sheet (1): I7 (IMG)
- noavatar + noavatargroup (2): 2xI1 (IMG)
- User categories (6): 6xI6
- Avatar Picker Start (1): I3 (BG)
- Edit Profile Category (1): I3 (BG)
Web
- Pagination (2): 2xI1 (BG)
- User Picker (1): I6
- Group Picker (1): I6
- Page Picker (1): I6
- Location Picker (3): 3xI6
- Templates (1+1+1+4+*): 7+*xI6
- Data Editors - Objects (5): 5xI3 (BG)
- Data Editors - Class (4+14): 4xI3 (BG) + 14xI2 (BG)
- Upload (3+1): 3xI3 (BG) + I1 (BG)
- Attachments (4+8+2+*): 4xI3 (BG) + 8xI6 Types + 2+*xI6 (Actions)
- Full screen (2+18): 2xI3 (IMG) + 18xI3 (IMG) wiki editor
Wiki
- Flavor Picker (1): I6
- See Livetable
Watchlist
- Watchlist Message (XWiki.WatchListMessage) (20): 20xI7 (IMG)