From 851d2507ce656a934147585d5262b08db2c22a1c Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 30 Sep 2024 22:19:34 +0200
Subject: [PATCH] oh-rollershutter: Use displayState if available & Improve
 styling (#2777)

Fixes #2612.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../widgets/standard/oh-rollershutter-card.vue     |  9 +++++----
 .../components/widgets/system/oh-rollershutter.vue | 14 ++++++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
index ff38574e58..60bc9e503f 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
@@ -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>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-rollershutter.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-rollershutter.vue
index 91da6b66d6..88c5709b47 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-rollershutter.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-rollershutter.vue
@@ -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" />
@@ -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>
@@ -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}'