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>

Changes

4 changed files (+13/-8)

• templates/repo/diff/box.tmpl
  • @@ -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}}
• web_src/js/features/pull-view-file.js
  • @@ -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)
• web_src/less/_base.less
  • @@ -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); } * {
• web_src/less/_review.less
  • @@ -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; + }