Unify settings pages components

src/controls/qml/HighlightBar.qml

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2023 - Timo Könnecke <github.com/eLtMosen>
+ * Copyright (C) 2022 - Ed Beroset <github.com/beroset>
+ * Copyright (C) 2020 - Darrel Griët <idanlcontact@gmail.com>
+ * Copyright (C) 2015 - Florent Revest <revestflo@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.9
+import org.asteroid.controls 1.0
+
+Rectangle {
+ // forward the clicked() signal to parent
+ signal clicked()
+ // alias to receive boolean forceOn to act like a controlled radio button
+ property bool forceOn: false
+
+ anchors.fill: parent
+ color: rowClick.containsPress || forceOn ? "#33ffffff" : "#00ffffff"
+
+ Behavior on color {
+ ColorAnimation {
+ duration: 150;
+ easing.type: Easing.OutQuad
+ }
+ }
+
+ MouseArea {
+ id: rowClick
+
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: parent.clicked()
+ }
+}

src/controls/qml/IntSelector.qml

@@ -1,4 +1,5 @@
 /*
+ * Copyright (C) 2023 - Timo Könnecke <github.com/eLtMosen>
  * Copyright (C) 2022 - Ed Beroset <github.com/beroset>
  * Copyright (C) 2020 - Darrel Griët <idanlcontact@gmail.com>
  * Copyright (C) 2015 - Florent Revest <revestflo@gmail.com>
@@ -20,8 +21,7 @@
 import QtQuick 2.9
 import org.asteroid.controls 1.0
 
-Row {
- id: intSelector
+Item {
  // minimum allowed value
  property int min: 0
  // maximum allowed value
@@ -32,14 +32,26 @@ Row {
  property string unitMarker: "%"
  // initial value of the control
  property int value: 0
- // labelWidthRatio is the width of the label with respect to the total width
- property real labelWidthRatio: 0.42857
- // fontToHeightRatio is the size of the font relative to the height
- property real fontToHeightRatio: 0.3
+ // left and right margin for the row content
+ property int rowMargin: Dims.w(15)
+ // size of the icon/s
+ property int iconSize: Dims.l(20)
+ // size of the label text
+ property int labelFontSize: Dims.l(6)
+
+ width: parent.width
+ height: parent.height
+
+ IconButton {
+ id: buttonLeft
 
- IconButton { 
  iconName: "ios-remove-circle-outline"
- height: parent.height
+ anchors {
+ left: parent.left
+ leftMargin: rowMargin
+ verticalCenter: parent.verticalCenter
+ }
+ height: iconSize
  width: height
  onClicked: {
  var newVal = value - stepSize
@@ -50,7 +62,11 @@ Row {
 
  Label {
  text: value + unitMarker
- font.pixelSize: parent.height * fontToHeightRatio
+ anchors {
+ left: buttonLeft.right
+ right: buttonRight.left
+ }
+ font.pixelSize: labelFontSize
  horizontalAlignment: Text.AlignHCenter
  verticalAlignment: Text.AlignVCenter
  wrapMode: Text.Wrap
@@ -59,8 +75,15 @@ Row {
  }
 
  IconButton {
+ id: buttonRight
+
  iconName: "ios-add-circle-outline"
- height: parent.height
+ anchors {
+ right: parent.right
+ rightMargin: rowMargin
+ verticalCenter: parent.verticalCenter
+ }
+ height: iconSize
  width: height
  onClicked: {
  var newVal = value + stepSize

src/controls/qml/LabeledActionButton.qml

@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2023 - Timo Könnecke <github.com/eLtMosen>
+ * Copyright (C) 2022 - Ed Beroset <github.com/beroset>
+ * Copyright (C) 2020 - Darrel Griët <idanlcontact@gmail.com>
+ * Copyright (C) 2015 - Florent Revest <revestflo@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.9
+import org.asteroid.controls 1.0
+
+Item {
+ // alias to receive string icon.name
+ property alias icon: icon.name
+ // alias to receive string label.text
+ property alias text: label.text
+ // left and right margin for the row content
+ property int rowMargin: Dims.w(15)
+ // size of the icon/s
+ property int iconSize: Dims.l(20)
+ // size of the label text
+ property int labelFontSize: Dims.l(6)
+ // forward the clicked() signal to parent
+ signal clicked()
+
+ width: parent.width
+ height: parent.height
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 200;
+ easing.type: Easing.OutQuad
+ }
+ }
+
+ HighlightBar {
+ onClicked: parent.onClicked()
+ }
+
+ Label {
+ id: label
+
+ anchors {
+ left: parent.left
+ leftMargin: rowMargin
+ right: icon.left
+ rightMargin: Dims.h(4)
+ }
+ text: value
+ font.pixelSize: labelFontSize
+ verticalAlignment: Text.AlignVCenter
+ wrapMode: Text.Wrap
+ height: parent.height
+ }
+
+ Icon {
+ id: icon
+
+ anchors {
+ right: parent.right
+ rightMargin: rowMargin
+ verticalCenter: parent.verticalCenter
+ }
+ height: iconSize
+ width: height
+ }
+}

src/controls/qml/LabeledSwitch.qml

@@ -1,4 +1,5 @@
 /*
+ * Copyright (C) 2023 - Timo Könnecke <github.com/eLtMosen>
  * Copyright (C) 2022 - Ed Beroset <github.com/beroset>
  * Copyright (C) 2020 - Darrel Griët <idanlcontact@gmail.com>
  * Copyright (C) 2015 - Florent Revest <revestflo@gmail.com>
@@ -20,27 +21,57 @@
 import QtQuick 2.9
 import org.asteroid.controls 1.0
 
-Row {
- // labelWidthRatio is the ratio of label width to the total width
- property real labelWidthRatio: 0.7143
- // fontToHeightRatio is the ratio of the font size to the height
- property real fontToHeightRatio: 0.3
+Item {
+ // alias to receive string toggle.checked
  property alias checked: toggle.checked
+ // alias to receive string label.text
  property alias text: label.text
+ // left and right margin for the row content
+ property int rowMargin: Dims.w(15)
+ // size of the icon/s
+ property int iconSize: Dims.l(20)
+ // size of the label text
+ property int labelFontSize: Dims.l(6)
+
+ width: parent.width
+ height: parent.height
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 200;
+ easing.type: Easing.OutQuad
+ }
+ }
 
  Label {
  id: label
+
+ anchors {
+ left: parent.left
+ leftMargin: rowMargin
+ right: toggle.left
+ rightMargin: Dims.h(4)
+ }
  text: value
- font.pixelSize: parent.height * fontToHeightRatio
+ font.pixelSize: labelFontSize
  verticalAlignment: Text.AlignVCenter
  wrapMode: Text.Wrap
- width: parent.width * labelWidthRatio
  height: parent.height
  }
 
  Switch {
  id: toggle
- height: parent.height
+
+ anchors {
+ right: parent.right
+ rightMargin: rowMargin
+ verticalCenter: parent.verticalCenter
+ }
+ height: iconSize
  width: height
  }
+
+ HighlightBar {
+ onClicked: toggle.checked = !toggle.checked
+ }
 }

src/controls/qml/ListItem.qml

@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2023 - Timo Könnecke <github.com/eLtMosen>
+ * 2015 - Florent Revest <revestflo@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.9
+import org.asteroid.controls 1.0
+import org.asteroid.utils 1.0
+
+Item {
+ // alias to recieve string label.text
+ property alias title: label.text
+ // alias to recieve string icon.name
+ property alias iconName: icon.name
+ // alias to recieve boolean highlight.forceOn
+ property alias highlight: highlight.forceOn
+ // size of the icon/s
+ property int iconSize: height - Dims.h(6)
+ // size of the label text
+ property int labelFontSize: Dims.l(9)
+ // forward the clicked() signal to parent
+ signal clicked()
+
+ width: parent.width
+ height: Dims.h(21)
+
+ HighlightBar {
+ id: highlight
+
+ onClicked: parent.clicked()
+ }
+
+ Icon {
+ id: icon
+
+ width: iconSize
+ height: width
+
+ anchors {
+ verticalCenter: parent.verticalCenter
+ left: parent.left
+ leftMargin: DeviceInfo.hasRoundScreen ? Dims.w(18) : Dims.w(12)
+ }
+ }
+
+ Label {
+ id: label
+
+ anchors {
+ leftMargin: DeviceInfo.hasRoundScreen ? Dims.w(6) : Dims.w(10)
+ left: icon.right
+ verticalCenter: parent.verticalCenter
+ }
+ font {
+ pixelSize: labelFontSize
+ styleName: "SemiCondensed Light"
+ }
+ }
+}

src/controls/qmldir

@@ -6,10 +6,13 @@ CircularSpinner 1.0 qrc:///org/asteroid/controls/qml/CircularSpinner.qml
 PageDot 1.0 qrc:///org/asteroid/controls/qml/PageDot.qml
 PageHeader 1.0 qrc:///org/asteroid/controls/qml/PageHeader.qml
 IntSelector 1.0 qrc:///org/asteroid/controls/qml/IntSelector.qml
+HighlightBar 1.0 qrc:///org/asteroid/controls/qml/HighlightBar.qml
 LayerStack 1.0 qrc:///org/asteroid/controls/qml/LayerStack.qml
 Label 1.0 qrc:///org/asteroid/controls/qml/Label.qml
 Marquee 1.0 qrc:///org/asteroid/controls/qml/Marquee.qml
 LabeledSwitch 1.0 qrc:///org/asteroid/controls/qml/LabeledSwitch.qml
+ListItem 1.0 qrc:///org/asteroid/controls/qml/ListItem.qml
+LabeledActionButton 1.0 qrc:///org/asteroid/controls/qml/LabeledActionButton.qml
 Application 1.0 qrc:///org/asteroid/controls/qml/Application.qml
 BorderGestureArea 1.0 qrc:///org/asteroid/controls/qml/BorderGestureArea.qml
 IconButton 1.0 qrc:///org/asteroid/controls/qml/IconButton.qml

src/controls/resources.qrc

@@ -4,13 +4,16 @@
  <file>qml/BorderGestureArea.qml</file>
  <file>qml/CircularSpinner.qml</file>
  <file>qml/Dims.qml</file>
+ <file>qml/ListItem.qml</file>
  <file>qml/HandWritingKeyboard.qml</file>
+ <file>qml/HighlightBar.qml</file>
  <file>qml/IconButton.qml</file>
  <file>qml/Indicator.qml</file>
  <file>qml/Label.qml</file>
  <file>qml/LayerStack.qml</file>
  <file>qml/Marquee.qml</file>
  <file>qml/LabeledSwitch.qml</file>
+ <file>qml/LabeledActionButton.qml</file>
  <file>qml/PageDot.qml</file>
  <file>qml/PageHeader.qml</file>
  <file>qml/IntSelector.qml</file>