Wiki source code of Macro Options

Version 9.7 by Ecaterina Valica on 2012/06/20 16:58
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][Proposal] Improvements for WYSIWYG macros http://xwiki.markmail.org/thread/ally2wvtzfezebks
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 'collapse all'/'extend all' functionality inside the toolbar
24 * Make macros actions (edit, delete, expand/collapse, +custom) more visible
25
26
27 == JIRAs ==
28 {{jiraIssues}}
29 XWIKI-7948,
30 XWIKI-7949,
31 XWIKI-7950,
32 XWIKI-7951,
33 XWIKI-7954
34 {{/jiraIssues}}
35 )))
36
37 (% class="dashboardright right column60 " %)
38 (((
39 == Current ==
40 (% class="left column50 dashboardleft"%)
41 (((
42 Default: Macro Expanded
43 [[[[image:current.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:current.png]]
44 )))
45
46 (% class="left column50 dashboardleft"%)
47 (((
48 Macro Collapsed
49 [[[[image:currentCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:currentCollapsed.png]]
50 )))
51
52 (%class='clearfloats'%)((()))
53
54 == Proposal ==
55
56 {{toc start='3' depth='3'/}}
57
58 === 1. Macros collapsed by default ===
59
60 (% class="left column50 dashboardleft"%)
61 (((
62 Default: Macros Collapsed
63 [[[[image:collapsedByDefault.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:collapsedByDefault.png]]
64 The collapse/expanded functionality could be also added in the toolbar in order to be more discoverable
65 )))
66
67 (% class="left column50 dashboardleft"%)
68 (((
69 Expand Macros on demand
70 [[[[image:expandedOnDemand.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:expandedOnDemand.png]]
71 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
72 )))
73
74 (%class='clearfloats'%)((()))
75
76 === 2. Macro Parameters ===
77
78 (% class="left column50 dashboardleft"%)
79 (((
80
81 [[[[image:macrosNoParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosNoParams.png]]
82 The macro's header contains at least the macro's name
83 )))
84
85 (% class="left column50 dashboardleft"%)
86 (((
87
88 [[[[image:macrosParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosParams.png]]
89 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).
90 Adding params value to the header offers a better scanning and identification of the macros.
91
92 )))
93
94 (%class='clearfloats'%)((()))
95
96 === 3. Macro Actions ===
97
98 Every macro should have 'edit', 'delete' actions + expand/collapse.
99 Some macros could add extended functionality like 'go to page' (include), etc.
100 (%class='clearfloats'%)((()))
101
102 (% class="left column50 dashboardleft"%)
103 (((
104
105 **Version 1**
106 [[[[image:macrosActionsV1.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosActionsV1.png]]
107 on hover - inside the macro's header
108 )))
109
110 (% class="left column50 dashboardleft"%)
111 (((
112 **Version 2**
113 [[[[image:macroActionsV2.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macroActionsV2.png]]
114 on click - as popover
115
116 )))
117
118 (%class='clearfloats'%)((()))
119
120
121 === 4. Inline Macros ===
122
123 (% class="left column50 dashboardleft"%)
124 (((
125
126 [[[[image:inlineMacros.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inlineMacros.png]]
127
128 )))
129
130 (% class="left column50 dashboardleft"%)
131 (((
132
133 [[[[image:inclineMacrosActions.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inclineMacrosActions.png]]
134
135 )))
136
137 (%class='clearfloats'%)((()))
138
139 ==== Var 1: Showing headers (expanded state) ====
140
141 [[[[image:Var IM1 - with headers.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:Var IM1 - with headers.png]]
142
143 (%class='clearfloats'%)((()))
144
145 ==== Var 2: Hiding headers (expanded state) ====
146
147 [[[[image:Var IM2 - without headers.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:Var IM2 - without headers.png]]
148
149 (%class='clearfloats'%)((()))
150
151 === x. Idea: Nested macros ===
152
153 (% class="left column50 dashboardleft"%)
154 (((
155
156 [[[[image:nestedMacrosCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosCollapsed.png]]
157
158 Specially useful for macros like: {columns}, etc.
159 )))
160
161 (% class="left column50 dashboardleft"%)
162 (((
163
164 [[[[image:nestedMacrosExpanded.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosExpanded.png]]
165
166 )))
167
168 (%class='clearfloats'%)((()))
169
170 )))