Wiki source code of Notifications (9.x)
Last modified by Vincent Massol on 2024/02/26 17:51
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | {{toc start="2"/}} | ||
2 | |||
3 | == Overview == | ||
4 | |||
5 | (% class="row" %) | ||
6 | ((( | ||
7 | (% class="col-xs-12 col-md-6" %) | ||
8 | ((( | ||
9 | Before | ||
10 | [[[[image:before.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:before.png]] | ||
11 | ))) | ||
12 | |||
13 | (% class="col-xs-12 col-md-6" %) | ||
14 | ((( | ||
15 | After | ||
16 | [[[[image:after.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:after.png]] | ||
17 | ))) | ||
18 | ))) | ||
19 | |||
20 | == RSS Feed == | ||
21 | |||
22 | (% class="row" %) | ||
23 | ((( | ||
24 | (% class="col-xs-12 col-md-3" %) | ||
25 | ((( | ||
26 | * Moving "RSS feed" to Profile Settings | ||
27 | * Having "Clear All" on the same line as "Settings" | ||
28 | * Smaller switches | ||
29 | * Naming: Fixing "Watchlist" label name | ||
30 | ))) | ||
31 | |||
32 | (% class="col-xs-6 col-md-3" %) | ||
33 | ((( | ||
34 | Before | ||
35 | [[[[image:beforeRSS.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeRSS.png]] | ||
36 | ))) | ||
37 | |||
38 | (% class="col-xs-6 col-md-3" %) | ||
39 | ((( | ||
40 | After | ||
41 | [[[[image:afterMenu.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterMenu.png]] | ||
42 | ))) | ||
43 | |||
44 | (% class="col-xs-6 col-md-3" %) | ||
45 | ((( | ||
46 | After | ||
47 | [[[[image:afterRSS.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterRSS.png]] | ||
48 | ))) | ||
49 | ))) | ||
50 | |||
51 | == Settings == | ||
52 | |||
53 | (% class="row" %) | ||
54 | ((( | ||
55 | (% class="col-xs-12 col-md-3" %) | ||
56 | ((( | ||
57 | * Naming: Using "Settings" over "Preferences" | ||
58 | * Headings consistent with other Profile sections | ||
59 | * Email preferences aligned with Applications email activator | ||
60 | ))) | ||
61 | |||
62 | (% class="col-xs-6 col-md-3" %) | ||
63 | ((( | ||
64 | Before | ||
65 | [[[[image:beforeSettings.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeSettings.png]] | ||
66 | ))) | ||
67 | |||
68 | (% class="col-xs-6 col-md-3" %) | ||
69 | ((( | ||
70 | After | ||
71 | [[[[image:afterSettings.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterSettings.png]] | ||
72 | ))) | ||
73 | ))) | ||
74 | |||
75 | === Applications === | ||
76 | |||
77 | (% class="row" %) | ||
78 | ((( | ||
79 | (% class="col-xs-12 col-md-3" %) | ||
80 | ((( | ||
81 | * Naming: Using "Alert" instead of "Notifications menu" in order to be consistent with Filters + shorter | ||
82 | * Shorter, equal length descriptions | ||
83 | * Improved styling for table, having a master-secondary styling instead of odd/even backgrounds | ||
84 | * Better table widths | ||
85 | ))) | ||
86 | |||
87 | (% class="col-xs-6 col-md-3" %) | ||
88 | ((( | ||
89 | Before | ||
90 | [[[[image:beforeApplications.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeApplications.png]] | ||
91 | ))) | ||
92 | |||
93 | (% class="col-xs-6 col-md-3" %) | ||
94 | ((( | ||
95 | After | ||
96 | [[[[image:afterApplications.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterApplications.png]] | ||
97 | ))) | ||
98 | ))) | ||
99 | |||
100 | === Filters === | ||
101 | |||
102 | (% class="row" %) | ||
103 | ((( | ||
104 | (% class="col-xs-12 col-md-3" %) | ||
105 | ((( | ||
106 | * Naming: using "Add" instead of "Create" | ||
107 | * Buttons grouped together | ||
108 | * Better styling for the table: removing white borders + using the xform label styling for table headings | ||
109 | ))) | ||
110 | |||
111 | (% class="col-xs-6 col-md-3" %) | ||
112 | ((( | ||
113 | Before | ||
114 | [[[[image:beforeFilters.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeFilters.png]] | ||
115 | ))) | ||
116 | |||
117 | (% class="col-xs-6 col-md-3" %) | ||
118 | ((( | ||
119 | After | ||
120 | [[[[image:afterFilters.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterFilters.png]] | ||
121 | ))) | ||
122 | ))) | ||
123 | |||
124 | (% class="row" %) | ||
125 | ((( | ||
126 | (% class="col-xs-12 col-md-3" %) | ||
127 | ((( | ||
128 | * Naming: shorter buttons labels for "Advanced" | ||
129 | * Naming: "Cancel" instead of "Close" | ||
130 | * Hint put inside the Title | ||
131 | * Fixed select width for livetable | ||
132 | * For "Add" modal, the button label should be "Add" instead of "Save" | ||
133 | ))) | ||
134 | |||
135 | (% class="col-xs-6 col-md-3" %) | ||
136 | ((( | ||
137 | Before | ||
138 | [[[[image:beforeAdvanced.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeAdvanced.png]] | ||
139 | ))) | ||
140 | |||
141 | (% class="col-xs-6 col-md-3" %) | ||
142 | ((( | ||
143 | After | ||
144 | [[[[image:afterAdvanced.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterAdvanced.png]] | ||
145 | ))) | ||
146 | ))) | ||
147 | |||
148 | == Events == | ||
149 | |||
150 | (% class="row" %) | ||
151 | ((( | ||
152 | (% class="col-xs-12 col-md-3" %) | ||
153 | ((( | ||
154 | * Focus on User, not on App type | ||
155 | * Moved "details" activator to the event actions area | ||
156 | * Replaced App icon with Event icon | ||
157 | * Using ##jodatime## to display relative times | ||
158 | * "See more" now load another 5 items, but in the future we might want to create a special area to display and filter all the launched notifications (that could replace "Activity Stream") | ||
159 | ))) | ||
160 | |||
161 | (% class="col-xs-6 col-md-3" %) | ||
162 | ((( | ||
163 | Before | ||
164 | [[[[image:beforeEvents.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeEvents.png]] | ||
165 | ))) | ||
166 | |||
167 | (% class="col-xs-6 col-md-3" %) | ||
168 | ((( | ||
169 | After | ||
170 | [[[[image:afterEvents.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterEvents.png]] | ||
171 | ))) | ||
172 | ))) | ||
173 | |||
174 | (% class="row" %) | ||
175 | ((( | ||
176 | (% class="col-xs-12 col-md-3" %) | ||
177 | ((( | ||
178 | * Event Unread + Details | ||
179 | ))) | ||
180 | |||
181 | (% class="col-xs-6 col-md-3" %) | ||
182 | ((( | ||
183 | Before | ||
184 | [[[[image:beforeEventDetails.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeEventDetails.png]] | ||
185 | ))) | ||
186 | |||
187 | (% class="col-xs-6 col-md-3" %) | ||
188 | ((( | ||
189 | After | ||
190 | [[[[image:afterEventDetails.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterEventDetails.png]] | ||
191 | ))) | ||
192 | ))) | ||
193 | |||
194 | (% class="row" %) | ||
195 | ((( | ||
196 | (% class="col-xs-12 col-md-3" %) | ||
197 | ((( | ||
198 | * Event Read | ||
199 | ))) | ||
200 | |||
201 | (% class="col-xs-6 col-md-3" %) | ||
202 | ((( | ||
203 | Before | ||
204 | [[[[image:beforeEventRead.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeEventRead.png]] | ||
205 | ))) | ||
206 | |||
207 | (% class="col-xs-6 col-md-3" %) | ||
208 | ((( | ||
209 | After | ||
210 | [[[[image:afterEventRead.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterEventRead.png]] | ||
211 | ))) | ||
212 | ))) | ||
213 | |||
214 | (% class="row" %) | ||
215 | ((( | ||
216 | (% class="col-xs-12 col-md-3" %) | ||
217 | ((( | ||
218 | * Event buttons titles | ||
219 | ))) | ||
220 | |||
221 | (% class="col-xs-6 col-md-3" %) | ||
222 | ((( | ||
223 | Before | ||
224 | [[[[image:beforeEventTitle.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeEventTitle.png]] | ||
225 | ))) | ||
226 | |||
227 | (% class="col-xs-6 col-md-3" %) | ||
228 | ((( | ||
229 | After | ||
230 | [[[[image:afterReadTitle.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterReadTitle.png]] | ||
231 | ))) | ||
232 | |||
233 | (% class="col-xs-6 col-md-3" %) | ||
234 | ((( | ||
235 | After | ||
236 | [[[[image:afterDetailsTitle.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterDetailsTitle.png]] | ||
237 | ))) | ||
238 | ))) | ||
239 | |||
240 | === Event Types === | ||
241 | |||
242 | (% class="row" %) | ||
243 | ((( | ||
244 | (% class="col-xs-12 col-md-3" %) | ||
245 | ((( | ||
246 | * Event Type: create | ||
247 | ))) | ||
248 | |||
249 | (% class="col-xs-6 col-md-3" %) | ||
250 | ((( | ||
251 | Before | ||
252 | [[[[image:beforeCreate.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeCreate.png]] | ||
253 | ))) | ||
254 | |||
255 | (% class="col-xs-6 col-md-3" %) | ||
256 | ((( | ||
257 | After | ||
258 | [[[[image:afterCreate.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterCreate.png]] | ||
259 | ))) | ||
260 | ))) | ||
261 | |||
262 | (% class="row" %) | ||
263 | ((( | ||
264 | (% class="col-xs-12 col-md-3" %) | ||
265 | ((( | ||
266 | * Event Type: update | ||
267 | ))) | ||
268 | |||
269 | (% class="col-xs-6 col-md-3" %) | ||
270 | ((( | ||
271 | Before | ||
272 | [[[[image:beforeUpdate.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeUpdate.png]] | ||
273 | ))) | ||
274 | |||
275 | (% class="col-xs-6 col-md-3" %) | ||
276 | ((( | ||
277 | After | ||
278 | [[[[image:afterUpdate.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterUpdate.png]] | ||
279 | ))) | ||
280 | ))) | ||
281 | |||
282 | (% class="row" %) | ||
283 | ((( | ||
284 | (% class="col-xs-12 col-md-3" %) | ||
285 | ((( | ||
286 | * Event Type: delete | ||
287 | ))) | ||
288 | |||
289 | (% class="col-xs-6 col-md-3" %) | ||
290 | ((( | ||
291 | Before | ||
292 | [[[[image:beforeDelete.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeDelete.png]] | ||
293 | ))) | ||
294 | |||
295 | (% class="col-xs-6 col-md-3" %) | ||
296 | ((( | ||
297 | After | ||
298 | [[[[image:afterDelete.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterDelete.png]] | ||
299 | ))) | ||
300 | ))) | ||
301 | |||
302 | (% class="row" %) | ||
303 | ((( | ||
304 | (% class="col-xs-12 col-md-3" %) | ||
305 | ((( | ||
306 | * Event Type: addComment | ||
307 | ))) | ||
308 | |||
309 | (% class="col-xs-6 col-md-3" %) | ||
310 | ((( | ||
311 | Before | ||
312 | [[[[image:beforeComment.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeComment.png]] | ||
313 | ))) | ||
314 | |||
315 | (% class="col-xs-6 col-md-3" %) | ||
316 | ((( | ||
317 | After | ||
318 | [[[[image:afterComment.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterComment.png]] | ||
319 | ))) | ||
320 | ))) | ||
321 | |||
322 | (% class="row" %) | ||
323 | ((( | ||
324 | (% class="col-xs-12 col-md-3" %) | ||
325 | ((( | ||
326 | * Event Type: BlogPostPublishedEvent | ||
327 | ))) | ||
328 | |||
329 | (% class="col-xs-6 col-md-3" %) | ||
330 | ((( | ||
331 | Before | ||
332 | [[[[image:beforeBlogPublish.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:beforeBlogPublish.png]] | ||
333 | ))) | ||
334 | |||
335 | (% class="col-xs-6 col-md-3" %) | ||
336 | ((( | ||
337 | After | ||
338 | [[[[image:afterBlogPublish.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:afterBlogPublish.png]] | ||
339 | ))) | ||
340 | ))) | ||
341 | |||
342 | (% class="row" %) | ||
343 | ((( | ||
344 | (% class="col-xs-12 col-md-6" %) | ||
345 | ((( | ||
346 | * Composed events | ||
347 | ))) | ||
348 | |||
349 | (% class="col-xs-6 col-md-3" %) | ||
350 | ((( | ||
351 | After ([[variations>>attach:variations.png]]) | ||
352 | [[[[image:var2_dif.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:var2_dif.png]] | ||
353 | ))) | ||
354 | |||
355 | (% class="col-xs-6 col-md-3" %) | ||
356 | ((( | ||
357 | {{html}} {{/html}} | ||
358 | [[[[image:var2.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:var2.png]] | ||
359 | [[[[image:var2_title.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:var2_title.png]] | ||
360 | ))) | ||
361 | ))) | ||
362 | |||
363 | === Examples === | ||
364 | |||
365 | (% class="row" %) | ||
366 | ((( | ||
367 | (% class="col-xs-6 col-md-3" %) | ||
368 | ((( | ||
369 | [[[[image:events1.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:events1.png]] | ||
370 | ))) | ||
371 | |||
372 | (% class="col-xs-6 col-md-3" %) | ||
373 | ((( | ||
374 | [[[[image:events3.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:events3.png]] | ||
375 | ))) | ||
376 | |||
377 | (% class="col-xs-6 col-md-3" %) | ||
378 | ((( | ||
379 | [[[[image:events4.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:events4.png]] | ||
380 | ))) | ||
381 | |||
382 | (% class="col-xs-6 col-md-3" %) | ||
383 | ((( | ||
384 | [[[[image:events2.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:events2.png]] | ||
385 | ))) | ||
386 | ))) |