OpenHAB
/
openhab-webui
mirror of https://github.com/openhab/openhab-webui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Signed-off-by: Gautier Taravella <tarag@mailbox.org>
pull/1541/head
Gautier 2022-12-05 00:15:16 +01:00 committed by GitHub
parent 6b486ccd48
commit 3ca7ba08fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 80 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
View File

@ -20,9 +20,7 @@
</f7-col> </f7-col>
</f7-row> </f7-row>
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -30,12 +28,14 @@
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import { actionsMixin } from '../widget-actions' import { actionsMixin } from '../widget-actions'
import OhClock from '../system/oh-clock.vue' import OhClock from '../system/oh-clock.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin, actionsMixin], mixins: [mixin, actionsMixin],
components: { components: {
OhClock OhClock,
OhCardFooter
}, },
widget: OhClockCardDefinition widget: OhClockCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center"> <f7-card-content class="display-flex justify-content-center">
<oh-colorpicker :context="context" @command="onCommand" /> <oh-colorpicker :context="context" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -18,12 +16,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhColorpicker from '../system/oh-colorpicker.vue' import OhColorpicker from '../system/oh-colorpicker.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhColorpickerCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhColorpickerCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhColorpicker OhColorpicker,
OhCardFooter
}, },
widget: OhColorpickerCardDefinition, widget: OhColorpickerCardDefinition,
data () { data () {

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
View File

@ -9,9 +9,7 @@
</f7-link> </f7-link>
<oh-gauge v-else :context="childContext(context.component)" /> <oh-gauge v-else :context="childContext(context.component)" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -27,13 +25,15 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhGauge from '../system/oh-gauge.vue' import OhGauge from '../system/oh-gauge.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { actionsMixin } from '../widget-actions' import { actionsMixin } from '../widget-actions'
import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin, actionsMixin], mixins: [mixin, actionsMixin],
components: { components: {
OhGauge OhGauge,
OhCardFooter
}, },
widget: OhGaugeCardDefinition widget: OhGaugeCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
View File

@ -11,9 +11,7 @@
</f7-list> </f7-list>
<oh-image v-else :context="childContext(context.component)" /> <oh-image v-else :context="childContext(context.component)" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -37,12 +35,14 @@
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import { actionsMixin } from '../widget-actions' import { actionsMixin } from '../widget-actions'
import OhImage from '../system/oh-image.vue' import OhImage from '../system/oh-image.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhImageCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhImageCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin, actionsMixin], mixins: [mixin, actionsMixin],
components: { components: {
OhImage OhImage,
OhCardFooter
}, },
widget: OhImageCardDefinition widget: OhImageCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="padding"> <f7-card-content class="padding">
<oh-input class="input-card-content" :context="childContext(context.component)" @command="onCommand" /> <oh-input class="input-card-content" :context="childContext(context.component)" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -23,12 +21,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhInput from '../system/oh-input.vue' import OhInput from '../system/oh-input.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhInputCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhInputCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhInput OhInput,
OhCardFooter
}, },
widget: OhInputCardDefinition widget: OhInputCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center"> <f7-card-content class="display-flex justify-content-center">
<oh-knob :context="childContext(context.component)" @command="onCommand" /> <oh-knob :context="childContext(context.component)" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -18,12 +16,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhKnob from '../system/oh-knob.vue' import OhKnob from '../system/oh-knob.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhKnobCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhKnobCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhKnob OhKnob,
OhCardFooter
}, },
widget: OhKnobCardDefinition widget: OhKnobCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
View File

@ -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> --> <!-- <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> --> <!-- <h2>{{context.store[config.item].displayState || context.store[config.item].state}}</h2> -->
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -53,11 +51,13 @@ import { actionsMixin } from '../widget-actions'
import { OhLabelCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhLabelCardDefinition } from '@/assets/definitions/widgets/standard/cards'
import OhTrend from '../system/oh-trend' import OhTrend from '../system/oh-trend'
import OhCardFooter from '../system/oh-card-footer.vue'
export default { export default {
mixins: [mixin, actionsMixin], mixins: [mixin, actionsMixin],
components: { components: {
OhTrend OhTrend,
OhCardFooter
}, },
widget: OhLabelCardDefinition, widget: OhLabelCardDefinition,
computed: { computed: {

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content :class="{ 'slider-card-vertical': config.vertical }"> <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
<oh-list :context="childContext(context.component)" v-on="$listeners" /> <oh-list :context="childContext(context.component)" v-on="$listeners" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -20,12 +18,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhList from '../system/oh-list.vue' import OhList from '../system/oh-list.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhListCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhListCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhList OhList,
OhCardFooter
}, },
widget: OhListCardDefinition widget: OhListCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center" :style="{ height: config.vertical ? '10em' : undefined }"> <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" /> <oh-rollershutter :class="{ vertical: config.vertical }" :context="context" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -28,12 +26,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhRollershutter from '../system/oh-rollershutter.vue' import OhRollershutter from '../system/oh-rollershutter.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhRollershutterCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhRollershutterCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhRollershutter OhRollershutter,
OhCardFooter
}, },
widget: OhRollershutterCardDefinition, widget: OhRollershutterCardDefinition,
data () { data () {

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
View File

@ -6,21 +6,21 @@
<f7-card-content class="display-flex justify-content-center"> <f7-card-content class="display-flex justify-content-center">
<oh-sipclient v-bind="config" :context="context" /> <oh-sipclient v-bind="config" :context="context" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhSipclient from '../system/oh-sipclient.vue' import OhSipclient from '../system/oh-sipclient.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhSIPClientCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhSIPClientCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhSipclient OhSipclient,
OhCardFooter
}, },
widget: OhSIPClientCardDefinition widget: OhSIPClientCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center" :class="{ 'slider-card-vertical': config.vertical }"> <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" /> <oh-slider :context="childContext(context.component)" :class="{ 'slider-card-vertical': config.vertical }" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -20,12 +18,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhSlider from '../system/oh-slider.vue' import OhSlider from '../system/oh-slider.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhSliderCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhSliderCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhSlider OhSlider,
OhCardFooter
}, },
widget: OhSliderCardDefinition widget: OhSliderCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center"> <f7-card-content class="display-flex justify-content-center">
<oh-stepper :context="childContext(context.component)" @command="onCommand" /> <oh-stepper :context="childContext(context.component)" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -20,12 +18,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhStepper from '../system/oh-stepper.vue' import OhStepper from '../system/oh-stepper.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhStepperCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhStepperCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhStepper OhStepper,
OhCardFooter
}, },
widget: OhStepperCardDefinition widget: OhStepperCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content :class="{ 'slider-card-vertical': config.vertical }"> <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
<oh-swiper :context="childContext(context.component)" v-on="$listeners" /> <oh-swiper :context="childContext(context.component)" v-on="$listeners" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -20,12 +18,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhSwiper from '../system/oh-swiper.vue' import OhSwiper from '../system/oh-swiper.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhSwiperCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhSwiperCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhSwiper OhSwiper,
OhCardFooter
}, },
widget: OhSwiperCardDefinition widget: OhSwiperCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content class="display-flex justify-content-center" style="height: calc(2 * var(--f7-toggle-width))"> <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" /> <oh-toggle class="large-vertical-toggle" :context="context" @command="onCommand" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -21,12 +19,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhToggle from '../system/oh-toggle.vue' import OhToggle from '../system/oh-toggle.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhToggleCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhToggleCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhToggle OhToggle,
OhCardFooter
}, },
widget: OhToggleCardDefinition, widget: OhToggleCardDefinition,
data () { data () {

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
View File

@ -6,9 +6,7 @@
<f7-card-content :padding="false" class="oh-video-card"> <f7-card-content :padding="false" class="oh-video-card">
<oh-video :context="childContext(context.component)" /> <oh-video :context="childContext(context.component)" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
@ -27,12 +25,14 @@
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhVideo from '../system/oh-video.vue' import OhVideo from '../system/oh-video.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhVideoCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhVideoCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhVideo OhVideo,
OhCardFooter
}, },
widget: OhVideoCardDefinition widget: OhVideoCardDefinition
} }

8
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
View File

@ -6,21 +6,21 @@
<f7-card-content :class="{ 'no-padding': !config.borders }"> <f7-card-content :class="{ 'no-padding': !config.borders }">
<oh-webframe :context="childContext(context.component)" /> <oh-webframe :context="childContext(context.component)" />
</f7-card-content> </f7-card-content>
<f7-card-footer v-if="config.footer"> <oh-card-footer v-if="config.footer" :texts="config.footer" />
{{ config.footer }}
</f7-card-footer>
</f7-card> </f7-card>
</template> </template>
<script> <script>
import mixin from '../widget-mixin' import mixin from '../widget-mixin'
import OhWebframe from '../system/oh-webframe.vue' import OhWebframe from '../system/oh-webframe.vue'
import OhCardFooter from '../system/oh-card-footer.vue'
import { OhWebFrameCardDefinition } from '@/assets/definitions/widgets/standard/cards' import { OhWebFrameCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default { export default {
mixins: [mixin], mixins: [mixin],
components: { components: {
OhWebframe OhWebframe,
OhCardFooter
}, },
widget: OhWebFrameCardDefinition widget: OhWebFrameCardDefinition
} }

16
bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue Normal file
View File

@ -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>