Remove "TODO" tasks from CSS file (#26835)

1. Use `gt-invisible` instead of `invisible`.
2. Use `gt-word-break` instead of `dont-break-out` (there is a slight
different "hyphens", but I think it won't affect too much since it is
only used for the "full name").
3. Remove `.small.button:has(svg)` , now our buttons could layout SVG
correctly, and actually I didn't see this CSS class is used in code.
This commit is contained in:
wxiaoguang 2023-08-31 18:49:53 +08:00 committed by GitHub
parent 5b5bb8d354
commit d5703d4a1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 20 additions and 40 deletions

View File

@ -47,7 +47,7 @@
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> <td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="lines-code lines-code-old del-code">{{/* <td class="lines-code lines-code-old del-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -62,7 +62,7 @@
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new add-code">{{/* <td class="lines-code lines-code-new add-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -79,7 +79,7 @@
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-old">{{/* <td class="lines-code lines-code-old">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -94,7 +94,7 @@
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new">{{/* <td class="lines-code lines-code-new">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*

View File

@ -52,7 +52,7 @@
{{else}} {{else}}
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/* <td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*

View File

@ -21,18 +21,18 @@
<div class="divider"></div> <div class="divider"></div>
{{end}} {{end}}
{{$previousExclusiveScope = $exclusiveScope}} {{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}} <a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a> {{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
{{end}} {{end}}
<div class="divider"></div> <div class="divider"></div>
{{$previousExclusiveScope := "_no_scope"}} {{$previousExclusiveScope = "_no_scope"}}
{{range .OrgLabels}} {{range .OrgLabels}}
{{$exclusiveScope := .ExclusiveScope}} {{$exclusiveScope := .ExclusiveScope}}
{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
<div class="divider"></div> <div class="divider"></div>
{{end}} {{end}}
{{$previousExclusiveScope = $exclusiveScope}} {{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}} <a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a> {{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
{{end}} {{end}}
{{else}} {{else}}

View File

@ -158,7 +158,7 @@
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div> <div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
{{range .Assignees}} {{range .Assignees}}
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}"> <a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
<span class="octicon-check invisible">{{svg "octicon-check"}}</span> <span class="octicon-check gt-invisible">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}} {{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
</span> </span>

View File

@ -20,7 +20,7 @@
{{range .Reviewers}} {{range .Reviewers}}
{{if .User}} {{if .User}}
<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-tooltip-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}> <a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-tooltip-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
<span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check"}}</span> <span class="octicon-check {{if not .Checked}}gt-invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}} {{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}}
</span> </span>
@ -33,7 +33,7 @@
{{range .TeamReviewers}} {{range .TeamReviewers}}
{{if .Team}} {{if .Team}}
<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-tooltip-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}> <a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-tooltip-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
<span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check" 16}}</span> <span class="octicon-check {{if not .Checked}}gt-invisible{{end}}">{{svg "octicon-check" 16}}</span>
<span class="text"> <span class="text">
{{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}} {{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
</span> </span>
@ -229,7 +229,7 @@
{{$checked = true}} {{$checked = true}}
{{end}} {{end}}
{{end}} {{end}}
<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span> <span class="octicon-check {{if not $checked}}gt-invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}} {{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
</span> </span>

View File

@ -506,13 +506,6 @@ a.label,
border-right-color: var(--color-primary); border-right-color: var(--color-primary);
} }
/* fix button enlarged vertically by svg icon */
/* TODO: change to just `.small.button:has(svg)` but may have global side effects */
.ui.action.input .small.button:has(svg) {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.ui.menu, .ui.menu,
.ui.vertical.menu { .ui.vertical.menu {
background: var(--color-menu); background: var(--color-menu);
@ -953,14 +946,6 @@ img.ui.avatar,
filter: saturate(2); filter: saturate(2);
} }
/* TODO: use gt-word-break instead */
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
hyphens: auto;
}
.full.height { .full.height {
flex-grow: 1; flex-grow: 1;
padding-bottom: 80px; padding-bottom: 80px;
@ -2014,11 +1999,6 @@ a.ui.basic.label:hover {
margin-left: 0; margin-left: 0;
} }
/* TODO: replace it with gt-invisible */
.invisible {
visibility: hidden;
}
.ui.segment, .ui.segment,
.ui.segments, .ui.segments,
.ui.attached.segment { .ui.attached.segment {

View File

@ -64,9 +64,9 @@ function initRepoDiffConversationForm() {
$form.closest('.conversation-holder').replaceWith($newConversationHolder); $form.closest('.conversation-holder').replaceWith($newConversationHolder);
if ($form.closest('tr').data('line-type') === 'same') { if ($form.closest('tr').data('line-type') === 'same') {
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('invisible'); $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('gt-invisible');
} else { } else {
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible'); $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('gt-invisible');
} }
$newConversationHolder.find('.dropdown').dropdown(); $newConversationHolder.find('.dropdown').dropdown();
initCompReactionSelector($newConversationHolder); initCompReactionSelector($newConversationHolder);

View File

@ -110,7 +110,7 @@ export function initRepoIssueSidebarList() {
} }
filteredResponse.results.push({ filteredResponse.results.push({
name: `#${issue.number} ${htmlEscape(issue.title) name: `#${issue.number} ${htmlEscape(issue.title)
}<div class="text small dont-break-out">${htmlEscape(issue.repository.full_name)}</div>`, }<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
value: issue.id, value: issue.id,
}); });
}); });
@ -178,9 +178,9 @@ export function initRepoIssueCommentDelete() {
const idx = $conversationHolder.data('idx'); const idx = $conversationHolder.data('idx');
const lineType = $conversationHolder.closest('tr').data('line-type'); const lineType = $conversationHolder.closest('tr').data('line-type');
if (lineType === 'same') { if (lineType === 'same') {
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible'); $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('gt-invisible');
} else { } else {
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible'); $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('gt-invisible');
} }
$conversationHolder.remove(); $conversationHolder.remove();
} }

View File

@ -150,7 +150,7 @@ export function initRepoCommentForm() {
if ($(this).hasClass('checked')) { if ($(this).hasClass('checked')) {
$(this).removeClass('checked'); $(this).removeClass('checked');
$(this).find('.octicon-check').addClass('invisible'); $(this).find('.octicon-check').addClass('gt-invisible');
if (hasUpdateAction) { if (hasUpdateAction) {
if (!($(this).data('id') in items)) { if (!($(this).data('id') in items)) {
items[$(this).data('id')] = { items[$(this).data('id')] = {
@ -164,7 +164,7 @@ export function initRepoCommentForm() {
} }
} else { } else {
$(this).addClass('checked'); $(this).addClass('checked');
$(this).find('.octicon-check').removeClass('invisible'); $(this).find('.octicon-check').removeClass('gt-invisible');
if (hasUpdateAction) { if (hasUpdateAction) {
if (!($(this).data('id') in items)) { if (!($(this).data('id') in items)) {
items[$(this).data('id')] = { items[$(this).data('id')] = {
@ -215,7 +215,7 @@ export function initRepoCommentForm() {
$(this).parent().find('.item').each(function () { $(this).parent().find('.item').each(function () {
$(this).removeClass('checked'); $(this).removeClass('checked');
$(this).find('.octicon-check').addClass('invisible'); $(this).find('.octicon-check').addClass('gt-invisible');
}); });
if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') { if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {