Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

oh-rollershutter: Use displayState if available & Improve styling #2777

Merged
merged 1 commit into from
Sep 30, 2024
Merged

oh-rollershutter: Use displayState if available & Improve styling #2777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@
&.vertical
transform rotate(90deg)
transform-origin center
.icon
margin-bottom 2px
margin-left 2px

.icon
margin-top 2px
.state
margin-top 2px
transform rotate(-90deg)
</style>

<script>
Expand Down
14 changes: 10 additions & 4 deletions bundles/org.openhab.ui/web/src/components/widgets/system/oh-rollershutter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<f7-segmented round outline strong class="rollershutter-controls">
<f7-button @click.stop="up()" large :icon-ios="upIcon" :icon-md="upIcon" :icon-aurora="upIcon" icon-size="24" icon-color="gray" />
<f7-button v-if="config.stateInCenter" @click.stop="stop()" large class="state">
<small>{{ context.store[config.item].state }}</small>
<small>{{ state }}</small>
</f7-button>
<f7-button v-else @click.stop="stop()" large :icon-ios="stopIcon" :icon-md="stopIcon" :icon-aurora="stopIcon" icon-size="24" icon-color="red" />
<f7-button @click.stop="down()" large :icon-ios="downIcon" :icon-md="downIcon" :icon-aurora="downIcon" icon-size="24" icon-color="gray" />
Expand All @@ -12,13 +12,16 @@
<style lang="stylus">
.rollershutter-controls
.button
height 48px
width 48px
padding 0
margin 0 !important
height 48px !important
width 48px !important
.segmented-highlight
display none
.aurora .rollershutter-controls
.button
height 37px
height 37px !important
width 37px !important
</style>

<script>
Expand All @@ -32,6 +35,9 @@ export default {
delete this.config.value
},
computed: {
state () {
return this.context.store[this.config.item].displayState || this.context.store[this.config.item].state
},
upIcon (theme) {
const dir = (this.config.vertical) ? 'left' : 'up'
const style = this.config.dirIconsStyle || 'arrowtriangle_{dir}'
Expand Down