Emoji Autocomplete (#3433)
* Implemented emoji autocomplete. * Changed emoji access url. * Reverted vendor css to default, moved all style changes to _tribute.less * Made no-results overwriteable, added missing autocomplete to edit issue field. Signed-off-by: modmew8 <modmew8@gmail.com>
This commit is contained in:
parent
b62ce2e246
commit
e08b3a592e
File diff suppressed because one or more lines are too long
|
@ -571,6 +571,7 @@ function initRepository() {
|
||||||
$editContentZone.html($('#edit-content-form').html());
|
$editContentZone.html($('#edit-content-form').html());
|
||||||
$textarea = $segment.find('textarea');
|
$textarea = $segment.find('textarea');
|
||||||
issuesTribute.attach($textarea.get());
|
issuesTribute.attach($textarea.get());
|
||||||
|
emojiTribute.attach($textarea.get());
|
||||||
|
|
||||||
// Give new write/preview data-tab name to distinguish from others
|
// Give new write/preview data-tab name to distinguish from others
|
||||||
var $editContentForm = $editContentZone.find('.ui.comment.form');
|
var $editContentForm = $editContentZone.find('.ui.comment.form');
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
.tribute-container {
|
||||||
|
box-shadow: 0px 1px 3px 1px #c7c7c7;
|
||||||
|
ul {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-bottom: 1px solid #dcdcdc;
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
span.fullname {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.highlight, li:hover {
|
||||||
|
background: #2185D0;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,4 @@
|
||||||
|
@import "_tribute";
|
||||||
@import "_emojify";
|
@import "_emojify";
|
||||||
@import "_base";
|
@import "_base";
|
||||||
@import "_markdown";
|
@import "_markdown";
|
||||||
|
|
|
@ -7,33 +7,20 @@
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: block;
|
display: block;
|
||||||
box-shadow: 0px 1px 3px 1px #c7c7c7;
|
|
||||||
z-index: 999999; }
|
z-index: 999999; }
|
||||||
.tribute-container ul {
|
.tribute-container ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background: #ffffff; }
|
background: #efefef; }
|
||||||
.tribute-container li {
|
.tribute-container li {
|
||||||
padding: 8px 12px;
|
padding: 5px 5px;
|
||||||
border-bottom: 1px solid #dcdcdc;
|
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.tribute-container li.highlight, .tribute-container li:hover {
|
.tribute-container li.highlight, .tribute-container li:hover {
|
||||||
background: #2185D0;
|
background: #ddd; }
|
||||||
color: #ffffff;}
|
|
||||||
.tribute-container li img {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 28px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.tribute-container li span {
|
.tribute-container li span {
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
.tribute-container li span.fullname {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
margin-left: 3px;}
|
|
||||||
.tribute-container li.no-match {
|
.tribute-container li.no-match {
|
||||||
cursor: default; }
|
cursor: default; }
|
||||||
.tribute-container .menu-highlighted {
|
.tribute-container .menu-highlighted {
|
||||||
|
|
|
@ -89,6 +89,38 @@
|
||||||
issuesTribute.attach(document.getElementById('content'))
|
issuesTribute.attach(document.getElementById('content'))
|
||||||
</script>
|
</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
<script>
|
||||||
|
var emojiTribute = new Tribute({
|
||||||
|
collection: [{
|
||||||
|
trigger: ':',
|
||||||
|
requireLeadingSpace: true,
|
||||||
|
values: function (text, cb) {
|
||||||
|
var array = emojify.emojiNames;
|
||||||
|
var data = [];
|
||||||
|
for(var j=0; j<array.length; j++) {
|
||||||
|
if(array[j].indexOf(text) !== -1) {
|
||||||
|
data.push(array[j]);
|
||||||
|
if(data.length > 5) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cb(data);
|
||||||
|
},
|
||||||
|
lookup: function (item) {
|
||||||
|
return item;
|
||||||
|
},
|
||||||
|
selectTemplate: function (item) {
|
||||||
|
if (typeof item === 'undefinied') return null;
|
||||||
|
return ':' + item.original + ':';
|
||||||
|
},
|
||||||
|
menuItemTemplate: function (item) {
|
||||||
|
return '<img class="emoji" src="{{AppSubUrl}}/vendor/plugins/emojify/images/' + item.original + '.png"/>' + item.original;
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
emojiTribute.attach(document.getElementById('content'))
|
||||||
|
</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/autolink/autolink.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/autolink/autolink.js"></script>
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue