Tweak actions menu (#26278)

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>

1 files changed, 10 insertions, 20 deletions

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 2c4273f2f2..929e971b6c 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -74,23 +74,23 @@
                 <SvgIcon name="octicon-gear" :size="18"/>
               </button>
               <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')">
-                  <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 }}
                 </a>
                 <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 }}
                 </a>
-                <div class="divider"/>
                 <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 }}
                 </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>
@@ -401,20 +401,10 @@ const sfc = {
       if (this.menuVisible) this.menuVisible = false;
     },
 
-    // show at most one of log seconds and timestamp (can be both invisible)
     toggleTimeDisplay(type) {
-      const toToggleTypes = [];
-      const other = type === 'seconds' ? 'stamp' : 'seconds';
       this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
-      toToggleTypes.push(type);
-      if (this.timeVisible[`log-time-${type}`] && this.timeVisible[`log-time-${other}`]) {
-        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}`]);
-        }
+      for (const el of this.$refs.steps.querySelectorAll(`.log-time-${type}`)) {
+        toggleElem(el, this.timeVisible[`log-time-${type}`]);
       }
     },