diff --git a/src/controls/qml/HighlightBar.qml b/src/controls/qml/HighlightBar.qml new file mode 100644 index 0000000..025de01 --- /dev/null +++ b/src/controls/qml/HighlightBar.qml @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2023 - Timo Könnecke + * Copyright (C) 2022 - Ed Beroset + * Copyright (C) 2020 - Darrel Griët + * Copyright (C) 2015 - Florent Revest + * + * 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 . + */ + +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() + } +} diff --git a/src/controls/qml/IntSelector.qml b/src/controls/qml/IntSelector.qml index f6097ed..9c660ad 100644 --- a/src/controls/qml/IntSelector.qml +++ b/src/controls/qml/IntSelector.qml @@ -1,4 +1,5 @@ /* + * Copyright (C) 2023 - Timo Könnecke * Copyright (C) 2022 - Ed Beroset * Copyright (C) 2020 - Darrel Griët * Copyright (C) 2015 - Florent Revest @@ -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 diff --git a/src/controls/qml/LabeledActionButton.qml b/src/controls/qml/LabeledActionButton.qml new file mode 100644 index 0000000..41fd510 --- /dev/null +++ b/src/controls/qml/LabeledActionButton.qml @@ -0,0 +1,79 @@ +/* + * Copyright (C) 2023 - Timo Könnecke + * Copyright (C) 2022 - Ed Beroset + * Copyright (C) 2020 - Darrel Griët + * Copyright (C) 2015 - Florent Revest + * + * 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 . + */ + +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 + } +} diff --git a/src/controls/qml/LabeledSwitch.qml b/src/controls/qml/LabeledSwitch.qml index 82c5ef6..64d7304 100644 --- a/src/controls/qml/LabeledSwitch.qml +++ b/src/controls/qml/LabeledSwitch.qml @@ -1,4 +1,5 @@ /* + * Copyright (C) 2023 - Timo Könnecke * Copyright (C) 2022 - Ed Beroset * Copyright (C) 2020 - Darrel Griët * Copyright (C) 2015 - Florent Revest @@ -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 + } } diff --git a/src/controls/qml/ListItem.qml b/src/controls/qml/ListItem.qml new file mode 100644 index 0000000..09b773b --- /dev/null +++ b/src/controls/qml/ListItem.qml @@ -0,0 +1,72 @@ +/* + * Copyright (C) 2023 - Timo Könnecke + * 2015 - Florent Revest + * + * 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 . + */ + +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" + } + } +} diff --git a/src/controls/qmldir b/src/controls/qmldir index ea6f43d..adf1598 100644 --- a/src/controls/qmldir +++ b/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 diff --git a/src/controls/resources.qrc b/src/controls/resources.qrc index 876258c..d2582ec 100644 --- a/src/controls/resources.qrc +++ b/src/controls/resources.qrc @@ -4,13 +4,16 @@ qml/BorderGestureArea.qml qml/CircularSpinner.qml qml/Dims.qml + qml/ListItem.qml qml/HandWritingKeyboard.qml + qml/HighlightBar.qml qml/IconButton.qml qml/Indicator.qml qml/Label.qml qml/LayerStack.qml qml/Marquee.qml qml/LabeledSwitch.qml + qml/LabeledActionButton.qml qml/PageDot.qml qml/PageHeader.qml qml/IntSelector.qml