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>
This commit is contained in:
Cherrg 2019-07-07 00:03:00 +02:00 committed by techknowlogick
parent 5b92bc1bec
commit 362100023c
5 changed files with 115 additions and 67 deletions

View File

@ -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 .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 .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{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{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-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-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:3px;margin-left:-31px;margin-right:-1px;font-size:25px} .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-comment{margin-top:4px;margin-left:-35px;font-size:24px} .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-eye{margin-top:3px;margin-left:-35px;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 .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{font-size:.9rem;margin-top:5px;margin-left:35px}
.repository.view.issue .comment-list .event .detail .octicon.octicon-git-commit{margin-top:2px} .repository.view.issue .comment-list .event .detail .octicon.octicon-git-commit{margin-top:2px}

View File

@ -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>.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 .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 .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 .text.grey a{color:#dbdbdb!important}
.ui.comments .comment .actions a{color:#dbdbdb} .ui.comments .comment .actions a{color:#dbdbdb}
.repository.view.issue .comment-list .comment .content .header:after{border-right-color:#404552} .repository.view.issue .comment-list .comment .content .header:after{border-right-color:#404552}

View File

@ -920,6 +920,45 @@
margin: 15px 0 15px 79px; margin: 15px 0 15px 79px;
padding-left: 25px; 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 { .octicon {
width: 30px; width: 30px;
float: left; float: left;
@ -933,6 +972,7 @@
} }
&.octicon-primitive-dot { &.octicon-primitive-dot {
margin-top: -1px;
margin-left: -28.5px; margin-left: -28.5px;
margin-right: -1px; margin-right: -1px;
font-size: 30px; font-size: 30px;
@ -940,21 +980,15 @@
} }
&.octicon-bookmark { &.octicon-bookmark {
margin-top: 3px; margin-top: 2px;
margin-left: -31px; margin-left: -31px;
margin-right: -1px; margin-right: -1px;
font-size: 25px; font-size: 25px;
} }
&.octicon-comment {
margin-top: 4px;
margin-left: -35px;
font-size: 24px;
}
&.octicon-eye { &.octicon-eye {
margin-top: 3px; margin-top: 3px;
margin-left: -35px; margin-left: -36px;
margin-right: 0; margin-right: 0;
font-size: 22px; font-size: 22px;
} }

View File

@ -595,6 +595,14 @@ a.ui.basic.green.label:hover {
border-top: 1px solid #353944; 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 { .ui .text.grey a {
color: #dbdbdb !important; color: #dbdbdb !important;
} }

View File

@ -82,7 +82,7 @@
</div> </div>
{{else if eq .Type 2}} {{else if eq .Type 2}}
<div class="event"> <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}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
@ -172,7 +172,7 @@
{{$.i18n.Tr "repo.issues.delete_branch_at" (.CommitSHA|Escape) $createdStr | Safe}} {{$.i18n.Tr "repo.issues.delete_branch_at" (.CommitSHA|Escape) $createdStr | Safe}}
</span> </span>
</div> </div>
{{else if eq .Type 12}} {{else if eq .Type 12}}
<div class="event"> <div class="event">
<span class="octicon octicon-primitive-dot"></span> <span class="octicon octicon-primitive-dot"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
@ -245,55 +245,55 @@
</div> </div>
{{else if eq .Type 19}} {{else if eq .Type 19}}
<div class="event"> <div class="event">
<span class="octicon octicon-primitive-dot"></span> <span class="octicon octicon-primitive-dot"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
<span class="text grey"> <span class="text grey">
{{$.i18n.Tr "repo.issues.dependency.added_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}} {{$.i18n.Tr "repo.issues.dependency.added_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
</span> </span>
<div class="detail"> <div class="detail">
<span class="octicon octicon-plus"></span> <span class="octicon octicon-plus"></span>
<span class="text grey"><a href="{{$.RepoLink}}/issues/{{.DependentIssue.Index}}">#{{.DependentIssue.Index}} {{.DependentIssue.Title}}</a></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 20}} {{else if eq .Type 20}}
<div class="event"> <div class="event">
<span class="octicon octicon-primitive-dot"></span> <span class="octicon octicon-primitive-dot"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
<span class="text grey"> <span class="text grey">
{{$.i18n.Tr "repo.issues.dependency.removed_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}} {{$.i18n.Tr "repo.issues.dependency.removed_dependency" .Poster.HomeLink (.Poster.GetDisplayName|Escape) $createdStr | Safe}}
</span> </span>
<div class="detail"> <div class="detail">
<span class="text grey octicon octicon-trashcan"></span> <span class="text grey octicon octicon-trashcan"></span>
<span class="text grey"><a href="{{$.RepoLink}}/issues/{{.DependentIssue.Index}}">#{{.DependentIssue.Index}} {{.DependentIssue.Title}}</a></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}} {{else if eq .Type 22}}
<div class="event" id="{{.HashTag}}"> <div class="event" id="{{.HashTag}}">
<span class="octicon octicon-{{.Review.Type.Icon}}"></span> <span class="octicon octicon-{{.Review.Type.Icon}} issue-symbol"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a> <span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
{{if eq .Review.Type 1}} {{if eq .Review.Type 1}}
{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}} {{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
{{else if eq .Review.Type 2}} {{else if eq .Review.Type 2}}
{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}} {{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
{{else if eq .Review.Type 3}} {{else if eq .Review.Type 3}}
{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}} {{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
{{else}} {{else}}
{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}} {{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
{{end}} {{end}}
</span> </span>
{{if .Content}} {{if .Content}}
<div class="detail"> <div class="detail">
<span class="octicon octicon-quote"></span> <span class="octicon octicon-quote"></span>
<span class="text grey">{{.Content}}</span> <span class="text grey">{{.Content}}</span>
</div> </div>
{{end}} {{end}}
{{ range $filename, $lines := .Review.CodeComments}} {{ range $filename, $lines := .Review.CodeComments}}
{{range $line, $comms := $lines}} {{range $line, $comms := $lines}}
<div class="ui segments"> <div class="ui segments">
@ -358,36 +358,34 @@
</div> </div>
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
{{else if eq .Type 23}} {{else if eq .Type 23}}
<div class="event"> <div class="event">
<span class="octicon octicon-lock" <span class="octicon octicon-lock issue-symbol"></span>
style="font-size:20px;margin-left:-28.5px; margin-right: -1px"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
{{ if .Content }} {{ 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}} {{$.i18n.Tr "repo.issues.lock_with_reason" .Content $createdStr | Safe}}
</span> </span>
{{ else }} {{ 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}} {{$.i18n.Tr "repo.issues.lock_no_reason" $createdStr | Safe}}
</span> </span>
{{ end }} {{ end }}
</div> </div>
{{else if eq .Type 24}} {{else if eq .Type 24}}
<div class="event"> <div class="event">
<span class="octicon octicon-key" <span class="octicon octicon-key issue-symbol"></span>
style="font-size:20px;margin-left:-28.5px; margin-right: -1px"></span>
<a class="ui avatar image" href="{{.Poster.HomeLink}}"> <a class="ui avatar image" href="{{.Poster.HomeLink}}">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
<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.unlock_comment" $createdStr | Safe}} {{$.i18n.Tr "repo.issues.unlock_comment" $createdStr | Safe}}
</span> </span>
</div> </div>
{{end}} {{end}}
{{end}} {{end}}