[ticket/13713] User Mentions (GSoC 2018) #5225

lavigor · 2018-05-17T01:55:46Z

This Pull Request is the result of GSoC 2018 Project “User Mentions”.

The Idea

This project is intended to add the ability to mention specific users in forum topics so that they will receive a notification (just like in many modern messengers and websites).

Affected modules

This PR is backwards-compatible and works well with phpBB 3.3's BBCode parser (that was newly added in phpBB 3.2).

How it works

Users can type the @ symbol in textarea fields on the board to trigger a dropdown with usernames and group names. This list is generated based on several factors (called 'sources'): e.g. friends and topic repliers are shown higher in the list (internally they are given higher priorities).

Besides general user and group sources, built-in name sources include:

friends,
topic repliers (open poster receives even higher priority),
board team members,
groups that current user is a member of.

Extension developers can add their own sources to give certain users and groups higher priorities based on other conditions.

Special cases taken into consideration:

Case	Solution
Users should be able to mention any users/groups regardless of the priorities	Exact matches are always shown on the top the list
In most cases users should not mention themselves	Name of the current user is removed from the list
Both usernames and group names should have equal chances of appearing in the list	Priorities for usernames and group names are normalized based on the highest priority value

The name of mentioned user/group becomes a link to its profile highlighed in the colour of that user/group.

Configuration

Users are able to disable mention notifications in the same way as for other types of notifications (on Edit notification options page in User Control Panel).
Administrators can enable/disable the entire mentions feature and set the maximum number of names shown in the dropdown list as well as the maximum number of names fetched from the server on each request (on Post settings page in Administration Control Panel).

Background

This feature uses the At.js library for displaying mention dropdown.
It also involves names caching both on frontend and backend to improve performance and reduce server load.

Screenshot

Unparsed BBCode	Parsed BBCode

Current Status

User Mentions work. There'll be a PR to development documentation for how to add a new name source in your extension.

Checklist:

Correct branch: master for new features; 3.2.x for fixes
Tests pass
Code follows coding guidelines: master and 3.2.x
Commit follows commit message format

Tracker ticket (set the ticket ID to your ticket ID):

https://tracker.phpbb.com/browse/PHPBB3-13713

lavigor · 2018-05-17T01:57:52Z

!set WIP

lavigor · 2018-05-17T01:59:03Z

Seems that the command no longer works...

rubencm · 2018-05-17T11:42:40Z

!set WIP :construction:

meis2m · 2018-05-19T10:27:05Z

well done ...

gooof · 2018-05-21T21:42:13Z

phpBB/config/default/routing/routing.yml

@@ -24,5 +24,10 @@ phpbb_help_routing:
    resource: help.yml
    prefix: /help

+phpbb_mention_controller:
+    path: /mention


Possible to rename the path like mention_json or mention_api?

I don't think there's a need in introducing a suffix with underscore.

I think we should start using a convention on that. Maybe something like /api/user/mention on this specific case @marc1706

hanakin · 2018-05-25T16:21:27Z

phpBB/styles/prosilver/template/posting_buttons.html

@@ -5,6 +5,8 @@
 	var text_name = <!-- IF $SIG_EDIT -->'signature'<!-- ELSE -->'message'<!-- ENDIF -->;
 	var load_draft = false;
 	var upload = false;
+	var mention_url = '{UA_MENTION_URL}';


I would prefer that these were handled via data attributes on a hidden input or other form of html tag to avoid using inline js cause eventually this will all be factored out. Might as well prep for it

@hanakin so even very huge scripts such as the one in plupload.html will eventually be converted to data- attributes or something similar?
Requiring additional code to parse them back to the original JS objects?

I haven't made any performance checks or tests but using a script block seems to me as a rather convenient solution. Probably there should be one inline block at the bottom instead of many other, requiring some additional template features like INCLUDEJS for accumulating script data.

IMHO I'll better leave it as is right now so that it can be changed the same way together with other variables when that change rolls out.

The aim would be to get rid of inline js all together.

@CHItA I understand that. That is why I'm asking about the reasons for that.
Because I also use inline script blocks in my extensions (e.g. quickreply_init.html) and I wonder how I'm supposed to convert them in future versions (I understand that I can leave it as is but I'd like to follow the guidelines).

The new theme will probably use some build system for both JS and CSS by default, which will allow us to use some nice features (minification, auto-prefixing etc). This is obviously not usable on inlined JS or CSS.

Probably there will be some backend changes to support some features both for the new theme itself and extensions as well. However, these changes are not yet fully specified so we will probably publish our recommendations for extensions when we release those changes.

@CHItA can't wait for those changes to be done :)
Are there any plans for a preprocessor (LESS/SASS) instead of plain CSS?

There is never a reason to use inline scripts...just port it to its own file and include it using includejs. Using data attr for any template bar stuff etc... the use of minificatiin in the new theme coupled with the adoption of html2 will mean we can globalize most everything anyway at little cost.
The new theme will be a completely different beast and will not be compatible with any extensions now nor should as it will be released under 4.0.0 meaning no compatibility.

I am also looking into vuejs as an additional aspect as working with twig alone is problematic for certain circumstances where vue components just make it effortless and we gain the added benifit of less js for most of the interactivity.

But none of that is for certain still toying around with the idea and doing some tests

@hanakin the only reason I use inline scripts is exactly for template variables that cannot be inserted to the plain JS.
Almost all other JS stuff goes with INCLUDEJS.

Looking forward for new changes though.

yes but you can instead use data for that and move everything to your js file.

rubencm · 2018-05-30T18:09:07Z

You have a problem with phpBB folder in lowercase

senky · 2018-05-30T18:44:54Z

Isn't so much queries adding too much load to the server? Isn't caching the queries a middle way between server load and accuracy of the suggestions (new users/groups will pop up only after cache is past ttl)? Was this discussed somewhere?

lavigor · 2018-05-30T18:49:05Z

@senky caching queries will also be done just a bit later. That part should be one of the most complicated to decide.

hanakin · 2018-05-30T22:45:25Z

phpBB/styles/prosilver/template/bbcode.html

@@ -8,6 +8,22 @@
 <!-- BEGIN listitem --><li><!-- END listitem -->
 <!-- BEGIN listitem_close --></li><!-- END listitem_close -->

+<!-- BEGIN mention -->


is this temp code? the xsl stuff needs to be extrapolated out into the core. we should not be shipping any xsl in the bbcode.html file. Joshy needs to remove what he left there...

I wasn't aware of Joshy's plans for that and this place seemed to be the right.
Moved to the core.

There is also much legacy stuff like first and second passes I guess.
Sometimes it is not obvious to distinguish the legacy, and I suppose that new BBCodes should not be handled by that code.

hanakin · 2018-06-01T17:20:57Z

phpBB/styles/prosilver/theme/colours.css

@@ -989,6 +989,18 @@ fieldset.fields2 dl:hover dt label {
 	outline-color: rgba(19, 164, 236, 0.5);
 }

+.atwho-container .atwho-view ul li:hover,


You can specify a class with this library so that you do not need to chain selectors

senky · 2018-06-06T06:05:57Z

phpBB/phpbb/textformatter/s9e/mention_helper.php

+				AND ' . $this->db->sql_in_set('u.user_type', [USER_NORMAL, USER_FOUNDER]) . '
+				AND ' . $this->db->sql_in_set('u.user_id', $user_ids),
+			]);
+			$res = $this->db->sql_query($query);


A good habit is to use $result as a variable name.

I thought that was common for phpBB but now I realize that this habit probably came from extensions.
Changed to $result.

senky · 2018-06-06T06:06:17Z

phpBB/phpbb/textformatter/s9e/mention_helper.php

+			while ($row = $this->db->sql_fetchrow($res))
+			{
+				$this->cached_colors['users'][$row['user_id']] = $row['user_colour'];
+			}


$this->db->sql_freeresult($res);

senky · 2018-06-06T06:06:23Z

phpBB/phpbb/textformatter/s9e/mention_helper.php

+			while ($row = $this->db->sql_fetchrow($res))
+			{
+				$this->cached_colors['groups'][$row['group_id']] = $row['group_colour'];
+			}


$this->db->sql_freeresult($res);

senky · 2018-06-06T15:42:54Z

phpBB/adm/style/acp_posting_buttons.html

@@ -1,5 +1,7 @@
 <script type="text/javascript">
 // <![CDATA[
+	var mention_url = '{UA_MENTION_URL}';
+	var mention_topic_id = '{S_TOPIC_ID}';


S_ means switch, i.e. boolean value. Just use {TOPIC_ID} which is maybe already defined.

@senky S_TOPIC_ID is indeed already defined in functions.php.
That is why it is used here.

According to guidelines, S_ stands for system, not for switch.

Ah right, then it's OK.

paul999 · 2018-06-12T08:53:28Z

phpBB/includes/constants.php

@@ -190,6 +190,7 @@
 define('BBCODE_ID_EMAIL', 10);
 define('BBCODE_ID_FLASH', 11);
 define('BBCODE_ID_ATTACH', 12);
+define('BBCODE_ID_MENTION', 13);


How is this going to work out with users having existing custum_bbcodes? Do they start with ID 13? If so, this might cause problems I assume with those. Maybe even a idea to define it completly as custom bbcode instead of hardcoded in core

I suppose that existing custom BBCodes don't have the hardcoded constant values.
But probably this constant can be removed entirely because it does not seem that I need to use it anywhere with the new parser. It could be suitable for deprecated stuff that is not necessary with the newly added BBCode.

The issue is that the first created custom_bbcode is ID 13:

No idea if that can cause issues, but I can see it might happen.

hanakin

Our stupid file structure is starting to really annoy me with a need to split colors. Please combine all css in a new file called mentions.css except for the colors. And include the new file please.

hanakin · 2018-06-15T03:04:11Z

phpBB/assets/javascript/editor.js

+		$(txtarea).atwho({
+			at: "@",
+			displayTpl: function(data) {
+				var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :


Why not use es6 template structure here https://caniuse.com/#search=Template%20literal

lavigor · 2018-06-15T14:00:45Z

@hanakin what about admin.css? It needs the styles to be duplicated/included.
Maybe I can just leave it as is.

As for ES6, PhpStorm is complaining every time about var 😊
I just used the same style as in other places across the file.
Could I maybe refactor the script separately?

P.S. Needed to type this reply the second time, mobile Internet chewed my text 🙄

lavigor · 2018-06-15T14:04:47Z

@hanakin what is the target IE version for 3.3 BTW?
It was IE 8 previously, does your link mean that even IE 11 would not be supported from now on?

hanakin · 2018-06-16T02:23:08Z

We have not supported ie 8 since 3.0 we dropped all support for ie 10 in 3.2 and going forward after 3.3 we are adopting >1% , last 2 browsers, you can check the package.json for any changes

hanakin · 2018-06-16T02:30:18Z

No do not split admin.css my bad. We no longer really use our lint for js as it’s antiquated and broken. I am working on a fix to switch to xo which is based on eslint which is far better. So for now maybe externalize everything into a function call so we can easily refactor

hanakin

when you get time can you provide a screenshot of the rendered html/css also due to the sheer amount of changes can you also please post the rendered html code, that would help a lot?

hanakin · 2018-06-16T16:55:49Z

phpBB/adm/style/acp_posting_buttons.html

@@ -29,6 +29,11 @@
 // ]]>
 </script>

+<!-- IF S_ALLOW_MENTIONS -->
+<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>


just add the data to the form-buttons div

hanakin · 2018-06-16T16:58:03Z

phpBB/styles/prosilver/template/posting_buttons.html

@@ -49,6 +49,12 @@

 // ]]>
 </script>
+
+<!-- IF S_ALLOW_MENTIONS -->
+<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>


same here just add the data to the format buttons div

lavigor · 2018-06-16T18:04:08Z

@hanakin
Screenshot:

Rendered HTML:

<div class="atwho-container">
	<div id="atwho-ground-message">
		<div class="atwho-view" id="at-view-64" style="display: none; top: 356.267px; left: 83.4503px;">
			<ul class="atwho-view-ul">
				<li class="mention-name cur">
					<span class="mention-avatar"><i class="fa fa-user"></i></span><span>test</span>
				</li>
				<li class="mention-name">
					<span class="mention-avatar"><i class="fa fa-group"></i></span><span>Administrators</span>
				</li>
				<li class="mention-name">
					<span class="mention-avatar"><i class="fa fa-group"></i></span><span>Global moderators</span>
				</li>
				<li class="mention-name">
					<span class="mention-avatar"><i class="fa fa-user"></i></span><span>LavIgor</span><span class="mention-rank">Site Admin</span>
				</li>
			</ul>
		</div>
	</div>
</div>

we are adopting >1% , last 2 browsers

According to caniuse.com, IE 11 complies with this requirement. As we've discussed with @CHItA IE is actually the same as Edge and is no longer supported, but I personally use it sometimes. 😊

No do not split admin.css

Should I split regular styles or leave them all as is now?

maybe externalize everything into a function call

I've done that already, the function is named handle_mentions.

hanakin · 2018-06-17T01:29:23Z

@lavigor for prosilver only separate out the colors, put the rest in a new css file called mention.css and import it before colours.css, please... hmm as I suspected the structure is actually pretty similar to the pm structure. Which is a port of https://codepen.io/hanakin/pen/vrgOGG?editors=1100. I will have some cleanup for you by Monday ;)

hanakin · 2018-06-17T12:59:58Z

phpBB/assets/javascript/editor.js

 (function($) {
+	function handle_mentions(txtarea) {
+		var $mentionDataContainer = $('#format-buttons'),


do not map to an id instead map to the first data element $([data-mention-url]) this way if the id should change it does not break the js

hanakin · 2018-06-17T13:09:34Z

phpBB/styles/prosilver/theme/content.css

@@ -557,6 +557,11 @@ blockquote .codebox {
 	padding: 5px 3px;
 }

+/* Mention block */
+.mention {


where is this used?

This is used in posts for handling the parsed mention BBCode.

ok it should still be in the new file with everything else.

PHPBB3-13713

marc1706 · 2021-01-27T21:07:26Z

Rebased on latest master

lavigor · 2021-01-27T21:13:11Z

@marc1706 thanks
Very sorry for such a delay

marc1706 · 2021-01-27T21:14:26Z

No worries. Wanted to see how cleanly it applies and I guess based on tests there might be some incompatibilities we need to resolve. :)

PHPBB3-13713

marc1706 · 2021-03-13T19:53:08Z

I've worked a bit on switching from the no longer developed atwho.js to zurb tribute:
master...marc1706:ticket/13713

@lavigor would you have some time to maybe check if the behavior is the same as previously expected?

marc1706 · 2021-05-03T15:31:42Z

I have now replaced this PR with #6206

CHItA added WIP 🚧 4.0 (Triton) 🔮 labels May 17, 2018

CHItA added this to the 3.3.0-a1 milestone May 17, 2018

gooof reviewed May 21, 2018

View reviewed changes

hanakin reviewed May 25, 2018

View reviewed changes

hanakin mentioned this pull request May 30, 2018

[GSoC PM] Change font color for unread messages and convert template to twig #5230

Closed

hanakin reviewed May 30, 2018

View reviewed changes

hanakin requested changes Jun 6, 2018

View reviewed changes

senky reviewed Jun 6, 2018

View reviewed changes

paul999 reviewed Jun 12, 2018

View reviewed changes

hanakin requested changes Jun 15, 2018

View reviewed changes

hanakin requested changes Jun 16, 2018

View reviewed changes

hanakin requested changes Jun 17, 2018

View reviewed changes

hanakin reviewed Jun 17, 2018

View reviewed changes

lavigor and others added 19 commits January 27, 2021 22:06

[ticket/13713] Handle TODOs

2cb2316

PHPBB3-13713

[ticket/13713] Make style code changes requested by @hanakin

2137b70

PHPBB3-13713

[ticket/13713] Fix paddings

853cfe2

PHPBB3-13713

[ticket/13713] Fix Firefox style issue and add comments

0979e9c

PHPBB3-13713

[ticket/13713] Fix variable name in controller

deac9c5

PHPBB3-13713

[ticket/13713] Fix comment regarding the query of user IDs

3793b06

PHPBB3-13713

[ticket/13713] Get usernames from the data fetched by user_loader class

c3c5fe3

PHPBB3-13713

[ticket/13713] Specify color as a BBCode attribute

4532464

PHPBB3-13713

[ticket/13713] Fix SELECT DISTINCT query for team usernames

201b31d

PHPBB3-13713

[ticket/13713] Cast topic_id to integer in the topic source

17734e3

PHPBB3-13713

[ticket/13713] Remove mention colors to reduce the cache size

05641b6

PHPBB3-13713

[ticket/13713] Fix tests (specify user lastvisit)

7f5f15e

PHPBB3-13713

[ticket/13713] Rework names caching

bc7d51f

PHPBB3-13713

[ticket/13713] Fix for current avatars

8d8e5cb

PHPBB3-13713

[ticket/13713] Add an explanation regarding the future avatar ratio

cfd8b34

PHPBB3-13713

[ticket/13713] Add jsdoc docblocks to Mentions

a8b448c

PHPBB3-13713

[ticket/13713] Fix compatibility with phpunit 7

b99ddee

PHPBB3-13713

[ticket/13713] Fix mention notification update

e07cfa1

PHPBB3-13713

[ticket/13713] Avoid same attributes for different types of IDs

c94eb9d

PHPBB3-13713

marc1706 force-pushed the ticket/13713 branch from fe46a41 to c94eb9d Compare January 27, 2021 21:07

marc1706 added 3 commits January 28, 2021 20:42

[ticket/13713] Add missing services in tests

000f496

PHPBB3-13713

[ticket/13713] Fix incorrect parameter to mention_helper constructor

9a7b5ed

PHPBB3-13713

[ticket/13713] Resolve issues with PHPUnit calls in PHP >= 8.0

af5df86

PHPBB3-13713

marc1706 closed this May 3, 2021

marc1706 mentioned this pull request May 3, 2021

[ticket/13713] User Mentions #6206

Merged

4 tasks

[ticket/13713] User Mentions (GSoC 2018) #5225

[ticket/13713] User Mentions (GSoC 2018) #5225

Conversation

lavigor commented May 17, 2018 • edited

The Idea

Affected modules

How it works

Configuration

Background

Current Status

lavigor commented May 17, 2018

lavigor commented May 17, 2018

rubencm commented May 17, 2018

meis2m commented May 19, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hanakin Jun 6, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rubencm commented May 30, 2018

senky commented May 30, 2018

lavigor commented May 30, 2018 • edited

Choose a reason for hiding this comment

lavigor Jun 6, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hanakin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lavigor commented Jun 15, 2018

lavigor commented Jun 15, 2018

hanakin commented Jun 16, 2018

hanakin commented Jun 16, 2018 • edited

hanakin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lavigor commented Jun 16, 2018

hanakin commented Jun 17, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marc1706 commented Jan 27, 2021

lavigor commented Jan 27, 2021

marc1706 commented Jan 27, 2021

marc1706 commented Mar 13, 2021

marc1706 commented May 3, 2021

lavigor commented May 17, 2018 •

edited

hanakin Jun 6, 2018 •

edited

lavigor commented May 30, 2018 •

edited

lavigor Jun 6, 2018 •

edited

hanakin commented Jun 16, 2018 •

edited

hanakin commented Jun 17, 2018 •

edited