mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 13:14:04 +02:00
feat: enhance BottomBar and TopBar components with dynamic actions and improved styling; integrate actions in index.vue
This commit is contained in:
parent
60d17442fc
commit
455b60a994
3 changed files with 45 additions and 21 deletions
|
@ -5,17 +5,17 @@
|
|||
<p class="name">Qopy</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="paste">
|
||||
<p class="text">Paste</p>
|
||||
<IconsEnter />
|
||||
<div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
|
||||
<p class="text">{{ primaryAction.text }}</p>
|
||||
<component :is="primaryAction.icon" />
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="actions">
|
||||
<p class="text">Actions</p>
|
||||
<div v-if="secondaryAction" class="divider"></div>
|
||||
<div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
|
||||
<p class="text">{{ secondaryAction.text }}</p>
|
||||
<div>
|
||||
<IconsCtrl v-if="os === 'windows' || os === 'linux'" />
|
||||
<IconsCmd v-if="os === 'macos'" />
|
||||
<IconsK />
|
||||
<IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
|
||||
<IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
|
||||
<component :is="secondaryAction.icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -25,6 +25,18 @@
|
|||
<script setup lang="ts">
|
||||
import { platform } from "@tauri-apps/plugin-os";
|
||||
|
||||
interface Action {
|
||||
text: string;
|
||||
icon: any;
|
||||
onClick?: () => void;
|
||||
showModifier?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
primaryAction?: Action;
|
||||
secondaryAction?: Action;
|
||||
}>();
|
||||
|
||||
const os = ref<string>("");
|
||||
|
||||
onMounted(() => {
|
||||
|
@ -34,7 +46,7 @@ onMounted(() => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.bottombar {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--border);
|
||||
backdrop-filter: blur(18px);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue