Mention completion for issue editor. (#3136)

* new issue mention

* Mention completion on new issue and view issue page.

* Code format.

* Require tribute in pull request page.

Author: harryxu

public/js/index.js

@@ -570,6 +570,7 @@ function initRepository() {
             if ($editContentZone.html().length == 0) {
                 $editContentZone.html($('#edit-content-form').html());
                 $textarea = $segment.find('textarea');
+                issuesTribute.attach($textarea.get());
 
                 // Give new write/preview data-tab name to distinguish from others
                 var $editContentForm = $editContentZone.find('.ui.comment.form');

public/vendor/plugins/tribute/tribute.css

@@ -0,0 +1,40 @@
+.tribute-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: auto;
+  max-height: 300px;
+  max-width: 500px;
+  overflow: auto;
+  display: block;
+  box-shadow: 0px 1px 3px 1px #c7c7c7;
+  z-index: 999999; }
+  .tribute-container ul {
+    margin: 0;
+    margin-top: 2px;
+    padding: 0;
+    list-style: none;
+    background: #ffffff; }
+  .tribute-container li {
+    padding: 8px 12px;
+    border-bottom: 1px solid #dcdcdc;
+    cursor: pointer; }
+    .tribute-container li.highlight, .tribute-container li:hover {
+      background: #2185D0;
+      color: #ffffff;}
+    .tribute-container li img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 28px;
+      margin-right: 5px;
+    }
+    .tribute-container li span {
+      font-weight: bold; }
+    .tribute-container li span.fullname {
+      font-weight: normal;
+      font-size: 0.8rem;
+      margin-left: 3px;}
+    .tribute-container li.no-match {
+      cursor: default; }
+  .tribute-container .menu-highlighted {
+    font-weight: bold; }

public/vendor/plugins/tribute/tribute.min.js

@@ -351,6 +351,7 @@ func NewIssue(ctx *context.Context) {
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireTribute"] = true
 	setTemplateIfExists(ctx, issueTemplateKey, IssueTemplateCandidates)
 	renderAttachmentSettings(ctx)
 
@@ -478,6 +479,7 @@ func NewIssuePost(ctx *context.Context, form auth.CreateIssueForm) {
 func ViewIssue(ctx *context.Context) {
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["RequireDropzone"] = true
+	ctx.Data["RequireTribute"] = true
 	renderAttachmentSettings(ctx)
 
 	issue, err := models.GetIssueByIndex(ctx.Repo.Repository.ID, ctx.ParamsInt64(":index"))

routers/repo/issue.go

@@ -701,6 +701,7 @@ func CompareAndPullRequest(ctx *context.Context) {
 	ctx.Data["PageIsComparePull"] = true
 	ctx.Data["IsDiffCompare"] = true
 	ctx.Data["RequireHighlightJS"] = true
+	ctx.Data["RequireTribute"] = true
 	setTemplateIfExists(ctx, pullRequestTemplateKey, pullRequestTemplateCandidates)
 	renderAttachmentSettings(ctx)
 

routers/repo/pull.go

@@ -57,6 +57,32 @@
 {{end}}
 {{if .RequireDropzone}}
 	<script src="{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.js"></script>
+{{end}}
+{{if .RequireTribute}}
+	<script src="{{AppSubUrl}}/vendor/plugins/tribute/tribute.min.js"></script>
+
+	{{if .Assignees}}
+	<script>
+		var issuesTribute = new Tribute({
+			values: [
+			{{ range .Assignees }}
+			{key: '{{.Name}} {{.FullName}}', value: '{{.Name}}',
+			name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.RelAvatarLink}}'},
+			{{ end }}
+			],
+			noMatchTemplate: function () { return null },
+			menuItemTemplate: function (item) {
+				var user = item.original;
+				var itemStr = '<img src="' + user.avatar + '"/><span class="name">' + user.name + '</span>';
+				if (user.fullname && user.fullname != '') {
+					itemStr += '<span class="fullname">' + user.fullname + '</span>';
+				}
+				return itemStr;
+			}
+		})
+		issuesTribute.attach(document.getElementById('content'))
+	</script>
+	{{end}}
 {{end}}
 	<script src="{{AppSubUrl}}/vendor/plugins/autolink/autolink.js"></script>
 	<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>

templates/base/footer.tmpl

@@ -74,6 +74,10 @@
 	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.css">
 {{end}}
 
+{{if .RequireTribute}}
+	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/tribute/tribute.css">
+{{end}}
+
 	<!-- Stylesheet -->
 	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css">
 	<link rel="stylesheet" href="{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}">