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

Add full dark mode with MWU styling

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2023-12-06 17:40:18 -07:00
parent 316961dde1
commit 83f9e1c336
9 changed files with 61 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework7.json
View File

@@ -25,7 +25,7 @@
},
"theming": {
"customColor": true,
"color": "#002f65",
"color": "#385cad",
"darkMode": false,
"iconFonts": true
},

3
src/components/app.vue
View File

@@ -1,6 +1,5 @@
<template>
<f7-app v-bind="f7params">
<!-- Left panel with cover effect-->
<f7-panel left cover>
<f7-view>
@@ -45,6 +44,8 @@
const f7params = {
name: 'ALVINN', // App name
theme: 'auto', // Automatic theme detection
//autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
darkMode: 'auto',
colors: {
primary: '#002f65',
},

2
src/components/region-icon.vue
View File

@@ -25,7 +25,7 @@
},
fillColor: {
type: String,
default: "#002F65"
default: "var(--avn-theme-color)"
}
}
}

2
src/components/svg-icon.vue
View File

@@ -18,7 +18,7 @@
},
fillColor: {
type: String,
default: "#002F65"
default: "var(--avn-theme-color)"
}
}
}

39
src/css/app.css
View File

@@ -4,20 +4,45 @@
}
/* Your app custom styles here */
.view-main {
--f7-theme-color: #002F65;
html {
--avn-theme-color: #0f206c;
--avn-button-bg-color: #d9d8d6;
--avn-structure-box-color: yellow;
}
.dark {
--f7-theme-color: rgb(115,175,182) !important;
--avn-theme-color: #d9c79e;
--avn-button-bg-color: #0f206c;
}
body {
font-family: "Open Sans", sans-serif;
}
.navbar {
--f7-navbar-text-color: #002F65;
--f7-navbar-link-color: #002F65;
--f7-navbar-text-color: var(--avn-theme-color);
--f7-navbar-link-color: var(--avn-theme-color);
}
.navbar-bg {
--f7-navbar-bg-color: #BDBCAF;
}
--f7-navbar-bg-color: #d9c79e;
}
.dark .navbar-bg {
--f7-navbar-bg-color: #0f206c;
}
/* MWU Colors
Rich blue: #385cad
Dark blue: #0f206c
Light gold: #d9c79e
Dark gold: #bd9a5f
Secondary:
White: #ffffff
Black: #414042
Dark Gray: #c8c8c8
Light Gray: #d9d8d6
Green: #009490
Purple: #83276b
*/

1
src/index.html
View File

@@ -23,6 +23,7 @@
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="icon" href="icons/favicon.png">
<link rel="manifest" href="/manifest.json">
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<% } %>
<!-- built styles file will be auto injected -->
</head>

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);
}

2
src/pages/home.vue
View File

@@ -47,7 +47,7 @@
min-width: 100px;
height: auto;
width: 100%;
background-color: #BDBCAF;
background-color: var(--avn-button-bg-color);
padding: 5px;
}

20
src/pages/settings.vue
View File

@@ -16,6 +16,13 @@
<f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
</f7-list>
<f7-button @click="saveServerSettings" >Save</f7-button>
<f7-block-title medium>Dark Mode</f7-block-title>
<f7-list style="width: 100%;">
<f7-list-item title="Auto" radio name="darkmode" radio-icon="end"></f7-list-item>
<f7-list-item title="Light" radio name="darkmode" radio-icon="end"></f7-list-item>
<f7-list-item title="Dark" radio name="darkmode" radio-icon="end"></f7-list-item>
</f7-list>
<f7-button @click="saveServerSettings" >Save</f7-button>
</div>
</f7-block>
</f7-page>
@@ -27,11 +34,14 @@
export default {
data () {
return {
serverSettings: {
use: false,
address: '10.170.64.22',
port: '9001'
},
serverSettings: {
use: false,
address: '10.170.64.22',
port: '9001'
},
themeSettings: {
dark: 'auto'
}
}
},
created () {