Move actions toolbar to side menu

assets/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     LogEventSource: typeof import('./components/LogEventSource.vue')['default']
     LogViewer: typeof import('./components/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
+    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
     MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
     MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']

assets/components/LogActionsToolbar.vue

@@ -1,23 +1,25 @@
 <template>
-  <div class="mr-0 toolbar is-vcentered is-hidden-mobile">
-    <div class="is-flex">
-      <o-tooltip type="is-dark" label="Clear">
-        <a @click="onClearClicked" class="pl-1 pr-1 button is-small is-light is-inverted" id="clear">
-          <octicon-trash-24 />
-        </a>
-      </o-tooltip>
-      <div class="is-flex-grow-1"></div>
-      <o-tooltip type="is-dark" label="Download">
-        <a
-          class="pl-1 pr-1 button is-small is-light is-inverted"
-          id="download"
-          :href="`${base}/api/logs/download?id=${container.id}`"
-          download
-        >
-          <octicon-download-24 />
-        </a>
-      </o-tooltip>
-    </div>
+  <div class="mr-2 column is-narrow is-paddingless is-clickable">
+    <o-dropdown aria-role="list" position="bottom-left">
+      <template v-slot:trigger>
+        <span class="btn">
+          <span class="icon">
+            <mdi-dots-vertical />
+          </span>
+        </span>
+      </template>
+
+      <o-dropdown-item aria-role="listitem" @click="onClearClicked">
+        <octicon-trash-24 style="margin-right: 1em" />
+        <span> Clear </span>
+      </o-dropdown-item>
+      <a id="download" :href="`${base}/api/logs/download?id=${container.id}`">
+        <o-dropdown-item aria-role="listitem">
+          <octicon-download-24 style="margin-right: 1em" />
+          <span> Download </span>
+        </o-dropdown-item>
+      </a>
+    </o-dropdown>
   </div>
 </template>
 

assets/components/LogContainer.vue

@@ -11,22 +11,8 @@
         <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
           <button class="delete is-medium" @click="emit('close')"></button>
         </div>
-        <!-- <div class="mr-2 column is-narrow is-paddingless">
-          <o-dropdown aria-role="list" position="bottom-left">
-            <template v-slot:trigger>
-              <span class="btn">
-                <span class="icon">
-                  <carbon-verflow-menu-vertical />
-                </span>
-              </span>
-            </template>
-
-            <o-dropdown-item aria-role="listitem"> Clear </o-dropdown-item>
-            <o-dropdown-item aria-role="listitem">Download</o-dropdown-item>
-          </o-dropdown>
-        </div> -->
+        <log-actions-toolbar :container="container" :onClearClicked="onClearClicked"></log-actions-toolbar>
       </div>
-      <log-actions-toolbar :container="container" :onClearClicked="onClearClicked"></log-actions-toolbar>
     </template>
     <template v-slot="{ setLoading }">
       <log-viewer-with-source ref="viewer" :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>

package.json

@@ -22,9 +22,9 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.0.10",
     "@iconify-json/cil": "^1.0.1",
     "@iconify-json/mdi-light": "^1.0.1",
+    "@iconify-json/mdi": "^1.0.10",
     "@iconify-json/octicon": "^1.0.5",
     "@oruga-ui/oruga-next": "^0.4.7",
     "@oruga-ui/theme-bulma": "^0.1.3",

pnpm-lock.yaml

@@ -3,8 +3,8 @@ lockfileVersion: 5.3
 specifiers:
   '@babel/plugin-transform-runtime': ^7.16.0
   '@babel/preset-env': ^7.16.0
-  '@iconify-json/carbon': ^1.0.10
   '@iconify-json/cil': ^1.0.1
+  '@iconify-json/mdi': ^1.0.10
   '@iconify-json/mdi-light': ^1.0.1
   '@iconify-json/octicon': ^1.0.5
   '@oruga-ui/oruga-next': ^0.4.7
@@ -49,8 +49,8 @@ specifiers:
   vue-router: ^4.0.12
 
 dependencies:
-  '@iconify-json/carbon': 1.0.10
   '@iconify-json/cil': 1.0.1
+  '@iconify-json/mdi': 1.0.10
   '@iconify-json/mdi-light': 1.0.1
   '@iconify-json/octicon': 1.0.5
   '@oruga-ui/oruga-next': 0.4.7_vue@3.2.22
@@ -1337,12 +1337,6 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
-  /@iconify-json/carbon/1.0.10:
-    resolution: {integrity: sha512-Tw/bjIWIJ8cx3lTqqvETkui3Z7dNW1j/kYTckAmjiGNJhlMi7b4pL7iFyxnkb3Y7dpia1ZNQOwzHUXMxxxk6WA==}
-    dependencies:
-      '@iconify/types': 1.0.10
-    dev: false
-
   /@iconify-json/cil/1.0.1:
     resolution: {integrity: sha512-gLk0c25zSBtKKJWrGXVfQITeIdmvlSOiO/cKTVTQPG3W4qKh8V/wL3Fltb4j4iMPJgRVXylPPwKSwXbIDBDgZA==}
     dependencies:
@@ -1355,6 +1349,12 @@ packages:
       '@iconify/types': 1.0.10
     dev: false
 
+  /@iconify-json/mdi/1.0.10:
+    resolution: {integrity: sha512-qX2IZAh4nrDlJ/3J5m/OWUf0Y6QQq7fJriFHG0JWf1ZyfQCArCOT9s+HBmdZKxhXYPYn58Jf+Pg/KbKK6M7tiQ==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
   /@iconify-json/octicon/1.0.5:
     resolution: {integrity: sha512-+D4xVN2Xw4hHaRclgJytkUCp7IXZZLN0jt6WNTPcTpUkVoOrBLDego+vWDVfuYASBhWuGYNUQA+HLwdmtJCFGQ==}
     dependencies: