Wiki source code of Notifications (9.x)

Last modified by Vincent Massol on 2024/02/26 17:51

Show last authors
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 )))

Get Connected