Skip to content

Commit a32bfd8

Browse files
silverwindsilverwind
authored
Issue sidebar and misc css fixes (#15524)
- Replace remaining font icons with SVG in issue sidebar - Rework issue due date display - Realign avatar in timeline - Fix font size in repo search and code explore - Consolidate active button styles - Fix loading form on arc-green - Align time tracker buttons vertically Fixes: #15896
1 parent 892e656 commit a32bfd8

File tree

9 files changed

+92
-84
lines changed

9 files changed

+92
-84
lines changed

‎templates/explore/code.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
5151
{{end}}
5252
</td>
53-
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
53+
<td class="lines-code chroma"><code class="code-inner">{{.FormattedLines | Safe}}</code></td>
5454
</tr>
5555
</tbody>
5656
</table>

‎templates/repo/issue/view_content/sidebar.tmpl‎

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
88
<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
9-
<span class="text">
9+
<a class="text df ac muted">
1010
<strong>{{.i18n.Tr "repo.issues.review.reviewers"}}</strong>
1111
{{if and .CanChooseReviewer (not .Repository.IsArchived)}}
12-
{{svg "octicon-gear"}}
12+
{{svg "octicon-gear" 16 "ml-2"}}
1313
{{end}}
14-
</span>
14+
</a>
1515
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
1616
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}</div>
1717
{{if .Reviewers}}
@@ -95,12 +95,12 @@
9595
{{end}}
9696

9797
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
98-
<span class="text">
98+
<a class="text df ac muted">
9999
<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
100100
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
101-
{{svg "octicon-gear"}}
101+
{{svg "octicon-gear" 16 "ml-2"}}
102102
{{end}}
103-
</span>
103+
</a>
104104
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
105105
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
106106
{{if or .Labels .OrgLabels}}
@@ -130,12 +130,12 @@
130130
<div class="ui divider"></div>
131131

132132
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
133-
<span class="text">
133+
<a class="text df ac muted">
134134
<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
135135
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
136-
{{svg "octicon-gear"}}
136+
{{svg "octicon-gear" 16 "ml-2"}}
137137
{{end}}
138-
</span>
138+
</a>
139139
<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
140140
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
141141
{{if or .OpenMilestones .ClosedMilestones}}
@@ -193,12 +193,12 @@
193193
<div class="ui divider"></div>
194194

195195
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
196-
<span class="text">
196+
<a class="text df ac muted">
197197
<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
198198
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
199-
{{svg "octicon-gear"}}
199+
{{svg "octicon-gear" 16 "ml-2"}}
200200
{{end}}
201-
</span>
201+
</a>
202202
<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/projects">
203203
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
204204
{{if .OpenProjects}}
@@ -244,12 +244,12 @@
244244

245245
<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
246246
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
247-
<span class="text">
247+
<a class="text df ac muted">
248248
<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
249249
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
250-
{{svg "octicon-gear"}}
250+
{{svg "octicon-gear" 16 "ml-2"}}
251251
{{end}}
252-
</span>
252+
</a>
253253
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
254254
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
255255
<div class="ui icon search input">
@@ -312,12 +312,12 @@
312312
<form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/watch">
313313
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" />
314314
{{$.CsrfTokenHtml}}
315-
<button class="fluid ui button">
315+
<button class="fluid ui button df jc">
316316
{{if $.IssueWatch.IsWatching}}
317-
{{svg "octicon-mute"}}
317+
{{svg "octicon-mute" 16 "mr-3"}}
318318
{{.i18n.Tr "repo.issues.unsubscribe"}}
319319
{{else}}
320-
{{svg "octicon-unmute"}}
320+
{{svg "octicon-unmute" 16 "mr-3"}}
321321
{{.i18n.Tr "repo.issues.subscribe"}}
322322
{{end}}
323323
</button>
@@ -338,34 +338,30 @@
338338
{{$.CsrfTokenHtml}}
339339
</form>
340340
{{if $.IsStopwatchRunning}}
341-
<div class="ui buttons fluid">
342-
<button class="ui button issue-stop-time">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
343-
<button class="ui negative button issue-cancel-time">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
344-
</div>
341+
<button class="ui fluid button issue-stop-time">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
342+
<button class="ui fluid negative button issue-cancel-time mt-3">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
345343
{{else}}
346344
{{if .HasUserStopwatch}}
347345
<div class="ui warning message">
348346
{{.i18n.Tr "repo.issues.tracking_already_started" .OtherStopwatchURL | Safe}}
349347
</div>
350348
{{end}}
351-
<div class="ui buttons two fluid">
352-
<button class="ui button poping up issue-start-time" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
353-
<div class="ui mini modal issue-start-time-modal">
354-
<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
355-
<div class="content">
356-
<form method="POST" id="add_time_manual_form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/times/add" class="ui action input fluid">
357-
{{$.CsrfTokenHtml}}
358-
<input placeholder='{{.i18n.Tr "repo.issues.add_time_hours"}}' type="number" name="hours">
359-
<input placeholder='{{.i18n.Tr "repo.issues.add_time_minutes"}}' type="number" name="minutes" class="ui compact">
360-
</form>
361-
</div>
362-
<div class="actions">
363-
<div class="ui green approve button">{{.i18n.Tr "repo.issues.add_time_short"}}</div>
364-
<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
365-
</div>
349+
<button class="ui fluid button poping up issue-start-time" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
350+
<div class="ui mini modal issue-start-time-modal">
351+
<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
352+
<div class="content">
353+
<form method="POST" id="add_time_manual_form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/times/add" class="ui action input fluid">
354+
{{$.CsrfTokenHtml}}
355+
<input placeholder='{{.i18n.Tr "repo.issues.add_time_hours"}}' type="number" name="hours">
356+
<input placeholder='{{.i18n.Tr "repo.issues.add_time_minutes"}}' type="number" name="minutes" class="ui compact">
357+
</form>
358+
</div>
359+
<div class="actions">
360+
<div class="ui green approve button">{{.i18n.Tr "repo.issues.add_time_short"}}</div>
361+
<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
366362
</div>
367-
<button class="ui button green poping up issue-add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
368363
</div>
364+
<button class="ui fluid button green poping up issue-add-time mt-3" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
369365
{{end}}
370366
</div>
371367
</div>
@@ -397,21 +393,23 @@
397393
<span class="text"><strong>{{.i18n.Tr "repo.issues.due_date"}}</strong></span>
398394
<div class="ui form" id="deadline-loader">
399395
<div class="ui negative message" id="deadline-err-invalid-date" style="display: none;">
400-
<i class="close icon"></i>
396+
{{svg "octicon-x" 16 "close icon"}}
401397
{{.i18n.Tr "repo.issues.due_date_invalid"}}
402398
</div>
403399
{{if ne .Issue.DeadlineUnix 0}}
404400
<p>
405-
{{svg "octicon-calendar"}}
406-
{{.Issue.DeadlineUnix.FormatDate}}
407-
{{if .Issue.IsOverdue}}
408-
<span style="color: red;">{{.i18n.Tr "repo.issues.due_date_overdue"}}</span>
409-
{{end}}
410-
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
411-
<br/>
412-
<a class="issue-due-edit"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
413-
<a class="issue-due-remove"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
414-
{{end}}
401+
<div class="df sb ac">
402+
<div class="due-date poping up {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-content="{{.i18n.Tr "repo.issues.due_date_overdue"}}"{{end}}>
403+
{{svg "octicon-calendar" 16 "mr-3"}}
404+
{{.Issue.DeadlineUnix.FormatDate}}
405+
</div>
406+
<div>
407+
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
408+
<a class="issue-due-edit poping up muted" data-content="{{$.i18n.Tr "repo.issues.due_date_form_edit"}}">{{svg "octicon-pencil" 16 "mr-2"}}</a>
409+
<a class="issue-due-remove poping up muted" data-content="{{$.i18n.Tr "repo.issues.due_date_form_remove"}}">{{svg "octicon-trash"}}</a>
410+
{{end}}
411+
</div>
412+
</div>
415413
</p>
416414
{{else}}
417415
<p><i>{{.i18n.Tr "repo.issues.due_date_not_set"}}</i></p>
@@ -424,9 +422,9 @@
424422
<input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
425423
<button class="ui green icon button">
426424
{{if ne .Issue.DeadlineUnix 0}}
427-
<i class="edit icon"></i>
425+
{{svg "octicon-pencil"}}
428426
{{else}}
429-
<i class="plus icon"></i>
427+
{{svg "octicon-plus"}}
430428
{{end}}
431429
</button>
432430
</form>
@@ -467,7 +465,7 @@
467465
</div>
468466
<div class="item-right df ac">
469467
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
470-
<a class="delete-dependency-button poping up ci" data-id="{{.Issue.ID}}" data-type="blocking" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
468+
<a class="delete-dependency-button poping up ci muted" data-id="{{.Issue.ID}}" data-type="blocking" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
471469
{{svg "octicon-trash" 16}}
472470
</a>
473471
{{end}}
@@ -494,7 +492,7 @@
494492
</div>
495493
<div class="item-right df ac">
496494
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
497-
<a class="delete-dependency-button poping up ci" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
495+
<a class="delete-dependency-button poping up ci muted" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
498496
{{svg "octicon-trash" 16}}
499497
</a>
500498
{{end}}
@@ -516,7 +514,7 @@
516514
<div class="default text">{{.i18n.Tr "repo.issues.dependency.add"}}</div>
517515
</div>
518516
<button class="ui green icon button">
519-
<i class="plus icon"></i>
517+
{{svg "octicon-plus"}}
520518
</button>
521519
</div>
522520
</form>
@@ -550,12 +548,12 @@
550548
{{end}}</p>
551549
</div>
552550
<div class="actions">
553-
<div class="ui basic red cancel inverted button">
554-
<i class="remove icon"></i>
551+
<div class="ui red cancel inverted button">
552+
{{svg "octicon-x"}}
555553
{{.i18n.Tr "repo.issues.dependency.cancel"}}
556554
</div>
557-
<div class="ui basic green ok inverted button">
558-
<i class="checkmark icon"></i>
555+
<div class="ui green ok inverted button">
556+
{{svg "octicon-check"}}
559557
{{.i18n.Tr "repo.issues.dependency.remove"}}
560558
</div>
561559
</div>

‎templates/repo/search.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<a href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
4949
{{end}}
5050
</td>
51-
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
51+
<td class="lines-code chroma"><code class="code-inner">{{.FormattedLines | Safe}}</code></td>
5252
</tr>
5353
</tbody>
5454
</table>

‎templates/user/profile.tmpl‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,21 +92,27 @@
9292
</a>
9393
{{if not .DisableStars}}
9494
<a class='{{if eq .TabName "stars"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=stars">
95-
{{svg "octicon-star"}} {{.i18n.Tr "user.starred"}}
96-
<div class="ui label">{{.Owner.NumStars}}</div>
95+
{{svg "octicon-star"}} {{.i18n.Tr "user.starred"}}
96+
{{if .Owner.NumStars}}
97+
<div class="ui primary label">{{.Owner.NumStars}}</div>
98+
{{end}}
9799
</a>
98100
{{else}}
99101
<a class='{{if eq .TabName "watching"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=watching">
100-
{{svg "octicon-eye"}} {{.i18n.Tr "user.watched"}}
102+
{{svg "octicon-eye"}} {{.i18n.Tr "user.watched"}}
101103
</a>
102104
{{end}}
103105
<a class='{{if eq .TabName "following"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=following">
104-
{{svg "octicon-person"}} {{.i18n.Tr "user.following"}}
105-
<div class="ui label">{{.Owner.NumFollowing}}</div>
106+
{{svg "octicon-person"}} {{.i18n.Tr "user.following"}}
107+
{{if .Owner.NumFollowing}}
108+
<div class="ui primary label">{{.Owner.NumFollowing}}</div>
109+
{{end}}
106110
</a>
107111
<a class='{{if eq .TabName "followers"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=followers">
108-
{{svg "octicon-person"}} {{.i18n.Tr "user.followers"}}
109-
<div class="ui label">{{.Owner.NumFollowers}}</div>
112+
{{svg "octicon-person"}} {{.i18n.Tr "user.followers"}}
113+
{{if .Owner.NumFollowers}}
114+
<div class="ui primary label">{{.Owner.NumFollowers}}</div>
115+
{{end}}
110116
</a>
111117
</div>
112118

‎web_src/less/_base.less‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,10 +669,16 @@ a.ui.card:hover,
669669
height: auto;
670670
}
671671

672-
.ui.loading.segment::before {
672+
.ui.loading.segment::before,
673+
.ui.loading.form::before {
673674
background: none;
674675
}
675676

677+
.ui.loading.form > *,
678+
.ui.loading.segment > * {
679+
opacity: .35;
680+
}
681+
676682
.ui.loading.loading.input > i.icon svg {
677683
visibility: hidden;
678684
}
@@ -1589,11 +1595,19 @@ a.ui.label:hover {
15891595
box-shadow: none !important;
15901596
}
15911597

1598+
.ui.button:focus,
15921599
.ui.button:hover {
15931600
background: var(--color-hover);
15941601
color: var(--color-text);
15951602
}
15961603

1604+
.ui.button:active,
1605+
.ui.active.button:active,
1606+
.ui.active.button:hover {
1607+
background: var(--color-active);
1608+
color: var(--color-text);
1609+
}
1610+
15971611
.ui.button.no-text .icon {
15981612
margin: 0 !important;
15991613
}

‎web_src/less/_editor.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@
5555
background: var(--color-active);
5656
}
5757

58+
.editor-statusbar {
59+
color: var(--color-text-light);
60+
}
61+
5862
.editor-loading {
5963
padding: 1rem;
6064
text-align: center;

‎web_src/less/_repository.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -815,7 +815,7 @@
815815
.avatar.image img {
816816
width: 20px;
817817
height: 20px;
818-
margin-right: .5rem;
818+
margin: 0 .25rem;
819819
}
820820

821821
&:first-child:not(.commit) {

‎web_src/less/helpers.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424

2525
.word-break {
2626
word-wrap: break-word !important;
27-
word-break: break-all !important;
2827
}
2928

3029
.full-screen-width { width: 100vw !important; }

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

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
--color-menu: #2e323e;
9999
--color-card: #2e323e;
100100
--color-markup-table-row: #ffffff06;
101-
--color-markup-code-block: #2a2e3a;
101+
--color-markup-code-block: #292d39;
102102
--color-button: #353846;
103103
--color-code-bg: #2a2e3a;
104104
--color-shadow: #00000060;
@@ -317,19 +317,6 @@ a.ui.basic.green.label:hover {
317317
color: var(--color-secondary-dark-6) !important;
318318
}
319319

320-
.ui.active.button:active,
321-
.ui.button:active,
322-
.ui.button:focus,
323-
.ui.active.button {
324-
background-color: #2e3e4e;
325-
color: #dbdbdb;
326-
}
327-
328-
.ui.active.button:hover {
329-
background-color: #475e75;
330-
color: #dbdbdb;
331-
}
332-
333320
.repository .navbar .active.item,
334321
.repository .navbar .active.item:hover {
335322
border-color: transparent !important;

0 commit comments

Comments
 (0)