forked from qt-creator/qt-creator
QmlDesigner: Add RadioButton to StudioControls
Change-Id: I85ccd5d9b954cf1f27f2bc7ede856a496aef371c Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
committed by
Henning Gründl
Henning Gründl
parent
8724a4efbb
commit
a64d60c849
@@ -0,0 +1,173 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2021 The Qt Company Ltd.
|
||||
** Contact: https://www.qt.io/licensing/
|
||||
**
|
||||
** This file is part of Qt Creator.
|
||||
**
|
||||
** Commercial License Usage
|
||||
** Licensees holding valid commercial Qt licenses may use this file in
|
||||
** accordance with the commercial license agreement provided with the
|
||||
** Software or, alternatively, in accordance with the terms contained in
|
||||
** a written agreement between you and The Qt Company. For licensing terms
|
||||
** and conditions see https://www.qt.io/terms-conditions. For further
|
||||
** information use the contact form at https://www.qt.io/contact-us.
|
||||
**
|
||||
** GNU General Public License Usage
|
||||
** Alternatively, this file may be used under the terms of the GNU
|
||||
** General Public License version 3 as published by the Free Software
|
||||
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
|
||||
** included in the packaging of this file. Please review the following
|
||||
** information to ensure the GNU General Public License requirements will
|
||||
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Templates 2.15 as T
|
||||
import StudioTheme 1.0 as StudioTheme
|
||||
|
||||
T.RadioButton {
|
||||
id: root
|
||||
|
||||
property alias actionIndicator: actionIndicator
|
||||
|
||||
// This property is used to indicate the global hover state
|
||||
property bool hover: root.hovered && root.enabled
|
||||
property bool edit: false
|
||||
|
||||
property alias actionIndicatorVisible: actionIndicator.visible
|
||||
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth
|
||||
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight
|
||||
|
||||
property alias labelVisible: radioButtonLabel.visible
|
||||
property alias labelColor: radioButtonLabel.color
|
||||
|
||||
property alias fontFamily: radioButtonLabel.font.family
|
||||
property alias fontPixelSize: radioButtonLabel.font.pixelSize
|
||||
|
||||
font.pixelSize: StudioTheme.Values.myFontSize
|
||||
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding,
|
||||
implicitIndicatorHeight + topPadding + bottomPadding)
|
||||
|
||||
spacing: StudioTheme.Values.radioButtonSpacing
|
||||
hoverEnabled: true
|
||||
activeFocusOnTab: false
|
||||
|
||||
ActionIndicator {
|
||||
id: actionIndicator
|
||||
myControl: root
|
||||
width: actionIndicator.visible ? root.__actionIndicatorWidth : 0
|
||||
height: actionIndicator.visible ? root.__actionIndicatorHeight : 0
|
||||
}
|
||||
|
||||
indicator: Rectangle {
|
||||
id: radioButtonBackground
|
||||
implicitWidth: StudioTheme.Values.radioButtonWidth
|
||||
implicitHeight: StudioTheme.Values.radioButtonHeight
|
||||
|
||||
x: actionIndicator.width
|
||||
y: 0
|
||||
z: 5
|
||||
|
||||
radius: width / 2
|
||||
color: StudioTheme.Values.themeControlBackground
|
||||
border.color: StudioTheme.Values.themeControlOutline
|
||||
border.width: StudioTheme.Values.border
|
||||
|
||||
Rectangle {
|
||||
id: radioButtonIndicator
|
||||
x: (parent.width - width) / 2
|
||||
y: (parent.height - height) / 2
|
||||
width: StudioTheme.Values.radioButtonIndicatorWidth
|
||||
height: StudioTheme.Values.radioButtonIndicatorHeight
|
||||
radius: width / 2
|
||||
color: StudioTheme.Values.themeInteraction
|
||||
visible: root.checked
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: T.Label {
|
||||
id: radioButtonLabel
|
||||
leftPadding: radioButtonBackground.x + radioButtonBackground.width + root.spacing
|
||||
rightPadding: 0
|
||||
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: root.text
|
||||
font: root.font
|
||||
color: StudioTheme.Values.themeTextColor
|
||||
visible: text !== ""
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "default"
|
||||
when: root.enabled && !root.hover && !root.pressed && !actionIndicator.hover
|
||||
PropertyChanges {
|
||||
target: radioButtonBackground
|
||||
color: StudioTheme.Values.themeControlBackground
|
||||
border.color: StudioTheme.Values.themeControlOutline
|
||||
}
|
||||
PropertyChanges {
|
||||
target: radioButtonIndicator
|
||||
color: StudioTheme.Values.themeInteraction
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "globalHover"
|
||||
when: actionIndicator.hover && !root.pressed && root.enabled
|
||||
PropertyChanges {
|
||||
target: radioButtonBackground
|
||||
color: StudioTheme.Values.themeControlBackgroundGlobalHover
|
||||
border.color: StudioTheme.Values.themeControlOutline
|
||||
}
|
||||
PropertyChanges {
|
||||
target: radioButtonIndicator
|
||||
color: StudioTheme.Values.themeInteraction
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "hover"
|
||||
when: root.hover && !actionIndicator.hover && !root.pressed
|
||||
PropertyChanges {
|
||||
target: radioButtonBackground
|
||||
color: StudioTheme.Values.themeControlBackgroundHover
|
||||
border.color: StudioTheme.Values.themeControlOutline
|
||||
}
|
||||
PropertyChanges {
|
||||
target: radioButtonIndicator
|
||||
color: StudioTheme.Values.themeInteraction
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "press"
|
||||
when: root.hover && root.pressed
|
||||
PropertyChanges {
|
||||
target: radioButtonBackground
|
||||
color: StudioTheme.Values.themeControlBackgroundInteraction
|
||||
border.color: StudioTheme.Values.themeControlOutlineInteraction
|
||||
}
|
||||
PropertyChanges {
|
||||
target: radioButtonIndicator
|
||||
color: StudioTheme.Values.themeInteraction
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "disable"
|
||||
when: !root.enabled
|
||||
PropertyChanges {
|
||||
target: radioButtonBackground
|
||||
color: StudioTheme.Values.themeControlBackgroundDisabled
|
||||
border.color: StudioTheme.Values.themeControlOutlineDisabled
|
||||
}
|
||||
PropertyChanges {
|
||||
target: radioButtonIndicator
|
||||
color: StudioTheme.Values.themeIconColorDisabled
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -17,6 +17,7 @@ Menu 1.0 Menu.qml
|
||||
MenuItem 1.0 MenuItem.qml
|
||||
MenuItemWithIcon 1.0 MenuItemWithIcon.qml
|
||||
MenuSeparator 1.0 MenuSeparator.qml
|
||||
RadioButton 1.0 RadioButton.qml
|
||||
RealSliderPopup 1.0 RealSliderPopup.qml
|
||||
RealSpinBox 1.0 RealSpinBox.qml
|
||||
RealSpinBoxIndicator 1.0 RealSpinBoxIndicator.qml
|
||||
|
||||
@@ -66,6 +66,12 @@ QtObject {
|
||||
|
||||
property real checkBoxSpacing: Math.round(6 * values.scaleFactor)
|
||||
|
||||
property real radioButtonSpacing: values.checkBoxSpacing
|
||||
property real radioButtonWidth: values.height
|
||||
property real radioButtonHeight: values.height
|
||||
property real radioButtonIndicatorWidth: 14
|
||||
property real radioButtonIndicatorHeight: 14
|
||||
|
||||
property real columnWidth: 225 + (175 * (values.scaleFactor * 2))
|
||||
|
||||
property real marginTopBottom: 4
|
||||
|
||||
Reference in New Issue
Block a user