Icons to vue components (#32)

Using inline svg in vue components will:
1. Make it possible to recolor svgs (for example for dark mode)
2. Be a better solution to the cordova resource location issue

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#32
This commit is contained in:
2023-12-05 21:16:55 -07:00
parent 34b5816eae
commit fb81ebed83
5 changed files with 103 additions and 32 deletions

View File

@@ -2,7 +2,7 @@
<f7-app v-bind="f7params">
<!-- Left panel with cover effect-->
<f7-panel left cover dark>
<f7-panel left cover>
<f7-view>
<f7-page>
<f7-navbar title="ALVINN"></f7-navbar>
@@ -20,24 +20,6 @@
<!-- Your main view, should have "view-main" class -->
<f7-view main class="safe-areas" url="/"></f7-view>
<!-- Popup -->
<f7-popover id="region-popover">
<f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
<f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
<img src="../assets/regions/thorax.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
<img src="../assets/regions/abdpel.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<img src="../assets/regions/limb.svg" />
</f7-button>
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<img src="../assets/regions/headneck.svg" />
</f7-button>
</f7-segmented>
</f7-popover>
</f7-app>
</template>