forked from gitea/gitea
		
	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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 silverwind
						silverwind