Wiki source code of Macro Options

Version 7.13 by Ecaterina Valica on 2012/06/12 19:20
Show last authors
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]
10 [users] Making it user-friendly to edit pages with macros for new users (was Re: Need some Help & Explanations) http://xwiki.markmail.org/thread/rnhe6tl3x7snquz7
11 {{/info}}
12
13 (% class="left column40 dashboardleft" %)
14 (((
15 == Issues ==
16 * the include macro rendering is confusing because the user might think he can in-line edit the content
17 * trying to delete some words in the welcome message results in deleting the macro
18 * we need to make clear that the home page content is just using an include macro to display the content located in another place
19
20 == Solution ==
21 * Have all macros collapsed by default
22 * Improve visual representation of macros inside the editor (blue background color always)
23 * Add collapsed/extended functionality inside the toolbar
24 * Make macros actions (edit, delete, +custom) more visible
25
26 )))
27
28 (% class="dashboardright right column60 " %)
29 (((
30 == Current ==
31 (% class="left column50 dashboardleft"%)
32 (((
33 Default: Macro Expanded
34 [[[[image:current.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:current.png]]
35 )))
36
37 (% class="left column50 dashboardleft"%)
38 (((
39 Macro Collapsed
40 [[[[image:currentCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:currentCollapsed.png]]
41 )))
42
43 (%class='clearfloats'%)((()))
44
45 == Proposal ==
46
47 {{toc start='3' depth='3'/}}
48
49 === 1. Macros collapsed by default ===
50
51 (% class="left column50 dashboardleft"%)
52 (((
53 Default: Macros Collapsed
54 [[[[image:collapsedByDefault.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:collapsedByDefault.png]]
55 The collapse/expanded functionality could be also added in the toolbar in order to be more discoverable
56 )))
57
58 (% class="left column50 dashboardleft"%)
59 (((
60 Expand Macros on demand
61 [[[[image:expandedOnDemand.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:expandedOnDemand.png]]
62 Even in the expanded form, keep the macro header and have a special background color for the content in order to show it's a macro
63 )))
64
65 (%class='clearfloats'%)((()))
66
67 === 2. Macro Parameters ===
68
69 (% class="left column50 dashboardleft"%)
70 (((
71
72 [[[[image:macrosNoParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosNoParams.png]]
73 The macro's header contains at least the macro's name
74 )))
75
76 (% class="left column50 dashboardleft"%)
77 (((
78
79 [[[[image:macrosParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosParams.png]]
80 We could also display some important macro params in the header (sorted maybe by relevance or dependent if there is enough place to display this information).
81 Adding params value to the header offers a better scanning and identification of the macros.
82
83 )))
84
85 (%class='clearfloats'%)((()))
86
87 === 3. Macro Actions ===
88
89 Every macro should have 'edit' and 'delete' actions.
90 Some macros could add extended functionality like 'go to page' (include), etc.
91 (%class='clearfloats'%)((()))
92
93 (% class="left column50 dashboardleft"%)
94 (((
95
96 **Version 1**
97 [[[[image:macrosActionsV1.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosActionsV1.png]]
98 on hover - inside the macro's header
99 )))
100
101 (% class="left column50 dashboardleft"%)
102 (((
103 **Version 2**
104 [[[[image:macroActionsV2.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macroActionsV2.png]]
105 on click - as popover
106
107 )))
108
109 (%class='clearfloats'%)((()))
110
111
112 === 4. Inline Macros ===
113
114 (% class="left column50 dashboardleft"%)
115 (((
116
117 [[[[image:inlineMacros.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inlineMacros.png]]
118
119 )))
120
121 (% class="left column50 dashboardleft"%)
122 (((
123
124 [[[[image:inlineMacrosActions.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inlineMacrosActions.png]]
125
126 )))
127
128 (%class='clearfloats'%)((()))
129
130 === x. Nested macros ===
131
132 (% class="left column50 dashboardleft"%)
133 (((
134
135 [[[[image:nestedMacrosCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosCollapsed.png]]
136
137 Specially useful for macros like: {columns}, etc.
138 )))
139
140 (% class="left column50 dashboardleft"%)
141 (((
142
143 [[[[image:nestedMacrosExpanded.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosExpanded.png]]
144
145 )))
146
147 (%class='clearfloats'%)((()))
148
149 )))