Wiki source code of Grid View Proposal
Last modified by Vincent Massol on 2024/11/19 16:12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == Grid View Proposal == | ||
| 2 | |||
| 3 | * [[Proposal>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#proposal]] | ||
| 4 | * [[Interaction>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#interaction]]\\ | ||
| 5 | ** [[Editing a field>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#e1]] | ||
| 6 | ** [[Bigger Results and Column Filters>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#e2]] | ||
| 7 | * [[Comments Suggestions>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#suggestions]]\\ | ||
| 8 | ** [[Darker item text>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#c1]] | ||
| 9 | ** [[Number align-right>>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#c2]] | ||
| 10 | ** [[Pagination "outside">>http://incubator.myxwiki.org/xwiki/bin/view/Grid/Proposal#c3]] | ||
| 11 | |||
| 12 | ==== Current Look ==== | ||
| 13 | |||
| 14 | [[image:current.png||width="950"]] | ||
| 15 | |||
| 16 | ==== (% id="proposal" %) Proposal (%%) ==== | ||
| 17 | |||
| 18 | * Pagination Integrated (Top, Bottom) + Chosing how many items to be displayed | ||
| 19 | * Live Filtering | ||
| 20 | ** Filter can be text input, select box or no filter at all | ||
| 21 | |||
| 22 | * Visual separation between what fields have links or editable text inside | ||
| 23 | * Highlight hovered row (providing contrast) | ||
| 24 | * Aligning methods (for better readability): | ||
| 25 | ** Characters - Left | ||
| 26 | ** Numbers - Right | ||
| 27 | ** Date - Right | ||
| 28 | ** Actions - Center | ||
| 29 | ** Images - Center | ||
| 30 | ** Status - Right | ||
| 31 | |||
| 32 | [[image:pagination5A.png||width="950"]] | ||
| 33 | |||
| 34 | == (% id="interaction" %) Interaction (%%) == | ||
| 35 | |||
| 36 | === (% id="e1" %)Editing a field (%%) === | ||
| 37 | |||
| 38 | * Hovering a field makes an "Edit" icon appears + associated title | ||
| 39 | |||
| 40 | [[image:editField.png||width="950"]] | ||
| 41 | |||
| 42 | * Selecting the field to be edit - a popup Dialog appears | ||
| 43 | * The dialog separates the primary action (Save) from the secondary action (Cancel) | ||
| 44 | * **Alternative**: In place edit | ||
| 45 | |||
| 46 | [[image:popupDialog.png||width="200"]] | ||
| 47 | |||
| 48 | === (% id="e2" %)Bigger Results and Column Filters (%%) === | ||
| 49 | |||
| 50 | * The values that don't fit in a field will wrap to second row (vertical-align:top) | ||
| 51 | * The empty fields will stay blank (without "-, ~-~- , emptyvalue" values) | ||
| 52 | * The column current sorted will be displayed apropiate | ||
| 53 | |||
| 54 | [[image:results.png||width="950"]] | ||
| 55 | |||
| 56 | * Date entries could be edited with a calendar popup selector | ||
| 57 | |||
| 58 | == (% id="suggestions" %) Comments suggestions (%%) == | ||
| 59 | |||
| 60 | === (% id="c1" %)Darker item text (%%) === | ||
| 61 | |||
| 62 | * The idea was to make users browse the results using hover and focus their attention on a specific item | ||
| 63 | * concentration on a specific item was done by providing contrast with the rest of the items (font-color + background-color) | ||
| 64 | * hovering the entries makes "editing" function easy to discover (the appearence of the edit icon) | ||
| 65 | * links were better visible (separation between what is editable and what takes you to other pages) | ||
| 66 | |||
| 67 | [[image:darkerText.png||width="950"]] | ||
| 68 | |||
| 69 | === (% id="c2" %)Number align-right (%%) === | ||
| 70 | |||
| 71 | If numbers are aligned to the right the user can scan rapidly through them: | ||
| 72 | |||
| 73 | [[image:numbers.png||width="400"]] | ||
| 74 | |||
| 75 | Also if negative-positive values have a special meaning, the folowing notation can be made: | ||
| 76 | [[image:positivenegative.png||width="400"]] | ||
| 77 | |||
| 78 | === (% id="c3" %) Pagination "outside" (%%) === | ||
| 79 | |||
| 80 | For more versions of pagination see [[Paginations Proposals>>Improvements.GridProposal-Pagination]] | ||
| 81 | [[image:paginationInside.png||width="950"]] |
