status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusQ): Making UI components resizable 

Needed for: https://github.com/status-im/status-desktop/issues/6071
This commit is contained in:
Alexandra Betouni 2022-06-24 19:24:39 +03:00
parent 84c529d58d
commit d9ced073ea
155 changed files with 1367 additions and 1322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
sandbox/DemoApp.qml
View File

@ -14,9 +14,9 @@ import "demoapp/data" 1.0
Rectangle {
id: demoApp
height: 602
width: 1002
border.width: 1
height: Theme.dp(602)
width: Theme.dp(1002)
border.width: Theme.dp(1)
border.color: Theme.palette.baseColor2
property string titleStyle: "osx"
@ -50,7 +50,7 @@ Rectangle {
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
anchors.margins: Theme.dp(13)
z: statusAppLayout.z + 1
visible: titleStyle === "osx"
}
@ -112,7 +112,7 @@ Rectangle {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
onClicked: {
if(model.sectionType === appSectionType.chat)
{
@ -143,7 +143,7 @@ Rectangle {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
onClicked: {
if(model.sectionType === appSectionType.community)
{
@ -175,7 +175,7 @@ Rectangle {
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
icon.width: Theme.dp(14)
iconRotation: 180
type: StatusMenuItem.Type.Danger
}

9
sandbox/ThemeSwitch.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: themeSwitchWrapper
@ -19,11 +20,11 @@ Item {
Row {
id: themeSwitch
spacing: 2
spacing: Theme.dp(2)
Text {
text: "🌤"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter
}
@ -35,13 +36,13 @@ Item {
text: "Toggle Theme"
visible: sensor.containsMouse
orientation: StatusToolTip.Orientation.Bottom
y: themeSwitchWrapper.y + 16
y: themeSwitchWrapper.y + Theme.dp(16)
}
}
Text {
text: "🌙"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter
}
}

32
sandbox/controls/Buttons.qml
View File

@ -8,12 +8,12 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Column {
spacing: 10
spacing: Theme.dp(10)
Grid {
id: buttonGridWidth
columns: 3
columnSpacing: 38
rowSpacing: 10
columns: Theme.dp(3)
columnSpacing: Theme.dp(38)
rowSpacing: Theme.dp(10)
horizontalItemAlignment: Grid.AlignHCenter
@ -196,22 +196,22 @@ Column {
// Rounded blue
StatusFlatRoundButton {
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
}
StatusFlatRoundButton {
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
loading: true
}
@ -220,24 +220,24 @@ Column {
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
width: Theme.dp(44)
height: Theme.dp(44)
icon.name: "info"
loading: true
}

44
sandbox/controls/Controls.qml
View File

@ -9,22 +9,22 @@ import Sandbox 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(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
font.pixelSize: Theme.dp(15)
width: Theme.dp(300)
multiline: true
}
StatusSelectableText {
color: Theme.palette.baseColor1
text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
font.pixelSize: 15
width: 200
font.pixelSize: Theme.dp(15)
width: Theme.dp(200)
}
StatusIconTabButton {
@ -57,21 +57,21 @@ GridLayout {
visible: parent.hovered
text: "Right"
orientation: StatusToolTip.Orientation.Right
x: parent.width + 16
x: parent.width + Theme.dp(16)
y: parent.height / 2 - height / 2 + 4
}
StatusToolTip {
visible: parent.hovered
text: "Bottom"
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
y: parent.height + Theme.dp(12)
}
StatusToolTip {
visible: parent.hovered
text: "Left"
orientation: StatusToolTip.Orientation.Left
x: -parent.width /2 -8
y: parent.height / 2 - height / 2 + 4
x: -parent.width /2 - Theme.dp(8)
y: parent.height / 2 - height / 2 + Theme.dp(4)
}
}
@ -95,7 +95,7 @@ GridLayout {
tooltip.text: "Profile"
badge.value: 0
badge.visible: true
badge.anchors.leftMargin:-16
badge.anchors.leftMargin:-Theme.dp(16)
}
StatusNavBarTabButton {
@ -131,8 +131,8 @@ GridLayout {
}
Item {
implicitWidth: 100
implicitHeight: 48
implicitWidth: Theme.dp(100)
implicitHeight: Theme.dp(48)
StatusChatInfoButton {
title: "Iuri Matias elided"
subTitle: "Contact"
@ -141,13 +141,13 @@ GridLayout {
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
width: 100
width: Theme.dp(100)
}
}
Item {
implicitWidth: 100
implicitHeight: 48
implicitWidth: Theme.dp(100)
implicitHeight: Theme.dp(48)
StatusChatInfoButton {
title: "Iuri Matias big not elided"
subTitle: "Contact"
@ -156,7 +156,7 @@ GridLayout {
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
width: 400
width: Theme.dp(400)
}
}
@ -183,26 +183,26 @@ GridLayout {
}
StatusSlider {
width: 360
width: Theme.dp(360)
from: 0
to: 100
value: 40
}
StatusLabeledSlider {
width: 360
width: Theme.dp(360)
model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
}
StatusLabeledSlider {
width: 360
width: Theme.dp(360)
model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
}
StatusBanner {
id: banner
width: 360
topPadding: 20
width: Theme.dp(360)
topPadding: Theme.dp(20)
type: StatusBanner.Type.Danger
statusText: "Banner"
}

5
sandbox/controls/Icons.qml
View File

@ -1,11 +1,12 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
GridLayout {
columns: 6
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
property color iconColor
Repeater {

46
sandbox/controls/Layout.qml
View File

@ -10,11 +10,11 @@ import StatusQ.Layout 0.1
import StatusQ.Popups 0.1
Column {
spacing: 10
spacing: Theme.dp(10)
StatusChatToolBar {
toolbarComponent: chatInfoButton1
width: 518
width: Theme.dp(518)
Component {
id: chatInfoButton1
@ -31,7 +31,7 @@ Column {
StatusChatToolBar {
toolbarComponent: chatInfoButton2
width: 518
width: Theme.dp(518)
Component {
id: chatInfoButton2
@ -51,7 +51,7 @@ Column {
StatusChatToolBar {
notificationCount: 1
toolbarComponent: chatInfoButton3
width: 518
width: Theme.dp(518)
Component {
id: chatInfoButton3
@ -70,7 +70,7 @@ Column {
StatusChatToolBar {
notificationCount: 1
toolbarComponent: tagSelector
width: 518
width: Theme.dp(518)
Component {
id: tagSelector
@ -107,6 +107,8 @@ Column {
Button {
id: btn
text: "Append"
width: Theme.dp(100)
height: Theme.dp(40)
onClicked: {
buttons.append({
name: "Test community",
@ -142,7 +144,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
}
}
@ -185,7 +187,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
}
communityNavBarButton: StatusNavBarTabButton {
@ -199,7 +201,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu {
@ -224,7 +226,7 @@ Column {
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
icon.width: Theme.dp(14)
iconRotation: 180
type: StatusMenuItem.Type.Danger
}
@ -270,7 +272,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
}
communityNavBarButton: StatusNavBarTabButton {
@ -284,7 +286,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu {
@ -309,8 +311,8 @@ Column {
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
icon.width: Theme.dp(14)
iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger
}
}
@ -360,7 +362,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
}
communityNavBarButton: StatusNavBarTabButton {
@ -374,7 +376,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu {
@ -399,8 +401,8 @@ Column {
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
icon.width: Theme.dp(14)
iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger
}
}
@ -455,7 +457,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
}
communityNavBarButton: StatusNavBarTabButton {
@ -469,7 +471,7 @@ Column {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu {
@ -494,15 +496,13 @@ Column {
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
icon.width: Theme.dp(14)
iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger
}
}
}
}
}
}

16
sandbox/controls/ListItems.qml
View File

@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusNavigationListItem {
title: "Menu Item"
@ -156,7 +156,7 @@ GridLayout {
subTitle: "Subtitle"
tertiaryTitle: "Tertiary title"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
statusListItemTitle.font.weight: Font.Bold
}
@ -166,7 +166,7 @@ GridLayout {
tertiaryTitle: "Tertiary title"
icon.name: "info"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
statusListItemTitle.font.weight: Font.Bold
}
@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
tagsModel : 2
tagsDelegate: StatusListItemTag {
color: "blue"
height: 24
radius: 6
height: Theme.dp(24)
radius: Theme.dp(6)
closeButtonVisible: false
icon.emoji: "😁"
icon.emojiSize: Emoji.size.verySmall
icon.isLetterIdenticon: true
title: "helloworld.eth"
titleText.font.pixelSize: 12
titleText.font.pixelSize: Theme.dp(12)
titleText.color: Theme.palette.indirectColor1
}
}
@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
subTitle: "Emoji"
icon.emoji: "😁"
icon.color: "yellow"
icon.letterSize: 14
icon.letterSize: Theme.dp(14)
icon.isLetterIdenticon: true
}

6
sandbox/controls/Others.qml
View File

@ -10,8 +10,8 @@ ColumnLayout {
Layout.fillHeight: true
columns: 6
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusLoadingIndicator {
color: Theme.palette.directColor4
@ -53,7 +53,7 @@ ColumnLayout {
StatusLetterIdenticon {
name: "A"
color: Theme.palette.userCustomizationColors[index]
letterSize: 16
letterSize: Theme.dp(16)
}
}
}

56
sandbox/controls/Popups.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
import StatusQ.Core.Utils 0.1
Column {
spacing: 20
spacing: Theme.dp(20)
StatusButton {
text: "Simple modal"
@ -144,11 +144,11 @@ Column {
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.width: 20
icon.height: 20
icon.width: Theme.dp(20)
icon.height: Theme.dp(20)
icon.name: "info"
}
@ -193,17 +193,17 @@ Column {
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.width: 20
icon.height: 20
icon.width: Theme.dp(20)
icon.height: Theme.dp(20)
icon.name: "info"
}
}
@ -218,7 +218,7 @@ Column {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -243,7 +243,7 @@ Column {
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -269,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -296,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -323,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -374,29 +374,29 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
showFooter: false
showAdvancedHeader: true
showAdvancedFooter: true
height: 200
height: Theme.dp(200)
advancedHeaderComponent: Rectangle {
width: parent.width
height: 50
height: Theme.dp(50)
color: Theme.palette.baseColor1
border.width: 1
border.width: Theme.dp(1)
StatusBaseText {
anchors.centerIn: parent
text: "Add any header here"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
}
advancedFooterComponent: Rectangle {
width: parent.width
height: 50
height: Theme.dp(50)
color: Theme.palette.baseColor1
border.width: 1
border.width: Theme.dp(1)
StatusBaseText {
anchors.centerIn: parent
text: "Add any footer here"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
@ -406,7 +406,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusModal {
id: floatingHeaderModal
anchors.centerIn: parent
height: 200
height: Theme.dp(200)
showHeader: false
showFooter: false
showAdvancedHeader: true
@ -417,14 +417,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
delegate: Rectangle {
width: button.width
height: button.height
radius: 8
radius: Theme.dp(8)
visible: visibleIndices.includes(index)
StatusButton {
id: button
topPadding: 8
topPadding: Theme.dp(8)
bottomPadding: 0
implicitHeight: 32
defaultLeftPadding: 4
implicitHeight: Theme.dp(32)
defaultLeftPadding: Theme.dp(4)
text: name
icon.emoji: !!emoji ? emoji: ""
icon.emojiSize: Emoji.size.middle
@ -437,7 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
}
}
popupMenuDelegate: StatusListItem {
implicitWidth: 272
implicitWidth: Theme.dp(272)
title: name
onClicked: floatingHeader.itemSelected(index)
visible: !visibleIndices.includes(index)

26
sandbox/demoapp/ChatChannelView.qml
View File

@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
ListView {
id: messageList
anchors.fill: parent
anchors.margins: 15
anchors.margins: Theme.dp(15)
clip: true
delegate: StatusMessage {
id: delegate
@ -34,8 +34,8 @@ ListView {
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
chatID: model.chatKey
profileImage: StatusImageSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
source: model.profileImage
isIdenticon: model.isIdenticon
}
@ -55,8 +55,8 @@ ListView {
amISender: model.isReply ? model.replyAmISender : ""
displayName: model.isReply ? model.replySenderName: ""
profileImage: StatusImageSettings {
width: 20
height: 20
width: Theme.dp(20)
height: Theme.dp(20)
source: model.isReply ? model.replyProfileImage: ""
isIdenticon: model.isReply ? model.replyIsIdenticon: ""
}
@ -67,23 +67,23 @@ ListView {
quickActions: [
StatusFlatRoundButton {
id: emojiBtn
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "reaction-b"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Add reaction"
},
StatusFlatRoundButton {
id: replyBtn
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "reply"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Reply"
},
StatusFlatRoundButton {
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "tiny/edit"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Edit"
@ -93,8 +93,8 @@ ListView {
},
StatusFlatRoundButton {
id: otherBtn
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "more"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "More"

12
sandbox/demoapp/CreateChatView.qml
View File

@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1
Page {
id: root
anchors.fill: parent
anchors.margins: 16
anchors.margins: Theme.dp(16)
property ListModel contactsModel: null
background: null
@ -19,13 +19,13 @@ Page {
width: parent.width
height: tagSelector.height
anchors.right: parent.right
anchors.rightMargin: 8
anchors.rightMargin: Theme.dp(8)
StatusTagSelector {
id: tagSelector
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.leftMargin: 17
Layout.leftMargin: Theme.dp(17)
maxHeight: root.height
toLabelText: qsTr("To: ")
warningText: qsTr("USER LIMIT REACHED")
@ -73,7 +73,7 @@ Page {
}
StatusButton {
implicitHeight: 44
implicitHeight: Theme.dp(44)
Layout.alignment: Qt.AlignTop
enabled: (tagSelector.namesModel.count > 0)
text: "Confirm"
@ -82,14 +82,14 @@ Page {
contentItem: Item {
anchors.fill: parent
anchors.topMargin: 68
anchors.topMargin: Theme.dp(68)
StatusBaseText {
visible: (contactsModel.count === 0)
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1
text: qsTr("You can only send direct messages to your Contacts. \n\n
Send a contact request to the person you would like to chat with, you will be\n able to

30
sandbox/demoapp/DemoCommunityDetailModal.qml
View File

@ -19,24 +19,24 @@ StatusModal {
width: root.width
StatusModalDivider {
bottomPadding: 8
bottomPadding: Theme.dp(8)
}
StatusBaseText {
text: "A community of cat lovers, meow!"
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
height: 46
font.pixelSize: Theme.dp(15)
height: Theme.dp(46)
color: Theme.palette.directColor1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.rightMargin: Theme.dp(16)
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
topPadding: Theme.dp(8)
bottomPadding: Theme.dp(8)
}
StatusDescriptionListItem {
@ -49,13 +49,13 @@ StatusModal {
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
topPadding: Theme.dp(8)
bottomPadding: Theme.dp(8)
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Members"
icon.name: "group-chat"
label: "184"
@ -79,13 +79,13 @@ StatusModal {
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
topPadding: Theme.dp(8)
bottomPadding: Theme.dp(8)
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Edit community"
icon.name: "edit"
type: StatusListItem.Type.Secondary
@ -93,7 +93,7 @@ StatusModal {
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Transfer ownership"
icon.name: "exchange"
type: StatusListItem.Type.Secondary
@ -101,7 +101,7 @@ StatusModal {
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Leave community"
icon.name: "arrow-right"
icon.rotation: 180

10
sandbox/demoapp/DemoContactRequestsModal.qml
View File

@ -11,18 +11,18 @@ StatusModal {
header.title: "Contact Requests"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.width: 20
icon.height: 20
icon.width: Theme.dp(20)
icon.height: Theme.dp(20)
icon.name: "notification"
}
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Contact request will be shown here"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}

18
sandbox/demoapp/StatusAppChatView.qml
View File

@ -20,26 +20,26 @@ StatusAppThreePanelLayout {
StatusNavigationPanelHeadline {
id: headline
anchors.top: parent.top
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter
text: "Chat"
}
RowLayout {
id: searchInputWrapper
width: 288
width: Theme.dp(288)
height: searchInput.height
anchors.top: headline.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter
StatusBaseInput {
id: searchInput
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
implicitHeight: 36
topPadding: 8
bottomPadding: 8
implicitHeight: Theme.dp(36)
topPadding: Theme.dp(8)
bottomPadding: Theme.dp(8)
placeholderText: "Search"
icon.name: "search"
}
@ -58,9 +58,9 @@ StatusAppThreePanelLayout {
Column {
anchors.top: searchInputWrapper.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter
spacing: 8
spacing: Theme.dp(8)
StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter
@ -174,7 +174,7 @@ StatusAppThreePanelLayout {
StatusMenuItem {
text: "Leave Chat"
icon.name: "arrow-right"
icon.width: 14
icon.width: Theme.dp(14)
iconRotation: 180
type: StatusMenuItem.Type.Danger
}

28
sandbox/demoapp/StatusAppCommunitiesPortalView.qml
View File

@ -21,11 +21,11 @@ ScrollView {
property ListModel tagsModel: Models.tagsModel
property string searchText: ""
property int layoutVMargin: 70
property int layoutHMargin: 64
property int titlePixelSize: 28
property int subtitlePixelSize: 17
property int stylePadding: 16
property int layoutVMargin: Theme.dp(70)
property int layoutHMargin: Theme.dp(64)
property int titlePixelSize: Theme.dp(28)
property int subtitlePixelSize: Theme.dp(17)
property int stylePadding: Theme.dp(16)
function navigateToCommunity(communityId) {
console.info("Clicked community ID: " + communityId)
@ -38,7 +38,7 @@ ScrollView {
ColumnLayout {
id: column
spacing: 18
spacing: Theme.dp(18)
StatusBaseText {
Layout.topMargin: d.layoutVMargin
@ -55,7 +55,7 @@ ScrollView {
visible: d.tagsModel.count > 0
Layout.leftMargin: d.layoutHMargin
Layout.rightMargin: d.layoutHMargin
width: 1234 // by design
width: Theme.dp(1234) // by design
spacing: d.stylePadding/2
Repeater {
@ -63,16 +63,16 @@ ScrollView {
delegate: StatusListItemTag {
border.color: Theme.palette.baseColor2
color: "transparent"
height: 32
radius: 36
height: Theme.dp(32)
radius: Theme.dp(36)
closeButtonVisible: false
icon.emoji: model.emoji
icon.height: 32
icon.width: icon.height
icon.height: Theme.dp(32)
icon.width: icon.heights
icon.color: "transparent"
icon.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 15
titleText.font.pixelSize: Theme.dp(15)
titleText.color: Theme.palette.primaryColor1
}
}
@ -80,7 +80,7 @@ ScrollView {
StatusBaseText {
Layout.leftMargin: d.layoutHMargin
Layout.topMargin: 20
Layout.topMargin: Theme.dp(20)
text: qsTr("Featured")
font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize
@ -119,7 +119,7 @@ ScrollView {
StatusBaseText {
Layout.leftMargin: d.layoutHMargin
Layout.topMargin: 20
Layout.topMargin: Theme.dp(20)
text: qsTr("Popular")
font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize

16
sandbox/demoapp/StatusAppCommunityView.qml
View File

@ -63,7 +63,7 @@ StatusAppThreePanelLayout {
id: scrollView
anchors.top: statusChatInfoToolBar.bottom
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.bottom: parent.bottom
width: leftPanel.width
@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
StatusChatListAndCategories {
id: communityCategories
width: leftPanel.width
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)
draggableItems: true
draggableCategories: false
@ -248,21 +248,21 @@ StatusAppThreePanelLayout {
anchors.topMargin:16
anchors.left: parent.left
anchors.leftMargin: 16
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
text: qsTr("Members")
}
ListView {
anchors.top: titleText.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.left: parent.left
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
anchors.right: parent.right
anchors.rightMargin: 8
anchors.rightMargin: Theme.dp(8)
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
anchors.bottomMargin: Theme.dp(16)
boundsBehavior: Flickable.StopAtBounds
model: Models.membersListModel
delegate: StatusMemberListItem {

8
sandbox/demoapp/StatusAppProfileSettingsView.qml
View File

@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
StatusNavigationPanelHeadline {
id: profileHeadline
anchors.top: parent.top
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter
text: "Profile"
}
ScrollView {
anchors.top: profileHeadline.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.bottom: parent.bottom
width: parent.width
@ -34,7 +34,7 @@ StatusAppTwoPanelLayout {
Column {
id: profileMenuItems
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
spacing: Theme.dp(4)
Repeater {
model: Models.demoProfileGeneralMenuItems
@ -56,7 +56,7 @@ StatusAppTwoPanelLayout {
Item {
id: invisibleSeparator
height: 16
height: Theme.dp(16)
width: parent.width
}

40
sandbox/main.qml
View File

@ -13,15 +13,14 @@ import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Platform 0.1
import StatusQ.Core.Utils 0.1
import "demoapp/data" 1.0
StatusWindow {
id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
: 1224
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
:840
width: Theme.screenWidth
height: Theme.screenHeight
visible: true
title: qsTr("StatusQ Documentation App")
@ -59,6 +58,11 @@ StatusWindow {
}
}
readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
onScaleRatioChanged: {
Theme.scaleFactor = scaleRatio;
}
StatusAppLayout {
id: appLayout
anchors.fill: parent
@ -81,7 +85,7 @@ StatusWindow {
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
badge.border.width: Theme.dp(2)
onClicked: {
stackView.clear()
if(model.sectionType === appSectionType.apiDocumentation)
@ -106,9 +110,9 @@ StatusWindow {
ThemeSwitch {
anchors.top: parent.top
anchors.topMargin: 32
anchors.topMargin: Theme.dp(32)
anchors.right: parent.right
anchors.rightMargin: 32
anchors.rightMargin: Theme.dp(32)
lightThemeEnabled: storeSettings.lightTheme
onLightThemeEnabledChanged: {
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
@ -138,13 +142,13 @@ StatusWindow {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
contentHeight: navigation.height + 56
contentHeight: navigation.height + Theme.dp(56)
contentWidth: navigation.width
clip: true
Column {
id: navigation
anchors.top: parent.top
anchors.topMargin: 48
anchors.topMargin: Theme.dp(48)
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
@ -338,7 +342,7 @@ StatusWindow {
ScrollView {
visible: !storeSettings.fillPage
anchors.fill: parent
anchors.topMargin: 64
anchors.topMargin: Theme.dp(64)
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
contentWidth: (pageWrapper.width * rootWindow.factor)
clip: true
@ -367,7 +371,7 @@ StatusWindow {
Loader {
active: storeSettings.fillPage
anchors.fill: parent
anchors.topMargin: 64
anchors.topMargin: Theme.dp(64)
visible: storeSettings.fillPage
clip: true
@ -411,12 +415,12 @@ StatusWindow {
id: platformSwitch
anchors.left: demoApp.left
anchors.bottom: demoApp.top
anchors.bottomMargin: 20
spacing: 2
anchors.bottomMargin: Theme.dp(20)
spacing: Theme.dp(2)
Text {
text: "OSX"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter
}
@ -432,7 +436,7 @@ StatusWindow {
Text {
text: "Win"
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter
}
}
@ -444,8 +448,8 @@ StatusWindow {
anchors.fill: demoApp
source: demoApp
horizontalOffset: 0
verticalOffset: 5
radius: 20
verticalOffset: Theme.dp(5)
radius: Theme.dp(20)
samples: 20
color: "#22000000"
}
@ -455,7 +459,7 @@ StatusWindow {
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
anchors.margins: Theme.dp(13)
visible: Qt.platform.os == "osx"

4
sandbox/pages/StatusAccountSelectorPage.qml
View File

@ -7,10 +7,10 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Core.Utils 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusAccountSelector {
id: accountSelector

3
sandbox/pages/StatusAddressPage.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import Sandbox 0.1
@ -14,7 +15,7 @@ Column {
}
Item {
width: 200
width: Theme.dp(200)
height: childrenRect.height
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"

4
sandbox/pages/StatusChatInfoToolBarPage.qml
View File

@ -8,8 +8,8 @@ import StatusQ.Popups 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusChatInfoToolBar {
chatInfoButton.title: "Cryptokitties"

12
sandbox/pages/StatusColorSelectorGridPage.qml
View File

@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1
Item {
id: root
width: 800
height: 100
width: Theme.dp(800)
height: Theme.dp(100)
Row {
id: selectedColor
anchors.top: parent.top
anchors.left: colorSelectionGrid.left
spacing: 10
spacing: Theme.dp(10)
StatusBaseText {
text: "SelectedColor is"
}
Rectangle {
width: 100
height: 20
width: Theme.dp(100)
height: Theme.dp(20)
radius: width/2
color: colorSelectionGrid.selectedColor
}
@ -28,7 +28,7 @@ Item {
StatusColorSelectorGrid {
id: colorSelectionGrid
anchors.top: selectedColor.bottom
anchors.topMargin: 10
anchors.topMargin: Theme.dp(10)
anchors.horizontalCenter: parent.horizontalCenter
titleText: "COLOR"
selectedColorIndex: 2

2
sandbox/pages/StatusColorSelectorPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusColorSelector {
model: ["red", "blue", "green"]

6
sandbox/pages/StatusColorSpacePage.qml
View File

@ -90,14 +90,14 @@ Item {
Rectangle {
color: colorSpace.color
implicitHeight: 48
radius: 10
implicitHeight: Theme.dp(48)
radius: Theme.dp(10)
Layout.fillWidth: true
StatusBaseText {
anchors.centerIn: parent
color: Theme.palette.white
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
text: "Quick brown fox jumps over the lazy dog"
}
}

5
sandbox/pages/StatusCommunityCardPage.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.0
import QtQuick.Layouts 1.13
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import "../demoapp/data" 1.0
@ -17,8 +18,8 @@ GridLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
columns: 2
columnSpacing: 28
rowSpacing: 28
columnSpacing: Theme.dp(28)
rowSpacing: Theme.dp(28)
Repeater {
model: Models.curatedCommunitiesModel

12
sandbox/pages/StatusCommunityTagsPage.qml
View File

@ -27,9 +27,9 @@ Item {
ColumnLayout {
id: column
anchors.centerIn: parent
width: 600
height: 500
spacing: 20
width: Theme.dp(600)
height: Theme.dp(500)
spacing: Theme.dp(20)
StatusInput {
id: tagsFilter
@ -55,14 +55,14 @@ Item {
RowLayout {
StatusBaseText {
text: qsTr("Selected tags")
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
Layout.fillWidth: true
}
StatusBaseText {
text: cntSelectedTags + "/" + maxSelectedTags
color: Theme.palette.baseColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
}
}
@ -80,4 +80,4 @@ Item {
Layout.fillHeight: true
}
}
}
}

20
sandbox/pages/StatusExpandableSettingsItemPage.qml
View File

@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Column {
spacing: 12
width: 800
spacing: Theme.dp(12)
width: Theme.dp(800)
anchors.top:parent.top
leftPadding: 20
rightPadding: 20
leftPadding: Theme.dp(20)
rightPadding: Theme.dp(20)
Rectangle {
width: parent.width
height: 30
height: Theme.dp(30)
color: Theme.palette.baseColor2
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
@ -60,7 +60,7 @@ Column {
Rectangle {
width: parent.width
height: 30
height: Theme.dp(30)
color: Theme.palette.baseColor2
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
@ -103,7 +103,7 @@ Column {
Rectangle {
width: parent.width
height: 30
height: Theme.dp(30)
color: Theme.palette.baseColor2
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
@ -134,15 +134,15 @@ Column {
id: notImplemented
Rectangle {
anchors.centerIn: parent
width: 654
width: Theme.dp(654)
height: infoText.implicitHeight
color: Theme.palette.baseColor5
StatusBaseText {
id: infoText
anchors.centerIn: parent
color: Theme.palette.directColor4
font.pixelSize: 15
lineHeight: 22
font.pixelSize: Theme.dp(15)
lineHeight: Theme.dp(22)
lineHeightMode: Text.FixedHeight
font.weight: Font.Medium
text: qsTr("Not Implemented")

27
sandbox/pages/StatusInputPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusInput {
input.placeholderText: "Placeholder"
@ -58,17 +58,17 @@ Column {
}
Item {
implicitWidth: 480
implicitHeight: 82
implicitWidth: Theme.dp(480)
implicitHeight: Theme.dp(82)
z: 100000
StatusSeedPhraseInput {
id: statusSeedInput
anchors.left: parent.left
anchors.right: parent.right
height: parent.height
textEdit.input.anchors.leftMargin: 16
textEdit.input.anchors.rightMargin: 16
textEdit.input.anchors.topMargin: 11
textEdit.input.anchors.leftMargin: Theme.dp(16)
textEdit.input.anchors.rightMargin: Theme.dp(16)
textEdit.input.anchors.topMargin: Theme.dp(11)
textEdit.label: "Input with drop down selection list"
leftComponentText: "1"
inputList: ListModel {
@ -97,8 +97,8 @@ Column {
StatusInput {
label: "StatusInput"
secondaryLabel: "with right icon"
input.icon.width: 15
input.icon.height: 11
input.icon.width: Theme.dp(15)
input.icon.height: Theme.dp(11)
input.icon.name: text !== "" ? "checkmark" : ""
input.leftIcon: false
}
@ -107,7 +107,7 @@ Column {
label: "Label"
secondaryLabel: "secondary label"
input.placeholderText: "Placeholder"
input.implicitHeight: 56
input.implicitHeight: Theme.dp(56)
}
StatusInput {
@ -148,7 +148,7 @@ Column {
input.placeholderText: "Input width component (right side)"
input.rightComponent: StatusIcon {
icon: "cancel"
height: 16
height: Theme.dp(16)
color: Theme.palette.dangerColor1
}
}
@ -162,14 +162,14 @@ Column {
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with static height"
input.implicitHeight: 100
input.implicitHeight: Theme.dp(100)
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with max/min"
input.minimumHeight: 80
input.maximumHeight: 200
input.minimumHeight: Theme.dp(80)
input.maximumHeight: Theme.dp(200)
}
StatusInput {
@ -200,6 +200,7 @@ Column {
StatusInput {
label: "Input with inline token selector"
input.leftComponent: StatusTokenInlineSelector {
anchors.verticalCenter: parent.verticalCenter
tokens: [{amount: 0.1, token: "ETH"},
{amount: 10, token: "SNT"},
{amount: 15, token: "MANA"}]

12
sandbox/pages/StatusListPickerPage.qml
View File

@ -11,14 +11,14 @@ import "../demoapp/data" 1.0
GridLayout {
id: root
columns: 1
rowSpacing: 150
rowSpacing: Theme.dp(150)
GridLayout {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
rows: 4
columns: 2
rowSpacing: 170
columnSpacing: 150
rowSpacing: Theme.dp(170)
columnSpacing: Theme.dp(150)
z: 100
StatusListPicker {
id: languagePicker
@ -56,15 +56,15 @@ GridLayout {
StatusBaseText {
id: pageDesc
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
height: 100
width: 500
height: Theme.dp(100)
width: Theme.dp(500)
text: "4 different configurations for the `StatusListPicker` component:\n
* Single selection. \n
* Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
* Multiple selection.\n
* Multiple selection and displayed name is the symbol + shortName\n"
color: Theme.palette.baseColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
}
// Outsite area

3
sandbox/pages/StatusMacNotificationPage.qml
View File

@ -3,11 +3,12 @@ import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Platform 0.1
import StatusQ.Core.Theme 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusMacNotification {
name: "Some name"

5
sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
View File

@ -1,10 +1,11 @@
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusPasswordStrengthIndicator {
id: veryweakPw

20
sandbox/pages/StatusPinInputPage.qml
View File

@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
Column {
id: root
spacing: 25
spacing: Theme.dp(25)
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
// PIN input that accepts only numbers
@ -16,7 +16,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Enter Keycard PIN"
font.pixelSize: 30
font.pixelSize: Theme.dp(30)
font.bold: true
}
@ -30,23 +30,23 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.dangerColor1
text: "Only numbers allowed"
font.pixelSize: 16
font.pixelSize: Theme.dp(16)
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Introduced PIN: " + numbersPinInput.pinInput
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
}
// PIN input that accepts input depending on the regular expression definition
StatusBaseText {
topPadding: 100
topPadding: Theme.dp(100)
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Enter another Keycard PIN"
font.pixelSize: 30
font.pixelSize: Theme.dp(30)
font.bold: true
}
@ -54,8 +54,8 @@ Column {
id: regexPinInput
anchors.horizontalCenter: parent.horizontalCenter
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
circleDiameter: 22
circleSpacing: 22
circleDiameter: Theme.dp(22)
circleSpacing: Theme.dp(22)
pinLen: 7
}
@ -63,13 +63,13 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.dangerColor1
text: "Only alphanumeric characters and '@' allowed"
font.pixelSize: 16
font.pixelSize: Theme.dp(16)
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Introduced PIN: " + regexPinInput.pinInput
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
}
}

4
sandbox/pages/StatusPopupMenuPage.qml
View File

@ -9,8 +9,8 @@ import StatusQ.Popups 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusButton {
text: "Simple"

2
sandbox/pages/StatusSelectPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusSelect {
id: select

2
sandbox/pages/StatusTabBarButtonPage.qml
View File

@ -7,7 +7,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusTabBar {
StatusTabButton {

2
sandbox/pages/StatusTabBarIconButtonPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
Row {
StatusTabBarIconButton {

5
sandbox/pages/StatusTabSwitchPage.qml
View File

@ -3,11 +3,12 @@ import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
columnSpacing: Theme.dp(5)
rowSpacing: Theme.dp(5)
StatusSwitchTabBar {
StatusSwitchTabButton {

5
sandbox/pages/StatusTagSelectorPage.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.14
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
@ -56,8 +57,8 @@ Item {
StatusTagSelector {
id: tagSelector
width: 650
height: 44
width: Theme.dp(650)
height: Theme.dp(44)
anchors.centerIn: parent
namesModel: root.asortedContacts
toLabelText: qsTr("To: ")

3
sandbox/pages/StatusToastMessagePage.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.14
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
@ -9,7 +10,7 @@ Item {
Column {
id: toastArea
anchors.centerIn: parent
spacing: 8
spacing: Theme.dp(8)
Repeater {
id: toastRepeater
width: parent.width

2
sandbox/pages/StatusWalletColorButtonPage.qml
View File

@ -11,7 +11,7 @@ Column {
spacing: 8
Row {
spacing: 4
spacing: Theme.dp(4)
StatusWalletColorButton {
icon.color: Theme.palette.miscColor1
selected: true

2
sandbox/pages/StatusWalletColorSelectPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: Theme.dp(8)
StatusWalletColorSelect {
model: Theme.palette.userCustomizationColors

10
sandbox/pages/StatusWizardStepperPage.qml
View File

@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
Item {
id: root
width: 800
height: 100
width: Theme.dp(800)
height: Theme.dp(100)
//Simulate animation between steps
property bool stepsCompleted: false
@ -44,7 +44,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Press Ctrl+R to run the animation"
font.pixelSize: 17
font.pixelSize: Theme.dp(17)
}
SequentialAnimation {
@ -91,9 +91,9 @@ Item {
StatusWizardStepper {
id: wizardStepper
width: (parent.width - 50)
width: (parent.width - Theme.dp(50))
anchors.top: indicLabel.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter
stepsModel: stepsListModel
}

2
src/StatusQ/Components/StatusAddress.qml
View File

@ -13,7 +13,7 @@ StatusBaseText {
property real maxWidth: width
font.family: Theme.palette.monoFont.name
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
elide: Text.ElideMiddle
color: Theme.palette.baseColor1

16
src/StatusQ/Components/StatusBadge.qml
View File

@ -7,18 +7,18 @@ Rectangle {
property int value
implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width
implicitHeight: statusBadge.value > 0 ? Theme.dp(18) + statusBadge.border.width : Theme.dp(10) + statusBadge.border.width
implicitWidth: {
if (statusBadge.value > 99) {
return 28 + statusBadge.border.width
if (statusBadge.value > Theme.dp(99)) {
return Theme.dp(28) + statusBadge.border.width
}
if (statusBadge.value > 9) {
return 26 + statusBadge.border.width
if (statusBadge.value > Theme.dp(9)) {
return Theme.dp(26) + statusBadge.border.width
}
if (statusBadge.value > 0) {
return 18 + statusBadge.border.width
return Theme.dp(18) + statusBadge.border.width
}
return 10 + statusBadge.border.width
return Theme.dp(10) + statusBadge.border.width
}
radius: height / 2
color: Theme.palette.primaryColor1
@ -26,7 +26,7 @@ Rectangle {
StatusBaseText {
id: value
visible: statusBadge.value > 0
font.pixelSize: statusBadge.value > 99 ? 10 : 12
font.pixelSize: statusBadge.value > Theme.dp(99) ? Theme.dp(10) : Theme.dp(12)
font.weight: Font.Medium
color: Theme.palette.statusBadge.foregroundColor
anchors.centerIn: parent

13
src/StatusQ/Components/StatusChatInfoToolBar.qml
View File

@ -3,12 +3,13 @@ import QtGraphicalEffects 1.13
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Core.Theme 0.1
Item {
id: statusChatInfoToolBar
implicitWidth: 288
implicitHeight: 56
implicitWidth: Theme.dp(288)
implicitHeight: Theme.dp(56)
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: statusMenuButton
@ -27,7 +28,7 @@ Item {
id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
anchors.right: (implicitWidth > parent.width - Theme.dp(50)) ? statusMenuButton.left : undefined
anchors.rightMargin: 5
type: StatusChatInfoButton.Type.OneToOneChat
onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
@ -39,8 +40,8 @@ Item {
anchors.verticalCenter: parent.verticalCenter
visible: popupMenuSlot.active
width: visible ? 32 : 0
height: 32
width: visible ? Theme.dp(32) : 0
height: Theme.dp(32)
type: StatusRoundButton.Type.Secondary
icon.name: "add"
@ -89,7 +90,7 @@ Item {
onClicked: {
statusChatInfoToolBar.addButtonClicked(mouse)
statusMenuButton.state = "pressed"
popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + Theme.dp(4))
}
Loader {

4
src/StatusQ/Components/StatusChatList.qml
View File

@ -11,8 +11,8 @@ import StatusQ.Controls 0.1
Column {
id: statusChatList
spacing: 4
width: 288
spacing: Theme.dp(4)
width: Theme.dp(288)
property string categoryId: ""
property var model: null

3
src/StatusQ/Components/StatusChatListAndCategories.qml
View File

@ -6,6 +6,7 @@ import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: statusChatListAndCategories
@ -64,7 +65,7 @@ Item {
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
spacing: Theme.dp(4)
StatusChatList {
id: statusChatList

16
src/StatusQ/Components/StatusChatListCategoryItem.qml
View File

@ -8,11 +8,11 @@ import StatusQ.Components 0.1
StatusListItem {
id: statusChatListCategoryItem
implicitWidth: 288
implicitHeight: 28
implicitWidth: Theme.dp(288)
implicitHeight: Theme.dp(28)
leftPadding: 8
rightPadding: 8
leftPadding: Theme.dp(8)
rightPadding: Theme.dp(8)
property bool opened: true
property bool highlighted: false
@ -32,13 +32,13 @@ StatusListItem {
statusListItemTitle.color: Theme.palette.directColor4
statusListItemTitle.font.weight: Font.Medium
statusListItemComponentsSlot.spacing: 1
statusListItemComponentsSlot.spacing: Theme.dp(1)
components: [
StatusChatListCategoryItemButton {
id: addButton
icon.name: "add"
icon.width: 20
icon.width: Theme.dp(20)
visible: statusChatListCategoryItem.showAddButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
@ -48,7 +48,7 @@ StatusListItem {
StatusChatListCategoryItemButton {
id: menuButton
icon.name: "more"
icon.width: 21
icon.width: Theme.dp(21)
visible: statusChatListCategoryItem.showMenuButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
@ -58,7 +58,7 @@ StatusListItem {
StatusChatListCategoryItemButton {
id: toggleButton
icon.name: "chevron-down"
icon.width: 18
icon.width: Theme.dp(18)
icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
onPressed: {
sensor.enabled = false;

28
src/StatusQ/Components/StatusChatListItem.qml
View File

@ -22,12 +22,12 @@ Rectangle {
property int notificationsCount: 0
property bool muted: false
property StatusImageSettings image: StatusImageSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
}
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
color: Theme.palette.miscColor5
emoji: ""
charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
@ -53,10 +53,10 @@ Rectangle {
CommunityChat // 6
}
implicitWidth: 288
implicitHeight: 40
implicitWidth: Theme.dp(288)
implicitHeight: Theme.dp(40)
radius: 8
radius: Theme.dp(8)
color: {
if (selected) {
@ -93,10 +93,10 @@ Rectangle {
StatusIcon {
id: statusIcon
anchors.left: identicon.right
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
anchors.verticalCenter: parent.verticalCenter
width: 14
width: Theme.dp(14)
visible: root.type !== StatusChatListItem.Type.OneToOneChat
opacity: {
if (root.muted && !hoverHander.hovered && !root.highlighted) {
@ -133,7 +133,7 @@ Rectangle {
anchors.leftMargin: statusIcon.visible ? 1 : 8
anchors.right: mutedIcon.visible ? mutedIcon.left :
statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 6
anchors.rightMargin: Theme.dp(6)
anchors.verticalCenter: parent.verticalCenter
text: (root.type === StatusChatListItem.Type.PublicChat &&
@ -158,7 +158,7 @@ Rectangle {
root.notificationsCount > 0 ||
root.highlightWhenCreated ||
statusBadge.visible) ? Font.Bold : Font.Medium
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
}
StatusIcon {
@ -166,7 +166,7 @@ Rectangle {
anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
width: 14
width: Theme.dp(14)
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
visible: root.muted
@ -190,10 +190,10 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
anchors.rightMargin: Theme.dp(8)
color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.width: Theme.dp(4)
border.color: color
value: root.notificationsCount
visible: root.notificationsCount > 0

26
src/StatusQ/Components/StatusChatToolBar.qml
View File

@ -13,7 +13,7 @@ Item {
property alias membersButton: membersButton
property alias searchButton: searchButton
property int padding: 8
property int padding: Theme.dp(8)
property int notificationCount: 0
property Component popupMenu
property var toolbarComponent
@ -24,8 +24,8 @@ Item {
signal membersButtonClicked()
signal searchButtonClicked()
implicitWidth: 518
implicitHeight: 60
implicitWidth: Theme.dp(518)
implicitHeight: Theme.dp(60)
onPopupMenuChanged: {
if (!!popupMenu) {
@ -55,8 +55,8 @@ Item {
StatusFlatRoundButton {
id: searchButton
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "search"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.searchButtonClicked()
@ -64,13 +64,13 @@ Item {
// initializing the tooltip
tooltip.text: qsTr("Search")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
tooltip.y: parent.height + Theme.dp(12)
}
StatusFlatRoundButton {
id: membersButton
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "group-chat"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.membersButtonClicked()
@ -83,8 +83,8 @@ Item {
StatusFlatRoundButton {
id: menuButton
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: "more"
type: StatusFlatRoundButton.Type.Secondary
visible: !!statusChatToolBar.popupMenu
@ -93,7 +93,7 @@ Item {
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
tooltip.text: qsTr("More")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
tooltip.y: parent.height + Theme.dp(12)
property bool showMoreMenu: false
onClicked: {
@ -127,8 +127,8 @@ Item {
}
Rectangle {
height: 24
width: 1
height: Theme.dp(24)
width: Theme.dp(1)
color: Theme.palette.directColor7
Layout.alignment: Qt.AlignVCenter
visible: notificationButton.visible &&

4
src/StatusQ/Components/StatusColorSpace.qml
View File

@ -54,8 +54,8 @@ Item {
rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
}
implicitWidth: 340
implicitHeight: 340
implicitWidth: Theme.dp(340)
implicitHeight: Theme.dp(340)
QtObject {
id: d

136
src/StatusQ/Components/StatusCommunityCard.qml
View File

@ -130,13 +130,13 @@ Rectangle {
QtObject {
id: d
property int cardWidth: 335
property int bannerHeigth: 64
property int cardHeigth: 190
property int totalHeigth: 230
property int margins: 12
property int bannerRadius: 20
property int cardRadius: 16
property int cardWidth: Theme.dp(335)
property int bannerHeigth: Theme.dp(64)
property int cardHeigth: Theme.dp(190)
property int totalHeigth: Theme.dp(230)
property int margins: Theme.dp(12)
property int bannerRadius: Theme.dp(20)
property int cardRadius: Theme.dp(16)
property color cardColor: Theme.palette.indirectColor1
property color fontColor: Theme.palette.directColor1
property color loadingColor1: Theme.palette.baseColor5
@ -168,8 +168,8 @@ Rectangle {
layer.effect: DropShadow {
source: root
horizontalOffset: 0
verticalOffset: 2
radius: sensor.containsMouse ? 30 : d.bannerRadius
verticalOffset: Theme.dp(2)
radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius
samples: 25
spread: 0
color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
@ -207,10 +207,10 @@ Rectangle {
Rectangle {
z: content.z + 1
anchors.top: parent.top
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.left: parent.left
anchors.leftMargin: 12
width: 48
anchors.leftMargin: Theme.dp(12)
width: Theme.dp(48)
height: width
radius: width / 2
color: root.loaded ? d.cardColor : d.loadingColor1
@ -218,7 +218,7 @@ Rectangle {
StatusRoundedImage {
visible: root.loaded
anchors.centerIn: parent
width: parent.width - 4
width: parent.width - Theme.dp(4)
height: width
image.source: root.logo
color: "transparent"
@ -231,7 +231,7 @@ Rectangle {
z: banner.z + 1
visible: root.loaded
anchors.top: parent.top
anchors.topMargin: 40
anchors.topMargin: Theme.dp(40)
width: d.cardWidth
height: d.cardHeigth
color: d.cardColor
@ -241,27 +241,27 @@ Rectangle {
Rectangle {
visible: root.isPrivate
anchors.top: parent.top
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.right: parent.right
anchors.rightMargin: anchors.topMargin
width: 48
height: 24
width: Theme.dp(48)
height: Theme.dp(24)
color: d.loadingColor2
radius: 200
radius: Theme.dp(200)
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 6
anchors.left: parent.left
icon: "tiny/unlocked"
width: 16
height: 16
width: Theme.dp(16)
height: Theme.dp(16)
color: Theme.palette.baseColor1
}
StatusRoundedImage {
anchors.rightMargin: 2
anchors.rightMargin: Theme.dp(2)
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: 20
width: Theme.dp(20)
height: width
image.source: root.tokenLogo
color: "transparent"
@ -270,24 +270,24 @@ Rectangle {
// Community info
ColumnLayout {
anchors.fill: parent
anchors.topMargin: 32
anchors.topMargin: Theme.dp(32)
anchors.leftMargin: d.margins
anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins
clip: true
spacing: 6
spacing: Theme.dp(6)
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: root.name
font.weight: Font.Bold
font.pixelSize: 19
font.pixelSize: Theme.dp(19)
color: d.fontColor
}
StatusBaseText {
Layout.fillWidth: true
Layout.fillHeight: true
text: root.description
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
lineHeight: 1.2
color: d.fontColor
maximumLineCount: 2
@ -298,48 +298,48 @@ Rectangle {
}
ColumnLayout {
anchors.fill: parent
anchors.topMargin: 116
anchors.topMargin: Theme.dp(116)
anchors.leftMargin: d.margins
anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins
clip: true
spacing: 18
spacing: Theme.dp(18)
Row {
Layout.alignment: Qt.AlignVCenter
spacing: 20
spacing: Theme.dp(20)
// Members
Row {
height: membersTxt.height
spacing: 4
spacing: Theme.dp(4)
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
icon: "tiny/members"
width: 16
height: 16
width: Theme.dp(16)
height: Theme.dp(16)
}
StatusBaseText {
id: membersTxt
Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.members)
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: d.fontColor
}
}
// Active users:
Row {
height: activeUsersTxt.height
spacing: 4
spacing: Theme.dp(4)
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
icon: "tiny/flash"
width: 14
height: 14
width: Theme.dp(14)
height: Theme.dp(14)
}
StatusBaseText {
id: activeUsersTxt
Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.activeUsers)
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: d.fontColor
}
}
@ -349,7 +349,7 @@ Rectangle {
visible: root.categories.count > 0
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
spacing: 8
spacing: Theme.dp(8)
clip: true
Repeater {
@ -357,16 +357,16 @@ Rectangle {
delegate: StatusListItemTag {
border.color: Theme.palette.baseColor2
color: "transparent"
height: 24
radius: 20
height: Theme.dp(24)
radius: Theme.dp(20)
closeButtonVisible: false
icon.emoji: model.emoji
icon.height: 24
icon.height: Theme.dp(24)
icon.width: icon.height
icon.color: "transparent"
icon.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 13
titleText.font.pixelSize: Theme.dp(13)
titleText.color: d.fontColor
}
}
@ -378,7 +378,7 @@ Rectangle {
Rectangle {
visible: !root.loaded
anchors.top: parent.top
anchors.topMargin: 40
anchors.topMargin: Theme.dp(40)
width: d.cardWidth
height: d.cardHeigth
color: d.cardColor
@ -386,48 +386,48 @@ Rectangle {
clip: true
Rectangle {
anchors.top: parent.top
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.right: parent.right
anchors.rightMargin: anchors.topMargin
width: 48
height: 24
width: Theme.dp(48)
height: Theme.dp(24)
color: d.loadingColor2
radius: 200
radius: Theme.dp(200)
}
ColumnLayout {
anchors.fill: parent
anchors.topMargin: 32
anchors.topMargin: Theme.dp(32)
anchors.margins: d.margins
clip: true
spacing: 9
spacing: Theme.dp(9)
Rectangle {
width: 84
height: 16
width: Theme.dp(84)
height: Theme.dp(16)
color: d.loadingColor1
radius: 5
radius: Theme.dp(5)
}
Rectangle {
width: 311
height: 16
width: Theme.dp(311)
height: Theme.dp(16)
color: d.loadingColor1
radius: 5
radius: Theme.dp(5)
}
Rectangle {
width: 271
height: 16
width: Theme.dp(271)
height: Theme.dp(16)
color: d.loadingColor1
radius: 5
radius: Theme.dp(5)
}
Row {
Layout.topMargin: 22 - 9
spacing: 16
Layout.topMargin: Theme.dp(13)
spacing: Theme.dp(16)
Repeater {
model: 2
delegate: Row {
spacing: 4
spacing: Theme.dp(4)
Rectangle {
width: 14
height: 14
width: Theme.dp(14)
height: Theme.dp(14)
color: d.loadingColor1
radius: width / 2
}
@ -441,16 +441,16 @@ Rectangle {
}
}
Row {
Layout.topMargin: 21 - 9
spacing: 8
Layout.topMargin: Theme.dp(12)
spacing: Theme.dp(8)
Repeater {
model: 3
delegate:
Rectangle {
width: 76
height: 24
width: Theme.dp(76)
height: Theme.dp(24)
color: d.loadingColor2
radius: 20
radius: Theme.dp(20)
}
}
}

7
src/StatusQ/Components/StatusCommunityTags.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
@ -28,7 +29,7 @@ Item {
}
return Math.min(parent.width, itemsWidth);
}
spacing: 10
spacing: Theme.dp(10)
Repeater {
id: repeater
@ -38,11 +39,11 @@ Item {
name: model.name
visible: (root.showOnlySelected ? model.selected : !model.selected) &&
(filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
width: visible ? implicitWidth : -10
width: visible ? implicitWidth : -Theme.dp(10)
height: visible ? implicitHeight : 0
removable: root.showOnlySelected && root.active
onClicked: root.clicked(model)
}
}
}
}
}

6
src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml
View File

@ -5,8 +5,8 @@ import StatusQ.Components 0.1
StatusListItem {
id: statusContactRequestsListItem
implicitHeight: 64
implicitWidth: 288
implicitHeight: Theme.dp(64)
implicitWidth: Theme.dp(288)
color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
@ -17,7 +17,7 @@ StatusListItem {
visible: statusContactRequestsListItem.requestsCount > 0
value: statusContactRequestsListItem.requestsCount
anchors.verticalCenter: parent.verticalCenter
border.width: 4
border.width: Theme.dp(4)
border.color: color
},
StatusIcon {

10
src/StatusQ/Components/StatusContactVerificationIcons.qml
View File

@ -15,8 +15,8 @@ Row {
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
width: Theme.dp(10)
height: Theme.dp(10)
color: Theme.palette.primaryColor1
}
// Only used to get implicit width and height from the actual image
@ -33,8 +33,8 @@ Row {
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
width: Theme.dp(10)
height: Theme.dp(10)
color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
}
// Only used to get implicit width and height from the actual image
@ -50,7 +50,7 @@ Row {
Untrustworthy //2
}
spacing: 4
spacing: Theme.dp(4)
visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
StatusRoundIcon {

34
src/StatusQ/Components/StatusDescriptionListItem.qml
View File

@ -11,16 +11,16 @@ Rectangle {
property alias subTitleComponent: statusDescriptionListItemSubTitle
property string value: ""
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
width: Theme.dp(23)
height: Theme.dp(23)
}
property alias tooltip: statusToolTip
property alias iconButton: statusFlatRoundButton
property alias sensor: sensor
implicitWidth: 448
implicitHeight: 56
radius: 8
implicitWidth: Theme.dp(448)
implicitHeight: Theme.dp(56)
radius: Theme.dp(8)
color: Theme.palette.statusListItem.backgroundColor
@ -35,12 +35,12 @@ Rectangle {
id: statusDescriptionListItemTitle
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 5
anchors.leftMargin: Theme.dp(16)
anchors.topMargin: Theme.dp(5)
color: Theme.palette.baseColor1
text: statusDescriptionListItem.title
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
font.weight: Font.Medium
}
@ -48,12 +48,12 @@ Rectangle {
id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 4
anchors.leftMargin: Theme.dp(16)
anchors.topMargin: Theme.dp(4)
text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
font.weight: Font.Normal
}
@ -62,10 +62,10 @@ Rectangle {
visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
@ -78,15 +78,15 @@ Rectangle {
Row {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
visible: !!statusDescriptionListItem.value
spacing: 8
spacing: Theme.dp(8)
StatusBaseText {
text: statusDescriptionListItem.value
color: Theme.palette.baseColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter
}

8
src/StatusQ/Components/StatusEmoji.qml
View File

@ -1,14 +1,16 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Image {
id: root
property string emojiId: ""
width: 14
height: 14
width: Theme.dp(14)
height: Theme.dp(14)
sourceSize.width: width
sourceSize.height: height
@ -16,4 +18,4 @@ Image {
mipmap: true
antialiasing: true
source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
}
}

74
src/StatusQ/Components/StatusExpandableItem.qml
View File

@ -19,18 +19,18 @@ Rectangle {
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
color: Theme.palette.primaryColor2
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
}
enum Type {
@ -39,7 +39,7 @@ Rectangle {
Tertiary // 2
}
implicitWidth: 718
implicitWidth: Theme.dp(718)
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
color: "transparent"
@ -52,7 +52,7 @@ Rectangle {
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: 1
height: Theme.dp(1)
color: Theme.palette.baseColor2
visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
@ -63,16 +63,16 @@ Rectangle {
id: header
anchors.top: parent.top
width: parent.width
height: 64
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
height: Theme.dp(64)
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0
color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
StatusSmartIdenticon {
id: identicon
anchors.top: parent.top
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25)
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11)
image: statusExpandableItem.image
icon: statusExpandableItem.icon
name: primaryText.text
@ -83,20 +83,20 @@ Rectangle {
id: primaryText
anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ||
(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17)
anchors.left: identicon.active ? identicon.right : parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16
anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16)
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
parent.width - icon.background.width - additionalText.contentWidth - 110) :
(button.visible ? parent.width - icon.background.width - button.width - 70 :
parent.width - icon.background.width - 70)
width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) :
parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) :
(button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) :
parent.width - icon.background.width - Theme.dp(70))
font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17)
lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24)
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
@ -105,12 +105,12 @@ Rectangle {
StatusBaseText {
id: secondaryText
anchors.top: primaryText.bottom
anchors.topMargin: 4
anchors.topMargin: Theme.dp(4)
anchors.left: primaryText.left
anchors.right: primaryText.right
font.pixelSize: 15
lineHeight: 22
font.pixelSize: Theme.dp(15)
lineHeight: Theme.dp(22)
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.directColor3
@ -119,12 +119,12 @@ Rectangle {
StatusBaseText {
id: additionalText
anchors.verticalCenter: primaryText.verticalCenter
anchors.verticalCenterOffset: 2
anchors.verticalCenterOffset: Theme.dp(2)
anchors.right: expandImage.left
anchors.rightMargin: 16
anchors.rightMargin: Theme.dp(16)
font.pixelSize: 15
lineHeight: 24
font.pixelSize: Theme.dp(15)
lineHeight: Theme.dp(24)
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.baseColor1
@ -133,9 +133,9 @@ Rectangle {
StatusButton {
id: button
anchors.top: parent.top
anchors.topMargin: 19
anchors.topMargin: Theme.dp(19)
anchors.right: parent.right
anchors.rightMargin: 16
anchors.rightMargin: Theme.dp(16)
visible: !!text
}
@ -148,13 +148,13 @@ Rectangle {
anchors.rightMargin: {
switch (statusExpandableItem.type) {
case StatusExpandableItem.Type.Primary:
return 23
return Theme.dp(23)
break;
case StatusExpandableItem.Type.Secondary:
return 16
return Theme.dp(16)
break;
default:
return 6
return Theme.dp(6)
}
}
@ -181,11 +181,11 @@ Rectangle {
Loader {
id: expandableRegion
anchors.top: header.bottom
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(48) : 0
anchors.right: parent.right
anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0
visible: false
}
@ -202,13 +202,13 @@ Rectangle {
State {
name: "EXPANDED"
PropertyChanges {target: expandImage; icon: "chevron-up"}
PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + Theme.dp(22)}
PropertyChanges {target: expandableRegion; visible: true}
},
State {
name: "COLLAPSED"
PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: statusExpandableItem; height: 82}
PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)}
PropertyChanges {target: expandableRegion; visible: false}
}
]

17
src/StatusQ/Components/StatusImageCropPanel.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
/*!
@ -50,7 +51,7 @@ Item {
\qmlproperty bool StatusImageCrop::margins
Space to keep around the control borders and crop area
*/
property int margins: 10
property int margins: Theme.dp(10)
/*!
\qmlproperty url StatusImageCropPanel::source
@ -215,7 +216,7 @@ Item {
onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
onWheel: {
const delta = wheel.angleDelta.y / 120
const delta = wheel.angleDelta.y / Theme.dp(120)
cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
}
@ -242,13 +243,13 @@ Item {
StatusIcon {
icon: "remove-circle"
Layout.preferredWidth: 20
Layout.preferredHeight: 20
Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: Theme.dp(20)
}
StatusSlider {
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 25
Layout.topMargin: Theme.dp(20)
Layout.bottomMargin: Theme.dp(25)
Layout.alignment: Qt.AlignVCenter
enabled: root.interactive
@ -262,8 +263,8 @@ Item {
StatusIcon {
icon: "add-circle"
Layout.preferredWidth: 20
Layout.preferredHeight: 20
Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: Theme.dp(20)
}
}
}

6
src/StatusQ/Components/StatusLetterIdenticon.qml
View File

@ -10,12 +10,12 @@ Rectangle {
property string name
property string emoji
property string emojiSize: Emoji.size.small
property int letterSize: 21
property int letterSize: Theme.dp(21)
property int charactersLen: 1
color: Theme.palette.miscColor5
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
radius: width / 2
StatusEmoji {

56
src/StatusQ/Components/StatusListItem.qml
View File

@ -20,8 +20,8 @@ Rectangle {
property string subTitle: ""
property string tertiaryTitle: ""
property string label: ""
property real leftPadding: 16
property real rightPadding: 16
property real leftPadding: Theme.dp(16)
property real rightPadding: Theme.dp(16)
property bool enabled: true
property bool highlighted: false
property bool propagateTitleClicks: true
@ -35,17 +35,17 @@ Rectangle {
property bool loadingFailed: false
property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20
width: isLetterIdenticon ? 40 : 20
height: Theme.dp(isLetterIdenticon ? 40 : 20)
width: Theme.dp(isLetterIdenticon ? 40 : 20)
rotation: 0
isLetterIdenticon: false
letterSize: 21
letterSize: Theme.dp(21)
charactersLen: 1
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary ||
@ -58,8 +58,8 @@ Rectangle {
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
isIdenticon: false
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@ -90,12 +90,12 @@ Rectangle {
Danger
}
implicitWidth: 448
implicitWidth: Theme.dp(448)
implicitHeight: {
if (bottomModel.length === 0) {
return Math.max(64, statusListItemTitleArea.height + 16)
return Math.max(64, statusListItemTitleArea.height + Theme.dp(16))
}
return Math.max(64, statusListItemTitleArea.height + 90)
return Math.max(Theme.dp(64), statusListItemTitleArea.height + Theme.dp(90))
}
color: {
if (sensor.containsMouse || statusListItem.highlighted) {
@ -179,7 +179,7 @@ Rectangle {
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
anchors.leftMargin: iconOrImage.active ? Theme.dp(16) : statusListItem.leftPadding
anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
@ -209,7 +209,7 @@ Rectangle {
id: statusListItemTitle
opacity: titleLoadingOverlay.visible ? 0 : 1
text: statusListItem.title
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
height: visible ? contentHeight : 0
elide: Text.ElideRight
anchors.left: parent.left
@ -254,12 +254,12 @@ Rectangle {
StatusBaseText {
id: statusListItemTitleAsideText
anchors.left: statusListItemTitle.right
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 20
text: statusListItem.titleAsideText
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1
visible: !!statusListItem.titleAsideText
}
@ -268,7 +268,7 @@ Rectangle {
id: titleIconsRow
anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
}
StatusBaseText {
@ -293,7 +293,7 @@ Rectangle {
height: visible ? contentHeight : 0
text: statusListItem.tertiaryTitle
color: Theme.palette.baseColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
visible: !!statusListItem.tertiaryTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
@ -302,14 +302,14 @@ Rectangle {
id: statusListItemBadge
anchors.top: statusListItemTertiaryTitle.bottom
width: contentItem.width
implicitHeight: visible ? 22 : 0
implicitHeight: visible ? Theme.dp(22) : 0
}
Row {
id: statusListItemTagsSlotInline
anchors.top: statusListItemTertiaryTitle.bottom
width: parent.width
spacing: 10
spacing: Theme.dp(10)
clip: true
Repeater {
@ -321,12 +321,12 @@ Rectangle {
Row {
id: statusListItemTagsSlot
anchors.topMargin: 16
anchors.topMargin: Theme.dp(16)
anchors.top: iconOrImage.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
width: statusListItemBadge.width
spacing: 10
spacing: Theme.dp(10)
anchors.verticalCenter: parent.verticalCenter
Repeater {
@ -339,12 +339,12 @@ Rectangle {
id: statusListItemLabel
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 16
anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(16)
anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0
text: statusListItem.label
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1
visible: !!statusListItem.label
}
@ -355,8 +355,8 @@ Rectangle {
anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 12
spacing: 10
anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12)
spacing: Theme.dp(10)
}
}
}

18
src/StatusQ/Components/StatusListItemBadge.qml
View File

@ -14,13 +14,13 @@ Control {
property string secondaryText: ""
property StatusImageSettings image: StatusImageSettings {
height: 16
width: 16
height: Theme.dp(16)
width: Theme.dp(16)
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
height: 16
width: 16
height: Theme.dp(16)
width: Theme.dp(16)
isLetterIdenticon: false
background: StatusIconBackgroundSettings {}
color: "transparent"
@ -29,31 +29,31 @@ Control {
background: Rectangle {
anchors.fill: parent
color: "transparent"
radius: 11
radius: Theme.dp(11)
border.color: Theme.palette.directColor7
}
contentItem: Item {
id: contentItem
width: (contentItemRow.width + 10)
width: (contentItemRow.width + Theme.dp(10))
height: parent.height
RowLayout {
id: contentItemRow
anchors.centerIn: parent
anchors.horizontalCenterOffset: -spacing
spacing: 2
spacing: Theme.dp(2)
StatusRoundedImage {
implicitWidth: root.image.width
implicitHeight: root.image.height
visible: !root.icon.isLetterIdenticon
image.source: root.image.source
border.color: Theme.palette.baseColor1
border.width: root.image.isIdenticon ? 1 : 0
border.width: root.image.isIdenticon ? Theme.dp(1) : 0
}
StatusLetterIdenticon {
implicitWidth: root.icon.width
implicitHeight: root.icon.width
letterSize: 11
letterSize: Theme.dp(11)
visible: root.icon.isLetterIdenticon
color: root.icon.color
name: root.primaryText

24
src/StatusQ/Components/StatusListItemTag.qml
View File

@ -7,9 +7,9 @@ import StatusQ.Core.Theme 0.1
Rectangle {
id: root
width: layout.width + layout.anchors.margins
height: 30
height: Theme.dp(30)
color: Theme.palette.primaryColor3
radius: 15
radius: Theme.dp(15)
property alias titleText: titleText
@ -18,21 +18,21 @@ Rectangle {
signal clicked()
property StatusImageSettings image: StatusImageSettings {
width: 20
height: 20
width: Theme.dp(20)
height: Theme.dp(20)
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
height: 20
width: 20
height: Theme.dp(20)
width: Theme.dp(20)
rotation: 0
isLetterIdenticon: false
letterSize: 10
letterSize: Theme.dp(10)
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 15
height: 15
width: Theme.dp(15)
height: Theme.dp(15)
color: Theme.palette.primaryColor3
}
}
@ -40,11 +40,11 @@ Rectangle {
RowLayout {
id: layout
height: parent.height
anchors.margins: 6
anchors.margins: Theme.dp(6)
StatusSmartIdenticon {
id: iconOrImage
Layout.leftMargin: 4
Layout.leftMargin: Theme.dp(4)
image: root.image
icon: root.icon
name: root.title
@ -57,7 +57,7 @@ Rectangle {
id: titleText
color: Theme.palette.primaryColor1
text: root.title
Layout.rightMargin: closeButtonVisible ? 0 : 5
Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5)
}
StatusIcon {

30
src/StatusQ/Components/StatusListPicker.qml
View File

@ -227,8 +227,8 @@ Item {
}
}
width: 110
height: 38
width: Theme.dp(110)
height: Theme.dp(38)
Component.onCompleted: d.initialize()
@ -238,7 +238,7 @@ Item {
bgColor: Theme.palette.primaryColor3
contentColor: Theme.palette.primaryColor1
text: picker.selectedItemsText
textPixelSize: 13
textPixelSize: Theme.dp(13)
type: StatusPickerButton.Type.Down
onClicked: {
@ -261,7 +261,7 @@ Item {
anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
anchors.top: btn.bottom
anchors.topMargin: 4
anchors.topMargin: Theme.dp(4)
visible: false
color: Theme.palette.statusPopupMenu.backgroundColor
radius: 8
@ -269,8 +269,8 @@ Item {
layer.effect: DropShadow {
source: picker
horizontalOffset: 0
verticalOffset: 4
radius: 12
verticalOffset: Theme.dp(4)
radius: Theme.dp(12)
samples: 25
spread: 0.2
color: Theme.palette.dropShadow
@ -279,29 +279,29 @@ Item {
ListView {
id: content
property int itemHeight: 40
property int itemWidth: 360
property int itemHeight: Theme.dp(40)
property int itemWidth: Theme.dp(360)
model: d.filteredModel
width: itemWidth
anchors.top: parent.top
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.bottomMargin: Theme.dp(8)
currentIndex: -1
clip: true
headerPositioning: ListView.OverlayHeader
header: Rectangle {
id: header
width: content.itemWidth
height: searchInput.height + 24
height: searchInput.height + Theme.dp(24)
color: Theme.palette.statusPopupMenu.backgroundColor
z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
StatusBaseInput {
id: searchInput
implicitHeight: 36
width: content.itemWidth - 2 * 18
implicitHeight: Theme.dp(36)
width: content.itemWidth - Theme.dp(2) * 18
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
topPadding: 0
@ -371,12 +371,12 @@ Item {
height: content.itemHeight
StatusBaseText {
anchors.leftMargin: 18
anchors.leftMargin: Theme.dp(18)
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: section
color: Theme.palette.baseColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
elide: Text.ElideRight
}
}// End of Category item

10
src/StatusQ/Components/StatusListSectionHeadline.qml
View File

@ -4,18 +4,18 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
implicitHeight: 34
implicitWidth: 176
implicitHeight: Theme.dp(34)
implicitWidth: Theme.dp(176)
property alias text: label.text
StatusBaseText {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
anchors.leftMargin: 16
anchors.bottomMargin: Theme.dp(4)
anchors.leftMargin: Theme.dp(16)
id: label
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1
}
}

5
src/StatusQ/Components/StatusLoadingIndicator.qml
View File

@ -1,11 +1,12 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusIcon {
id: statusIcon
icon: "loading"
height: 17
width: 17
height: Theme.dp(17)
width: Theme.dp(17)
RotationAnimation {
target: statusIcon;
from: 0;

24
src/StatusQ/Components/StatusMemberListItem.qml
View File

@ -104,7 +104,7 @@ StatusListItem {
// Short keychat composition:
function composeShortKeyChat(pubKey) {
return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - 3)
return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - Theme.dp(3))
}
}
@ -119,25 +119,25 @@ StatusListItem {
}
}
subTitle: d.composeSubtitile()
statusListItemSubTitle.font.pixelSize: 10
statusListItemSubTitle.font.pixelSize: Theme.dp(10)
icon.isLetterIdenticon: !root.image.source.toString()
statusListItemIcon.badge.visible: true
statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
// Default sizes / positions by design
implicitWidth: 256
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
leftPadding: 8
image.width: 32
image.height: 32
icon.width: 32
icon.height: 32
implicitWidth: Theme.dp(256)
implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding)
leftPadding: Theme.dp(8)
image.width: Theme.dp(32)
image.height: Theme.dp(32)
icon.width: Theme.dp(32)
icon.height: Theme.dp(32)
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
statusListItemIcon.anchors.top: undefined
statusListItemIcon.badge.border.width: 2
statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
statusListItemIcon.badge.border.width: Theme.dp(2)
statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders
statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders
components: [
StatusIcon {
anchors.verticalCenter: parent.verticalCenter

12
src/StatusQ/Components/StatusMessage.qml
View File

@ -68,13 +68,13 @@ Rectangle {
audioMessageInfoText: statusMessage.audioMessageInfoText
}
RowLayout {
spacing: 8
spacing: Theme.dp(8)
Layout.fillWidth: true
StatusSmartIdenticon {
id: profileImage
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
Layout.leftMargin: 16
Layout.topMargin: Theme.dp(10)
Layout.leftMargin: Theme.dp(16)
image: messageDetails.profileImage
name: messageHeader.displayName
MouseArea {
@ -87,7 +87,7 @@ Rectangle {
Column {
spacing: 4
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
Layout.topMargin: Theme.dp(10)
Layout.fillWidth: true
StatusPinMessageDetails {
visible: messageDetails.isPinned && !editMode
@ -192,9 +192,9 @@ Rectangle {
StatusMessageQuickActions {
id: quickActionsPanel
anchors.right: parent.right
anchors.rightMargin: 20
anchors.rightMargin: Theme.dp(20)
anchors.top: parent.top
anchors.topMargin: -8
anchors.topMargin: -Theme.dp(8)
visible: hoverHandler.hovered && !editMode
}
}

5
src/StatusQ/Components/StatusMessageDetails.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
QtObject {
id: msgDetails
@ -10,8 +11,8 @@ QtObject {
property string secondaryName: ""
property string chatID: ""
property StatusImageSettings profileImage: StatusImageSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
}
property bool isEdited: false
property string messageText: ""

10
src/StatusQ/Components/StatusNavigationListItem.qml
View File

@ -9,14 +9,14 @@ StatusListItem {
property bool selected: false
property alias badge: statusBadge
implicitWidth: 286
implicitHeight: 48
implicitWidth: Theme.dp(286)
implicitHeight: Theme.dp(48)
icon.background.width: 20
icon.background.height: 20
icon.background.width: Theme.dp(20)
icon.background.height: Theme.dp(20)
icon.background.color: "transparent"
statusListItemIcon.anchors.topMargin: 14
statusListItemIcon.anchors.topMargin: Theme.dp(14)
color: {
if (selected) {

2
src/StatusQ/Components/StatusNavigationPanelHeadline.qml
View File

@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
StatusBaseText {
font.pixelSize: 17
font.pixelSize: Theme.dp(17)
font.weight: Font.Bold
color: Theme.palette.directColor1
}

8
src/StatusQ/Components/StatusRoundIcon.qml
View File

@ -6,13 +6,13 @@ Rectangle {
id: statusRoundedIcon
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
rotation: 0
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
color: Theme.palette.primaryColor3
}
}

4
src/StatusQ/Components/StatusRoundedImage.qml
View File

@ -10,8 +10,8 @@ Rectangle {
property alias image: image
implicitWidth: 40
implicitHeight: 40
implicitWidth: Theme.dp(40)
implicitHeight: Theme.dp(40)
color: "transparent"
radius: width / 2
layer.enabled: true

16
src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -13,18 +13,18 @@ Loader {
property alias badge: statusBadge
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
width: Theme.dp(40)
height: Theme.dp(40)
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
initalAngleRad: 0
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0)
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / Theme.dp(24.0))
distinctiveColors: Theme.palette.identiconRingColors
}
@ -103,9 +103,9 @@ Loader {
visible: false
anchors.bottom: statusSmartIdenticon.bottom
anchors.right: statusSmartIdenticon.right
border.width: 3
implicitHeight: 15
implicitWidth: 15
border.width: Theme.dp(3)
implicitHeight: Theme.dp(15)
implicitWidth: Theme.dp(15)
z: statusSmartIdenticon.dZ
}
}

73
src/StatusQ/Components/StatusTagSelector.qml
View File

@ -61,7 +61,7 @@ Item {
\qmlproperty real StatusTagSelector::maxHeight
This property holds the maximum height of the component.
*/
property real maxHeight: (488 + contactsLabel.height + contactsLabel.anchors.topMargin) //default min
property real maxHeight: (Theme.dp(488) + contactsLabel.height + contactsLabel.anchors.topMargin) //default min
/*!
\qmlproperty alias StatusTagSelector::textEdit
This property holds a reference to the TextEdit component.
@ -210,7 +210,7 @@ Item {
suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin +
2 * bgRect.anchors.margins +
userListView.anchors.topMargin + userListView.anchors.bottomMargin +
(userListView.model.count * 64): 0
(userListView.count * 64): 0
function orderNamesModel() {
if(root.orderByReadonly) {
@ -224,7 +224,7 @@ Item {
}
}
implicitWidth: 448
implicitWidth: Theme.dp(448)
implicitHeight: (tagSelectorRect.height + d.suggestionContainerHeight) > root.maxHeight ? root.maxHeight : (tagSelectorRect.height + d.suggestionContainerHeight)
onOrderByReadonlyChanged: { d.orderNamesModel() }
@ -236,26 +236,27 @@ Item {
Rectangle {
id: tagSelectorRect
width: parent.width
height: 44
radius: 8
height: Theme.dp(44)
radius: Theme.dp(8)
color: Theme.palette.baseColor2
RowLayout {
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
spacing: 8
anchors.leftMargin: Theme.dp(16)
anchors.rightMargin: Theme.dp(16)
spacing: Theme.dp(8)
StatusBaseText {
Layout.preferredWidth: 22
Layout.preferredWidth: Theme.dp(22)
Layout.alignment: Qt.AlignVCenter
font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1
text: root.toLabelText
visible: (parent.width>22)
visible: (parent.width>Theme.dp(22))
}
ScrollView {
Layout.preferredWidth: (parent.width - 177) > 0 ? ((namesList.contentWidth > (parent.width - 177)) ?
(parent.width - 177) : namesList.contentWidth) : 0
implicitHeight: 30
Layout.preferredWidth: (parent.width - Theme.dp(177)) > 0 ? ((namesList.contentWidth > (parent.width - Theme.dp(177))) ?
(parent.width - Theme.dp(177)) : namesList.contentWidth) : 0
implicitHeight: Theme.dp(30)
Layout.alignment: Qt.AlignVCenter
visible: (namesList.count > 0)
contentWidth: namesList.contentWidth
@ -267,7 +268,7 @@ Item {
anchors.fill: parent
model: namesModel
orientation: ListView.Horizontal
spacing: 8
spacing: Theme.dp(8)
function scrollToEnd() {
if (contentWidth > width) {
contentX = contentWidth;
@ -294,12 +295,12 @@ Item {
focus: true
color: Theme.palette.directColor1
clip: true
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
wrapMode: TextEdit.NoWrap
font.family: Theme.palette.baseFont.name
Layout.fillWidth: true
Layout.preferredHeight: 44
visible: (parent.width>22)
Layout.preferredHeight: Theme.dp(44)
visible: (parent.width>Theme.dp(22))
Keys.onPressed: {
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
&& getText(cursorPosition, (cursorPosition-1)) === ""
@ -321,9 +322,9 @@ Item {
StatusBaseText {
id: warningTextLabel
visible: (namesModel.count === root.nameCountLimit)
Layout.preferredWidth: visible ? 120 : 0
Layout.preferredWidth: visible ? Theme.dp(120) : 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
color: Theme.palette.dangerColor1
text: root.nameCountLimit + " " + root.warningText
}
@ -332,11 +333,11 @@ Item {
StatusBaseText {
id: contactsLabel
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.left: parent.left
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
anchors.top: tagSelectorRect.bottom
anchors.topMargin: visible ? 32 : 0
anchors.topMargin: visible ? Theme.dp(32) : 0
height: visible ? contentHeight : 0
visible: (root.sortedList.count === 0)
color: Theme.palette.baseColor1
@ -345,31 +346,31 @@ Item {
Control {
id: suggestionsContainer
width: 360
width: Theme.dp(360)
anchors {
top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom
topMargin: 8//Style.current.halfPadding
topMargin: Theme.dp(8)//Style.current.halfPadding
bottom: parent.bottom
bottomMargin: 16//Style.current.padding
bottomMargin: Theme.dp(16)//Style.current.padding
}
clip: true
visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) ||
((edit.text !== "") && (root.sortedList.count > 0))
x: ((root.namesModel.count > 0) && (root.sortedList.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width)))
? (edit.x + 8) : 0
? (edit.x + Theme.dp(8)) : 0
background: Rectangle {
id: bgRect
anchors.fill: parent
anchors.margins: 8
anchors.margins: Theme.dp(8)
visible: (root.sortedList.count > 0)
color: Theme.palette.statusPopupMenu.backgroundColor
radius: 8
radius: Theme.dp(8)
layer.enabled: true
layer.effect: DropShadow {
source: bgRect
horizontalOffset: 0
verticalOffset: 4
radius: 12
verticalOffset: Theme.dp(4)
radius: Theme.dp(12)
samples: 25
spread: 0.2
color: Theme.palette.dropShadow
@ -379,9 +380,9 @@ Item {
id: userListView
anchors {
fill: parent
topMargin: 16
leftMargin: 8
rightMargin: 8
topMargin: Theme.dp(16)
leftMargin: Theme.dp(8)
rightMargin: Theme.dp(8)
}
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
@ -392,10 +393,10 @@ Item {
}
delegate: StatusMemberListItem {
anchors.left: parent.left
anchors.leftMargin: bgRect.visible ? 8 : 0
anchors.leftMargin: bgRect.visible ? Theme.dp(8) : 0
anchors.right: parent.right
anchors.rightMargin: bgRect.visible ? 8 : 0
height: visible ? 64 : 0
anchors.rightMargin: bgRect.visible ? Theme.dp(8) : 0
height: visible ? Theme.dp(64) : 0
visible: {
for (let i = 0; i < namesModel.count; i++) {
if (namesModel.get(i).pubKey === model.pubKey) {

34
src/StatusQ/Components/StatusToastMessage.qml
View File

@ -37,8 +37,8 @@ import StatusQ.Core.Theme 0.1
Control {
id: root
width: 343
height: !!secondaryText ? 68 : 48
width: Theme.dp(343)
height: Theme.dp(!!secondaryText ? 68 : 48)
anchors.right: parent.right
/*!
@ -79,8 +79,8 @@ Control {
This property holds a set of settings for the icon of the ToastMessage.
*/
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
width: Theme.dp(23)
height: Theme.dp(23)
}
/*!
@ -195,12 +195,12 @@ Control {
id: background
anchors.fill: parent
color: Theme.palette.statusToastMessage.backgroundColor
radius: 8
radius: Theme.dp(8)
border.color: Theme.palette.baseColor2
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 3
radius: 8
verticalOffset: Theme.dp(3)
radius: Theme.dp(8)
samples: 15
fast: true
cached: true
@ -210,9 +210,9 @@ Control {
contentItem: Item {
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.right: parent.right
anchors.rightMargin: 4
anchors.rightMargin: Theme.dp(4)
height: parent.height
MouseArea {
anchors.fill: parent
@ -225,10 +225,10 @@ Control {
}
RowLayout {
anchors.fill: parent
spacing: 16
spacing: Theme.dp(16)
Rectangle {
implicitWidth: 32
implicitHeight: 32
implicitWidth: Theme.dp(32)
implicitHeight: Theme.dp(32)
Layout.alignment: Qt.AlignVCenter
radius: (root.width/2)
color: (root.type === StatusToastMessage.Type.Success) ?
@ -266,7 +266,7 @@ Control {
Layout.alignment: Qt.AlignVCenter
StatusBaseText {
width: parent.width
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
color: Theme.palette.directColor1
elide: Text.ElideRight
text: root.primaryText
@ -275,7 +275,7 @@ Control {
width: parent.width
visible: (!root.linkUrl && !!root.secondaryText)
height: visible ? contentHeight : 0
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
color: Theme.palette.baseColor1
text: root.secondaryText
elide: Text.ElideRight
@ -283,7 +283,7 @@ Control {
StatusSelectableText {
visible: (!!root.linkUrl)
height: visible ? implicitHeight : 0
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
hoveredLinkColor: Theme.palette.primaryColor1
text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
onLinkActivated: {
@ -295,8 +295,8 @@ Control {
type: StatusFlatRoundButton.Type.Secondary
icon.name: "close"
icon.color: Theme.palette.directColor1
implicitWidth: 30
implicitHeight: 30
implicitWidth: Theme.dp(30)
implicitHeight: Theme.dp(30)
onClicked: {
root.open = false;
}

26
src/StatusQ/Components/StatusWizardStepper.qml
View File

@ -37,7 +37,7 @@ Item {
id: wizardWrapper
width: parent.width
height: 56
height: Theme.dp(56)
/*!
\qmlproperty ListModel StatusWizardStepper::stepsModel
This property represents all steps and their descriptions as provided by the user.
@ -54,18 +54,18 @@ Item {
delegate: Item {
id: wrapperItem
width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
height: 56
height: Theme.dp(56)
onXChanged: {
//as x changes while delegates are created, direct assignment doesn't work
x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
x = (index === (repeat.count-1)) ? (width+Theme.dp(32)) : (label.width/2) + Theme.dp(8)
}
StatusProgressBar {
id: barBorder
width: visible ? (parent.width - (label.width/2 + 24)) : 0
height: visible ? 8 : 0
width: visible ? (parent.width - (label.width/2 + Theme.dp(24))) : 0
height: visible ? Theme.dp(8) : 0
visible: (index > 0)
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -12
anchors.verticalCenterOffset: -Theme.dp(12)
from: 0
to: wizardWrapper.maxDuration
value: loadingTime
@ -76,22 +76,22 @@ Item {
Item {
id: label
width: descriptionLabel.contentWidth
height: 56
height: Theme.dp(56)
anchors.left: (index > 0) ? barBorder.right : parent.left
anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
anchors.leftMargin: (index > 0) ? -((width/2) - Theme.dp(24)) : 0
Rectangle {
width: 32
height: 32
width: Theme.dp(32)
height: Theme.dp(32)
anchors.horizontalCenter: parent.horizontalCenter
radius: width/2
color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? "transparent" : Theme.palette.primaryColor1
border.width: 2
border.width: Theme.dp(2)
StatusBaseText {
anchors.centerIn: parent
text: index+1
font.pixelSize: 17
font.pixelSize: Theme.dp(17)
color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
}
@ -101,7 +101,7 @@ Item {
anchors.bottom: parent.bottom
text: description
color: Theme.palette.directColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
}
}
}

32
src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml
View File

@ -15,9 +15,9 @@ Rectangle {
property bool hovered: false
property string audioSource: ""
width: 320
height: 32
radius: 20
width: Theme.dp(320)
height: Theme.dp(32)
radius: Theme.dp(20)
color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
@ -30,13 +30,13 @@ Rectangle {
RowLayout {
id: preview
visible: isPreview
spacing: 5
spacing: Theme.dp(5)
anchors.centerIn: parent
StatusIcon {
id: icon
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 14
Layout.preferredHeight: 14
Layout.preferredWidth: Theme.dp(14)
Layout.preferredHeight: Theme.dp(14)
icon: "audio"
color: Theme.palette.baseColor1
}
@ -44,16 +44,16 @@ Rectangle {
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
text: audioMessageInfoText
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
}
}
StatusFlatRoundButton {
id: playButton
width: 15
height: 15
width: Theme.dp(15)
height: Theme.dp(15)
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
visible: !isPreview
@ -73,12 +73,12 @@ Rectangle {
}
Rectangle {
height: 2
width: 240
height: Theme.dp(2)
width: Theme.dp(240)
color: Theme.palette.directColor5
anchors.verticalCenter: parent.verticalCenter
anchors.left: playButton.right
anchors.leftMargin: 10
anchors.leftMargin: Theme.dp(10)
visible: !isPreview
Rectangle {
id: progress
@ -94,10 +94,10 @@ Rectangle {
Rectangle {
id: handle
width: 10
height: 10
width: Theme.dp(10)
height: Theme.dp(10)
color: Theme.palette.directColor1
radius: 10
radius: Theme.dp(10)
anchors.verticalCenter: parent.verticalCenter
x: progress.width
state: "default"

4
src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
View File

@ -20,7 +20,7 @@ Item {
height: childrenRect.height
ColumnLayout {
spacing: 4
spacing: Theme.dp(4)
Loader {
id: chatInputLoader
// To-Do: Move to StatusChatInput once its moved to StatusQ
@ -28,7 +28,7 @@ Item {
width: editText.width
input.placeholderText: ""
input.text: msgText
input.implicitHeight: 40
input.implicitHeight: Theme.dp(40)
}
}
RowLayout {

22
src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml
View File

@ -19,7 +19,7 @@ Item {
property url source: ""
property bool allCornersRounded: false
property bool isLeftCorner: true
property int imageWidth: 350
property int imageWidth: Theme.dp(350)
property int shapeType: -1
property string loadingImageText: ""
@ -55,22 +55,22 @@ Item {
anchors.left: parent.left
width: imageMessage.width
height: imageMessage.height
radius: 16
radius: Theme.dp(16)
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 32
height: 32
radius: 4
width: Theme.dp(32)
height: Theme.dp(32)
radius: Theme.dp(4)
visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
}
Rectangle {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 32
height: 32
radius: 4
width: Theme.dp(32)
height: Theme.dp(32)
radius: Theme.dp(4)
visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded
}
}
@ -98,9 +98,9 @@ Item {
|| imageMessage.status === Image.Error
width: parent.width
height: width
border.width: 1
border.width: Theme.dp(1)
border.color: Theme.palette.baseColor2
radius: 8
radius: Theme.dp(8)
StatusBaseText {
anchors.centerIn: parent
@ -108,7 +108,7 @@ Item {
color: imageMessage.status === Image.Error?
Theme.palette.dangerColor1 :
Theme.palette.directColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
}
}
}

12
src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
View File

@ -35,7 +35,7 @@ Item {
id: primaryDisplayName
font.family: Theme.palette.baseFont.name
font.weight: Font.Medium
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
font.underline: mouseArea.containsMouse
readOnly: true
wrapMode: Text.WordWrap
@ -62,14 +62,14 @@ Item {
id: secondaryDisplayName
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
text: secondaryName
visible: !!text
}
StatusBaseText {
id: dotSeparator1
Layout.fillHeight: true
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1
text: "."
visible: secondaryDisplayName.visible
@ -77,8 +77,8 @@ Item {
StatusBaseText {
id: tertiaryDetailText
Layout.alignment: Qt.AlignVCenter
Layout.maximumWidth: 58
font.pixelSize: 10
Layout.maximumWidth: Theme.dp(58)
font.pixelSize: Theme.dp(10)
elide: Text.ElideMiddle
color: Theme.palette.baseColor1
text: tertiaryDetail
@ -86,7 +86,7 @@ Item {
StatusBaseText {
id: dotSeparator2
Layout.fillHeight: true
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1
text: "."
visible: tertiaryDetailText.visible

10
src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml
View File

@ -16,8 +16,8 @@ Rectangle {
}
width: buttonRow.width + _internal.containerMargin * 2
height: 36
radius: 8
height: Theme.dp(36)
radius: Theme.dp(8)
color: Theme.palette.statusSelect.menuItemBackgroundColor
layer.enabled: true
@ -25,11 +25,11 @@ Rectangle {
width: buttonsContainer.width
height: buttonsContainer.height
x: buttonsContainer.x
y: buttonsContainer.y + 10
y: buttonsContainer.y + Theme.dp(10)
horizontalOffset: 0
verticalOffset: 2
verticalOffset: Theme.dp(2)
source: buttonsContainer
radius: 10
radius: Theme.dp(10)
samples: 15
color: Theme.palette.dropShadow
}

38
src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
View File

@ -19,13 +19,13 @@ Loader {
sourceComponent: RowLayout {
id: replyLayout
spacing: 8
spacing: Theme.dp(8)
Shape {
id: replyCorner
Layout.alignment: Qt.AlignTop
Layout.leftMargin: 35
Layout.leftMargin: Theme.dp(35)
Layout.topMargin: profileImage.height/2
Layout.preferredWidth: 20
Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
asynchronous: true
antialiasing: true
@ -35,13 +35,13 @@ Loader {
fillColor: "transparent"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
startX: 20
startX: Theme.dp(20)
startY: 0
PathLine { x: 10; y: 0 }
PathLine { x: Theme.dp(10); y: 0 }
PathArc {
x: 0; y: 10
radiusX: 13
radiusY: 13
x: 0; y: Theme.dp(10)
radiusX: Theme.dp(13)
radiusY: Theme.dp(13)
direction: PathArc.Counterclockwise
}
PathLine { x: 0; y: messageLayout.height}
@ -51,7 +51,7 @@ Loader {
id: messageLayout
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.topMargin: 4
Layout.topMargin: Theme.dp(4)
RowLayout {
StatusSmartIdenticon {
id: profileImage
@ -70,7 +70,7 @@ Loader {
color: Theme.palette.baseColor1
selectionColor: Theme.palette.primaryColor3
selectedTextColor: Theme.palette.directColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
font.weight: Font.Medium
selectByMouse: true
readOnly: true
@ -80,40 +80,40 @@ Loader {
StatusTextMessage {
Layout.fillWidth: true
textField.text: replyDetails.messageText
textField.font.pixelSize: 13
textField.font.pixelSize: Theme.dp(13)
textField.color: Theme.palette.baseColor1
textField.height: 18
textField.height: Theme.dp(18)
clip: true
visible: !!replyDetails.messageText
}
StatusImageMessage {
Layout.fillWidth: true
Layout.preferredHeight: imageAlias.paintedHeight
imageWidth: 56
imageWidth: Theme.dp(56)
source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
visible: replyDetails.contentType === StatusMessage.ContentType.Image
shapeType: StatusImageMessage.ShapeType.ROUNDED
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 48
Layout.preferredHeight: Theme.dp(48)
Layout.alignment: Qt.AlignLeft
visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
StatusSticker {
image.width: 48
image.height: 48
image.width: Theme.dp(48)
image.height: Theme.dp(48)
image.source: replyDetails.messageContent
}
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 22
Layout.preferredHeight: Theme.dp(22)
visible: replyDetails.contentType === StatusMessage.ContentType.Audio
StatusAudioMessage {
id: audioMessage
anchors.left: parent.left
width: 125
height: 22
width: Theme.dp(125)
height: Theme.dp(22)
isPreview: true
audioSource: replyDetails.messageContent
audioMessageInfoText: chatReply.audioMessageInfoText

18
src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
View File

@ -12,32 +12,32 @@ Loader {
active: visible
sourceComponent: Rectangle {
height: 24
width: layout.width + 16
height: Theme.dp(24)
width: layout.width + Theme.dp(16)
color: Theme.palette.pinColor2
radius: 12
radius: Theme.dp(12)
RowLayout {
id: layout
anchors.centerIn: parent
StatusIcon {
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 16
Layout.preferredHeight: 16
Layout.preferredWidth: Theme.dp(16)
Layout.preferredHeight: Theme.dp(16)
color: Theme.palette.pinColor1
icon: "tiny/pin"
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4
Layout.leftMargin: -Theme.dp(4)
color: Theme.palette.directColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
text: pinnedMsgInfoText
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4
Layout.leftMargin: -Theme.dp(4)
color: Theme.palette.directColor1
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
font.weight: Font.Medium
text: pinnedBy
}

10
src/StatusQ/Components/private/statusMessage/StatusSticker.qml
View File

@ -11,8 +11,8 @@ Loader {
property bool noHover: false
property bool noMouseArea: false
property StatusImageSettings image: StatusImageSettings {
width: 140
height: 140
width: Theme.dp(140)
height: Theme.dp(140)
}
signal loaded()
@ -24,7 +24,7 @@ Loader {
id: root
color: Theme.palette.baseColor2
radius: 16
radius: Theme.dp(16)
width: image.width
height: image.height
@ -71,8 +71,8 @@ Loader {
Component {
id: loadingIndicator
StatusLoadingIndicator {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
color: Theme.palette.baseColor1
}
}

8
src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
View File

@ -28,7 +28,7 @@ Item {
selectionColor: Theme.palette.primaryColor3
color: Theme.palette.directColor1
font.family: Theme.palette.baseFont.name
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
textFormat: Text.RichText
wrapMode: Text.Wrap
readOnly: true
@ -72,11 +72,11 @@ Item {
id: showMoreLoader
active: _internal.veryLongChatText
anchors.top: chatText.bottom
anchors.topMargin: -10
anchors.topMargin: -Theme.dp(10)
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: StatusRoundButton {
implicitWidth: 24
implicitHeight: 24
implicitWidth: Theme.dp(24)
implicitHeight: Theme.dp(24)
type: StatusRoundButton.Type.Secondary
icon.name: _internal.readMore ? "chevron-up": "chevron-down"
onClicked: {

4
src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
View File

@ -11,12 +11,12 @@ StatusBaseText {
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
font.pixelSize: 10
font.pixelSize: Theme.dp(10)
visible: !!text
StatusToolTip {
id: tooltip
visible: hhandler.hovered && !!text
maxWidth: 350
maxWidth: Theme.dp(350)
}
HoverHandler {
id: hhandler

66
src/StatusQ/Controls/StatusAccountSelector.qml
View File

@ -16,7 +16,7 @@ Item {
property var selectedAccount
property string currency: "usd"
property alias selectField: select
implicitWidth: 448
implicitWidth: Theme.dp(448)
height: select.height +
(selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0)
// set to asset symbol to display asset's balance top right
@ -91,16 +91,16 @@ Item {
id: txtAssetBalance
visible: root.assetFound !== undefined
anchors.bottom: select.top
anchors.bottomMargin: -18
anchors.bottomMargin: -Theme.dp(18)
anchors.right: txtAssetSymbol.left
anchors.left: select.left
anchors.leftMargin: select.width / 2.5
color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
elide: Text.ElideRight
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
horizontalAlignment: Text.AlignRight
height: 18
height: Theme.dp(18)
StatusToolTip {
enabled: txtAssetBalance.truncated
@ -123,7 +123,7 @@ Item {
anchors.right: parent.right
color: txtAssetBalance.color
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
height: txtAssetBalance.height
}
StatusSelect {
@ -140,10 +140,10 @@ Item {
StatusIcon {
id: selectedIconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
width: Theme.dp(20)
height: Theme.dp(20)
icon: "filled-account"
}
@ -151,13 +151,13 @@ Item {
id: selectedTextField
elide: Text.ElideRight
anchors.left: selectedIconImg.right
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
anchors.right: parent.right
anchors.rightMargin: select.selectedItemRightMargin
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
verticalAlignment: Text.AlignVCenter
height: 22
height: Theme.dp(22)
color: Theme.palette.directColor1
}
}
@ -167,20 +167,20 @@ Item {
id: selectedAccountDetails
visible: root.showAccountDetails
anchors.top: select.bottom
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.left: parent.left
anchors.leftMargin: 2
anchors.leftMargin: Theme.dp(2)
StatusBaseText {
id: textSelectedAddress
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
elide: Text.ElideMiddle
width: 90
width: Theme.dp(90)
color: Theme.palette.baseColor1
}
StatusBaseText {
id: textSelectedAddressFiatBalance
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
color: Theme.palette.baseColor1
}
}
@ -199,15 +199,15 @@ Item {
}
}
height: walletType === root.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14)
height: walletType === root.watchWalletType ? 0 : (accountName.height + Theme.dp(14) + accountAddress.height + Theme.dp(14))
StatusIcon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
width: Theme.dp(20)
height: Theme.dp(20)
icon: "filled-account"
color: Utils.getThemeAccountColor(model.color, Theme.palette.userCustomizationColors) || Theme.palette.userCustomizationColors[0]
}
@ -215,19 +215,19 @@ Item {
Column {
id: column
anchors.left: iconImg.right
anchors.leftMargin: 14
anchors.leftMargin: Theme.dp(14)
anchors.right: txtFiatBalance.left
anchors.rightMargin: 8
anchors.rightMargin: Theme.dp(8)
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
id: accountName
text: model.name
elide: Text.ElideRight
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.left: parent.left
anchors.right: parent.right
height: 22
height: Theme.dp(22)
color: Theme.palette.directColor1
}
@ -235,29 +235,29 @@ Item {
id: accountAddress
text: address
elide: Text.ElideMiddle
width: 80
width: Theme.dp(80)
color: Theme.palette.baseColor1
font.pixelSize: 12
height: 16
font.pixelSize: Theme.dp(12)
height: Theme.dp(16)
}
}
StatusBaseText {
id: txtFiatBalance
anchors.right: fiatCurrencySymbol.left
anchors.rightMargin: 4
anchors.rightMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
font.pixelSize: Theme.dp(15)
height: Theme.dp(22)
text: currencyBalance
color: Theme.palette.directColor1
}
StatusBaseText {
id: fiatCurrencySymbol
anchors.right: parent.right
anchors.rightMargin: 16
anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
font.pixelSize: Theme.dp(15)
height: Theme.dp(22)
color: Theme.palette.baseColor1
text: root.currency.toUpperCase()
}

18
src/StatusQ/Controls/StatusActivityCenterButton.qml
View File

@ -32,13 +32,13 @@ StatusFlatRoundButton {
property alias unreadNotificationsCount: statusBadge.value
icon.name: "notification"
icon.height: 21
icon.height: Theme.dp(21)
type: StatusFlatRoundButton.Type.Secondary
// initializing the tooltip
tooltip.text: qsTr("Activity")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
tooltip.y: parent.height + Theme.dp(12)
StatusBadge {
id: statusBadge
@ -46,17 +46,17 @@ StatusFlatRoundButton {
visible: value > 0
anchors.top: parent.top
anchors.left: parent.right
anchors.topMargin: -3
anchors.topMargin: -Theme.dp(3)
anchors.leftMargin: {
if (statusBadge.value > 99) {
return -22
if (statusBadge.value > Theme.dp(99)) {
return -Theme.dp(22)
}
if (statusBadge.value > 9) {
return -21
if (statusBadge.value > Theme.dp(9)) {
return -Theme.dp(21)
}
return -18
return -Theme.dp(18)
}
border.width: 2
border.width: Theme.dp(2)
border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
}
}

36
src/StatusQ/Controls/StatusAssetSelector.qml
View File

@ -18,8 +18,8 @@ Item {
}
// Define this in the usage to get balance in currency selected by user
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
implicitWidth: 86
implicitHeight: 32
implicitWidth: Theme.dp(86)
implicitHeight: Theme.dp(32)
function resetInternal() {
assets = null
@ -40,17 +40,17 @@ Item {
bgColorHover: Theme.palette.directColor8
model: root.assets
caretRightMargin: 0
select.radius: 6
select.radius: Theme.dp(6)
select.height: root.height
selectMenu.width: 342
selectMenu.width: Theme.dp(342)
selectedItemComponent: Item {
anchors.fill: parent
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 4
width: 24
height: 24
anchors.leftMargin: Theme.dp(4)
width: Theme.dp(24)
height: Theme.dp(24)
anchors.verticalCenter: parent.verticalCenter
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
@ -61,10 +61,10 @@ Item {
StatusBaseText {
id: selectedTextField
anchors.left: iconImg.right
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
font.pixelSize: Theme.dp(15)
height: Theme.dp(22)
verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1
}
@ -80,11 +80,11 @@ Item {
property bool isLastItem: index === assets.rowCount() - 1
width: parent.width
height: 72
height: Theme.dp(72)
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: {
@ -95,31 +95,31 @@ Item {
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.leftMargin: Theme.dp(12)
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
text: symbol.toUpperCase()
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1
}
StatusBaseText {
text: name
color: Theme.palette.baseColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
}
}
Column {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
text: parseFloat(totalBalance).toFixed(4) + " " + symbol
}
StatusBaseText {
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
anchors.right: parent.right
text: getCurrencyBalanceString(totalCurrencyBalance)
color: Theme.palette.baseColor1

8
src/StatusQ/Controls/StatusBanner.qml
View File

@ -53,12 +53,12 @@ Column {
\qmlproperty string StatusBanner::textPixels
This property holds the pixels size of the text inside the banner.
*/
property int textPixels: 15
property int textPixels: Theme.dp(15)
/*!
\qmlproperty string StatusBanner::statusBannerHeight
This property holds the height of the banner rectangle.
*/
property int statusBannerHeight: 38
property int statusBannerHeight: Theme.dp(38)
// "private" properties
QtObject {
@ -81,7 +81,7 @@ Column {
Rectangle {
id: topDiv
color: d.bordersColor
height: 1
height: Theme.dp(1)
width: parent.width
}
@ -105,7 +105,7 @@ Column {
Rectangle {
id: bottomDiv
color: d.bordersColor
height: 1
height: Theme.dp(1)
width: parent.width
}

26
src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -19,8 +19,8 @@ Rectangle {
}
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
}
property bool loading: false
@ -33,28 +33,28 @@ Rectangle {
property alias text: label.text
property alias font: label.font
property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultLeftPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
property real defaultRightPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
property real defaultTopPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
return Theme.dp(5)
case StatusBaseButton.Size.Small:
return 10
return Theme.dp(10)
case StatusBaseButton.Size.Large:
default:
return 11
return Theme.dp(11)
}
}
property real defaultBottomPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
return Theme.dp(5)
case StatusBaseButton.Size.Small:
return 10
return Theme.dp(10)
case StatusBaseButton.Size.Large:
default:
return 11
return Theme.dp(11)
}
}
@ -84,7 +84,7 @@ Rectangle {
implicitWidth: sensor.width
implicitHeight: sensor.height
radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
radius: Theme.dp(size !== StatusBaseButton.Size.Tiny ? 8 : 6)
color: {
if (statusBaseButton.enabled)
@ -123,7 +123,7 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: statusBaseButton.leftPadding
anchors.verticalCenter: parent.verticalCenter
spacing: 4
spacing: Theme.dp(4)
StatusIcon {
id: statusIcon
width: statusBaseButton.icon.width
@ -146,7 +146,7 @@ Rectangle {
id: label
opacity: !loading
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
font.pixelSize: Theme.dp(size === StatusBaseButton.Size.Large ? 15 : 13) // by design
color: d.textColor
} // Text

50
src/StatusQ/Controls/StatusBaseInput.qml
View File

@ -153,22 +153,22 @@ Item {
\qmlproperty real StatusBaseInput::leftPadding
This property sets the leftComponentLoader's left padding.
*/
property real leftPadding: leftComponentLoader.item ? 8 : 16
property real leftPadding: Theme.dp(leftComponentLoader.item ? 8 : 16)
/*!
\qmlproperty real StatusBaseInput::rightPadding
This property sets the right padding.
*/
property real rightPadding: 16
property real rightPadding: Theme.dp(16)
/*!
\qmlproperty real StatusBaseInput::topPadding
This property sets the top padding.
*/
property real topPadding: 12
property real topPadding: Theme.dp(12)
/*!
\qmlproperty alias StatusBaseInput::bottomPadding
This property sets the bottom padding.
*/
property real bottomPadding: 12
property real bottomPadding: Theme.dp(12)
/*!
\qmlproperty var StatusBaseInput::tabNavItem
This property sets the tab key navigation item.
@ -232,15 +232,15 @@ Item {
This property holds a set of settings for the icon of the StatusBaseInput.
*/
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
name: ""
color: Theme.palette.baseColor1
emoji: ""
letterSize: emoji ? 11 : 14
letterSize: Theme.dp(emoji ? 11 : 14)
background: StatusIconBackgroundSettings {
width: 30
height: 30
width: Theme.dp(30)
height: Theme.dp(30)
color: Theme.palette.indirectColor1
}
}
@ -277,10 +277,10 @@ Item {
*/
signal editClicked()
implicitWidth: 448
implicitWidth: Theme.dp(448)
implicitHeight: multiline ? Math.min(Math.max(
(edit.implicitHeight + topPadding + bottomPadding),
44, root.minimumHeight), root.maximumHeight) : 44
Theme.dp(44), root.minimumHeight), root.maximumHeight) : Theme.dp(44)
Rectangle {
id: background
@ -293,7 +293,7 @@ Item {
maximumHeight) : parent.height
color: root.showBackground ? Theme.palette.baseColor2
: "transparent"
radius: 8
radius: Theme.dp(8)
clip: true
@ -324,7 +324,7 @@ Item {
root.editClicked()
}
RowLayout {
spacing: 10
spacing: Theme.dp(10)
anchors {
fill: parent
leftMargin: root.leftPadding
@ -335,6 +335,8 @@ Item {
Loader {
id: leftComponentLoader
width: item ? item.width : 0
height: item ? item.height : 0
sourceComponent: {
if (root.leftComponent) return root.leftComponent
if (!root.leftIcon) return undefined
@ -385,7 +387,7 @@ Item {
selectionColor: Theme.palette.primaryColor2
selectedTextColor: color
focus: true
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1
wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
@ -424,9 +426,9 @@ Item {
cursorDelegate: Rectangle {
color: Theme.palette.primaryColor1
implicitWidth: 2
implicitHeight: 22
radius: 1
implicitWidth: Theme.dp(2)
implicitHeight: Theme.dp(22)
radius: Theme.dp(1)
visible: edit.cursorVisible
SequentialAnimation on visible {
@ -442,7 +444,7 @@ Item {
visible: (edit.text.length === 0)
anchors.fill: parent
verticalAlignment: parent.verticalAlignment
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
elide: StatusBaseText.ElideRight
font.family: Theme.palette.baseFont.name
color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
@ -472,11 +474,11 @@ Item {
visible: edit.text.length != 0 && root.clearable && !root.multiline
&& edit.activeFocus
type: StatusFlatRoundButton.Type.Secondary
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
icon.name: "clear"
icon.width: 16
icon.height: 16
icon.width: Theme.dp(16)
icon.height: Theme.dp(16)
icon.color: Theme.palette.baseColor1
onClicked: {
edit.clear()
@ -490,8 +492,8 @@ Item {
StatusSmartIdenticon {
id: identicon
icon.width: 24
icon.height: 24
icon.width: Theme.dp(24)
icon.height: Theme.dp(24)
icon.background: root.icon.background
icon.color: root.icon.color
icon.letterSize: root.icon.letterSize

24
src/StatusQ/Controls/StatusChatCommandButton.qml
View File

@ -7,8 +7,8 @@ import StatusQ.Components 0.1
Rectangle {
id: root
implicitWidth: 168
implicitHeight: 95
implicitWidth: Theme.dp(168)
implicitHeight: Theme.dp(95)
property string text: ""
property bool highlighted: false
@ -17,8 +17,8 @@ Rectangle {
signal clicked(var mouse)
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
width: Theme.dp(24)
height: Theme.dp(24)
background: StatusIconBackgroundSettings {}
}
@ -28,7 +28,7 @@ Rectangle {
return actualColor
}
radius: 16
radius: Theme.dp(16)
MouseArea {
id: sensor
@ -46,22 +46,22 @@ Rectangle {
icon.height: root.icon.height
icon.rotation: root.icon.rotation
icon.color: Theme.palette.white
icon.background.width: 40
icon.background.height: 40
icon.background.width: Theme.dp(40)
icon.background.height: Theme.dp(40)
icon.background.color: root.icon.color
anchors.top: parent.top
anchors.topMargin: 8
anchors.topMargin: Theme.dp(8)
anchors.left: parent.left
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
}
StatusBaseText {
text: root.text
anchors.left: parent.left
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
font.pixelSize: 13
anchors.bottomMargin: Theme.dp(8)
font.pixelSize: Theme.dp(13)
font.weight: Font.Medium
color: Theme.palette.white
}

58
src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -11,20 +11,20 @@ Rectangle {
Math.max(
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
) + 8
implicitHeight: 48
) + Theme.dp(8)
implicitHeight: Theme.dp(48)
property string title: ""
property string subTitle: ""
property bool muted: false
property int pinnedMessagesCount: 0
property StatusImageSettings image: StatusImageSettings {
width: 36
height: 36
width: Theme.dp(36)
height: Theme.dp(36)
}
property StatusIconSettings icon: StatusIconSettings {
width: 36
height: 36
width: Theme.dp(36)
height: Theme.dp(36)
charactersLen: 2
}
property alias ringSettings: identicon.ringSettings
@ -48,7 +48,7 @@ Rectangle {
CommunityChat // 6
}
radius: 8
radius: Theme.dp(8)
color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
MouseArea {
@ -62,7 +62,7 @@ Rectangle {
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter
image: statusChatInfoButton.image
icon: statusChatInfoButton.icon
@ -72,9 +72,9 @@ Rectangle {
Item {
id: statusChatInfoButtonTitle
anchors.top: identicon.top
anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : Theme.dp(8)
anchors.left: identicon.right
anchors.leftMargin: 8
anchors.leftMargin: Theme.dp(8)
width: Math.min(parent.width - anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin,
@ -84,16 +84,16 @@ Rectangle {
implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+ mutedDelta
property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
property real mutedDelta: mutedIcon.visible ? mutedIcon.width + Theme.dp(8) : 0
StatusIcon {
id: statusIcon
anchors.top: parent.top
anchors.topMargin: -2
anchors.topMargin: -Theme.dp(2)
anchors.left: parent.left
visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
width: visible ? 14 : 0
width: visible ? Theme.dp(14) : 0
color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
icon: {
switch (statusChatInfoButton.type) {
@ -129,7 +129,7 @@ Rectangle {
"#" + statusChatInfoButton.title :
statusChatInfoButton.title
color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
font.pixelSize: 15
font.pixelSize: Theme.dp(15)
font.weight: Font.Medium
}
@ -137,10 +137,10 @@ Rectangle {
objectName: "mutedIcon"
id: mutedIcon
anchors.left: chatName.right
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
anchors.top: chatName.top
anchors.topMargin: -2
width: 13
anchors.topMargin: -Theme.dp(2)
width: Theme.dp(13)
icon: "tiny/muted"
color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
visible: statusChatInfoButton.muted
@ -158,7 +158,7 @@ Rectangle {
text: "Unmute"
visible: mutedIconSensor.containsMouse
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
y: parent.height + Theme.dp(12)
}
}
}
@ -170,10 +170,10 @@ Rectangle {
visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
height: visible ? chatType.height : 0
width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin - 8,
- identicon.width - identicon.anchors.leftMargin - Theme.dp(8),
implicitWidth)
implicitWidth: chatType.implicitWidth + pinIconDelta + 8
implicitWidth: chatType.implicitWidth + pinIconDelta + Theme.dp(8)
property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
@ -184,7 +184,7 @@ Rectangle {
id: chatType
text: statusChatInfoButton.subTitle
color: Theme.palette.baseColor1
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
implicitWidth)
onLinkActivated: statusChatInfoButton.linkActivated(link)
@ -192,11 +192,11 @@ Rectangle {
Rectangle {
id: divider
height: 12
width: 1
height: Theme.dp(12)
width: Theme.dp(1)
color: Theme.palette.directColor7
anchors.left: chatType.right
anchors.leftMargin: 4
anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: chatType.verticalCenter
visible: !!chatType.text && pinIcon.visible
}
@ -205,9 +205,9 @@ Rectangle {
id: pinIcon
anchors.left: divider.visible ? divider.right : parent.left
anchors.leftMargin: -2
anchors.leftMargin: -Theme.dp(2)
anchors.verticalCenter: chatType.verticalCenter
height: 14
height: Theme.dp(14)
visible: statusChatInfoButton.pinnedMessagesCount > 0
icon: "pin"
color: Theme.palette.baseColor1
@ -215,12 +215,12 @@ Rectangle {
StatusBaseText {
anchors.left: pinIcon.right
anchors.leftMargin: -6
anchors.leftMargin: -Theme.dp(6)
anchors.verticalCenter: pinIcon.verticalCenter
width: 14
width: Theme.dp(14)
text: statusChatInfoButton.pinnedMessagesCount
font.pixelSize: 12
font.pixelSize: Theme.dp(12)
font.underline: pinCountSensor.containsMouse
visible: pinIcon.visible
color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1

8
src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
View File

@ -5,15 +5,15 @@ import StatusQ.Core 0.1
StatusFlatRoundButton {
id: statusChatListCategoryItemButton
height: 22
width: 22
radius: 4
height: Theme.dp(22)
width: Theme.dp(22)
radius: Theme.dp(4)
property bool highlighted: false
property StatusTooltipSettings tooltip: StatusTooltipSettings {}
type: StatusFlatRoundButton.Type.Secondary
icon.width: 20
icon.width: Theme.dp(20)
icon.color: Theme.palette.directColor4
color: hovered || highlighted ?

10
src/StatusQ/Controls/StatusCheckBox.qml
View File

@ -11,18 +11,18 @@ CheckBox {
id: statusCheckBox
indicator: Rectangle {
implicitWidth: 18
implicitHeight: 18
implicitWidth: Theme.dp(18)
implicitHeight: Theme.dp(18)
x: statusCheckBox.leftPadding
y: parent.height / 2 - height / 2
radius: 2
radius: Theme.dp(2)
color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
: Theme.palette.directColor8
StatusIcon {
icon: "checkbox"
width: 11
height: 8
width: Theme.dp(11)
height: Theme.dp(8)
anchors.centerIn: parent
anchors.horizontalCenterOffset: 1
color: Theme.palette.white

12
src/StatusQ/Controls/StatusColorRadioButton.qml
View File

@ -9,18 +9,18 @@ RadioButton {
property string radioButtonColor: ""
property string selectionColor: StatusColors.colors['white']
implicitWidth: 48
implicitHeight: 48
implicitWidth: Theme.dp(48)
implicitHeight: Theme.dp(48)
indicator: Rectangle {
implicitWidth: 48
implicitHeight: 48
implicitWidth: Theme.dp(48)
implicitHeight: Theme.dp(48)
radius: width/2
color: radioButtonColor
Rectangle {
width: 20
height: 20
width: Theme.dp(20)
height: Theme.dp(20)
radius: width/2
color: selectionColor
border.color: StatusColors.colors['grey3']

7
src/StatusQ/Controls/StatusColorSelector.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
@ -8,7 +9,7 @@ Item {
property string label: "Color"
property var model
height: accountColorInput.height
implicitWidth: 448
implicitWidth: Theme.dp(448)
StatusSelect {
id: accountColorInput
@ -20,9 +21,9 @@ Item {
MenuItem {
property bool isFirstItem: index === 0
property bool isLastItem: index === root.model.length - 1
height: 52
height: Theme.dp(52)
width: parent.width
padding: 10
padding: Theme.dp(10)
onTriggered: function () {
const selectedColor = root.model[index]
root.selectedColor = selectedColor

8
src/StatusQ/Controls/StatusColorSelectorGrid.qml
View File

@ -29,20 +29,20 @@ Column {
signal colorSelected(color color)
spacing: 16
spacing: Theme.dp(16)
StatusBaseText {
id: title
verticalAlignment: Text.AlignVCenter
font.pixelSize: 13
font.pixelSize: Theme.dp(13)
color: Theme.palette.baseColor1
}
Grid {
id: grid
columns: 6
rowSpacing: 16
columnSpacing: 32
rowSpacing: Theme.dp(16)
columnSpacing: Theme.dp(32)
Repeater {
model: root.model
delegate: StatusColorRadioButton {

Some files were not shown because too many files have changed in this diff Show More