New sub-component for oh-cards footers to allow several text layouts (#1545)

Signed-off-by: Gautier Taravella <tarag@mailbox.org>
2022-12-05 00:15:16 +01:00 · 2022-12-05 00:15:16 +01:00 · 3ca7ba08fb
parent 6b486ccd48
commit 3ca7ba08fb
17 changed files with 80 additions and 64 deletions
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
@ -20,9 +20,7 @@
        </f7-col>
      </f7-row>
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -30,12 +28,14 @@
 import mixin from '../widget-mixin'
 import { actionsMixin } from '../widget-actions'
 import OhClock from '../system/oh-clock.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin, actionsMixin],
  components: {
-    OhClock
+    OhClock,
+    OhCardFooter
  },
  widget: OhClockCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center">
      <oh-colorpicker :context="context" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -18,12 +16,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhColorpicker from '../system/oh-colorpicker.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhColorpickerCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhColorpicker
+    OhColorpicker,
+    OhCardFooter
  },
  widget: OhColorpickerCardDefinition,
  data () {
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
@ -9,9 +9,7 @@
      </f7-link>
      <oh-gauge v-else :context="childContext(context.component)" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -27,13 +25,15 @@
 <script>
 import mixin from '../widget-mixin'
 import OhGauge from '../system/oh-gauge.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { actionsMixin } from '../widget-actions'
 import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin, actionsMixin],
  components: {
-    OhGauge
+    OhGauge,
+    OhCardFooter
  },
  widget: OhGaugeCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
@ -11,9 +11,7 @@
      </f7-list>
      <oh-image v-else :context="childContext(context.component)" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -37,12 +35,14 @@
 import mixin from '../widget-mixin'
 import { actionsMixin } from '../widget-actions'
 import OhImage from '../system/oh-image.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhImageCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin, actionsMixin],
  components: {
-    OhImage
+    OhImage,
+    OhCardFooter
  },
  widget: OhImageCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="padding">
      <oh-input class="input-card-content" :context="childContext(context.component)" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -23,12 +21,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhInput from '../system/oh-input.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhInputCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhInput
+    OhInput,
+    OhCardFooter
  },
  widget: OhInputCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center">
      <oh-knob :context="childContext(context.component)" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -18,12 +16,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhKnob from '../system/oh-knob.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhKnobCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhKnob
+    OhKnob,
+    OhCardFooter
  },
  widget: OhKnobCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
@ -18,9 +18,7 @@
      <!-- <f7-link class="label-link" v-if="config.action">{{context.store[config.item].displayState || context.store[config.item].state}}</f7-link> -->
      <!-- <h2>{{context.store[config.item].displayState || context.store[config.item].state}}</h2> -->
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -53,11 +51,13 @@ import { actionsMixin } from '../widget-actions'
 import { OhLabelCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 import OhTrend from '../system/oh-trend'
+import OhCardFooter from '../system/oh-card-footer.vue'

 export default {
  mixins: [mixin, actionsMixin],
  components: {
-    OhTrend
+    OhTrend,
+    OhCardFooter
  },
  widget: OhLabelCardDefinition,
  computed: {
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
@ -6,9 +6,7 @@
    <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
      <oh-list :context="childContext(context.component)" v-on="$listeners" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhList from '../system/oh-list.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhListCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhList
+    OhList,
+    OhCardFooter
  },
  widget: OhListCardDefinition
 }
--- 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
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center" :style="{ height: config.vertical ? '10em' : undefined }">
      <oh-rollershutter :class="{ vertical: config.vertical }" :context="context" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -28,12 +26,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhRollershutter from '../system/oh-rollershutter.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhRollershutterCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhRollershutter
+    OhRollershutter,
+    OhCardFooter
  },
  widget: OhRollershutterCardDefinition,
  data () {
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
@ -6,21 +6,21 @@
    <f7-card-content class="display-flex justify-content-center">
      <oh-sipclient v-bind="config" :context="context" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

 <script>
 import mixin from '../widget-mixin'
 import OhSipclient from '../system/oh-sipclient.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSIPClientCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhSipclient
+    OhSipclient,
+    OhCardFooter
  },
  widget: OhSIPClientCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center" :class="{ 'slider-card-vertical': config.vertical }">
      <oh-slider :context="childContext(context.component)" :class="{ 'slider-card-vertical': config.vertical }" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhSlider from '../system/oh-slider.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSliderCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhSlider
+    OhSlider,
+    OhCardFooter
  },
  widget: OhSliderCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center">
      <oh-stepper :context="childContext(context.component)" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhStepper from '../system/oh-stepper.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhStepperCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhStepper
+    OhStepper,
+    OhCardFooter
  },
  widget: OhStepperCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
@ -6,9 +6,7 @@
    <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
      <oh-swiper :context="childContext(context.component)" v-on="$listeners" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhSwiper from '../system/oh-swiper.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSwiperCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhSwiper
+    OhSwiper,
+    OhCardFooter
  },
  widget: OhSwiperCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
@ -6,9 +6,7 @@
    <f7-card-content class="display-flex justify-content-center" style="height: calc(2 * var(--f7-toggle-width))">
      <oh-toggle class="large-vertical-toggle" :context="context" @command="onCommand" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -21,12 +19,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhToggle from '../system/oh-toggle.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhToggleCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhToggle
+    OhToggle,
+    OhCardFooter
  },
  widget: OhToggleCardDefinition,
  data () {
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
@ -6,9 +6,7 @@
    <f7-card-content :padding="false" class="oh-video-card">
      <oh-video :context="childContext(context.component)" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

@ -27,12 +25,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhVideo from '../system/oh-video.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhVideoCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhVideo
+    OhVideo,
+    OhCardFooter
  },
  widget: OhVideoCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
@ -6,21 +6,21 @@
    <f7-card-content :class="{ 'no-padding': !config.borders }">
      <oh-webframe :context="childContext(context.component)" />
    </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
  </f7-card>
 </template>

 <script>
 import mixin from '../widget-mixin'
 import OhWebframe from '../system/oh-webframe.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhWebFrameCardDefinition } from '@/assets/definitions/widgets/standard/cards'

 export default {
  mixins: [mixin],
  components: {
-    OhWebframe
+    OhWebframe,
+    OhCardFooter
  },
  widget: OhWebFrameCardDefinition
 }
--- a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue
@ -0,0 +1,16 @@
+<template>
+  <f7-card-footer v-if="texts && !Array.isArray(texts)">
+    {{ texts }}
+  </f7-card-footer>
+  <f7-card-footer v-else-if="texts && Array.isArray(texts)">
+    <span v-for="text in texts" :key="text">
+      {{ text }}
+    </span>
+  </f7-card-footer>
+</template>
+
+<script>
+export default {
+  props: ['texts']
+}
+</script>