thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Tweak actions menu (#26278)

Browse source 
Ressurect lost changes from
https://github.com/go-gitea/gitea/pull/24451.

- Always show icons for each entry in the menu
- Make all checkboxes toggle only their feature, e.g. "seconds" and
"timestamps" can now be toggled on together.
- Reorder the items

<img width="845" alt="Screenshot 2023-08-01 at 19 19 27"
src="https://github.com/go-gitea/gitea/assets/115237/8a76e9bf-7966-42a6-87c9-e88cdddaec82">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-08-12 10:26:53 +02:00 committed by GitHub
parent a321a4c2fc
commit 2fc0eb913c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web_src/js/components/RepoActionView.vue
View file

@ -74,23 +74,23 @@
<SvgIcon name="octicon-gear" :size="18"/> <SvgIcon name="octicon-gear" :size="18"/>
</button> </button>
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
<a :class="['item', currentJob.steps.length === 0 ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank">
<i class="icon"><SvgIcon name="octicon-download"/></i>
{{ locale.downloadLogs }}
</a>
<a class="item" @click="toggleTimeDisplay('seconds')"> <a class="item" @click="toggleTimeDisplay('seconds')">
<i class="icon"><SvgIcon v-show="timeVisible['log-time-seconds']" name="octicon-check"/></i> <i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
{{ locale.showLogSeconds }} {{ locale.showLogSeconds }}
</a> </a>
<a class="item" @click="toggleTimeDisplay('stamp')"> <a class="item" @click="toggleTimeDisplay('stamp')">
<i class="icon"><SvgIcon v-show="timeVisible['log-time-stamp']" name="octicon-check"/></i> <i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
{{ locale.showTimeStamps }} {{ locale.showTimeStamps }}
</a> </a>
<div class="divider"/>
<a class="item" @click="toggleFullScreen()"> <a class="item" @click="toggleFullScreen()">
<i class="icon"><SvgIcon v-show="isFullScreen" name="octicon-check"/></i> <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
{{ locale.showFullScreen }} {{ locale.showFullScreen }}
</a> </a>
<div class="divider"/>
<a :class="['item', currentJob.steps.length === 0 ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank">
<i class="icon"><SvgIcon name="octicon-download"/></i>
{{ locale.downloadLogs }}
</a>
</div> </div>
</div> </div>
</div> </div>
@ -401,20 +401,10 @@ const sfc = {
if (this.menuVisible) this.menuVisible = false; if (this.menuVisible) this.menuVisible = false;
}, },
// show at most one of log seconds and timestamp (can be both invisible)
toggleTimeDisplay(type) { toggleTimeDisplay(type) {
const toToggleTypes = [];
const other = type === 'seconds' ? 'stamp' : 'seconds';
this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`]; this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
toToggleTypes.push(type); for (const el of this.$refs.steps.querySelectorAll(`.log-time-${type}`)) {
if (this.timeVisible[`log-time-${type}`] && this.timeVisible[`log-time-${other}`]) { toggleElem(el, this.timeVisible[`log-time-${type}`]);
this.timeVisible[`log-time-${other}`] = false;
toToggleTypes.push(other);
}
for (const toToggle of toToggleTypes) {
for (const el of this.$refs.steps.querySelectorAll(`.log-time-${toToggle}`)) {
toggleElem(el, this.timeVisible[`log-time-${toToggle}`]);
}
} }
}, },