Model (picker): Fix toolbar checkbox issues with safe areas (#2861)

Fixes #2718.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
pull/2860/head
Florian Hotze 2024-11-05 20:14:23 +01:00 committed by GitHub
parent 1612d507f9
commit e32700f4a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 3 deletions

View File

@ -26,7 +26,9 @@
<f7-button v-else color="gray" icon-size="24" tooltip="Collapse" icon-f7="rectangle_compress_vertical" @click="toggleExpanded()" />
</div>
</f7-subnavbar>
<f7-toolbar bottom class="toolbar-details">
<!-- Toolbar -->
<f7-toolbar v-if="$f7.width >= 500" bottom class="toolbar-details">
<f7-link v-if="!multiple" :disabled="selectedItem != null" class="left" @click="selectedItem = null">
Clear
</f7-link>
@ -40,8 +42,27 @@
<label @click="toggleItemTags" class="advanced-label">Show tags</label>
</div>
<span />
<!-- <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up"></f7-link> -->
</f7-toolbar>
<f7-toolbar v-else bottom class="toolbar-details" style="height: calc(50px + var(--f7-safe-area-bottom))">
<f7-link v-if="!multiple" :disabled="selectedItem != null" class="left" @click="selectedItem = null">
Clear
</f7-link>
<span v-else />
<div class="padding-left padding-right text-align-center" style="font-size: 12px">
<div>
<f7-checkbox :checked="includeNonSemantic" @change="toggleNonSemantic" />
<label @click="toggleNonSemantic" class="advanced-label">Show non-semantic</label>
</div>
<div>
<f7-checkbox :checked="includeItemName" @change="toggleItemName" />
<label @click="toggleItemName" class="advanced-label">Show name</label>
<f7-checkbox style="margin-left: 5px" :checked="includeItemTags" @change="toggleItemTags" />
<label @click="toggleItemTags" class="advanced-label">Show tags</label>
</div>
</div>
<span />
</f7-toolbar>
<f7-block strong class="no-padding" v-if="ready">
<model-treeview class="model-picker-treeview" :root-nodes="rootNodes"
:includeItemName="includeItemName" :includeItemTags="includeItemTags"

View File

@ -35,7 +35,7 @@
</div>
<f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
</f7-toolbar>
<f7-toolbar bottom class="toolbar-details" v-else style="height: 50px">
<f7-toolbar v-else bottom class="toolbar-details" style="height: calc(50px + var(--f7-safe-area-bottom))">
<f7-link :disabled="selectedItem != null" class="left" @click="selectedItem = null">
Clear
</f7-link>