Replace unstyled meter with progress (#19968)
Replace the only `<meter>` element in use with a `<progress>` which is styled properly. Also slightly adjust colors on it for better contrast. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
f6e2dbaf1e
commit
b4d420d865
|
@ -19,8 +19,8 @@
|
|||
</div>
|
||||
<div class="diff-detail-actions df ac">
|
||||
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
|
||||
<meter id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></meter>
|
||||
<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
|
||||
<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
|
||||
<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-2" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
|
||||
{{.i18n.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
|
||||
</label>
|
||||
{{end}}
|
||||
|
|
|
@ -9,8 +9,8 @@ const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all
|
|||
// Refreshes the summary of viewed files if present
|
||||
// The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
|
||||
function refreshViewedFilesSummary() {
|
||||
const viewedFilesMeter = document.getElementById('viewed-files-summary');
|
||||
viewedFilesMeter?.setAttribute('value', prReview.numberOfViewedFiles);
|
||||
const viewedFilesProgress = document.getElementById('viewed-files-summary');
|
||||
viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
|
||||
const summaryLabel = document.getElementById('viewed-files-summary-label');
|
||||
if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
|
||||
.replace('%[1]d', prReview.numberOfViewedFiles)
|
||||
|
|
|
@ -211,19 +211,19 @@ details summary > * {
|
|||
}
|
||||
|
||||
progress {
|
||||
background: var(--color-secondary);
|
||||
background: var(--color-secondary-dark-1);
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background: var(--color-secondary);
|
||||
background: var(--color-secondary-dark-1);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background-color: var(--color-secondary-dark-3);
|
||||
background-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background: var(--color-secondary-dark-3);
|
||||
background: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
@ -280,3 +280,8 @@ a.blob-excerpt:hover {
|
|||
.viewed-file-checked-form {
|
||||
background-color: var(--color-primary-light-4);
|
||||
}
|
||||
|
||||
#viewed-files-summary {
|
||||
width: 72px;
|
||||
height: 10px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue