Changes for page Macro Options

Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 1.4
edited by Ecaterina Valica
on 2012/06/12 16:52
Change comment: There is no comment for this version
To version 1.1
edited by Ecaterina Valica
on 2012/06/12 16:50
Change comment: There is no comment for this version

Summary

Details

Page properties
Parent
... ... @@ -1,1 +1,0 @@
1 -Improvements.HomepageContent
Content
... ... @@ -6,7 +6,7 @@
6 6  == Community Feedback ==
7 7  
8 8  {{info}}
9 -[UX][Idea]
9 +[UX][Idea] Render Switches http://xwiki.markmail.org/thread/jwbbz4ypjqcpwral
10 10  {{/info}}
11 11  
12 12  (% class="left column40 dashboardleft" %)
... ... @@ -13,10 +13,18 @@
13 13  (((
14 14  == Issues ==
15 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
16 16  
17 17  == Solution ==
18 18  
19 -
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
20 20  )))
21 21  
22 22  (% class="dashboardright right column60 " %)
... ... @@ -26,22 +26,39 @@
26 26  === Current ===
27 27  [[[[image:current.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:current.png]]
28 28  
37 +=== Rendered Input ==
38 +[[[[image:rendered.png||style="max-width: 98%;"]]>>attach:rendered.png]]
39 +[[[[image:renderedTitle.png||style="max-width: 98%;"]]>>attach:renderedTitle.png]]
29 29  
41 +=== Syntax Input ===
42 +[[[[image:syntax.png||style="max-width: 98%;"]]>>attach:syntax.png]]
43 +[[[[image:syntaxTitle.png||style="max-width: 98%;"]]>>attach:syntaxTitle.png]]
44 +
30 30  (%class='clearfloats'%)((()))
31 31  
47 +=== Wireframe ===
48 +[[[[image:wireframe.png||style="max-width: 98%;"]]>>attach:wireframe.png]]
49 +
50 +(%class='clearfloats'%)((()))
51 +
52 +=== In the wild ===
53 +
32 32  (% class="left column33 dashboardleft"%)
33 33  (((
34 34  
57 +[[[[image:Homepage.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Homepage.png]]
35 35  )))
36 36  
37 37  (% class="left column33 dashboardleft"%)
38 38  (((
39 39  
63 +[[[[image:Welcome gadget.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Welcome gadget.png]]
40 40  )))
41 41  
42 42  (% class="left column33 dashboardright" %)
43 43  (((
44 44  
69 +[[[[image:Search.png||style="border: 1px dotted #DFDFF2; max-width: 90%;"]]>>attach:Search.png]]
45 45  )))
46 46  
47 47  (%class='clearfloats'%)((()))