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

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> <p class="name">Qopy</p>
</div> </div>
<div class="buttons"> <div class="buttons">
<div class="paste"> <div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
<p class="text">Paste</p> <p class="text">{{ primaryAction.text }}</p>
<IconsEnter /> <component :is="primaryAction.icon" />
</div> </div>
<div class="divider"></div> <div v-if="secondaryAction" class="divider"></div>
<div class="actions"> <div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
<p class="text">Actions</p> <p class="text">{{ secondaryAction.text }}</p>
<div> <div>
<IconsCtrl v-if="os === 'windows' || os === 'linux'" /> <IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
<IconsCmd v-if="os === 'macos'" /> <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
<IconsK /> <component :is="secondaryAction.icon" />
</div> </div>
</div> </div>
</div> </div>
@ -25,6 +25,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { platform } from "@tauri-apps/plugin-os"; 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>(""); const os = ref<string>("");
onMounted(() => { onMounted(() => {
@ -34,7 +46,7 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.bottombar { .bottombar {
height: 40px; min-height: 40px;
width: 100%; width: 100%;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);

20
components/TopBar.vue
View file

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

14
pages/index.vue
View file

@ -66,7 +66,17 @@
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</div> </div>
</div> </div>
<BottomBar /> <BottomBar
:primary-action="{
text: 'Paste',
icon: IconsEnter,
onClick: pasteSelectedItem,
}"
:secondary-action="{
text: 'Actions',
icon: IconsK,
showModifier: true,
}" />
</main> </main>
</template> </template>
@ -95,6 +105,8 @@ import {
selectedElement, selectedElement,
useSelectedResult, useSelectedResult,
} from "~/lib/selectedResult"; } from "~/lib/selectedResult";
import IconsEnter from "~/components/Icons/Enter.vue";
import IconsK from "~/components/Icons/K.vue";
interface GroupedHistory { interface GroupedHistory {
label: string; label: string;