From b4d420d8658feced78d897de4fbc9cc6ca76ab4e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 15 Jun 2022 06:28:24 +0200
Subject: [PATCH] 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>
---
templates/repo/diff/box.tmpl | 4 ++--
web_src/js/features/pull-view-file.js | 4 ++--
web_src/less/_base.less | 8 ++++----
web_src/less/_review.less | 5 +++++
4 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index a70532eca9..fdc6db2f1a 100644
--- a/templates/repo/diff/box.tmpl
+++ b/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}}
diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index 57e9d5e047..06d78d78c2 100644
--- a/web_src/js/features/pull-view-file.js
+++ b/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)
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4d7f69e3b3..bd5754c1e3 100644
--- a/web_src/less/_base.less
+++ b/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);
}
* {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 1bcb3663c2..2fa8efd67e 100644
--- a/web_src/less/_review.less
+++ b/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;
+}