I’ve created a widget that opens a popup containing an oh-colorpicker, but that colorpicker sometimes (most of the time) doesn’t get initialized properly. At least, the wheel doesn’t. It always shows a large dot in the top left corner of the ring and a small dot in the top left corner of the square. The HSB sliders show the correct values though.
- component: oh-list
config:
id: list
noHairlinesBetween: true
slots:
default:
- component: oh-list-item
config:
title: Farbe
icon: material:palette
iconColor: var(--f7-theme-color)
smartSelect: true
popupOpen: =".color-popup-" + props.effectItem
style:
border: 2px solid var(--f7-theme-color)
border-radius: 5px
slots:
after:
- component: Label
config:
style:
width: 32px
height: 32px
border-radius: 5px
background-color: ="hsl(" + items[props.masterItem].state.split(",")[0] + "," + items[props.masterItem].state.split(",")[1] + "%," + items[props.masterItem].state.split(",")[2] + "%)"
- component: f7-popup
config:
class: ="color-popup-" + props.effectItem
slots:
default:
- component: f7-page
slots:
default:
- component: f7-navbar
config:
title: Farbe
style:
position: sticky
slots:
left:
- component: oh-link
config:
iconMaterial: arrow_back_ios
popupClose: true
- component: f7-row
config:
class:
- padding-top
slots:
default:
- component: oh-colorpicker
config:
item: =props.masterItem
modules:
- wheel
- hsb-sliders