Skip to Content

Wiki source code of Homepage - Macro Options

Last modified by Vincent Massol on 2024/11/19 16:12
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
17 * the include macro rendering is confusing because the user might think he can in-line edit the content
18 * trying to delete some words in the welcome message results in deleting the macro
19 * we need to make clear that the home page content is just using an include macro to display the content located in another place
20
21 == Solution ==
22
23 * Have all macros collapsed by default
24 * Improve visual representation of macros inside the editor (blue background color always)
25 * Add 'collapse all'/'extend all' functionality inside the toolbar
26 * Make macros actions (edit, delete, expand/collapse, +custom) more visible
27
28 == JIRAs ==
29
30 {{jiraIssues}}
31 XWIKI-7948,
32 XWIKI-7949,
33 XWIKI-7950,
34 XWIKI-7951,
35 XWIKI-7954
36 {{/jiraIssues}}
37 )))
38
39 (% class="dashboardright right column60" %)
40 (((
41 == Current ==
42
43 (% class="left column50 dashboardleft" %)
44 (((
45 Default: Macro Expanded
46 [[[[image:current.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:current.png]]
47 )))
48
49 (% class="left column50 dashboardleft" %)
50 (((
51 Macro Collapsed
52 [[[[image:currentCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:currentCollapsed.png]]
53 )))
54
55 (% class="clearfloats" %)
56 (((
57
58 )))
59
60 == Proposal ==
61
62 {{toc start="3" depth="3"/}}
63
64 === 1. Macros collapsed by default ===
65
66 (% class="left column50 dashboardleft" %)
67 (((
68 Default: Macros Collapsed
69 [[[[image:collapsedByDefault.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:collapsedByDefault.png]]
70 The collapse/expanded functionality could be also added in the toolbar in order to be more discoverable
71 )))
72
73 (% class="left column50 dashboardleft" %)
74 (((
75 Expand Macros on demand
76 [[[[image:expandedOnDemand.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:expandedOnDemand.png]]
77 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
78 )))
79
80 (% class="clearfloats" %)
81 (((
82
83 )))
84
85 === 2. Macro Parameters ===
86
87 (% class="left column50 dashboardleft" %)
88 (((
89 [[[[image:macrosNoParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosNoParams.png]]
90 The macro's header contains at least the macro's name
91 )))
92
93 (% class="left column50 dashboardleft" %)
94 (((
95 [[[[image:macrosParams.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosParams.png]]
96 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).
97 Adding params value to the header offers a better scanning and identification of the macros.
98 )))
99
100 (% class="clearfloats" %)
101 (((
102
103 )))
104
105 === 3. Macro Actions ===
106
107 Every macro should have 'edit', 'delete' actions + expand/collapse.
108 Some macros could add extended functionality like 'go to page' (include), etc.
109
110 (% class="clearfloats" %)
111 (((
112
113 )))
114
115 (% class="left column50 dashboardleft" %)
116 (((
117 **Version 1**
118 [[[[image:macrosActionsV1.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macrosActionsV1.png]]
119 on hover - inside the macro's header
120 )))
121
122 (% class="left column50 dashboardleft" %)
123 (((
124 **Version 2**
125 [[[[image:macroActionsV2.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:macroActionsV2.png]]
126 on click - as popover
127 )))
128
129 (% class="clearfloats" %)
130 (((
131
132 )))
133
134
135 === 4. Inline Macros ===
136
137 (% class="left column50 dashboardleft" %)
138 (((
139 [[[[image:inlineMacros.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inlineMacros.png]]
140 )))
141
142 (% class="left column50 dashboardleft" %)
143 (((
144 [[[[image:inclineMacrosActions.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:inclineMacrosActions.png]]
145 )))
146
147 (% class="clearfloats" %)
148 (((
149
150 )))
151
152 ==== Var 1: Showing headers (expanded state) ====
153
154 [[[[image:Var IM1 - with headers.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:Var IM1 - with headers.png]]
155
156 (% class="clearfloats" %)
157 (((
158
159 )))
160
161 ==== Var 2: Hiding headers (expanded state) ====
162
163 [[[[image:Var IM2 - without headers.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:Var IM2 - without headers.png]]
164
165 (% class="clearfloats" %)
166 (((
167
168 )))
169
170 === x. Idea: Nested macros ===
171
172 (% class="left column50 dashboardleft" %)
173 (((
174 [[[[image:nestedMacrosCollapsed.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosCollapsed.png]]
175
176 Specially useful for macros like: {columns}, etc.
177 )))
178
179 (% class="left column50 dashboardleft" %)
180 (((
181 [[[[image:nestedMacrosExpanded.png||style="max-width: 98%; margin-bottom: 3em;"]]>>attach:nestedMacrosExpanded.png]]
182 )))
183
184 (% class="clearfloats" %)
185 (((
186
187 )))
188 )))

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected