PandaDEV/Qopy
1
0
Fork 0
mirror of https://github.com/0PandaDEV/Qopy.git synced 2025-04-21 21:24:05 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update BottomBar component to improve action handling and add input support for secondary action

Browse source
This commit is contained in:
pandadev 2025-03-16 20:33:51 +01:00
parent b946b6455f
commit 7ba418f4cc
No known key found for this signature in database
GPG key ID: C39629DACB8E762F
1 changed files with 29 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

34
components/BottomBar.vue
View file

@ -5,17 +5,17 @@
<p class="name">Qopy</p>
</div>
<div class="buttons">
<div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
<div v-if="primaryAction" class="paste" @click="handlePrimaryClick">
<p class="text">{{ primaryAction.text }}</p>
<component :is="primaryAction.icon" />
</div>
<div v-if="secondaryAction" class="divider"></div>
<div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
<div v-if="secondaryAction" class="actions" @click="handleSecondaryClick">
<p class="text">{{ secondaryAction.text }}</p>
<div>
<IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
<IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
<component :is="secondaryAction.icon" />
<component :is="secondaryAction.icon" :input="secondaryAction.input" />
</div>
</div>
</div>
@ -23,13 +23,17 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { platform } from "@tauri-apps/plugin-os";
import IconsCtrl from './Icons/Ctrl.vue';
import IconsCmd from './Icons/Cmd.vue';
interface Action {
text: string;
icon: any;
onClick?: () => void;
showModifier?: boolean;
input?: string;
}
const props = defineProps<{
@ -39,8 +43,22 @@ const props = defineProps<{
const os = ref<string>("");
onMounted(() => {
os.value = platform();
const handlePrimaryClick = (event: MouseEvent) => {
event.stopPropagation();
if (props.primaryAction?.onClick) {
props.primaryAction.onClick();
}
};
const handleSecondaryClick = (event: MouseEvent) => {
event.stopPropagation();
if (props.secondaryAction?.onClick) {
props.secondaryAction.onClick();
}
};
onMounted(async () => {
os.value = await platform();
});
</script>
@ -111,6 +129,12 @@ onMounted(() => {
background-color: var(--border);
}
.paste:active,
.actions:active {
background-color: var(--border-active, #444);
transform: scale(0.98);
}
&:hover .paste:hover ~ .divider,
&:hover .divider:has(+ .actions:hover) {
opacity: 0;