Merge pull request #6206 from marc1706/ticket/13713

[ticket/13713] User Mentions

phpBB/styles/prosilver/template/mentions_templates.html

@@ -0,0 +1,6 @@
+<template data-id="mention-media-span"><span class="mention-media"></span></template>
+<template data-id="mention-media-avatar-img"><img class="avatar mention-media-avatar" src="" alt=""></template>
+<template data-id="mention-name-span"><span class="mention-name"></span></template>
+<template data-id="mention-default-avatar"><svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg></template>
+<template data-id="mention-default-avatar-group"><svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></template>
+<template data-id="mention-rank-span"><span class="mention-rank"></span></template>

phpBB/styles/prosilver/template/posting_buttons.html

@@ -25,7 +25,12 @@
 		}
 	}
 </script>
+
+{% include 'mentions_templates.html' %}
+
 <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->
+<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/tribute.min.js -->
+<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/mentions.js -->
 
 <!-- IF S_BBCODE_ALLOWED -->
 <div id="colour_palette" style="display: none;">
@@ -36,7 +41,7 @@
 </div>
 
 <!-- EVENT posting_editor_buttons_before -->
-<div id="format-buttons" class="format-buttons">
+<div id="format-buttons" class="format-buttons"<!-- IF S_ALLOW_MENTIONS --> data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}" data-user-id="{S_USER_ID}"<!-- ENDIF -->>
 	<button type="button" class="button button-icon-only bbcode-b" accesskey="b" name="addbbcode0" value=" B " onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}">
 		{{ Icon('iconify', 'mdi:format-bold', '', true, 'c-button-icon') }}
 	</button>

phpBB/styles/prosilver/theme/bidi.css

@@ -365,6 +365,24 @@
 	float: left;
 }
 
+/**
+* mentions.css
+*/
+
+/* Mention block
+---------------------------------------- */
+
+/* Mention dropdown
+---------------------------------------- */
+.rtl .mention-container { /* mention-container */
+	text-align: right;
+}
+
+.rtl .mention-media {
+	margin-right: 0;
+	margin-left: 16px;
+}
+
 /**
 * content.css
 */

phpBB/styles/prosilver/theme/colours.css

@@ -369,6 +369,41 @@ p.post-notice {
 	background-image: none;
 }
 
+/* colours and backgrounds for mentions.css */
+
+/* mention dropdown */
+.mention-container { /* mention-container */
+	background-color: #ffffff;
+	box-shadow:
+		0 3px 1px -2px rgba(0, 0, 0, 0.2),
+		0 2px 2px 0 rgba(0, 0, 0, 0.14),
+		0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.mention-media {
+	color: #757575;
+}
+
+.mention-item {
+	border-bottom-color: #dddddd;
+	color: #212121;
+}
+
+.mention-item:hover,
+.mention-item.is-active {
+	background-color: #eeeeee;
+	color: #2d80d2;
+}
+
+.mention-item:hover .mention-media-avatar,
+.mention-item.is-active .mention-media-avatar {
+	color: #2d80d2;
+}
+
+.mention-rank {
+	color: #757575;
+}
+
 /*	colours and backgrounds for content.css */
 ul.forums {
 	background-color: #edf4f7;

phpBB/styles/prosilver/theme/mentions.css

@@ -0,0 +1,83 @@
+/* -------------------------------------------------------------- /*
+    $Mentions
+/* -------------------------------------------------------------- */
+
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable selector-no-qualifying-type */
+
+/* Mention block
+---------------------------------------- */
+.mention {
+	font-weight: bold;
+}
+
+/* Mention dropdown
+---------------------------------------- */
+.mention-container {
+	text-align: left;
+	border-radius: 2px;
+	position: absolute;
+	z-index: 999;
+	overflow: auto; /* placed here for list to scroll with arrow key press */
+	max-height: 200px;
+	transition: all 0.2s ease;
+}
+
+.mention-list {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.mention-media {
+	display: inline-flex;
+	flex-shrink: 0;
+	justify-content: center;
+	align-items: center;
+	margin-right: 8px;
+	margin-left: 0;
+}
+
+.mention-media-avatar {
+	width: 40px;
+	height: 40px;
+}
+
+.mention-item {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	letter-spacing: 0.04em;
+	border-bottom: 1px solid transparent;
+	position: relative;
+	display: flex;
+	overflow: hidden;
+	justify-content: flex-start;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+}
+
+.mention-item:hover {
+	text-decoration: none;
+}
+
+.mention-name,
+.mention-rank {
+	display: block;
+}
+
+.mention-name {
+	line-height: 1.25;
+	margin-right: 20px; /* needed to account for scrollbar bug on Firefox for Windows */
+}
+
+.mention-rank {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.2871;
+	letter-spacing: 0.04em;
+}
+
+/* stylelint-enable selector-max-compound-selectors */
+/* stylelint-enable selector-no-qualifying-type */

phpBB/styles/prosilver/theme/stylesheet.css

@@ -14,6 +14,7 @@
 @import url("common.css?hash=658f990b");
 @import url("buttons.css?hash=eb16911f");
 @import url("links.css?hash=5fec3654");
+@import url("mentions.css?hash=a67fa183");
 @import url("content.css?hash=f7bdea58");
 @import url("cp.css?hash=73c6f37d");
 @import url("forms.css?hash=5e06dbba");