Warning, /plasma-mobile/plasma-camera/src/contents/ui/components/RadioSelector.qml is written in an unsupported language. File is not indexed.
0001 // SPDX-License-Identifier: GPL-2.0-or-later
0002 // SPDX-FileCopyrightText: 2023 Mathis Brüchert <mbb@kaidan.im>
0003
0004 import QtQuick 2.15
0005 import QtQuick.Controls 2.15 as QQC2
0006 import QtQuick.Layouts 1.15
0007 import org.kde.kirigami 2.19 as Kirigami
0008
0009 /**
0010 * @brief A Component that allows sitching between multiple options.
0011 *
0012 * Example:
0013 * @code
0014 * Components.RadioSelector {
0015 *
0016 * consistentWidth: false
0017 * actions: [
0018 * Kirigami.Action {
0019 * text: i18n("Week")
0020 * icon.name: "view-calendar-week"
0021 * },
0022 * Kirigami.Action {
0023 * text: i18n("3 Days")
0024 * icon.name: "view-calendar-upcoming-days"
0025 * },
0026 * Kirigami.Action {
0027 * text: i18n("1 Day")
0028 * icon.name: "view-calendar-day"
0029 * }
0030 * ]
0031 * }
0032 * @endcode
0033 */
0034
0035
0036
0037 RowLayout {
0038 id: root
0039
0040 property list<Kirigami.Action> actions
0041
0042 /**
0043 * @brief This property holds a list of actions, each holding one of the options.
0044 */
0045
0046 property bool consistentWidth: false
0047
0048 /**
0049 * @brief This property holds whether all the items should have the same width.
0050 */
0051
0052 property int defaultIndex: 0
0053
0054 /**
0055 * @brief This property holds which option will be selected by default.
0056 */
0057
0058 readonly property int selectedIndex: marker.selectedIndex
0059
0060 /**
0061 * @brief This property holds the currently selected option.
0062 */
0063
0064 property string color: Kirigami.Theme.textColor
0065
0066 Item{
0067 id: container
0068
0069 Layout.minimumWidth: consistentWidth ? 0 : switchLayout.implicitWidth
0070 height: Math.round(Kirigami.Units.gridUnit * 1.5)
0071 Layout.fillHeight: true
0072 Layout.fillWidth: consistentWidth
0073
0074 QQC2.ButtonGroup {
0075 buttons: switchLayout.children
0076 }
0077
0078 RowLayout {
0079 id: switchLayout
0080
0081 anchors.fill: parent
0082 Layout.fillWidth: true
0083 Repeater{
0084 id: repeater
0085
0086 model: actions
0087 delegate: QQC2.ToolButton {
0088 id: button
0089
0090 required property var modelData
0091 required property int index
0092
0093 Layout.fillWidth: true
0094 Layout.preferredWidth: consistentWidth ? (root.width/repeater.count)-(switchLayout.spacing/repeater.count-1) : button.implicitWidth
0095
0096 checkable: true
0097 text: modelData.text
0098 icon.name: modelData.icon.name
0099
0100 background: Rectangle{
0101 anchors.fill: button
0102
0103 radius: height/2
0104 color: "transparent"
0105 border.color: Kirigami.Theme.disabledTextColor
0106 opacity: button.hovered ? 0.3 : 0
0107
0108 Behavior on opacity {
0109 PropertyAnimation {
0110 duration: Kirigami.Units.shortDuration
0111 easing.type: Easing.InOutCubic
0112 }
0113 }
0114 }
0115
0116 contentItem: RowLayout{
0117 Item {
0118 Layout.leftMargin: icon.visible ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
0119 Layout.fillWidth: true
0120 }
0121
0122 Kirigami.Icon {
0123 id: icon
0124
0125 Layout.topMargin: (container.height-label.height)/2
0126 Layout.bottomMargin: (container.height-label.height)/2
0127
0128 color: button.checked ? Kirigami.Theme.hoverColor : root.color
0129 visible: button.icon.name
0130 source: button.icon.name
0131 implicitHeight: label.height
0132 implicitWidth: label.height
0133 Behavior on color {
0134 PropertyAnimation {
0135 duration: Kirigami.Units.longDuration
0136 easing.type: Easing.InOutCubic
0137 }
0138 }
0139 }
0140 Item{
0141 Layout.topMargin: (container.height-label.height)/2
0142 Layout.bottomMargin: (container.height-label.height)/2
0143
0144 width: fakeLabel.width
0145 height: fakeLabel.height
0146 QQC2.Label {
0147 id: fakeLabel
0148
0149 anchors.centerIn: parent
0150 font.bold: true
0151 color: Kirigami.Theme.hoverColor
0152
0153 opacity: button.checked ? 1 : 0
0154 text: button.text
0155 Behavior on opacity {
0156 PropertyAnimation {
0157 duration: Kirigami.Units.longDuration
0158 easing.type: Easing.InOutCubic
0159 }
0160 }
0161 }
0162 QQC2.Label {
0163 id: label
0164
0165 anchors.centerIn: parent
0166 color: root.color
0167
0168 opacity: button.checked ? 0 : 1
0169 text: button.text
0170 Behavior on opacity {
0171 PropertyAnimation {
0172 duration: Kirigami.Units.longDuration
0173 easing.type: Easing.InOutCubic
0174 }
0175 }
0176 }
0177 }
0178
0179 Item {
0180 Layout.fillWidth: true
0181 Layout.rightMargin: Kirigami.Units.largeSpacing
0182 }
0183 }
0184
0185 onClicked: {
0186 marker.width = Qt.binding(function() { return width })
0187 marker.x = Qt.binding(function() { return x })
0188 modelData.triggered()
0189 marker.selectedIndex = index
0190
0191 }
0192 Component.onCompleted: if (index === defaultIndex ) {
0193 marker.width = Qt.binding(function() { return width })
0194 marker.x = Qt.binding(function() { return x })
0195 button.checked = true
0196 }
0197 }
0198 }
0199 }
0200
0201 Rectangle {
0202 id: marker
0203
0204 property int selectedIndex: root.defaultIndex
0205
0206 y: switchLayout.y
0207 z: switchLayout.z - 1
0208 height: container.height
0209 radius: height/2
0210 border.width: 1
0211 border.color: Kirigami.ColorUtils.linearInterpolation(
0212 Kirigami.Theme.hoverColor,
0213 "transparent", 0.4)
0214 color: Kirigami.ColorUtils.linearInterpolation(
0215 Kirigami.Theme.hoverColor,
0216 "transparent", 0.9)
0217
0218 Behavior on x {
0219 PropertyAnimation {
0220 id: x_anim
0221
0222 duration: Kirigami.Units.longDuration
0223 easing.type: Easing.InOutCubic
0224 }
0225 }
0226
0227 Behavior on width {
0228 PropertyAnimation {
0229 id: width_anim
0230
0231 duration: Kirigami.Units.longDuration
0232 easing.type: Easing.InOutCubic
0233 }
0234 }
0235 }
0236 }
0237 }