Allow labels to contain emoji (#6063)
* Add emoji to labels Minor cleanup of tribute code in footer.tmpl Signed-off-by: jolheiser <john.olheiser@gmail.com> * Quick find/replace in other i18n files containing label translations Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert "Quick find/replace in other i18n files containing label translations" This reverts commit ec3e1a3a1775989301bb2c1cd08e8871b317688d. * Add style to overwrite emoji height in labels * Revert Makefile change that makes Windows work
This commit is contained in:
parent
8c8ac1a162
commit
0b72c00fad
9 changed files with 36 additions and 21 deletions
|
@ -690,8 +690,8 @@ issues.label_templates.info = No labels exist yet. Create a label with 'New Labe
|
||||||
issues.label_templates.helper = Select a label set
|
issues.label_templates.helper = Select a label set
|
||||||
issues.label_templates.use = Use Label Set
|
issues.label_templates.use = Use Label Set
|
||||||
issues.label_templates.fail_to_load_file = Failed to load label template file '%s': %v
|
issues.label_templates.fail_to_load_file = Failed to load label template file '%s': %v
|
||||||
issues.add_label_at = added the <div class="ui label" style="color: %s\; background-color: %s">%s</div> label %s
|
issues.add_label_at = added the <div class="ui label has-emoji" style="color: %s\; background-color: %s">%s</div> label %s
|
||||||
issues.remove_label_at = removed the <div class="ui label" style="color: %s\; background-color: %s">%s</div> label %s
|
issues.remove_label_at = removed the <div class="ui label has-emoji" style="color: %s\; background-color: %s">%s</div> label %s
|
||||||
issues.add_milestone_at = `added this to the <b>%s</b> milestone %s`
|
issues.add_milestone_at = `added this to the <b>%s</b> milestone %s`
|
||||||
issues.change_milestone_at = `modified the milestone from <b>%s</b> to <b>%s</b> %s`
|
issues.change_milestone_at = `modified the milestone from <b>%s</b> to <b>%s</b> %s`
|
||||||
issues.remove_milestone_at = `removed this from the <b>%s</b> milestone %s`
|
issues.remove_milestone_at = `removed this from the <b>%s</b> milestone %s`
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,10 @@
|
||||||
.emoji {
|
.emoji {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.label .emoji {
|
||||||
|
height: 1.2em !important;
|
||||||
|
}
|
||||||
|
|
|
@ -22,6 +22,7 @@ func Labels(ctx *context.Context) {
|
||||||
ctx.Data["PageIsIssueList"] = true
|
ctx.Data["PageIsIssueList"] = true
|
||||||
ctx.Data["PageIsLabels"] = true
|
ctx.Data["PageIsLabels"] = true
|
||||||
ctx.Data["RequireMinicolors"] = true
|
ctx.Data["RequireMinicolors"] = true
|
||||||
|
ctx.Data["RequireTribute"] = true
|
||||||
ctx.Data["LabelTemplates"] = models.LabelTemplates
|
ctx.Data["LabelTemplates"] = models.LabelTemplates
|
||||||
ctx.HTML(200, tplLabels)
|
ctx.HTML(200, tplLabels)
|
||||||
}
|
}
|
||||||
|
|
|
@ -68,8 +68,11 @@
|
||||||
}
|
}
|
||||||
return itemStr;
|
return itemStr;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
issuesTribute.attach(document.getElementById('content'))
|
var content = document.getElementById('content');
|
||||||
|
if (content != null) {
|
||||||
|
issuesTribute.attach(content);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
var emojiTribute = new Tribute({
|
var emojiTribute = new Tribute({
|
||||||
|
@ -93,7 +96,7 @@
|
||||||
return item;
|
return item;
|
||||||
},
|
},
|
||||||
selectTemplate: function (item) {
|
selectTemplate: function (item) {
|
||||||
if (typeof item === 'undefinied') return null;
|
if (typeof item === 'undefined') return null;
|
||||||
return ':' + item.original + ':';
|
return ':' + item.original + ':';
|
||||||
},
|
},
|
||||||
menuItemTemplate: function (item) {
|
menuItemTemplate: function (item) {
|
||||||
|
@ -101,7 +104,14 @@
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
emojiTribute.attach(document.getElementById('content'))
|
var emojiInputs = document.querySelectorAll('.emoji-input');
|
||||||
|
if (emojiInputs.length > 0) {
|
||||||
|
emojiTribute.attach(emojiInputs);
|
||||||
|
}
|
||||||
|
var content = document.getElementById('content');
|
||||||
|
if (content != null) {
|
||||||
|
emojiTribute.attach(document.getElementById('content'));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
<div class="ui grid">
|
<div class="ui grid">
|
||||||
<div class="three wide column">
|
<div class="three wide column">
|
||||||
<div class="ui small input">
|
<div class="ui small input">
|
||||||
<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
|
<input class="new-label-input emoji-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="five wide column">
|
<div class="five wide column">
|
||||||
|
@ -98,7 +98,7 @@
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<div class="ui grid">
|
<div class="ui grid">
|
||||||
<div class="three wide column">
|
<div class="three wide column">
|
||||||
<div class="ui label" style="color: {{.ForegroundColor}}; background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
|
<div class="ui label has-emoji" style="color: {{.ForegroundColor}}; background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="seven wide column">
|
<div class="seven wide column">
|
||||||
{{.Description}}
|
{{.Description}}
|
||||||
|
@ -151,7 +151,7 @@
|
||||||
<div class="ui grid">
|
<div class="ui grid">
|
||||||
<div class="three wide column">
|
<div class="three wide column">
|
||||||
<div class="ui small input">
|
<div class="ui small input">
|
||||||
<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
|
<input class="new-label-input emoji-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="five wide column">
|
<div class="five wide column">
|
||||||
|
|
|
@ -192,7 +192,7 @@
|
||||||
<a class="ui label" href="{{$.RepoLink}}/src/branch/{{.Ref}}">{{.Ref}}</a>
|
<a class="ui label" href="{{$.RepoLink}}/src/branch/{{.Ref}}">{{.Ref}}</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{range .Labels}}
|
{{range .Labels}}
|
||||||
<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description}}">{{.Name}}</a>
|
<a class="ui label has-emoji" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description}}">{{.Name}}</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
{{if .NumComments}}
|
{{if .NumComments}}
|
||||||
|
|
|
@ -46,14 +46,14 @@
|
||||||
<div class="filter menu" data-id="#label_ids">
|
<div class="filter menu" data-id="#label_ids">
|
||||||
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
|
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
|
||||||
{{range .Labels}}
|
{{range .Labels}}
|
||||||
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
|
<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui labels list">
|
<div class="ui labels list">
|
||||||
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
|
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
|
||||||
{{range .Labels}}
|
{{range .Labels}}
|
||||||
<a class="{{if not .IsChecked}}hide{{end}} item" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name}}</span></a>
|
<a class="{{if not .IsChecked}}hide{{end}} item" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text has-emoji">{{.Name}}</span></a>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
|
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
|
||||||
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
|
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
|
||||||
{{range .Labels}}
|
{{range .Labels}}
|
||||||
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
|
<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
|
||||||
{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
|
{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
|
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
|
||||||
{{range .Labels}}
|
{{range .Labels}}
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<a class="ui label {{if not .IsChecked}}hide{{end}}" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description}}">{{.Name}}</a>
|
<a class="ui label has-emoji {{if not .IsChecked}}hide{{end}}" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description}}">{{.Name}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
Reference in a new issue