Wiki source code of XClass Picker

Last modified by Vincent Massol on 2024/02/26 17:52
Show last authors
1 {{toc start="2"/}}
2
3 (% class="row" %)
4 (((
5 (% class="col-xs-12 col-sm-6" %)
6 (((
7 = Proposal =
8
9 * Requirement: a new XClass picker in object edit mode
10 * Current issues:
11 ** Not scalable
12 ** Issues with Nested Spaces, broking the alphabetical listing of the classes
13 ** No description for classes
14 ** No categories for classes
15 ** No way to filter or have an autocomplete
16 *** No highlight of the searched word
17 *** No ability to search in the name, title or class description
18 ** No preview for the end result
19 ** No listing for related classes
20 ** No link to the class documentation
21 ** No consistency in the way we add different entity types
22 )))
23
24 (% class="col-xs-12 col-sm-6" %)
25 (((
26 {{gallery}}
27 image:current.png
28 {{/gallery}}
29 )))
30 )))
31
32
33 (% class="row" %)
34 (((
35 (% class="col-xs-12 col-sm-6" %)
36 (((
37 == Class Modal ==
38
39 === Details ===
40
41 * Using a ##modal## instead of the ##select## in order to add more functionality (filters, etc.) and details (description, etc.)
42 * Use a link to launch the modal
43 * Display per Class:
44 ** Title
45 ** Description
46 ** Categories
47 ** Page Reference (needed for filtering and development / documentation reference)
48 * Display the total count of classes
49 )))
50
51 (% class="col-xs-12 col-sm-6" %)
52 (((
53 {{gallery}}
54 image:O1_1.png
55 image:O4_1.png
56 {{/gallery}}
57 )))
58 )))
59
60
61 (% class="row" %)
62 (((
63 (% class="col-xs-12 col-sm-6" %)
64 (((
65 === Categories ===
66
67 * Display how many classes and in a particular category
68 * Some classes might have multiple categories they could fall in
69 * Proposed Categories:
70 ** **Development**
71 *** used by developers to create applications
72 *** Examples: ##XWiki.TranslationDocumentClass##, ##XWiki.WikiMacroParameterClass##, ##XWiki.WikiMacroClass##, ##XWiki.JavaScriptExtension##, ##XWiki.StyleSheetExtension##, ##XWiki.UIExtensionClass##, ##XWiki.ClassSheetBinding##, ##AppWithinMinutes.*## (fields), ##XWiki.SheetClass##, etc.
73 ** [[**Look & Feel**>>attach:O5.png]]
74 *** common usage for styling
75 *** Examples: ##XWiki.XWikiSkins##, ##FlamingoThemesCode.ThemeClass##, ##IconThemesCode.IconThemeClass##, ##Menu.MenuClass##, ##Panels.PanelClass##, ##XWiki.XWikiSkinFileOverrideClass##, etc.
76 ** **Configuration**
77 *** classes that hold application / wiki configurations
78 *** Examples: ##XWiki.XWikiPreferences##, ##XWiki.ConfigurableClass##, ##XWiki.XWikiRights##, ##XWiki.XWikiGroups##, ##XWiki.SearchSuggestSourceClass##, ##AnnotationCode.AnnotationConfig##, ##PanelsCode.NavigationConfigurationClass##, ##XWiki.UserProfileSectionsClass##, etc.
79 ** **Applications**
80 *** usage and user created
81 *** Examples: ##TourCode.StepClass##, ##Help.Applications.Contributors.Code.ContributorsClass##, ##AnnotationCode.AnnotationClass##, ##XWiki.XWikiComments##, ##XWiki.TagClass##, etc.
82 ** **All**, **Other**
83 )))
84
85 (% class="col-xs-12 col-sm-6" %)
86 (((
87 {{gallery}}
88 image:O2.png
89 image:O5.png
90 {{/gallery}}
91 )))
92 )))
93
94
95 (% class="row" %)
96 (((
97 (% class="col-xs-12 col-sm-6" %)
98 (((
99 === Filtering ===
100
101 * Allow filtering in the title, description, name, category
102 * Highlight the searched word in the appropriate location
103 )))
104
105 (% class="col-xs-12 col-sm-6" %)
106 (((
107 {{gallery}}
108 image:O3.png
109 {{/gallery}}
110 )))
111 )))
112
113
114 (% class="row" %)
115 (((
116 (% class="col-xs-12 col-sm-6" %)
117 (((
118 == Modals Consistency ==
119
120 * ##Gadgets## and ##Macros## use this type of ##Modal## for selection
121 * We could extend this interaction style to ##Classes##, ##Panels##, ##Templates##, ##Color Themes##, ##Properties##, etc.
122 * Currently we have:
123 ** 104 classes
124 ** 51 macros / gadgets
125 ** 33 panels
126 ** 22 color themes
127 ** 16 property types
128 ** 8 templates
129 ** 2 icon themes
130 )))
131
132 (% class="col-xs-12 col-sm-6" %)
133 (((
134 (% class="row" %)
135 (((
136 (% class="col-xs-6 col-sm-6" %)
137 (((
138 [[[[image:attach:type_Panel.png||style="max-height: 280px;"]]>>attach:type_Panel.png]]
139 )))
140
141 (% class="col-xs-6 col-sm-6" %)
142 (((
143 [[[[image:attach:type_Class.png||style="max-height: 280px;"]]>>attach:type_Class.png]]
144 )))
145
146 (% class="col-xs-6 col-sm-6" %)
147 (((
148 [[[[image:attach:type_Gadget.png||style="max-height: 280px;"]]>>attach:type_Gadget.png]]
149 )))
150
151 (% class="col-xs-6 col-sm-6" %)
152 (((
153 [[[[image:attach:type_Macro.png||style="max-height: 280px;"]]>>attach:type_Macro.png]]
154 )))
155 )))
156 )))
157 )))
158
159
160 (% class="row" %)
161 (((
162 (% class="col-xs-12 col-sm-6" %)
163 (((
164 == Modals Preview ==
165
166 * The list display can be extended to include icons, images or even live previews (rendered or using the PDF export)
167 )))
168
169 (% class="col-xs-12 col-sm-6" %)
170 (((
171 (% class="row" %)
172 (((
173 (% class="col-xs-6 col-sm-6" %)
174 (((
175 [[[[image:attach:macro_icon.png||style="max-height: 280px;"]]>>attach:macro_icon.png]]
176 )))
177
178 (% class="col-xs-6 col-sm-6" %)
179 (((
180 [[[[image:attach:macro_image.png||style="max-height: 280px;"]]>>attach:macro_image.png]]
181 )))
182
183 (% class="col-xs-12" %)
184 (((
185 [[[[image:attach:macro_thumbnail.png||style="width: 100%;"]]>>attach:macro_thumbnail.png]]
186 )))
187 )))
188 )))
189 )))
190
191 == Hints & Categories ==
192
193 {{html}}
194 <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSZWw-mY6V0p77SHt-3UCRC28ujt5EX0FpFFyq_epUpCmsEwe3dVf3jY-0phNjzvE7GO-84MkRbf31O/pubhtml?gid=167011863&amp;single=true&amp;widget=true&amp;headers=false" style="width:100%;min-height: 500px;"></iframe>
195 {{/html}}

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected