import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 ColumnLayout { spacing: 5 StatusSelectableText { color: Theme.palette.baseColor1 text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again." font.pixelSize: 15 width: 300 multiline: true } StatusSelectableText { color: Theme.palette.baseColor1 text: "
This is a selectable link in rich text format to test www.google.com
" font.pixelSize: 15 width: 200 } StatusIconTabButton { icon.name: "chat" } StatusIconTabButton { icon.source: "qrc:/demoapp/data/profile-image-1.jpeg" } StatusIconTabButton { icon.color: Theme.palette.miscColor9 // This icon source is flawed and demonstrates the fallback case // when the image source can't be loaded icon.source: "https://httpstat.us/404" name: "Pascal" } StatusIconTabButton { name: "#status" } Button { text: "Hover me!" StatusToolTip { visible: parent.hovered text: "Top" } StatusToolTip { visible: parent.hovered text: "Right" orientation: StatusToolTip.Orientation.Right x: parent.width + 16 y: parent.height / 2 - height / 2 + 4 } StatusToolTip { visible: parent.hovered text: "Bottom" orientation: StatusToolTip.Orientation.Bottom y: parent.height + 12 } StatusToolTip { visible: parent.hovered text: "Left" orientation: StatusToolTip.Orientation.Left x: -parent.width /2 -8 y: parent.height / 2 - height / 2 + 4 } } StatusNavBarTabButton { icon.name: "chat" tooltip.text: "Chat" } StatusNavBarTabButton { name: "#status" tooltip.text: "Some Channel" } StatusNavBarTabButton { icon.source: "qrc:/demoapp/data/profile-image-1.jpeg" tooltip.text: "Some Community" } StatusNavBarTabButton { icon.name: "profile" tooltip.text: "Profile" badge.value: 0 badge.visible: true badge.anchors.leftMargin:-16 } StatusNavBarTabButton { icon.name: "chat" tooltip.text: "Chat" badge.value: 35 } StatusNavBarTabButton { icon.name: "chat" tooltip.text: "Chat" badge.value: 100 } StatusSwitch { } StatusSwitch { text: "Switch with text" } StatusRadioButton { text: "Radio button 1" checked: true } StatusRadioButton { text: "Radio button 2 (clicking on this text will uncheck the above)" } StatusRadioButton { LayoutMirroring.enabled : true text: "Radio button 3 (forced right-to-left)" } StatusCheckBox {} StatusCheckBox { checkState: Qt.Checked} StatusCheckBox { text: "Check me on left side"} StatusCheckBox { text: "Check me on right side"; leftSide: false} StatusChatInfoButton { title: "Iuri Matias" subTitle: "Contact" asset.color: Theme.palette.miscColor7 asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 1 } Item { implicitWidth: 140 implicitHeight: 48 StatusChatInfoButton { title: "Iuri Matias elided" subTitle: "Very long subtitle should elide as well" asset.color: Theme.palette.miscColor7 asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 10 width: parent.width } } Item { implicitWidth: 100 implicitHeight: 48 StatusChatInfoButton { title: "Iuri Matias big not elided" subTitle: "Contact" asset.color: Theme.palette.miscColor7 asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 1 width: 400 } } StatusChatInfoButton { title: "group" subTitle: "Group Chat" pinnedMessagesCount: 1 asset.color: Theme.palette.miscColor7 type: StatusChatInfoButton.Type.GroupChat muted: true } StatusChatInfoButton { title: "community-channel" subTitle: "Community Chat" asset.color: Theme.palette.miscColor7 type: StatusChatInfoButton.Type.CommunityChat } StatusChatInfoButton { title: "public-chat-type" subTitle: "Some very long description text with hover disabled to see how the whole item wraps or elides" asset.color: Theme.palette.miscColor7 type: StatusChatInfoButton.Type.PublicChat pinnedMessagesCount: 3 hoverEnabled: false } StatusChatInfoButton { title: "No subtitle and no type" asset.color: Theme.palette.miscColor7 } StatusSlider { width: 360 from: 0 to: 100 value: 40 } StatusLabeledSlider { width: 360 model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")] } StatusLabeledSlider { width: 360 model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")] } StatusBanner { id: banner width: 360 topPadding: 20 type: StatusBanner.Type.Danger statusText: "Banner" } StatusProgressBar { id: progressBar text: "Weak" value: 0.5 fillColor : Theme.palette.pinColor1 } }