diff --git a/src/EasyApplication/Gui/Elements/Pill.qml b/src/EasyApplication/Gui/Elements/Pill.qml new file mode 100644 index 00000000..0a5332d6 --- /dev/null +++ b/src/EasyApplication/Gui/Elements/Pill.qml @@ -0,0 +1,76 @@ +import QtQuick + +import EasyApplication.Gui.Globals as EaGlobals +import EasyApplication.Gui.Style as EaStyle +import EasyApplication.Gui.Elements as EaElements + + +Rectangle { + id: pill + + property string text: "" + property string fontIcon: "" + property string removeTooltip: qsTr("Remove") + signal removed() + + readonly property bool hasIcon: fontIcon !== "" + + height: textLabel.implicitHeight * 2 + width: EaStyle.Sizes.fontPixelSize + + (hasIcon ? iconLabel.implicitWidth + EaStyle.Sizes.fontPixelSize * 0.5 : 0) + + textLabel.implicitWidth + + EaStyle.Sizes.fontPixelSize * 0.6 + + removeLabel.width + + EaStyle.Sizes.fontPixelSize * 0.6 + radius: height / 2 + color: EaStyle.Colors.appBarBackground + border.color: EaStyle.Colors.appBarComboBoxBorder + border.width: 1 + + Row { + anchors.fill: parent + anchors.leftMargin: EaStyle.Sizes.fontPixelSize + anchors.rightMargin: removeLabel.width + EaStyle.Sizes.fontPixelSize * 0.25 + spacing: EaStyle.Sizes.fontPixelSize * 0.5 + + EaElements.Label { + id: iconLabel + visible: pill.hasIcon + text: pill.fontIcon + font.family: EaStyle.Fonts.iconsFamily + anchors.verticalCenter: parent.verticalCenter + } + + EaElements.Label { + id: textLabel + text: pill.text + anchors.verticalCenter: parent.verticalCenter + } + } + + EaElements.Label { + id: removeLabel + text: '×' + font.pixelSize: EaStyle.Sizes.fontPixelSize * 1.4 + color: removeArea.containsMouse + ? EaStyle.Colors.themeForegroundHovered + : EaStyle.Colors.themeForegroundMinor + anchors.right: parent.right + anchors.rightMargin: EaStyle.Sizes.fontPixelSize * 0.6 + anchors.verticalCenter: parent.verticalCenter + + MouseArea { + id: removeArea + anchors.fill: parent + anchors.margins: -EaStyle.Sizes.fontPixelSize * 0.3 + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: pill.removed() + } + + EaElements.ToolTip { + text: pill.removeTooltip + visible: removeArea.containsMouse && EaGlobals.Vars.showToolTips + } + } +} diff --git a/src/EasyApplication/Gui/Elements/qmldir b/src/EasyApplication/Gui/Elements/qmldir index 41dc98d3..dda18539 100644 --- a/src/EasyApplication/Gui/Elements/qmldir +++ b/src/EasyApplication/Gui/Elements/qmldir @@ -20,6 +20,7 @@ MenuItem 1.0 MenuItem.qml ParamComboBox 1.0 ParamComboBox.qml Parameter 1.0 Parameter.qml ParamTextField 1.0 ParamTextField.qml +Pill 1.0 Pill.qml RadioButton 1.0 RadioButton.qml RemoteController 1.0 RemoteController.qml RemotePointer 1.0 RemotePointer.qml