mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 13:14:04 +02:00
feat: update BottomBar component to include platform-specific key modifiers and improve action button layout
This commit is contained in:
parent
8abf231912
commit
ae5103e800
1 changed files with 7 additions and 3 deletions
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue