Skip to content

Commit b0bdefe

Browse files
ghysghys
authored
Misc style fixes (openhab#265)
Better filled bars defaults Add per-device option to set the home page background to the standard color (i.e. gray in light mode, no effect in dark mode) Consider safe area (fullscreen iOS) for map, plans, charts Convert CSS remains to stylus, cleanups, fixes Add page transition effect option for navigation widget actions (https://framework7.io/docs/view.html#custom-page-transitions) Restyle theme/dark mode pickers Signed-off-by: Yannick Schaus <[email protected]>
1 parent e2da5cc commit b0bdefe

File tree

12 files changed

+367
-350
lines changed

12 files changed

+367
-350
lines changed

‎bundles/org.openhab.ui/web/src/components/app.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<!-- <f7-view url="/panel-right/"></f7-view> -->
107107
</f7-panel>
108108

109-
<f7-view main v-show="ready" class="safe-areas" url="/" :master-detail-breakpoint="960" :animate="this.themeOptions.pageTransitionAnimation !== 'disabled'"></f7-view>
109+
<f7-view main v-show="ready" class="safe-areas" url="/" :master-detail-breakpoint="960" :animate="themeOptions.pageTransitionAnimation !== 'disabled'"></f7-view>
110110

111111
<f7-login-screen id="my-login-screen" :opened="loginScreenOpened">
112112
<f7-view name="login" v-if="$device.cordova">
@@ -410,13 +410,15 @@ export default {
410410
},
411411
updateThemeOptions () {
412412
this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || (this.$f7.darkTheme ? 'dark' : 'light')
413-
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) || (!this.$f7.darkTheme) ? 'filled' : 'light')
413+
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((this.$theme.ios || this.$f7.darkTheme || this.themeOptions.dark === 'dark') ? 'light' : 'filled')
414414
this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
415+
this.themeOptions.homeBackground = localStorage.getItem('openhab.ui:theme.home.background') || 'default'
415416
this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
416-
this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
417417
}
418418
},
419419
created () {
420+
// special treatment for this option because it's needed to configure the app initialization
421+
this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.pagetransition') || 'default'
420422
// this.loginScreenOpened = true
421423
const refreshToken = this.getRefreshToken()
422424
if (refreshToken) {

‎bundles/org.openhab.ui/web/src/components/cards/equipments-card.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
color="white"
1414
class="card-opened-fade-in"
1515
:style="{position: 'absolute', right: '15px', top: '15px'}"
16-
icon-f7="close_round_fill"
16+
icon-f7="multiply_circle_fill"
1717
></f7-link>
1818
</div>
1919
<div class="card-content-padding" v-if="opened">

‎bundles/org.openhab.ui/web/src/components/cards/location-card.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
color="white"
1515
class="card-opened-fade-in"
1616
:style="{position: 'absolute', right: '15px', top: '15px'}"
17-
icon-f7="close_round_fill"
17+
icon-f7="multiply_circle_fill"
1818
></f7-link>
1919
</div>
2020
<div class="card-content-padding" v-if="opened && items.equipments.length > 0 && items.properties.length > 0">

‎bundles/org.openhab.ui/web/src/components/cards/property-card.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
color="white"
1414
class="card-opened-fade-in"
1515
:style="{position: 'absolute', right: '15px', top: '15px'}"
16-
icon-f7="close_round_fill"
16+
icon-f7="multiply_circle_fill"
1717
></f7-link>
1818
</div>
1919
<!-- <div class="card-content-padding" v-if="opened">

‎bundles/org.openhab.ui/web/src/components/theme-switcher.vue

+138-81
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,46 @@
11
<template>
22
<f7-block>
33
<f7-block-title class="padding-left">Theme</f7-block-title>
4-
<f7-segmented>
5-
<f7-button round color="blue" raised :fill="theme === 'auto'" @click="switchTheme('auto')">Auto</f7-button>
6-
<f7-button round color="blue" raised :fill="theme === 'md'" @click="switchTheme('md')">MD</f7-button>
7-
<f7-button round color="blue" raised :fill="theme === 'ios'" @click="switchTheme('ios')">iOS</f7-button>
8-
<f7-button round color="blue" raised :fill="theme === 'aurora'" @click="switchTheme('aurora')">Aurora</f7-button>
9-
</f7-segmented>
4+
<f7-row>
5+
<f7-col width="25" class="theme-picker auto" @click="switchTheme('auto')">
6+
<span class="text-color-gray">Auto</span>
7+
<f7-checkbox checked disabled v-if="theme === 'auto'" />
8+
</f7-col>
9+
<f7-col width="25" class="theme-picker" @click="switchTheme('md')">
10+
<span><f7-icon f7="logo_android" size="20" color="gray" /></span>
11+
<f7-checkbox checked disabled v-if="theme === 'md'" />
12+
</f7-col>
13+
<f7-col width="25" class="theme-picker" @click="switchTheme('ios')">
14+
<span><f7-icon f7="logo_ios" size="25" color="gray" /></span>
15+
<f7-checkbox checked disabled v-if="theme === 'ios'" />
16+
</f7-col>
17+
<f7-col width="25" class="theme-picker" @click="switchTheme('aurora')">
18+
<span><f7-icon f7="desktopcomputer" size="20" color="gray" /></span>
19+
<f7-checkbox checked disabled v-if="theme === 'aurora'" />
20+
</f7-col>
21+
</f7-row>
1022
<f7-block-title>Dark mode</f7-block-title>
11-
<f7-segmented>
12-
<f7-button round color="blue" raised :fill="darkMode === 'auto'" @click="setThemeDark('auto')">Auto</f7-button>
13-
<f7-button round color="blue" raised :fill="darkMode === 'light'" @click="setThemeDark('light')">Light</f7-button>
14-
<f7-button round color="blue" raised :fill="darkMode === 'dark'" @click="setThemeDark('dark')">Dark</f7-button>
15-
</f7-segmented>
23+
<f7-row>
24+
<f7-col width="33" class="theme-picker auto" @click="setThemeDark('auto')">
25+
<span class="text-color-gray">Auto</span>
26+
<f7-checkbox checked disabled v-if="darkMode === 'auto'" />
27+
</f7-col>
28+
<f7-col width="33" class="bg-color-white theme-picker" @click="setThemeDark('light')">
29+
<span class="text-color-gray">Light</span>
30+
<f7-checkbox checked disabled v-if="darkMode === 'light'" />
31+
</f7-col>
32+
<f7-col width="33" class="bg-color-black theme-picker" @click="setThemeDark('dark')">
33+
<span class="text-color-gray">Dark</span>
34+
<f7-checkbox checked disabled v-if="darkMode === 'dark'" />
35+
</f7-col>
36+
</f7-row>
1637
<f7-block-title>Navigation bars style</f7-block-title>
1738
<f7-row>
18-
<f7-col width="50" class="demo-bars-picker demo-bars-picker-fill" @click="setBarsStyle('filled')">
39+
<f7-col width="50" class="nav-bars-picker nav-bars-picker-fill" @click="setBarsStyle('filled')">
1940
<div class="demo-navbar"></div>
2041
<f7-checkbox checked disabled v-if="barsStyle === 'filled'" />
2142
</f7-col>
22-
<f7-col width="50" class="demo-bars-picker demo-bars-picker-empty" @click="setBarsStyle('light')">
43+
<f7-col width="50" class="nav-bars-picker nav-bars-picker-empty" @click="setBarsStyle('light')">
2344
<div class="demo-navbar"></div>
2445
<f7-checkbox checked disabled v-if="barsStyle === 'light'" />
2546
</f7-col>
@@ -33,6 +54,10 @@
3354
<span>Simple navigation bar on home page</span>
3455
<f7-toggle :checked="homePageNavbarStyle === 'simple'" @toggle:change="setHomePageNavbarStyle"></f7-toggle>
3556
</f7-list-item>
57+
<f7-list-item>
58+
<span>Standard home page background color</span>
59+
<f7-toggle :checked="homePageBackground === 'standard'" @toggle:change="setHomePageBackground"></f7-toggle>
60+
</f7-list-item>
3661
<f7-list-item>
3762
<span>Disable card expansion animations</span>
3863
<f7-toggle :checked="expandableCardsAnimation === 'disabled'" @toggle:change="setExpandableCardAnimation"></f7-toggle>
@@ -51,13 +76,16 @@ export default {
5176
methods: {
5277
switchTheme (theme) {
5378
localStorage.setItem('openhab.ui:theme', theme)
79+
localStorage.removeItem('openhab.ui:theme.bars') // reset the bars to their default when switching themes
5480
location.reload()
55-
// document.location = document.location.origin + document.location.pathname + '?theme=' + theme
5681
},
5782
setThemeDark (value) {
58-
value === 'auto'
59-
? localStorage.removeItem('openhab.ui:theme.dark') : localStorage.setItem('openhab.ui:theme.dark', value)
60-
localStorage.setItem('openhab.ui:theme.bars', 'light') // dark theme with filled bars is ugly, switch to light bars too
83+
if (value === 'auto') {
84+
localStorage.removeItem('openhab.ui:theme.dark')
85+
} else {
86+
localStorage.setItem('openhab.ui:theme.dark', value)
87+
}
88+
localStorage.removeItem('openhab.ui:theme.bars') // reset the bars to their default when switching dark mode
6189
location.reload()
6290
},
6391
setBarsStyle (value) {
@@ -68,12 +96,16 @@ export default {
6896
localStorage.setItem('openhab.ui:theme.home.navbar', (value) ? 'simple' : 'default')
6997
location.reload()
7098
},
99+
setHomePageBackground (value) {
100+
localStorage.setItem('openhab.ui:theme.home.background', (value) ? 'standard' : 'default')
101+
location.reload()
102+
},
71103
setExpandableCardAnimation (value) {
72104
localStorage.setItem('openhab.ui:theme.home.cardanimation', (value) ? 'disabled' : 'default')
73105
location.reload()
74106
},
75107
setPageTransitionAnimation (value) {
76-
localStorage.setItem('openhab.ui:theme.home.pagetransition', (value) ? 'disabled' : 'default')
108+
localStorage.setItem('openhab.ui:theme.pagetransition', (value) ? 'disabled' : 'default')
77109
location.reload()
78110
}
79111
},
@@ -85,80 +117,105 @@ export default {
85117
return localStorage.getItem('openhab.ui:theme.dark') || 'auto'
86118
},
87119
barsStyle () {
88-
return localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
120+
return localStorage.getItem('openhab.ui:theme.bars') || ((this.$theme.ios || this.$f7.darkTheme || this.darkMode === 'dark') ? 'light' : 'filled')
89121
},
90122
homePageNavbarStyle () {
91123
return localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
92124
},
125+
homePageBackground () {
126+
return localStorage.getItem('openhab.ui:theme.home.background') || 'default'
127+
},
93128
expandableCardsAnimation () {
94129
return localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
95130
},
96131
pageTransitionAnimation () {
97-
return localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
132+
return localStorage.getItem('openhab.ui:theme.pagetransition') || 'default'
98133
}
99134
}
100135
}
101136
</script>
102-
<style>
103-
.demo-bars-picker {
104-
height: 200px;
105-
border-radius: 10px;
106-
box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
107-
cursor: pointer;
108-
position: relative;
109-
overflow: hidden;
110-
background: var(--f7-page-bg-color);
111-
border: 1px solid rgba(255,255,255,0.2);
112-
}
113-
.demo-bars-picker .checkbox {
114-
position: absolute;
115-
left: 10px;
116-
bottom: 10px;
117-
}
137+
<style lang="stylus">
138+
.theme-picker
139+
cursor pointer
140+
height 100px
141+
padding 40px 20px
142+
border-radius 10px
143+
box-shadow 0px 5px 20px rgba(0,0,0,0.1)
144+
border 1px solid rgba(255,255,255,0.2)
145+
box-sizing border-box
146+
position relative
147+
display flex
148+
align-content center
149+
font-size 16px
150+
span
151+
width 100%
152+
text-align center
153+
i.f7-icons
154+
width 100%
155+
text-align center
156+
.checkbox
157+
position absolute
158+
left 10px
159+
bottom 10px
160+
161+
.nav-bars-picker
162+
height 200px
163+
border-radius 10px
164+
box-shadow 0px 5px 20px rgba(0,0,0,0.1)
165+
cursor pointer
166+
position relative
167+
overflow hidden
168+
background var(--f7-page-bg-color)
169+
border 1px solid rgba(255,255,255,0.2)
170+
171+
.nav-bars-picker .checkbox
172+
position absolute
173+
left 10px
174+
bottom 10px
175+
176+
.nav-bars-picker .demo-navbar
177+
position absolute
178+
left 0
179+
width 100%
180+
height 30px
181+
top 0
182+
border-bottom 1px solid transparent
183+
184+
.nav-bars-picker .demo-navbar:before
185+
content ''
186+
position absolute
187+
left 10px
188+
width 20px
189+
height 10px
190+
top 50%
191+
margin-top -5px
192+
193+
.nav-bars-picker .demo-navbar:after
194+
content ''
195+
position absolute
196+
right 10px
197+
width 20px
198+
height 10px
199+
top 50%
200+
margin-top -5px
201+
202+
.nav-bars-picker-empty .demo-navbar
203+
background #f7f7f8
204+
border-color rgba(0,0,0,0.1)
205+
206+
.theme-dark .nav-bars-picker-empty .demo-navbar
207+
background #1b1b1b
208+
border-color #282829
209+
210+
.nav-bars-picker-empty .demo-navbar:before,
211+
.nav-bars-picker-empty .demo-navbar:after
212+
background var(--f7-theme-color)
213+
214+
.nav-bars-picker-fill .demo-navbar
215+
background var(--f7-theme-color)
216+
217+
.nav-bars-picker-fill .demo-navbar:before,
218+
.nav-bars-picker-fill .demo-navbar:after
219+
background #fff
118220
119-
.demo-bars-picker .demo-navbar {
120-
position: absolute;
121-
left: 0;
122-
width: 100%;
123-
height: 30px;
124-
top: 0;
125-
border-bottom: 1px solid transparent;
126-
}
127-
.demo-bars-picker .demo-navbar:before {
128-
content: '';
129-
position: absolute;
130-
left: 10px;
131-
width: 20px;
132-
height: 10px;
133-
top: 50%;
134-
margin-top: -5px;
135-
}
136-
.demo-bars-picker .demo-navbar:after {
137-
content: '';
138-
position: absolute;
139-
right: 10px;
140-
width: 20px;
141-
height: 10px;
142-
top: 50%;
143-
margin-top: -5px;
144-
}
145-
.demo-bars-picker-empty .demo-navbar {
146-
background: #f7f7f8;
147-
border-color: rgba(0,0,0,0.1);
148-
}
149-
.theme-dark .demo-bars-picker-empty .demo-navbar {
150-
background: #1b1b1b;
151-
border-color: #282829;
152-
}
153-
.demo-bars-picker-empty .demo-navbar:before,
154-
.demo-bars-picker-empty .demo-navbar:after {
155-
background: var(--f7-theme-color);
156-
}
157-
.demo-bars-picker-fill .demo-navbar {
158-
background: var(--f7-theme-color);
159-
}
160-
.demo-bars-picker-fill .demo-navbar:before,
161-
.demo-bars-picker-fill .demo-navbar:after {
162-
background: #fff;
163-
}
164221
</style>

‎bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@
2828
position absolute
2929
background-color white
3030
overflow-x hidden
31-
top calc(var(--f7-navbar-height))
31+
top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
3232
width 100%
33-
height calc(100% - var(--f7-navbar-height)) !important
33+
height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
3434
&.with-tabbar
35-
height calc(100% - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
35+
height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
3636
&.with-toolbar
37-
height calc(100% - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
37+
height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
3838
&.with-sheet
39-
height calc(100% - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
39+
height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
4040
.echarts
4141
width calc(100% - 20px)
4242
height 100%

‎bundles/org.openhab.ui/web/src/components/widgets/map/oh-map-page.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
.oh-map-page-lmap
2525
position absolute
2626
background-color var(--f7-page-bg-color)
27-
top calc(var(--f7-navbar-height))
28-
height calc(100% - var(--f7-navbar-height)) !important
27+
top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
28+
height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
2929
&.with-tabbar
30-
height calc(100% - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
30+
height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
3131
</style>
3232

3333
<script>

‎bundles/org.openhab.ui/web/src/components/widgets/plan/oh-plan-page.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343
.oh-plan-page-lmap
4444
position absolute
4545
background-color var(--f7-page-bg-color)
46-
top calc(var(--f7-navbar-height))
47-
height calc(100% - var(--f7-navbar-height)) !important
46+
top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
47+
height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
4848
&.with-tabbar
49-
height calc(100% - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
49+
height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
5050
&.oh-plan-white-background, &.oh-plan-blackwhite-background
5151
background-color white
5252
.theme-dark

‎bundles/org.openhab.ui/web/src/components/widgets/system/oh-player-controls.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
.player-controls
1111
.button
1212
height 48px
13+
.segmented-highlight
14+
display none
1315
.aurora .player-controls
1416
.button
1517
height 37px
16-
.segmented-highlight
17-
display none
1818
</style>
1919

2020
<script>

0 commit comments

Comments
 (0)