Wiki source code of Homepage - Render Switches
Last modified by Vincent Massol on 2024/11/19 16:13
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity}} | ||
| 2 | $xwiki.ssx.use("Improvements.WebHome") | ||
| 3 | $xwiki.ssx.use("Standards.WebHome") | ||
| 4 | {{/velocity}} | ||
| 5 | |||
| 6 | == Community Feedback == | ||
| 7 | |||
| 8 | {{info}} | ||
| 9 | [UX][Idea] Render Switches http://xwiki.markmail.org/thread/jwbbz4ypjqcpwral | ||
| 10 | {{/info}} | ||
| 11 | |||
| 12 | (% class="left column40 dashboardleft" %) | ||
| 13 | ((( | ||
| 14 | == Issues == | ||
| 15 | |||
| 16 | * Hard for users to make the difference between inputs that can contain velocity code and text only inputs | ||
| 17 | * Hard for users to understand what the velocity code will render | ||
| 18 | * Hard for simple users to map what they see in view mode with the velocity code in edit mode | ||
| 19 | |||
| 20 | == Solution == | ||
| 21 | |||
| 22 | * Have a switch attached to velocity enabled inputs that switch the content from velocity code to rendered content | ||
| 23 | * The switch acts like an inline preview of the velocity code | ||
| 24 | * It can be implemented using JS, having a css class hook (like .hasVelocity) to desired inputs | ||
| 25 | * The default state of the inputs (syntax/rendered) can be customized in the Profile | ||
| 26 | * The default state should be 'rendered' for simple user and can be 'syntax' to advanced users | ||
| 27 | * For performance issues the switch should be done at least on demand | ||
| 28 | ))) | ||
| 29 | |||
| 30 | (% class="dashboardright right column60" %) | ||
| 31 | ((( | ||
| 32 | == Proposal == | ||
| 33 | |||
| 34 | === Current === | ||
| 35 | |||
| 36 | [[[[image:current.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:current.png]] | ||
| 37 | |||
| 38 | === Rendered Input === | ||
| 39 | |||
| 40 | [[[[image:rendered.png||style="max-width: 98%;"]]>>attach:rendered.png]] | ||
| 41 | [[[[image:renderedTitle.png||style="max-width: 98%;"]]>>attach:renderedTitle.png]] | ||
| 42 | |||
| 43 | === Syntax Input === | ||
| 44 | |||
| 45 | [[[[image:syntax.png||style="max-width: 98%;"]]>>attach:syntax.png]] | ||
| 46 | [[[[image:syntaxTitle.png||style="max-width: 98%;"]]>>attach:syntaxTitle.png]] | ||
| 47 | |||
| 48 | (% class="clearfloats" %) | ||
| 49 | ((( | ||
| 50 | |||
| 51 | ))) | ||
| 52 | |||
| 53 | === Wireframe === | ||
| 54 | |||
| 55 | [[[[image:wireframe.png||style="max-width: 98%;"]]>>attach:wireframe.png]] | ||
| 56 | |||
| 57 | (% class="clearfloats" %) | ||
| 58 | ((( | ||
| 59 | |||
| 60 | ))) | ||
| 61 | |||
| 62 | === In the wild === | ||
| 63 | |||
| 64 | (% class="left column33 dashboardleft" %) | ||
| 65 | ((( | ||
| 66 | [[[[image:Homepage.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Homepage.png]] | ||
| 67 | ))) | ||
| 68 | |||
| 69 | (% class="left column33 dashboardleft" %) | ||
| 70 | ((( | ||
| 71 | [[[[image:Welcome gadget.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Welcome gadget.png]] | ||
| 72 | ))) | ||
| 73 | |||
| 74 | (% class="left column33 dashboardright" %) | ||
| 75 | ((( | ||
| 76 | [[[[image:Search.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Search.png]] | ||
| 77 | ))) | ||
| 78 | |||
| 79 | (% class="clearfloats" %) | ||
| 80 | ((( | ||
| 81 | |||
| 82 | ))) | ||
| 83 | ))) |
