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

feat: add BottomBar component with branding and action buttons

Browse source
This commit is contained in:
PandaDEV 2025-03-15 00:03:10 +01:00
parent 7345483ba1
commit b96d3c23de
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
1 changed files with 112 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

112
components/BottomBar.vue Normal file
View file

@ -0,0 +1,112 @@
<template>
<div class="bottombar">
<div class="branding">
<img src="/logo.png" alt="logo" class="logo" />
<p class="name">Qopy</p>
</div>
<div class="buttons">
<div class="paste">
<p class="text">Paste</p>
<IconsEnter />
</div>
<div class="divider"></div>
<div class="actions">
<p class="text">Actions</p>
<div>
<IconsCtrl v-if="os === 'windows' || os === 'linux'" />
<IconsCmd v-if="os === 'macos'" />
<IconsK />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { platform } from "@tauri-apps/plugin-os";
const os = ref<string>("");
onMounted(() => {
os.value = platform();
});
</script>
<style scoped lang="scss">
.bottombar {
height: 40px;
width: 100%;
border-top: 1px solid var(--border);
backdrop-filter: blur(18px);
border-radius: 0 0 11px 11px;
background-color: rgba(46, 45, 43, 0.051);
display: flex;
align-items: center;
padding-left: 11px;
padding-right: 6px;
justify-content: space-between;
.branding {
display: flex;
gap: 8px;
align-items: center;
color: var(--text-secondary);
.logo {
width: 18px;
height: 18px;
}
}
.buttons {
display: flex;
align-items: center;
.text {
color: var(--text);
}
.actions div {
display: flex;
align-items: center;
gap: 2px;
}
.divider {
width: 2px;
height: 12px;
background-color: var(--border);
margin-left: 8px;
margin-right: 4px;
transition: all 0.2s;
}
.paste,
.actions {
padding: 4px;
padding-left: 8px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
background-color: transparent;
transition: all 0.2s;
cursor: pointer;
}
.paste:hover,
.actions:hover {
background-color: var(--border);
}
&:hover .paste:hover ~ .divider,
&:hover .divider:has(+ .actions:hover) {
opacity: 0;
}
}
}
p {
font-family: SFRoundedMedium;
}
</style>