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

feat: enhance BottomBar and TopBar components with dynamic actions and improved styling; integrate actions in index.vue

Browse source
This commit is contained in:
PandaDEV 2025-03-15 00:33:29 +01:00
parent 60d17442fc
commit 455b60a994
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
3 changed files with 45 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/BottomBar.vue
View file

@ -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);

20
components/TopBar.vue
View file

@ -14,27 +14,27 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref } from "vue";
const searchQuery = ref('')
const searchInput = ref<HTMLInputElement | null>(null)
const searchQuery = ref("");
const searchInput = ref<HTMLInputElement | null>(null);
const emit = defineEmits<{
(e: 'search', query: string): void
(e: 'focus'): void
}>()
(e: "search", query: string): void;
(e: "focus"): void;
}>();
const onSearch = () => {
emit('search', searchQuery.value)
}
emit("search", searchQuery.value);
};
defineExpose({ searchInput })
defineExpose({ searchInput });
</script>
<style lang="scss">
.topbar {
width: 100%;
height: 56px;
min-height: 56px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;