Add org avatar on top of internal repo icon

[CirnoT]

Required for #11889 as there is no longer specific icon for internal repos in set.

[silverwind]

Not a fan of these negative margins. How about adding a wrapper <div> around the icon, set position: relative on it and then position the image position: absolute; right: 0; bottom: 0?

[CirnoT]

Adding another div element will cause repo name to flow down, requiring adding flex on headcrumb container with additional padding for svg element.

Also setting 0,0 positions avatar at center of octicon due to styling applied on .repository .repo-header .ui.huge.breadcrumb svg. But even without that the position is not ideal and I'd have to apply -5px on right

[silverwind]

Adding another div element will cause repo name to flow down

Could just display: inline-block it, but ideal solution should be flexbox which would allow proper centering of repo icon and text without any pixel offsets.

[CirnoT]

Could just display: inline-block it

Nope. Would prefer not playing too much with flexbox there, also text is not supposed to be centered there.

[silverwind]

inline-block div wrapper gives exactly the same rendering, you should try it:

The icon hanging outside the parent is a consequence of its size and seen present without a wrapper:

I'd say size down the icon a bit so it does not hang outside the parent and then use absolute positioning like I mentioned above with the wrapper.

[CirnoT]

The icon must be in multiplies of 16px otherwise it'll it might appear blurry, we can't willy nilly set any width and height on svgs, the world doesn't work like that.

FWIW the internal repo icon is squashed anyway because it's native width is 13px

[CirnoT]

This is the best I can do without negative margins:

Index: templates/repo/header_icon.tmpl
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/repo/header_icon.tmpl	(revision c96107079f4c12f0ee81443b1eaccd24d85ae72e)
+++ templates/repo/header_icon.tmpl	(date 1592237893537)
@@ -9,8 +9,10 @@
 		{{svg "octicon-lock" 32}}
 	{{else if and (not $.IsMirror) (not $.IsFork) ($.Owner)}}
 		{{if $.Owner.Visibility.IsPrivate}}
-			{{svg "octicon-internal-repo" 32}}
-			<img class="ui avatar image" src="{{$.Owner.RelAvatarLink}}">
+			<div class="repo-owner-avatar">
+				{{svg "octicon-internal-repo" 32}}
+				<img class="ui avatar image" src="{{$.Owner.RelAvatarLink}}">
+			</div>
 		{{else}}
 			{{svg "octicon-repo" 32}}
 		{{end}}
Index: web_src/less/_repository.less
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- web_src/less/_repository.less	(revision c96107079f4c12f0ee81443b1eaccd24d85ae72e)
+++ web_src/less/_repository.less	(date 1592238260448)
@@ -15,19 +15,19 @@
             font-weight: 400;
             font-size: 1.5rem;
 
-            svg {
+            &.repo-title .repo-owner-avatar {
+                display: inline-block;
                 position: relative;
-                top: 5px;
-            }
 
-            &.repo-title .avatar {
-                margin-left: -23px;
-                color: #fafafa;
-                box-shadow: 0 0 0 2px;
-                width: 16px;
-                height: 16px;
-                margin-bottom: -30px;
-                border-radius: 2px;
+                .avatar {
+                    position: absolute;
+                    right: -5px;
+                    bottom: 0;
+                    width: 16px;
+                    height: 16px;
+                    color: #fafafa;
+                    box-shadow: 0 0 0 2px;
+                }
             }
 
             svg.octicon-lock {

This does however change how icon is presented along with title:

[CirnoT]

Actually managed to eliminate need for -5px by applying margin: 0 on image.

[CirnoT]

Checked and looks fine to me on all cases, including when avatar is used instead of icon, so should be fine. Pushed changes.

[CirnoT]

Looking again at v1.11, it seems that top: 5px is completely unnecessary now and actually breaks styling in v1.12:

v1.11:

v1.12:

This PR:

[silverwind]

we can't willy nilly set any width and height on svgs

Must be an issue on your GPU or something. I never have any blurriness issues with non-integer scaled SVG on multiple machines.

[lafriks]

🚀