ADD: Non-functional save/revert buttons

This commit is contained in:
Robert Kossessa
2024-03-09 00:44:02 +01:00
parent 75efcb705c
commit 7a6223bff8
3 changed files with 19 additions and 3 deletions

View File

@@ -1,6 +1,6 @@
<template>
<button
class="app-titlebar-button flex items-center rounded-sm px-3 py-1 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground"
class="app-titlebar-button flex items-center rounded-lg px-3 py-1 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<slot />
</button>

View File

@@ -132,6 +132,20 @@
</MenubarMenu>
</div>
<div class="grow" />
<div class="flex items-center gap-2 px-2">
<div v-if="numberOfChanges" class="text-sm">
<PenLine class="inline-block h-4" />{{ numberOfChanges }} Changes
</div>
<MenubarButton class="app-titlebar-button border-2"> Revert </MenubarButton>
<MenubarButton
:class="{
'bg-zinc-200 text-zinc-950 hover:bg-zinc-100 hover:text-zinc-950': numberOfChanges
}"
class="app-titlebar-button border-2"
>
Save
</MenubarButton>
</div>
<MenubarButton
v-if="showDisconnectButton"
class="app-titlebar-button border-2"
@@ -176,7 +190,7 @@ import {
MenubarTrigger
} from '@renderer/components/ui/menubar'
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
import { Minus, Square, Copy, X } from 'lucide-vue-next'
import { Minus, Square, Copy, X, PenLine } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { Separator } from '@renderer/components/ui/separator'
import { useStore } from '@renderer/store'
@@ -195,6 +209,8 @@ const { electronAPI } = window
const isMacOS = electronAPI.platform === 'darwin'
const zoomFactor = ref(1)
const numberOfChanges = ref(27)
const previewDeviceNames = ref({
nanoOne: 'One',
nanoZero: 'Zero'

View File

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps"
:class="
cn(
'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-lg px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
props.class
)
"