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