Skip to content

Commit 69ba44f

Browse files
silverwindsilverwind
committed
Misc UI fixes, add secondary color
- Add secondary color, primarily used in arc-green currently - Convert icons on release page to SVG - Improve resolved conversation placeholder - Diff fixes on arc-green - Misc color tweaks
1 parent 2ac112d commit 69ba44f

File tree

12 files changed

+193
-154
lines changed

12 files changed

+193
-154
lines changed

‎templates/repo/branch/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
{{svg "octicon-shield-lock"}}
5757
{{end}}
5858
<a href="{{$.RepoLink}}/src/branch/{{.Name | EscapePound}}">{{.Name}}</a>
59-
<p class="info">{{svg "octicon-git-commit"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
59+
<p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
6060
{{end}}
6161
</td>
6262
<td class="three wide ui">

‎templates/repo/diff/box.tmpl

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,13 @@
173173
<td class="lines-type-marker"></td>
174174
<td class="add-comment-left">
175175
{{if and $resolved (eq $line.GetCommentSide "previous")}}
176-
<div class="ui top attached header">
176+
<div class="ui top attached header resolved-placeholder">
177177
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
178-
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
178+
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
179179
{{svg "octicon-unfold"}}
180180
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
181181
</button>
182-
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
182+
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
183183
{{svg "octicon-fold"}}
184184
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
185185
</button>
@@ -207,15 +207,15 @@
207207
</td>
208208
<td class="lines-num"></td>
209209
<td class="lines-type-marker"></td>
210-
<td class="add-comment-right">
210+
<td class="add-comment-right resolved-placeholder">
211211
{{if and $resolved (eq $line.GetCommentSide "proposed")}}
212212
<div class="ui top attached header">
213213
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
214-
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
214+
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
215215
{{svg "octicon-unfold"}}
216216
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
217217
</button>
218-
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
218+
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
219219
{{svg "octicon-fold"}}
220220
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
221221
</button>

‎templates/repo/diff/comment_form.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
22
{{if $.hidden}}
3-
<button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
3+
<button class="comment-form-reply ui green labeled icon tiny button">
4+
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.root.i18n.Tr "repo.diff.comment.reply"}}
5+
</button>
46
{{end}}
57
<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
68
{{$.root.CsrfTokenHtml}}

‎templates/repo/diff/comments.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</span>
2828
{{else}}
2929
<span class="text grey">
30-
<a class="mr-2" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
30+
<a {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
3131
{{.Poster.GetDisplayName}}
3232
</a>
3333
{{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}

‎templates/repo/diff/section_unified.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
<td colspan="2" class="lines-num"></td>
4141
<td class="add-comment-left add-comment-right" colspan="2">
4242
{{if $resolved}}
43-
<div class = "ui attached header">
43+
<div class="ui attached header resolved-placeholder">
4444
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.root.i18n.Tr "repo.issues.review.resolved_by"}}</span>
45-
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
45+
<button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
4646
{{svg "octicon-unfold"}}
4747
{{$.root.i18n.Tr "repo.issues.review.show_resolved"}}
4848
</button>
49-
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
49+
<button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
5050
{{svg "octicon-fold"}}
5151
{{$.root.i18n.Tr "repo.issues.review.hide_resolved"}}
5252
</button>

‎templates/repo/release/list.tmpl

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@
2828
<span class="ui green label">{{$.i18n.Tr "repo.release.stable"}}</span>
2929
{{end}}
3030
<span class="tag text blue">
31-
<a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow"><i class="tag icon"></i> {{.TagName}}</a>
31+
<a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
3232
</span>
3333
<span class="commit">
34-
<a href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow"><i class="code icon"></i> {{ShortSha .Sha1}}</a>
34+
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
3535
</span>
3636
{{end}}
3737
</div>
3838
<div class="ui twelve wide column detail">
3939
{{if .IsTag}}
4040
<h4>
41-
<a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow"><i class="tag icon"></i> {{.TagName}}</a>
41+
<a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
4242
</h4>
4343
<p class="text grey">
4444
{{ if gt .Publisher.ID 0 }}
@@ -51,7 +51,7 @@
5151
</p>
5252
<div class="download">
5353
{{if $.Permission.CanRead $.UnitTypeCode}}
54-
<a href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow"><i class="code icon"></i> {{ShortSha .Sha1}}</a>
54+
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
5555
<a href="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
5656
<a href="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
5757
{{end}}
@@ -64,7 +64,7 @@
6464
<p class="text grey">
6565
<span class="author">
6666
{{if .OriginalAuthor}}
67-
<i class="fa fa-github" aria-hidden="true"></i>
67+
{{svg "octicon-mark-github"}}
6868
{{.OriginalAuthor}}
6969
{{else if .Publisher}}
7070
<img class="img-10" src="{{.Publisher.RelAvatarLink}}">

‎web_src/less/_admin.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
.ui.header,
4646
.ui.segment {
47-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
47+
box-shadow: 0 1px 2px 0 var(--color-secondary);
4848
}
4949

5050
&.user {

‎web_src/less/_base.less

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
--color-primary-alpha-70: #4183c4b3;
3131
--color-primary-alpha-80: #4183c4cc;
3232
--color-primary-alpha-90: #4183c4e1;
33+
--color-secondary: rgba(34, 36, 38, .15);
3334
--color-body: #fff;
3435
}
3536

@@ -185,9 +186,12 @@ a:hover,
185186
word-break: break-all;
186187
}
187188

188-
pre,
189-
code,
190189
.mono {
190+
font-family: var(--fonts-monospace);
191+
}
192+
193+
pre,
194+
code {
191195
font: 12px var(--fonts-monospace);
192196

193197
&.raw {
@@ -781,7 +785,7 @@ code,
781785
.scrolling.menu.items {
782786
border-radius: 0 !important;
783787
box-shadow: none !important;
784-
border-bottom: 1px solid rgba(34, 36, 38, .15);
788+
border-bottom: 1px solid var(--color-secondary);
785789
}
786790
}
787791
}

‎web_src/less/_editor.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
.edit-diff > div > .ui.table {
5050
border-top: none !important;
5151
border-bottom: none !important;
52-
border-left: 1px solid #d4d4d5 !important;
53-
border-right: 1px solid #d4d4d5 !important;
52+
border-left: 1px solid var(--color-secondary) !important;
53+
border-right: 1px solid var(--color-secondary) !important;
5454
}
5555

5656
#edit_area {

‎web_src/less/_repository.less

Lines changed: 50 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -996,33 +996,6 @@
996996
}
997997

998998
.content {
999-
> .header {
1000-
#avatar-arrow;
1001-
font-weight: normal;
1002-
padding: .5rem 1rem;
1003-
position: relative;
1004-
color: #767676;
1005-
background-color: #f7f7f7;
1006-
display: flex;
1007-
justify-content: space-between;
1008-
align-items: center;
1009-
1010-
&.arrow-top::before,
1011-
&.arrow-top::after {
1012-
transform: rotate(90deg);
1013-
}
1014-
1015-
&.arrow-top::before {
1016-
top: -9px;
1017-
left: 6px;
1018-
}
1019-
1020-
&.arrow-top::after {
1021-
top: -8px;
1022-
left: 7px;
1023-
}
1024-
}
1025-
1026999
> .merge-section {
10271000
background-color: #f7f7f7;
10281001

@@ -1433,7 +1406,7 @@
14331406
.bar {
14341407
height: 4px;
14351408
position: absolute;
1436-
background-color: #d4d4d5;
1409+
background-color: var(--color-secondary);
14371410

14381411
&.bar-behind {
14391412
right: 0;
@@ -1603,12 +1576,17 @@
16031576
background: #ffffff;
16041577
line-height: 30px;
16051578

1579+
@media only screen and (max-width: 992px) {
1580+
flex-direction: column;
1581+
align-items: flex-start;
1582+
}
1583+
16061584
&.sticky {
16071585
position: sticky;
16081586
top: 0;
16091587
z-index: 8;
16101588
margin-bottom: 10px;
1611-
border-bottom: 1px solid #d4d4d5;
1589+
border-bottom: 1px solid var(--color-secondary);
16121590
padding-left: 2px;
16131591
padding-right: 2px;
16141592
}
@@ -2729,7 +2707,7 @@
27292707

27302708
> .header,
27312709
.segment {
2732-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
2710+
box-shadow: 0 1px 2px 0 var(--color-secondary);
27332711
}
27342712
}
27352713

@@ -2793,6 +2771,34 @@
27932771
}
27942772
}
27952773

2774+
.comment-header {
2775+
#avatar-arrow;
2776+
font-weight: normal !important;
2777+
padding: .5rem 1rem !important;
2778+
margin: 0 !important;
2779+
position: relative;
2780+
color: #767676;
2781+
background-color: #f7f7f7;
2782+
display: flex;
2783+
justify-content: space-between;
2784+
align-items: center;
2785+
2786+
&.arrow-top::before,
2787+
&.arrow-top::after {
2788+
transform: rotate(90deg);
2789+
}
2790+
2791+
&.arrow-top::before {
2792+
top: -9px;
2793+
left: 6px;
2794+
}
2795+
2796+
&.arrow-top::after {
2797+
top: -8px;
2798+
left: 7px;
2799+
}
2800+
}
2801+
27962802
.comment-header .actions a {
27972803
margin-right: 0 !important;
27982804
padding: .5rem !important;
@@ -2871,7 +2877,7 @@
28712877
}
28722878

28732879
&:before {
2874-
border-right-color: #d3d3d4;
2880+
border-right-color: var(--color-secondary);
28752881
border-width: 9px;
28762882
margin-top: -9px;
28772883
}
@@ -3080,7 +3086,7 @@ tbody.commit-list {
30803086
.repo-buttons .disabled-repo-button a.button:hover {
30813087
background: none !important;
30823088
color: rgba(0, 0, 0, .6) !important;
3083-
box-shadow: 0 0 0 1px rgba(34, 36, 38, .15) inset !important;
3089+
box-shadow: 0 0 0 1px var(--color-secondary) inset !important;
30843090
}
30853091

30863092
.repo-buttons .ui.labeled.button > .label {
@@ -3099,6 +3105,17 @@ tbody.commit-list {
30993105
vertical-align: middle;
31003106
}
31013107

3108+
.resolved-placeholder {
3109+
font-weight: normal !important;
3110+
border: 1px solid var(--color-secondary) !important;
3111+
border-radius: var(--border-radius) !important;
3112+
margin: 4px !important;
3113+
}
3114+
3115+
.resolved-placeholder + .comment-code-cloud {
3116+
padding-top: 0 !important;
3117+
}
3118+
31023119
.board {
31033120
display: flex;
31043121
flex-direction: row;
@@ -3109,7 +3126,7 @@ tbody.commit-list {
31093126

31103127
.board-column {
31113128
background-color: rgba(0, 0, 0, .05) !important;
3112-
border: 1px solid rgba(34, 36, 38, .15) !important;
3129+
border: 1px solid var(--color-secondary) !important;
31133130
margin: 0 .5rem !important;
31143131
padding: .5rem !important;
31153132
width: 320px;

‎web_src/less/_review.less

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
.add-comment-left.add-comment-right .ui.attached.header {
30-
border: 1px solid #d4d4d5;
30+
border: 1px solid var(--color-secondary);
3131

3232
&:not(.top) {
3333
margin-bottom: .5em;
@@ -89,10 +89,6 @@
8989
margin: .5em;
9090
}
9191

92-
.comment-list {
93-
padding-bottom: 5px;
94-
}
95-
9692
.footer {
9793
border-top: 1px solid #f1f1f1;
9894
padding: 10px 0;

0 commit comments

Comments
 (0)