Comment 5 for bug 1228576

Here you are. Pls remove all logic yourself, but preserve this layout. This popover must be shown via PopupUtils.open

Component {
        id: readingOptionsPopoverComponent

        Popover {
            id: readingOptionsPopover

            Component.onCompleted: {
// var useDarkTheme = DB.getUseDarkTheme()
// console.log("USE DARK", useDarkTheme)
                fontSizeSlider.value = optionsKeeper.fontSize()
                buttonRow.updateButtonsState()
            }

            Column {
                id: contentColumn

                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                }

                ListItem.Empty {
                    showDivider: false
                    Label {
                        id: lblLess

                        text: "A"
                        fontSize: "small"
                        color: "black" // TODO TEMP
                        anchors {
                            left: parent.left
                            leftMargin: units.gu(2)
                            verticalCenter: parent.verticalCenter
                        }
                    }

                    Slider {
                        id: fontSizeSlider

                        anchors {
                            right: lblMore.left
                            rightMargin: units.gu(1)
                            left: lblLess.right
                            leftMargin: units.gu(1)
                            verticalCenter: parent.verticalCenter
                        }

                        minimumValue: 0
                        maximumValue: 2

                        onValueChanged: {
                            var res
                            if (value < maximumValue / 3)
                                res = 0
                            else if (value < maximumValue / 3 * 2)
                                res = 1
                            else res = 2

                            optionsKeeper.setFontSize(res)
                        }

                        function formatValue(v) {
                            if (v < maximumValue / 3)
                                return i18n.tr("Small")
                            else if (v < maximumValue / 3 * 2)
                                return i18n.tr("Mid")
                            else return i18n.tr("Large")
                        }
                    } // SLider

                    Label {
                        id: lblMore

                        text: "A"
                        fontSize: "large"
                        color: "black" // TODO TEMP
                        anchors {
                            right: parent.right
                            rightMargin: units.gu(2)
                            verticalCenter: parent.verticalCenter
                        }
                    }
                } // ListItem.Empty

                ListItem.Empty {
                    Row {
                        id: buttonRow

                        property bool useDark: false
                        spacing: units.gu(2)
                        anchors.centerIn: parent
                        Button {
                            text: "Dark"
                            width: units.gu(14)
                            gradient: buttonRow.useDark ? UbuntuColors.orangeGradient : UbuntuColors.greyGradient
                            onClicked: {
                                optionsKeeper.setUseDarkTheme(true)
                                buttonRow.updateButtonsState()
                            }
                        }

                        Button {
                            text: "Light"
                            width: units.gu(14)
                            gradient: buttonRow.useDark ? UbuntuColors.greyGradient : UbuntuColors.orangeGradient
                            onClicked: {
                                optionsKeeper.setUseDarkTheme(false)
                                buttonRow.updateButtonsState()
                            }
                        }

                        function updateButtonsState() {
                            useDark = optionsKeeper.useDarkTheme()
                        }
                    }
                }
            }
        }
    } // Component