headsetcontrol-battery-widget/package/contents/ui/configGeneral.qml

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5 as QQC2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.kirigami 2.4 as Kirigami
import org.kde.kquickcontrols 2.0 as KQControls

import "./lib/helper.js" as Helper

QQC2.Pane {
  id: root

  property alias cfg_pollingrate: pollingrate.value
  property alias cfg_batteryheight: batteryheight.value
  property alias cfg_colorEmpty: colorEmpty.color
  property alias cfg_colorFull: colorFull.color

  Kirigami.FormLayout {
    anchors.fill: parent
    wideMode: false

    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 10

      // first row
      Text {
        text: "polling rate:"
        color: PlasmaCore.Theme.textColor
      }
      QQC2.Slider {
        id: pollingrate
        value: 10.0
        from: 2.0
        to: 60.0
        stepSize: 2.0
        snapMode: QQC2.Slider.SnapAlways
      }
      Text {
        text: cfg_pollingrate + " seconds"
        color: PlasmaCore.Theme.textColor
      }

      // second row
      Text {
        text: "battery height:"
        color: PlasmaCore.Theme.textColor
      }
      QQC2.Slider {
        id: batteryheight
        value: 8.0
        from: 1.0
        to: 10.0
        stepSize: 1.0
        snapMode: QQC2.Slider.SnapAlways
      }
      Text {
        text: cfg_batteryheight
        color: PlasmaCore.Theme.textColor
      }
    }

    // color config
    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 1

      // first row
      Text {
        text: "empty:"
        color: PlasmaCore.Theme.textColor
      }
      KQControls.ColorButton {
        id: colorEmpty
        color: cfg_colorEmpty
      }
      Text {
        text: cfg_colorEmpty
        color: PlasmaCore.Theme.textColor
      }

      // second row
      Text {
        text: "full:"
        color: PlasmaCore.Theme.textColor
      }
      KQControls.ColorButton {
        id: colorFull
        color: cfg_colorFull
      }
      Text {
        text: cfg_colorFull
        color: PlasmaCore.Theme.textColor
      }
    }

    // color gradient example
    GridLayout {
      columns: 10
      rows: 1
      rowSpacing: 0

      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.1)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.2)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.3)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.4)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.5)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.6)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.7)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.8)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.9)
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 1)
      }
    }
  }
}