Add org avatar on top of internal repo icon (#11895)

* Add org avatar on top of internal repo icon

* add color for arc-green

* use wrapper div to avoid negative margins

* rename class and move div

* move div to icon tmpl

* remove unnecessary margin for lock octicon

* fix label align together with #11891

Co-authored-by: techknowlogick <[email protected]>

Author: CirnoT

templates/repo/header_icon.tmpl

@@ -1,23 +1,26 @@
-{{if $.IsTemplate}}
-	{{if $.IsPrivate}}
-		{{svg "octicon-repo-template-private" 32}}
+<div class="repo-header-icon">
+	{{if $.IsTemplate}}
+		{{if $.IsPrivate}}
+			{{svg "octicon-repo-template-private" 32}}
+		{{else}}
+			{{svg "octicon-repo-template" 32}}
+		{{end}}
 	{{else}}
-		{{svg "octicon-repo-template" 32}}
-	{{end}}
-{{else}}
-	{{if $.IsPrivate}}
-		{{svg "octicon-lock" 32}}
-	{{else if and (not $.IsMirror) (not $.IsFork) ($.Owner)}}
-		{{if $.Owner.Visibility.IsPrivate}}
-			{{svg "octicon-internal-repo" 32}}
+		{{if $.IsPrivate}}
+			{{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}}">
+			{{else}}
+				{{svg "octicon-repo" 32}}
+			{{end}}
+		{{else if $.IsMirror}}
+			{{svg "octicon-repo-clone" 32}}
+		{{else if $.IsFork}}
+			{{svg "octicon-repo-forked" 32}}
 		{{else}}
 			{{svg "octicon-repo" 32}}
 		{{end}}
-	{{else if $.IsMirror}}
-		{{svg "octicon-repo-clone" 32}}
-	{{else if $.IsFork}}
-		{{svg "octicon-repo-forked" 32}}
-	{{else}}
-		{{svg "octicon-repo" 32}}
 	{{end}}
-{{end}}
+</div>

web_src/less/_base.less

@@ -1317,3 +1317,7 @@ table th[data-sortt-desc] {
 .ui.secondary.pointing.menu .item {
     padding: 12px;
 }
+
+.ui.header > .ui.label.compact {
+    margin-top: inherit;
+}

web_src/less/_repository.less

@@ -14,13 +14,24 @@
             font-weight: 400;
             font-size: 1.5rem;
 
-            svg {
-                position: relative;
-                top: 5px;
+            .label {
+                vertical-align: middle;
             }
 
-            svg.octicon-lock {
-                margin-left: 5px;
+            &.repo-title .repo-header-icon {
+                display: inline-block;
+                position: relative;
+
+                .avatar {
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    width: 16px;
+                    height: 16px;
+                    color: #fafafa;
+                    box-shadow: 0 0 0 2px;
+                    margin: 0;
+                }
             }
         }
 

web_src/less/themes/theme-arc-green.less

@@ -1596,3 +1596,7 @@ footer .container .links > * {
 .tribute-container li:hover {
     background: #728e5e !important;
 }
+
+.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
+    color: #2a2e3a;
+}