Fix frontpage avatars (#13853)

The frontpage uses a rather strange method to obtain the commit's avatar
which I've overlooked earlier. I don't exactly understand how it works
but this change fixes the wrong default avatars by using the function
that was in previous use.

Also introduced a few constants for size an size increase factor.

Fixes: https://github.com/go-gitea/gitea/issues/13844
This commit is contained in:
silverwind 2020-12-09 01:12:15 +01:00 committed by GitHub
parent 658e90a114
commit c05701dd7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 78 additions and 65 deletions

View file

@ -40,6 +40,12 @@ func DefaultAvatarLink() string {
// determined by the avatar-hosting service.
const DefaultAvatarSize = -1
// DefaultAvatarPixelSize is the default size in pixels of a rendered avatar
const DefaultAvatarPixelSize = 28
// AvatarRenderedSizeFactor is the factor by which the default size is increased for finer rendering
const AvatarRenderedSizeFactor = 2
// HashEmail hashes email address to MD5 string.
// https://en.gravatar.com/site/implement/hash/
func HashEmail(email string) string {

View file

@ -118,12 +118,14 @@ func (pc *PushCommits) AvatarLink(email string) string {
return avatar
}
size := models.DefaultAvatarPixelSize * models.AvatarRenderedSizeFactor
u, ok := pc.emailUsers[email]
if !ok {
var err error
u, err = models.GetUserByEmail(email)
if err != nil {
pc.avatars[email] = models.HashedAvatarLink(email)
pc.avatars[email] = models.SizedAvatarLink(email, size)
if !models.IsErrUserNotExist(err) {
log.Error("GetUserByEmail: %v", err)
return ""
@ -133,7 +135,7 @@ func (pc *PushCommits) AvatarLink(email string) string {
}
}
if u != nil {
pc.avatars[email] = u.RelAvatarLink()
pc.avatars[email] = u.RealSizedAvatarLink(size)
}
return pc.avatars[email]

View file

@ -112,11 +112,13 @@ func TestPushCommits_AvatarLink(t *testing.T) {
pushCommits.Len = len(pushCommits.Commits)
assert.Equal(t,
"/user/avatar/user2/-1",
"https://secure.gravatar.com/avatar/ab53a2911ddf9b4817ac01ddcd3d975f?d=identicon&s=56",
pushCommits.AvatarLink("user2@example.com"))
assert.Equal(t,
"/avatar/"+fmt.Sprintf("%x", md5.Sum([]byte("nonexistent@example.com"))),
"https://secure.gravatar.com/avatar/"+
fmt.Sprintf("%x", md5.Sum([]byte("nonexistent@example.com")))+
"?d=identicon&s=56",
pushCommits.AvatarLink("nonexistent@example.com"))
}

View file

@ -340,6 +340,7 @@ func NewFuncMap() []template.FuncMap {
},
"svg": SVG,
"avatar": Avatar,
"avatarHTML": AvatarHTML,
"avatarByEmail": AvatarByEmail,
"repoAvatar": RepoAvatar,
"SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML {
@ -519,7 +520,8 @@ func parseOthers(defaultSize int, defaultClass string, others ...interface{}) (i
return size, class
}
func avatarHTML(src string, size int, class string, name string) template.HTML {
// AvatarHTML creates the HTML for an avatar
func AvatarHTML(src string, size int, class string, name string) template.HTML {
sizeStr := fmt.Sprintf(`%d`, size)
if name == "" {
@ -548,33 +550,33 @@ func SVG(icon string, others ...interface{}) template.HTML {
// Avatar renders user avatars. args: user, size (int), class (string)
func Avatar(user *models.User, others ...interface{}) template.HTML {
size, class := parseOthers(28, "ui avatar image", others...)
size, class := parseOthers(models.DefaultAvatarPixelSize, "ui avatar image", others...)
src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering
src := user.RealSizedAvatarLink(size * models.AvatarRenderedSizeFactor)
if src != "" {
return avatarHTML(src, size, class, user.DisplayName())
return AvatarHTML(src, size, class, user.DisplayName())
}
return template.HTML("")
}
// RepoAvatar renders repo avatars. args: repo, size(int), class (string)
func RepoAvatar(repo *models.Repository, others ...interface{}) template.HTML {
size, class := parseOthers(28, "ui avatar image", others...)
size, class := parseOthers(models.DefaultAvatarPixelSize, "ui avatar image", others...)
src := repo.RelAvatarLink()
if src != "" {
return avatarHTML(src, size, class, repo.FullName())
return AvatarHTML(src, size, class, repo.FullName())
}
return template.HTML("")
}
// AvatarByEmail renders avatars by email address. args: email, name, size (int), class (string)
func AvatarByEmail(email string, name string, others ...interface{}) template.HTML {
size, class := parseOthers(28, "ui avatar image", others...)
src := models.SizedAvatarLink(email, size*2) // request double size for finer rendering
size, class := parseOthers(models.DefaultAvatarPixelSize, "ui avatar image", others...)
src := models.SizedAvatarLink(email, size*models.AvatarRenderedSizeFactor)
if src != "" {
return avatarHTML(src, size, class, name)
return AvatarHTML(src, size, class, name)
}
return template.HTML("")

View file

@ -11,23 +11,23 @@
{{end}}
<div class="ui right">
{{if eq .HookType "gitea"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
{{else if eq .HookType "gogs"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/slack.png">
{{else if eq .HookType "discord"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/discord.png">
{{else if eq .HookType "dingtalk"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
{{else if eq .HookType "telegram"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/telegram.png">
{{else if eq .HookType "msteams"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/msteams.png">
{{else if eq .HookType "feishu"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/feishu.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/feishu.png">
{{else if eq .HookType "matrix"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/matrix.svg">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/matrix.svg">
{{end}}
</div>
</h4>

View file

@ -10,23 +10,23 @@
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
<div class="ui right">
{{if eq .HookType "gitea"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
{{else if eq .HookType "gogs"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/slack.png">
{{else if eq .HookType "discord"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/discord.png">
{{else if eq .HookType "dingtalk"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/dingtalk.png">
{{else if eq .HookType "telegram"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/telegram.png">
{{else if eq .HookType "msteams"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/msteams.png">
{{else if eq .HookType "feishu"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/feishu.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/feishu.png">
{{else if eq .HookType "matrix"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/matrix.svg">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/matrix.svg">
{{end}}
</div>
</h4>

View file

@ -90,7 +90,7 @@
<p class="text grey">
{{ if gt .Publisher.ID 0 }}
<span class="author">
{{avatar .Publisher 28 "img-10"}}
{{avatar .Publisher 20}}
<a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.Name}}</a>
</span>
{{ end }}
@ -117,7 +117,7 @@
{{if .OriginalAuthor}}
{{svg "octicon-mark-github" 16 "mr-2"}}{{.OriginalAuthor}}
{{else if .Publisher}}
{{avatar .Publisher 28 "img-10"}}
{{avatar .Publisher 20}}
<a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.GetDisplayName}}</a>
{{else}}
Ghost

View file

@ -6,31 +6,31 @@
<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
<div class="menu">
<a class="item" href="{{.BaseLink}}/gitea/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/gitea-sm.png">Gitea
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/gitea-sm.png">Gitea
</a>
<a class="item" href="{{.BaseLink}}/gogs/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs
</a>
<a class="item" href="{{.BaseLink}}/slack/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/slack.png">Slack
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/slack.png">Slack
</a>
<a class="item" href="{{.BaseLink}}/discord/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/discord.png">Discord
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/discord.png">Discord
</a>
<a class="item" href="{{.BaseLink}}/dingtalk/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/dingtalk.ico">Dingtalk
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/dingtalk.ico">Dingtalk
</a>
<a class="item" href="{{.BaseLink}}/telegram/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/telegram.png">Telegram
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/telegram.png">Telegram
</a>
<a class="item" href="{{.BaseLink}}/msteams/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/msteams.png">Microsoft Teams
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/msteams.png">Microsoft Teams
</a>
<a class="item" href="{{.BaseLink}}/feishu/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/feishu.png">Feishu
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/feishu.png">Feishu
</a>
<a class="item" href="{{.BaseLink}}/matrix/new">
<img class="img-10" src="{{StaticUrlPrefix}}/img/matrix.svg">Matrix
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/matrix.svg">Matrix
</a>
</div>
</div>

View file

@ -8,23 +8,23 @@
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
<div class="ui right">
{{if eq .HookType "gitea"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
{{else if eq .HookType "gogs"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/slack.png">
{{else if eq .HookType "discord"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/discord.png">
{{else if eq .HookType "dingtalk"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
{{else if eq .HookType "telegram"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/telegram.png">
{{else if eq .HookType "msteams"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/msteams.png">
{{else if eq .HookType "feishu"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/feishu.png">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/feishu.png">
{{else if eq .HookType "matrix"}}
<img class="img-13" src="{{StaticUrlPrefix}}/img/matrix.svg">
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/matrix.svg">
{{end}}
</div>
</h4>

View file

@ -3,7 +3,7 @@
<tr class="commit-list">
<th colspan="2">
{{if .LatestCommitUser}}
{{avatar .LatestCommitUser 28 "img-12"}}
{{avatar .LatestCommitUser 24}}
{{if .LatestCommitUser.FullName}}
<a href="{{AppSubUrl}}/{{.LatestCommitUser.Name}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
{{else}}
@ -11,7 +11,7 @@
{{end}}
{{else}}
{{if .LatestCommit.Author}}
{{avatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 28 "img-12"}}
{{avatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
<strong>{{.LatestCommit.Author.Name}}</strong>
{{end}}
{{end}}

View file

@ -85,7 +85,7 @@
{{range $push.Commits}}
{{ $commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
<li>
{{avatarByEmail .AuthorEmail .AuthorName 28 "img-8 mr-2"}}
{{avatarHTML ($push.AvatarLink .AuthorEmail) 16 "mr-2" .AuthorName}}
<a class="commit-id mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
<span class="text truncate light grey">
{{RenderCommitMessage .Message $repoLink $.ComposeMetas}}

View file

@ -312,6 +312,12 @@ a.muted:hover,
font-weight: normal;
}
/* fix misaligned images in webhook dropdown */
.ui.dropdown .menu > .item > img {
margin-top: -.25rem;
margin-bottom: -.25rem;
}
.ui.selection.dropdown .menu > .item {
border-color: var(--color-secondary);
}
@ -1101,16 +1107,6 @@ footer {
text-align: center;
}
.generate-img(16);
.generate-img(@n, @i: 1) when (@i =< @n) {
.img-@{i} {
width: (2px * @i) !important;
height: (2px * @i) !important;
}
.generate-img(@n, (@i + 1));
}
// Conditional display
@media @mediaMdAndUp {
.mobile-only,
@ -1660,6 +1656,11 @@ a.ui.basic.label:hover {
visibility: hidden;
}
/* prevent stacking context issue on webhook dropdown */
.ui.segment {
position: static;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {

View file

@ -22,7 +22,7 @@
}
.full-screen-width { width: 100vw !important; }
.full-screen-height { height: 100vw !important; }
.full-screen-height { height: 100vh !important; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }