MarcoBuster/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2024-09-27 00:37:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add action auto-scrolling

Browse Source
This commit is contained in:
bytedream 2024-03-25 02:36:39 +01:00
parent 3f26fe2fa2
commit 17f351b68e
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web_src/js/components/RepoActionView.vue
View File

@ -188,11 +188,22 @@ const sfc = {
}, },
appendLogs(stepIndex, logLines, startTime) { appendLogs(stepIndex, logLines, startTime) {
// position of the client view relative to the website top
const clientHeight = document.documentElement.clientHeight + window.scrollY;
// height of the logs container relative to the website top
const logsContainerHeight = this.$refs.stepsContainer.getBoundingClientRect().bottom + window.scrollY;
for (const line of logLines) { for (const line of logLines) {
// TODO: group support: ##[group]GroupTitle , ##[endgroup] // TODO: group support: ##[group]GroupTitle , ##[endgroup]
const el = this.getLogsContainer(stepIndex); const el = this.getLogsContainer(stepIndex);
el.append(this.createLogLine(line, startTime, stepIndex)); el.append(this.createLogLine(line, startTime, stepIndex));
} }
// scrolls to the bottom if job is running and the bottom of the logs container is visible
if (!this.run.done && logLines.length > 0 && clientHeight >= logsContainerHeight) {
const newLogsContainerHeight = this.$refs.stepsContainer.getBoundingClientRect().bottom + window.scrollY;
window.scrollTo({top: clientHeight + (newLogsContainerHeight - logsContainerHeight), behavior: 'smooth'});
}
}, },
async fetchArtifacts() { async fetchArtifacts() {
@ -424,7 +435,7 @@ export function initRepositoryActionView() {
</div> </div>
</div> </div>
<div class="action-view-right"> <div class="action-view-right" ref="stepsContainer">
<div class="job-info-header"> <div class="job-info-header">
<div class="job-info-header-left"> <div class="job-info-header-left">
<h3 class="job-info-header-title"> <h3 class="job-info-header-title">