[#88049] frontend: src: components: Move action log button to header

Signed-off-by: Anna Roszkiewicz <[email protected]>

Author: anroszkiewicz

frontend/src/components/TitleBar.vue

@@ -16,7 +16,11 @@ with a title, subtitle and an optional action button.
                 <Status :connected="connected" :detailed="true" />
             </div>
             <div id="titlebar">
-                <div id="title">{{ title }}</div>
+                <div v-if="smallButtonName" id="title-container">
+                    <div id="title">{{ title }}</div>
+                    <button id="small-button" @click="buttonCallback">{{ smallButtonName }}</button>
+                </div>
+                <div v-else id="title">{{ title }}</div>
                 <div id="subtitle">{{ subtitle }}</div>
             </div>
         </div>
@@ -60,7 +64,7 @@ with a title, subtitle and an optional action button.
             font-family: 'Mona Sans', sans-serif;
             word-break: break-word;
 
-            & > #title {
+            #title {
                 color: var(--gray-1000);
                 font-weight: 700;
                 font-size: 3em;
@@ -70,6 +74,28 @@ with a title, subtitle and an optional action button.
                 color: var(--gray-900);
                 font-size: 1.3em;
             }
+
+            & > #title-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 2em;
+
+                #small-button {
+                    border: 1px solid var(--gray-400);
+                    border-radius: 8px;
+                    padding: 0.5em;
+                    color: var(--gray-900);
+                    background-color: var(--background-100);
+                    font-size: 1em;
+                    height: fit-content;
+
+                    &:hover {
+                        background-color: var(--gray-200);
+                        color: var(--gray-1000);
+                    }
+                }
+            }
         }
     }
 
@@ -139,6 +165,9 @@ export default defineComponent({
         connected: {
             type: Boolean,
         },
+        smallButtonName: {
+            type: String,
+        },
     },
     components: {
         Status,

frontend/src/components/devices/Device.vue

@@ -16,6 +16,8 @@ Component wraps functionality for displaying and working with a single rdfm devi
             :subtitle="device.metadata['rdfm.software.version'] as string"
             :device="device.mac_address"
             :connected="device.connected"
+            smallButtonName="Open action log"
+            :buttonCallback="fetchActionLog"
         />
         <TitleBar
             v-if="!device"
@@ -46,7 +48,6 @@ Component wraps functionality for displaying and working with a single rdfm devi
                     >
                         <path d="M6 16V5L14.5 10.5L6 16Z" fill="#E8EAED" />
                     </svg>
-
                     <svg
                         class="if-running rotating"
                         width="30"
@@ -62,24 +63,6 @@ Component wraps functionality for displaying and working with a single rdfm devi
                     </svg>
                 </div>
             </button>
-            <button v-on:click="() => fetchActionLog()" class="action">
-                <div class="name">Show action log for device</div>
-                <div class="description three-lines">
-                    Fetch a list of tasks assigned to the device
-                </div>
-                <div class="run">
-                    <svg
-                        class="if-not-running"
-                        width="30"
-                        height="31"
-                        viewBox="0 0 20 21"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path d="M6 16V5L14.5 10.5L6 16Z" fill="#E8EAED" />
-                    </svg>
-                </div>
-            </button>
         </div>
 
         <Transition>