[client] VBtn: add tooltip

JorisAerts · Aug 11, 2024 · 4946250 · 4946250
1 parent ea54863
commit 4946250
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/src/client/components/app/NavBar/AppControlsToolbar.scss b/src/client/components/app/NavBar/AppControlsToolbar.scss
@@ -0,0 +1,8 @@
+@use '../../../style/sass-vars' as *;
+
+.v-app-controls-toolbar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: $spacer;
+}
diff --git a/src/client/components/app/NavBar/AppControlsToolbar.tsx b/src/client/components/app/NavBar/AppControlsToolbar.tsx
@@ -1,5 +1,6 @@
+import './AppControlsToolbar.scss'
 import { defineComponent } from 'vue'
-import { VSheet } from '../../core'
+import { VBtn, VSheet } from '../../core'
 import { PlayPauseButton } from '../PlayPauseButton'
 import { useAppStore } from '../../../stores/app'
 
@@ -9,8 +10,9 @@ export const AppControlsToolbar = defineComponent({
   setup() {
     const appStore = useAppStore()
     return () => (
-      <VSheet class={['v-app-controls']}>
+      <VSheet class={['v-app-controls-toolbar']}>
         <PlayPauseButton v-model:recording={appStore.recording} />
+        <VBtn class={['align-center', 'pa-1']} icon={'Delete'} size={22} transparent onClick={() => {}} />
       </VSheet>
     )
   },

diff --git a/src/client/components/app/NavBar/VNavBar.tsx b/src/client/components/app/NavBar/VNavBar.tsx
@@ -22,15 +22,9 @@ export const VNavBar = defineComponent({
         </h4>
         <AppControlsToolbar class={'ml-2'} />
         <VSpacer />
-        <VTooltip text={'Requests'}>
-          <VBtn icon={'Monitoring'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Sequence)} />
-        </VTooltip>
-        <VTooltip text={'Information'}>
-          <VBtn icon={'Info'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Information)} />
-        </VTooltip>
-        <VTooltip text={'Preferences'}>
-          <VBtn icon={'Settings'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Preferences)} />
-        </VTooltip>
+        <VBtn tooltip={'Requests'} icon={'Monitoring'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Sequence)} />
+        <VBtn tooltip={'Information'} icon={'Info'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Information)} />
+        <VBtn tooltip={'Preferences'} icon={'Settings'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.Preferences)} />
         <VTooltip text={'Error log'}>
           <VBadge modelValue={errorLogStore.hasErrors} position={[4, -4]}>
             <VBtn icon={'Warning'} size={iconSize} class={['pa-1']} transparent onClick={() => router.push(RouteNames.ErrorLog)} />

diff --git a/src/client/components/app/PlayPauseButton/PlayPauseButton.tsx b/src/client/components/app/PlayPauseButton/PlayPauseButton.tsx
@@ -12,21 +12,21 @@ export const PlayPauseButton = defineComponent({
 
   props: {
     recording: { type: Boolean, default: false },
-    size: { type: Number, default: 20 },
+    size: { type: Number, default: 22 },
   },
 
   setup(props, { emit }) {
     const icon = computed<IconNames>(() => (props.recording ? 'Pause_Fill' : 'PlayArrow_Fill'))
     return () => (
       <VTooltip text={props.recording ? 'Pause recording' : 'Start recording'}>
-        <VBtn icon={icon.value} size={props.size} class={['pa-1']} transparent onClick={() => emit('update:recording', !props.recording)}>
+        <VBtn icon={icon.value} size={props.size} class={['pa-2']} transparent onClick={() => emit('update:recording', !props.recording)}>
           {{
             icon: () => (
               <VIcon
                 class={[{ 'btn--prepend-icon': false }]}
                 name={icon.value}
                 color={`rgb(var(--text-color))`}
-                size={props.size * 0.75}
+                size={props.size * 0.6}
                 style={{
                   border: '1px solid rgb(var(--text-color))',
                   'border-radius': '50%',