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>tags/v1.18.0-dev
@@ -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; | |||
} |