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>
tokarchuk/v1.17
modmew8 7 years ago committed by Lauris BH
parent b62ce2e246
commit e08b3a592e
  1. 2
      public/css/index.css
  2. 1
      public/js/index.js
  3. 26
      public/less/_tribute.less
  4. 1
      public/less/index.less
  5. 19
      public/vendor/plugins/tribute/tribute.css
  6. 32
      templates/base/footer.tmpl

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…
Cancel
Save