foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-25 08:59:31 -05:00
Code Issues Wiki Activity

Replace unstyled meter with progress (#19968)

Browse source 
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:
silverwind 2022-06-15 06:28:24 +02:00 committed by GitHub
parent f6e2dbaf1e
commit b4d420d865
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/repo/diff/box.tmpl
View file

@ -19,8 +19,8 @@
</div> </div>
<div class="diff-detail-actions df ac"> <div class="diff-detail-actions df ac">
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}} {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
<meter id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></meter> <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" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}"> <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}} {{.i18n.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
</label> </label>
{{end}} {{end}}

4
web_src/js/features/pull-view-file.js
View file

@ -9,8 +9,8 @@ const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all
// Refreshes the summary of viewed files if present // Refreshes the summary of viewed files if present
// The data used will be window.config.pageData.prReview.numberOf{Viewed}Files // The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
function refreshViewedFilesSummary() { function refreshViewedFilesSummary() {
const viewedFilesMeter = document.getElementById('viewed-files-summary'); const viewedFilesProgress = document.getElementById('viewed-files-summary');
viewedFilesMeter?.setAttribute('value', prReview.numberOfViewedFiles); viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
const summaryLabel = document.getElementById('viewed-files-summary-label'); const summaryLabel = document.getElementById('viewed-files-summary-label');
if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template') if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
.replace('%[1]d', prReview.numberOfViewedFiles) .replace('%[1]d', prReview.numberOfViewedFiles)

8
web_src/less/_base.less
View file

@ -211,19 +211,19 @@ details summary > * {
} }
progress { progress {
background: var(--color-secondary); background: var(--color-secondary-dark-1);
border-radius: 6px; border-radius: 6px;
border: none; border: none;
overflow: hidden; overflow: hidden;
} }
progress::-webkit-progress-bar { progress::-webkit-progress-bar {
background: var(--color-secondary); background: var(--color-secondary-dark-1);
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-3); background-color: var(--color-secondary-dark-4);
} }
progress::-moz-progress-bar { progress::-moz-progress-bar {
background: var(--color-secondary-dark-3); background: var(--color-secondary-dark-4);
} }
* { * {

5
web_src/less/_review.less
View file

@ -280,3 +280,8 @@ a.blob-excerpt:hover {
.viewed-file-checked-form { .viewed-file-checked-form {
background-color: var(--color-primary-light-4); background-color: var(--color-primary-light-4);
} }
#viewed-files-summary {
width: 72px;
height: 10px;
}