Browse Source

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 ec3e1a3a17.

* Add style to overwrite emoji height in labels

* Revert Makefile change that makes Windows work
tags/v1.9.0-dev
John Olheiser 5 years ago
parent
commit
0b72c00fad

+ 2
- 2
options/locale/locale_en-US.ini View File

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.remove_label_at = removed 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 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`

+ 1
- 1
public/css/index.css
File diff suppressed because it is too large
View File


+ 10
- 6
public/less/_emojify.less View File

.emoji {
width: 1.5em;
height: 1.5em;
display: inline-block;
background-size: contain;
}
.emoji {
width: 1.5em;
height: 1.5em;
display: inline-block;
background-size: contain;
}
.ui.label .emoji {
height: 1.2em !important;
}

+ 1
- 0
routers/repo/issue_label.go View File

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)
} }

+ 14
- 4
templates/base/footer.tmpl View File

} }
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({
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) {
} }
}] }]
}); });
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>

+ 3
- 3
templates/repo/issue/labels.tmpl View File

<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">
<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}}
<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">

+ 1
- 1
templates/repo/issue/list.tmpl View File

<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}}

+ 2
- 2
templates/repo/issue/new_form.tmpl View File

<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>



+ 2
- 2
templates/repo/issue/view_content/sidebar.tmpl View File

<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>
<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}}

Loading…
Cancel
Save