ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add dark mode (#33)

Browse Source 
Closes: #18

This PR adds dark mode styling and an app setting to choose light, dark, or auto mode.

Reviewed-on: Georgi_Lab/ALVINN_f7#33
This commit is contained in:
Justin Georgi
2023-12-07 20:39:10 -07:00
parent fb81ebed83
commit 056d835b7c
10 changed files with 119 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/detect.vue
View File

@@ -10,24 +10,24 @@
<f7-block class="detect-grid">
<div class="image-container">
<img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<SvgIcon v-else icon="image" fill-color="var(--f7-theme-color)"/>
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
<SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)"/>
<div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
</div>
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
</div>
<f7-segmented class="image-menu" raised>
<f7-button popover-open="#region-popover">
<RegionIcon :region="activeRegion" fill-color="var(--f7-theme-color)"/>
<RegionIcon :region="activeRegion" />
</f7-button>
<f7-button @click="selectImage">
<SvgIcon icon="image" fill-color="var(--f7-theme-color)"/>
<SvgIcon icon="image" fill-color="var(--avn-theme-color)"/>
</f7-button>
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
<SvgIcon icon="visibility" fill-color="var(--f7-theme-color)"/>
<SvgIcon icon="visibility" fill-color="var(--avn-theme-color)"/>
</f7-button>
<f7-button class="disabled" @click="setData">
<SvgIcon icon="videocam" fill-color="var(--f7-theme-color)"/>
<SvgIcon icon="videocam" fill-color="var(--avn-theme-color)"/>
</f7-button>
</f7-segmented>
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
@@ -115,7 +115,7 @@
.selected-chip {
font-weight: 500;
box-shadow: 4px 4px 1px var(--f7-theme-color);
box-shadow: 4px 4px 1px var(--avn-theme-color);
transform: translate(-2px, -2px);
}