ui - issue view - fix icon position (#7354)

* issue view - fix icon position

- move style from template to css
- add bullets to: key, circle-slash, comment

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* add border to symbols

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* fix circle slash position

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* fix top margin

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* changed mixed space/tab indent to tabindent only

Signed-off-by: Michael Gnehr <michael@gnehr.de>

5 files changed, 115 insertions, 67 deletions

diff --git a/public/css/index.css b/public/css/index.css
index 8af38e4825..437605e1d3 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -553,12 +553,18 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository.view.issue .comment-list .comment .ui.form textarea{height:200px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
 .repository.view.issue .comment-list .comment .edit.buttons{margin-top:10px}
 .repository.view.issue .comment-list .event{position:relative;margin:15px 0 15px 79px;padding-left:25px}
+.repository.view.issue .comment-list .event>.octicon:not(.issue-symbol){text-shadow:-2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol{font-size:20px;margin-left:-35px;margin-right:-1px;margin-top:0!important;height:28px;width:28px;border-radius:50%;text-align:center;line-height:28px;background:#eee}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol::before{width:15px;display:inline-block}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-key::before{width:18px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-circle-slash::before{width:17px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-comment{font-size:21px;line-height:33px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-comment::before{width:20px}
 .repository.view.issue .comment-list .event .octicon{width:30px;float:left;text-align:center}
 .repository.view.issue .comment-list .event .octicon.octicon-circle-slash{margin-top:5px;margin-left:-34.5px;font-size:20px;color:#bd2c00}
-.repository.view.issue .comment-list .event .octicon.octicon-primitive-dot{margin-left:-28.5px;margin-right:-1px;font-size:30px;color:#6cc644}
-.repository.view.issue .comment-list .event .octicon.octicon-bookmark{margin-top:3px;margin-left:-31px;margin-right:-1px;font-size:25px}
-.repository.view.issue .comment-list .event .octicon.octicon-comment{margin-top:4px;margin-left:-35px;font-size:24px}
-.repository.view.issue .comment-list .event .octicon.octicon-eye{margin-top:3px;margin-left:-35px;margin-right:0;font-size:22px}
+.repository.view.issue .comment-list .event .octicon.octicon-primitive-dot{margin-top:-1px;margin-left:-28.5px;margin-right:-1px;font-size:30px;color:#6cc644}
+.repository.view.issue .comment-list .event .octicon.octicon-bookmark{margin-top:2px;margin-left:-31px;margin-right:-1px;font-size:25px}
+.repository.view.issue .comment-list .event .octicon.octicon-eye{margin-top:3px;margin-left:-36px;margin-right:0;font-size:22px}
 .repository.view.issue .comment-list .event .octicon.octicon-x{margin-left:-33px;font-size:25px}
 .repository.view.issue .comment-list .event .detail{font-size:.9rem;margin-top:5px;margin-left:35px}
 .repository.view.issue .comment-list .event .detail .octicon.octicon-git-commit{margin-top:2px}
diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index 2a7836efc8..b48e22b41e 100644
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -112,6 +112,8 @@ footer{background:#2e323e;border-top:1px solid #313131}
 .repository.view.issue .comment-list .comment .content>.bottom.segment{background:#353945}
 .repository.view.issue .comment-list .comment .content .header{color:#dbdbdb;background-color:#404552;border-bottom:1px solid #353944}
 .repository.view.issue .comment-list .comment .content .merge-section{background-color:#404552;border-top:1px solid #353944}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol{background:#3b4954}
+.repository.view.issue .comment-list .event>.octicon:not(.issue-symbol){text-shadow:-2px 0 #383c4a,0 2px #383c4a,2px 0 #383c4a,0 -2px #383c4a}
 .ui .text.grey a{color:#dbdbdb!important}
 .ui.comments .comment .actions a{color:#dbdbdb}
 .repository.view.issue .comment-list .comment .content .header:after{border-right-color:#404552}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index dd986c8832..21aeea81e7 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -920,6 +920,45 @@
                 margin: 15px 0 15px 79px;
                 padding-left: 25px;
 
+                & > .octicon:not(.issue-symbol) {
+                    text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
+                }
+
+                & > .octicon.issue-symbol {
+                    font-size: 20px;
+                    margin-left: -35px;
+                    margin-right: -1px;
+                    margin-top: 0 !important;
+                    height: 28px;
+                    width: 28px;
+                    border-radius: 50%;
+                    text-align: center;
+                    line-height: 28px;
+                    background: #eee;
+
+                    &::before {
+                        width: 15px;
+                        display: inline-block;
+                    }
+
+                    &.octicon-key::before {
+                        width: 18px;
+                    }
+
+                    &.octicon-circle-slash::before {
+                        width: 17px;
+                    }
+
+                    &.octicon-comment {
+                        font-size: 21px;
+                        line-height: 33px;
+
+                        &::before {
+                            width: 20px;
+                        }
+                    }
+                }
+
                 .octicon {
                     width: 30px;
                     float: left;
@@ -933,6 +972,7 @@
                     }
 
                     &.octicon-primitive-dot {
+                        margin-top: -1px;
                         margin-left: -28.5px;
                         margin-right: -1px;
                         font-size: 30px;
@@ -940,21 +980,15 @@
                     }
 
                     &.octicon-bookmark {
-                        margin-top: 3px;
+                        margin-top: 2px;
                         margin-left: -31px;
                         margin-right: -1px;
                         font-size: 25px;
                     }
 
-                    &.octicon-comment {
-                        margin-top: 4px;
-                        margin-left: -35px;
-                        font-size: 24px;
-                    }
-
                     &.octicon-eye {
                         margin-top: 3px;
-                        margin-left: -35px;
+                        margin-left: -36px;
                         margin-right: 0;
                         font-size: 22px;
                     }
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index d4200b5162..cde5b5e7f5 100644
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -595,6 +595,14 @@ a.ui.basic.green.label:hover {
     border-top: 1px solid #353944;
 }
 
+.repository.view.issue .comment-list .event > .octicon.issue-symbol {
+    background: #3b4954;
+}
+
+.repository.view.issue .comment-list .event > .octicon:not(.issue-symbol) {
+    text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
+}
+
 .ui .text.grey a {
     color: #dbdbdb !important;
 }
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 6f562dc6b0..20474f6302 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -82,7 +82,7 @@
 		</div>
 	{{else if eq .Type 2}}
 		<div class="event">
-			<span class="octicon octicon-circle-slash"></span>
+			<span class="octicon octicon-circle-slash issue-symbol"></span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -172,7 +172,7 @@
 			{{$.i18n.Tr "repo.issues.delete_branch_at" (.CommitSHA|Escape) $createdStr | Safe}}
 			</span>
 		</div>
-    {{else if eq .Type 12}}
+	{{else if eq .Type 12}}
 		<div class="event">
 			<span class="octicon octicon-primitive-dot"></span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
@@ -245,55 +245,55 @@
 		</div>
 	{{else if eq .Type 19}}
 		<div class="event">
-	    	<span class="octicon octicon-primitive-dot"></span>
-	    	<a class="ui avatar image" href="{{.Poster.HomeLink}}">
+			<span class="octicon octicon-primitive-dot"></span>
+			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
-	     	</a>
-	     	<span class="text grey">
-		     	{{$.i18n.Tr "repo.issues.dependency.added_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
-	     	</span>
-	     	<div class="detail">
-		    	<span class="octicon octicon-plus"></span>
+		 	</a>
+		 	<span class="text grey">
+			 	{{$.i18n.Tr "repo.issues.dependency.added_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
+		 	</span>
+		 	<div class="detail">
+				<span class="octicon octicon-plus"></span>
 			 	<span class="text grey"><a href="{{$.RepoLink}}/issues/{{.DependentIssue.Index}}">#{{.DependentIssue.Index}} {{.DependentIssue.Title}}</a></span>
 		 	</div>
-     	</div>
+	 	</div>
 	{{else if eq .Type 20}}
 		<div class="event">
-	     	<span class="octicon octicon-primitive-dot"></span>
-	     	<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-		     	<img src="{{.Poster.RelAvatarLink}}">
-	     	</a>
-	     	<span class="text grey">
-		     	{{$.i18n.Tr "repo.issues.dependency.removed_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
-	     	</span>
-	     	<div class="detail">
-		     	<span class="text grey octicon octicon-trashcan"></span>
+		 	<span class="octicon octicon-primitive-dot"></span>
+		 	<a class="ui avatar image" href="{{.Poster.HomeLink}}">
+			 	<img src="{{.Poster.RelAvatarLink}}">
+		 	</a>
+		 	<span class="text grey">
+			 	{{$.i18n.Tr "repo.issues.dependency.removed_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
+		 	</span>
+		 	<div class="detail">
+			 	<span class="text grey octicon octicon-trashcan"></span>
 			 	<span class="text grey"><a href="{{$.RepoLink}}/issues/{{.DependentIssue.Index}}">#{{.DependentIssue.Index}} {{.DependentIssue.Title}}</a></span>
-	     	</div>
-     	</div>
+		 	</div>
+	 	</div>
 	{{else if eq .Type 22}}
-	    <div class="event" id="{{.HashTag}}">
-	    	<span class="octicon octicon-{{.Review.Type.Icon}}"></span>
-	    	<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-	    		<img src="{{.Poster.RelAvatarLink}}">
-	    	</a>
-	    	<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
-	    		{{if eq .Review.Type 1}}
-	    			{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
-	    		{{else if eq .Review.Type 2}}
-	    			{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-	    		{{else if eq .Review.Type 3}}
-	    			{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
-	    		{{else}}
-	    			{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-	    		{{end}}
-	    	</span>
-	    	{{if .Content}}
-	    		<div class="detail">
+		<div class="event" id="{{.HashTag}}">
+			<span class="octicon octicon-{{.Review.Type.Icon}} issue-symbol"></span>
+			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
+				<img src="{{.Poster.RelAvatarLink}}">
+			</a>
+			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
+				{{if eq .Review.Type 1}}
+					{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
+				{{else if eq .Review.Type 2}}
+					{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
+				{{else if eq .Review.Type 3}}
+					{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
+				{{else}}
+					{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
+				{{end}}
+			</span>
+			{{if .Content}}
+				<div class="detail">
 					<span class="octicon octicon-quote"></span>
-	    			<span class="text grey">{{.Content}}</span>
-	    		</div>
-	    	{{end}}
+					<span class="text grey">{{.Content}}</span>
+				</div>
+			{{end}}
 			{{ range $filename, $lines := .Review.CodeComments}}
 				{{range $line, $comms := $lines}}
 						<div class="ui segments">
@@ -358,36 +358,34 @@
 						</div>
 				{{end}}
 			{{end}}
-	    </div>
+		</div>
 	{{else if eq .Type 23}}
 		<div class="event">
-			<span class="octicon octicon-lock"
-				style="font-size:20px;margin-left:-28.5px; margin-right: -1px"></span>
+			<span class="octicon octicon-lock issue-symbol"></span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 
 			{{ if .Content }}
-	    		<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
+				<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
 				{{$.i18n.Tr "repo.issues.lock_with_reason" .Content $createdStr | Safe}}
-	    		</span>
+				</span>
 			{{ else }}
-	    		<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
+				<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
 				{{$.i18n.Tr "repo.issues.lock_no_reason" $createdStr | Safe}}
-	    		</span>
+				</span>
 			{{ end }}
 		</div>
 	{{else if eq .Type 24}}
 		<div class="event">
-			<span class="octicon octicon-key"
-				style="font-size:20px;margin-left:-28.5px; margin-right: -1px"></span>
+			<span class="octicon octicon-key issue-symbol"></span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 
-	    		<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
-	    			{{$.i18n.Tr "repo.issues.unlock_comment" $createdStr | Safe}}
-	    		</span>
+				<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
+					{{$.i18n.Tr "repo.issues.unlock_comment" $createdStr | Safe}}
+				</span>
 		</div>
 	{{end}}
 {{end}}