third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework focused comment styling (#13434)

Browse Source 
Had to tweak a few borders to make it work properly in all cases, also
added .comment-body class to specifically target that body.
tokarchuk/v1.17
silverwind 4 years ago committed by GitHub
parent 5b636bdec7
commit eba0ac5bf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 87 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/repo/diff/comments.tmpl
  2. 2
      templates/repo/issue/view_content.tmpl
  3. 58
      templates/repo/issue/view_content/comments.tmpl
  4. 62
      web_src/less/_repository.less
  5. 4
      web_src/less/themes/theme-arc-green.less

2
templates/repo/diff/comments.tmpl
Unescape View File

@ -50,7 +50,7 @@
{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}} {{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

2
templates/repo/issue/view_content.tmpl
Unescape View File

@ -56,7 +56,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .Issue.RenderedContent}} {{if .Issue.RenderedContent}}
{{.Issue.RenderedContent|Str2html}} {{.Issue.RenderedContent|Str2html}}

58
templates/repo/issue/view_content/comments.tmpl
Unescape View File

@ -22,9 +22,23 @@
<div class="ui top attached header comment-header df ac sb"> <div class="ui top attached header comment-header df ac sb">
<div class="comment-header-left df ac"> <div class="comment-header-left df ac">
{{if .OriginalAuthor }} {{if .OriginalAuthor }}
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span> <span class="text black mr-2">
<i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
{{ .OriginalAuthor }}
</span>
<span class="text grey">
{{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}
</span>
<span class="text migrate">
({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}
</span>
{{else}} {{else}}
<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span> <span class="text grey">
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
{{.Poster.GetDisplayName}}
</a>
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
</span>
{{end}} {{end}}
</div> </div>
<div class="comment-header-right actions df ac"> <div class="comment-header-right actions df ac">
@ -48,7 +62,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
@ -425,7 +439,7 @@
{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}} {{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
</span> </span>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markdown">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
@ -492,32 +506,30 @@
<div class="ui comments"> <div class="ui comments">
{{range $comms}} {{range $comms}}
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }} {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
<div class="comment" id="{{.HashTag}}"> <div class="comment code-comment" id="{{.HashTag}}">
{{if not .OriginalAuthor }} {{if not .OriginalAuthor }}
<a class="avatar"> <a class="avatar">
<img src="{{.Poster.RelAvatarLink}}"> <img src="{{.Poster.RelAvatarLink}}">
</a> </a>
{{end}} {{end}}
<div class="content"> <div class="content">
<div class="code-comment-content"> <span class="text grey">
<span class="text grey"> {{if .OriginalAuthor }}
{{if .OriginalAuthor }} <span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span> {{else}}
{{else}} <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{end}}
{{end}} {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}} </span>
</span> <div class="text comment-content">
<div class="text"> <div class="render-content markdown">
<div class="render-content markdown"> {{if .RenderedContent}}
{{if .RenderedContent}} {{.RenderedContent|Str2html}}
{{.RenderedContent|Str2html}} {{else}}
{{else}} <span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span> {{end}}
{{end}}
</div>
<div class="raw-content hide">{{.Content}}</div>
</div> </div>
<div class="raw-content hide">{{.Content}}</div>
</div> </div>
</div> </div>
</div> </div>

62
web_src/less/_repository.less
Unescape View File

@ -998,6 +998,9 @@
} }
.content { .content {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
> .merge-section { > .merge-section {
background-color: #f7f7f7; background-color: #f7f7f7;
@ -1089,18 +1092,6 @@
} }
} }
&:target > .content {
box-shadow: 0 0 10px #8c8c8c;
}
&:target > .content > .code-comment-content {
padding: 4px;
}
&:target > .content > .code-comment-content > .text {
margin-bottom: 0;
}
.ui.form { .ui.form {
.field { .field {
&:first-child { &:first-child {
@ -1127,6 +1118,15 @@
} }
} }
.code-comment {
border: 1px solid transparent;
padding: 6px 6px 3px;
.content {
border: none !important;
}
}
.event { .event {
padding-left: 15px; padding-left: 15px;
@ -2395,6 +2395,11 @@
.segment.reactions { .segment.reactions {
padding: 0; padding: 0;
display: flex; display: flex;
border: none !important;
border-top: 1px solid var(--color-secondary) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
.ui.label { .ui.label {
max-height: 40px; max-height: 40px;
@ -2407,7 +2412,7 @@
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
border-color: inherit !important; border-color: var(--color-secondary) !important;
&.disabled { &.disabled {
cursor: default; cursor: default;
@ -2421,7 +2426,7 @@
.ui.label.basic.blue { .ui.label.basic.blue {
background-color: var(--color-primary-alpha-20) !important; background-color: var(--color-primary-alpha-20) !important;
border-color: inherit !important; border-color: var(--color-secondary) !important;
} }
.reaction-count { .reaction-count {
@ -2786,8 +2791,30 @@
} }
} }
.comment:target .content {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.comment:target .header:before {
border-right-color: var(--color-primary) !important;
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
}
.code-comment:target {
border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.code-comment:target .content {
box-shadow: none !important;
}
.comment-header { .comment-header {
#avatar-arrow; #avatar-arrow;
border: none !important;
border-bottom: 1px solid var(--color-secondary) !important;
font-weight: normal !important; font-weight: normal !important;
padding: .5rem 1rem !important; padding: .5rem 1rem !important;
margin: 0 !important; margin: 0 !important;
@ -2833,6 +2860,13 @@
margin-left: .25rem; margin-left: .25rem;
} }
.comment-body {
border: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.edit-label.modal, .edit-label.modal,
.new-label.segment { .new-label.segment {
.form { .form {

4
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -537,7 +537,7 @@ body {
.ui.attached.header { .ui.attached.header {
background: var(--color-secondary); background: var(--color-secondary);
border: 1px solid var(--color-secondary); border-color: var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover {
.ui.segment, .ui.segment,
.ui.segments, .ui.segments,
.ui.attached.segment { .ui.attached.segment {
border: 1px solid var(--color-secondary); border-color: var(--color-secondary);
} }
.ui.list > .item > .content { .ui.list > .item > .content {

Write Preview
Loading…
Cancel
Save