feat: update BottomBar component to include platform-specific key modifiers and improve action button layout

This commit is contained in:
PandaDEV 2025-03-16 23:38:57 +01:00
parent 8abf231912
commit ae5103e800
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C

View file

@ -7,12 +7,16 @@
<div class="buttons"> <div class="buttons">
<div v-if="primaryAction" class="paste" @click="handlePrimaryClick"> <div v-if="primaryAction" class="paste" @click="handlePrimaryClick">
<p class="text">{{ primaryAction.text }}</p> <p class="text">{{ primaryAction.text }}</p>
<component :is="primaryAction.icon" /> <div class="keys">
<Key v-if="(os === 'windows' || os === 'linux') && primaryAction.showModifier" :input="'Ctrl'" />
<IconsCmd v-if="os === 'macos' && primaryAction.showModifier" />
<component :is="primaryAction.icon" :input="primaryAction.input" />
</div>
</div> </div>
<div v-if="secondaryAction" class="divider"></div> <div v-if="secondaryAction" class="divider"></div>
<div v-if="secondaryAction" class="actions" @click="handleSecondaryClick"> <div v-if="secondaryAction" class="actions" @click="handleSecondaryClick">
<p class="text">{{ secondaryAction.text }}</p> <p class="text">{{ secondaryAction.text }}</p>
<div> <div class="keys">
<Key v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" :input="'Ctrl'" /> <Key v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" :input="'Ctrl'" />
<IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" /> <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
<component :is="secondaryAction.icon" :input="secondaryAction.input" /> <component :is="secondaryAction.icon" :input="secondaryAction.input" />
@ -96,7 +100,7 @@ onMounted(async () => {
color: var(--text); color: var(--text);
} }
.actions div { .keys {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2px; gap: 2px;