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:
		
					parent
					
						
							
								5b5bb8d354
							
						
					
				
			
			
				commit
				
					
						d5703d4a1b
					
				
			
		
					 9 changed files with 20 additions and 40 deletions
				
			
		| 
						 | 
				
			
			@ -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-code lines-code-old del-code">{{/*
 | 
			
		||||
						*/}}{{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"}}{{/*
 | 
			
		||||
							*/}}</button>{{/*
 | 
			
		||||
						*/}}{{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-code lines-code-new add-code">{{/*
 | 
			
		||||
						*/}}{{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"}}{{/*
 | 
			
		||||
							*/}}</button>{{/*
 | 
			
		||||
						*/}}{{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-code lines-code-old">{{/*
 | 
			
		||||
						*/}}{{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"}}{{/*
 | 
			
		||||
							*/}}</button>{{/*
 | 
			
		||||
						*/}}{{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-code lines-code-new">{{/*
 | 
			
		||||
						*/}}{{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"}}{{/*
 | 
			
		||||
							*/}}</button>{{/*
 | 
			
		||||
						*/}}{{end}}{{/*
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -52,7 +52,7 @@
 | 
			
		|||
			{{else}}
 | 
			
		||||
				<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
 | 
			
		||||
					*/}}{{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"}}{{/*
 | 
			
		||||
						*/}}</button>{{/*
 | 
			
		||||
					*/}}{{end}}{{/*
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -21,18 +21,18 @@
 | 
			
		|||
					<div class="divider"></div>
 | 
			
		||||
				{{end}}
 | 
			
		||||
				{{$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>  {{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>  {{RenderLabel $.Context .}}
 | 
			
		||||
				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
 | 
			
		||||
			{{end}}
 | 
			
		||||
			<div class="divider"></div>
 | 
			
		||||
			{{$previousExclusiveScope := "_no_scope"}}
 | 
			
		||||
			{{$previousExclusiveScope = "_no_scope"}}
 | 
			
		||||
			{{range .OrgLabels}}
 | 
			
		||||
				{{$exclusiveScope := .ExclusiveScope}}
 | 
			
		||||
				{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
 | 
			
		||||
					<div class="divider"></div>
 | 
			
		||||
				{{end}}
 | 
			
		||||
				{{$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>  {{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>  {{RenderLabel $.Context .}}
 | 
			
		||||
				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
 | 
			
		||||
			{{end}}
 | 
			
		||||
		{{else}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -158,7 +158,7 @@
 | 
			
		|||
					<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
 | 
			
		||||
					{{range .Assignees}}
 | 
			
		||||
						<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">
 | 
			
		||||
								{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
 | 
			
		||||
							</span>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,7 +20,7 @@
 | 
			
		|||
					{{range .Reviewers}}
 | 
			
		||||
						{{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}}>
 | 
			
		||||
								<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">
 | 
			
		||||
									{{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}}
 | 
			
		||||
								</span>
 | 
			
		||||
| 
						 | 
				
			
			@ -33,7 +33,7 @@
 | 
			
		|||
					{{range .TeamReviewers}}
 | 
			
		||||
						{{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}}>
 | 
			
		||||
								<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">
 | 
			
		||||
									{{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
 | 
			
		||||
								</span>
 | 
			
		||||
| 
						 | 
				
			
			@ -229,7 +229,7 @@
 | 
			
		|||
							{{$checked = true}}
 | 
			
		||||
						{{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">
 | 
			
		||||
						{{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
 | 
			
		||||
					</span>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -506,13 +506,6 @@ a.label,
 | 
			
		|||
  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.vertical.menu {
 | 
			
		||||
  background: var(--color-menu);
 | 
			
		||||
| 
						 | 
				
			
			@ -953,14 +946,6 @@ img.ui.avatar,
 | 
			
		|||
  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 {
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
  padding-bottom: 80px;
 | 
			
		||||
| 
						 | 
				
			
			@ -2014,11 +1999,6 @@ a.ui.basic.label:hover {
 | 
			
		|||
  margin-left: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* TODO: replace it with gt-invisible */
 | 
			
		||||
.invisible {
 | 
			
		||||
  visibility: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.segment,
 | 
			
		||||
.ui.segments,
 | 
			
		||||
.ui.attached.segment {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -64,9 +64,9 @@ function initRepoDiffConversationForm() {
 | 
			
		|||
 | 
			
		||||
    $form.closest('.conversation-holder').replaceWith($newConversationHolder);
 | 
			
		||||
    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 {
 | 
			
		||||
      $(`[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();
 | 
			
		||||
    initCompReactionSelector($newConversationHolder);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -110,7 +110,7 @@ export function initRepoIssueSidebarList() {
 | 
			
		|||
            }
 | 
			
		||||
            filteredResponse.results.push({
 | 
			
		||||
              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,
 | 
			
		||||
            });
 | 
			
		||||
          });
 | 
			
		||||
| 
						 | 
				
			
			@ -178,9 +178,9 @@ export function initRepoIssueCommentDelete() {
 | 
			
		|||
          const idx = $conversationHolder.data('idx');
 | 
			
		||||
          const lineType = $conversationHolder.closest('tr').data('line-type');
 | 
			
		||||
          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 {
 | 
			
		||||
            $(`[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();
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -150,7 +150,7 @@ export function initRepoCommentForm() {
 | 
			
		|||
 | 
			
		||||
        if ($(this).hasClass('checked')) {
 | 
			
		||||
          $(this).removeClass('checked');
 | 
			
		||||
          $(this).find('.octicon-check').addClass('invisible');
 | 
			
		||||
          $(this).find('.octicon-check').addClass('gt-invisible');
 | 
			
		||||
          if (hasUpdateAction) {
 | 
			
		||||
            if (!($(this).data('id') in items)) {
 | 
			
		||||
              items[$(this).data('id')] = {
 | 
			
		||||
| 
						 | 
				
			
			@ -164,7 +164,7 @@ export function initRepoCommentForm() {
 | 
			
		|||
          }
 | 
			
		||||
        } else {
 | 
			
		||||
          $(this).addClass('checked');
 | 
			
		||||
          $(this).find('.octicon-check').removeClass('invisible');
 | 
			
		||||
          $(this).find('.octicon-check').removeClass('gt-invisible');
 | 
			
		||||
          if (hasUpdateAction) {
 | 
			
		||||
            if (!($(this).data('id') in items)) {
 | 
			
		||||
              items[$(this).data('id')] = {
 | 
			
		||||
| 
						 | 
				
			
			@ -215,7 +215,7 @@ export function initRepoCommentForm() {
 | 
			
		|||
 | 
			
		||||
      $(this).parent().find('.item').each(function () {
 | 
			
		||||
        $(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') {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue